地图 title

liuqimichale
1 parent 753334c6
Showing 11 changed files with 178 additions and 6 deletions
src/assets/img/incometotal.svg
src/assets/img/membertotal.svg
src/assets/img/ordertotal.svg
src/assets/img/parkingtotal.svg
src/components/lineChart.vue
src/components/titlesection.vue
src/filters/filters.js
src/utils/formatNum.js
src/views/mainContainer.vue
src/views/mapsection.vue
src/views/newssection.vue
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-77 78 45 45" style="enable-background:new -77 78 45 45;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFF800;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFF800;}
+</style>
+<path id="XMLID_1_" class="st0" d="M-54.5,81c10.8,0,19.5,8.7,19.5,19.5S-43.7,120-54.5,120S-74,111.3-74,100.5S-65.3,81-54.5,81
+	 M-54.5,78C-66.9,78-77,88.1-77,100.5S-66.9,123-54.5,123S-32,112.9-32,100.5S-42.1,78-54.5,78L-54.5,78z"/>
+<path class="st1" d="M-44.5,99.3c0,0.8-0.7,1.5-1.5,1.5h-6.6c0.1,0.2,0.1,0.3,0.1,0.5v2.5h3.5c0.8,0,1.5,0.7,1.5,1.5
+	s-0.7,1.5-1.5,1.5h-3.5v4.5c0,0.8-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5v-4.5H-60c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5h4.5
+	v-2.5c0-0.2,0-0.3,0.1-0.5H-63c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5h4.6l-4.9-4.9c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0
+	l6.7,6.7l6.7-6.7c0.6-0.6,1.5-0.6,2.1,0s0.6,1.5,0,2.1l-4.9,4.9h4.6C-45.2,97.8-44.5,98.4-44.5,99.3z"/>
+</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 45 45" style="enable-background:new 0 0 45 45;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFAB00;}
+</style>
+<path id="XMLID_1_" class="st0" d="M22.5,3C33.3,3,42,11.7,42,22.5S33.3,42,22.5,42S3,33.3,3,22.5S11.7,3,22.5,3 M22.5,0
+	C10.1,0,0,10.1,0,22.5S10.1,45,22.5,45S45,34.9,45,22.5S34.9,0,22.5,0L22.5,0z"/>
+<path id="XMLID_3_" class="st0" d="M22.5,14.1c2.7,0,5,2.1,5,4.9c0,2.8-2.2,5.1-5,5.1c-2.7,0-5-2.3-5-5.1
+	C17.5,16.1,19.7,14.1,22.5,14.1 M27.5,24.3c0.4,0,0.9,0.1,1.3,0.6c1.3,1.3,2.4,3.6,2.4,3.6l0.8,1.4c0,1-1.1,1.1-1.5,1.1
+	c-0.1,0-0.1,0-0.1,0H14.7c0,0,0,0-0.1,0c-0.4,0-1.6-0.1-1.6-1.1l0.7-1.4c0,0,1.2-2.2,2.5-3.5c0.4-0.4,0.9-0.6,1.4-0.6
+	c0.9,0,2,1.9,4.6,1.8H23C26.2,26.1,26.7,24.3,27.5,24.3 M22.5,11.1c-4.5,0-8,3.5-8,7.9c0,1.1,0.2,2.1,0.6,3c-0.3,0.2-0.7,0.4-1,0.7
+	c-1.6,1.6-2.9,4-3.1,4.3l-0.7,1.4L10,29.1v0.7c0,2.4,2,4.1,4.6,4.1c0.1,0,0.1,0,0.1,0h15.5c0.1,0,0.1,0,0.2,0c2.6,0,4.5-1.7,4.5-4.1
+	v-0.8l-0.4-0.7l-0.7-1.3c-0.3-0.5-1.4-2.8-3-4.4c-0.3-0.3-0.7-0.6-1.1-0.8c0.4-0.9,0.6-1.9,0.6-3C30.5,14.5,27,11.1,22.5,11.1
+	L22.5,11.1z"/>
+</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="-77 78 45 45" style="enable-background:new -77 78 45 45;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#07B3F5;}
+</style>
+<path id="XMLID_1_" class="st0" d="M-54.5,81c10.8,0,19.5,8.7,19.5,19.5S-43.7,120-54.5,120S-74,111.3-74,100.5S-65.3,81-54.5,81
+	 M-54.5,78C-66.9,78-77,88.1-77,100.5S-66.9,123-54.5,123S-32,112.9-32,100.5S-42.1,78-54.5,78L-54.5,78z"/>
+<g id="XMLID_2_">
+	<g id="XMLID_5_">
+		<g id="XMLID_46_">
+			<path id="XMLID_47_" class="st0" d="M-45,91h-19c-0.8,0-1.5,0.7-1.5,1.5S-64.8,94-64,94h19c0.8,0,1.5-0.7,1.5-1.5S-44.2,91-45,91
+				z M-64,102h11c0.8,0,1.5-0.7,1.5-1.5S-52.2,99-53,99h-11c-0.8,0-1.5,0.7-1.5,1.5S-64.8,102-64,102z M-48,107h-16
+				c-0.8,0-1.5,0.7-1.5,1.5s0.7,1.5,1.5,1.5h16c0.8,0,1.5-0.7,1.5-1.5S-47.2,107-48,107z"/>
+		</g>
+	</g>
+</g>
+</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 45 45" style="enable-background:new 0 0 45 45;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#02C202;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#02C202;}
+</style>
+<path id="XMLID_1_" class="st0" d="M22.5,3C33.2,3,42,11.7,42,22.5S33.2,42,22.5,42S3,33.3,3,22.5S11.7,3,22.5,3 M22.5,0
+	C10.1,0,0,10.1,0,22.5S10.1,45,22.5,45S45,34.9,45,22.5S34.9,0,22.5,0L22.5,0z"/>
+<g id="XMLID_2_">
+	<g id="XMLID_3_">
+		<path id="XMLID_5_" class="st0" d="M25,15c2.2,0,4,1.8,4,4s-1.8,4-4,4h-7v-8H25 M25,12H15v14h10c3.9,0,7-3.1,7-7S28.9,12,25,12
+			L25,12z"/>
+	</g>
+	<path id="XMLID_6_" class="st1" d="M15,12h3v23h-3V12z"/>
+</g>
+</svg>
@@ -41,7 +41,7 @@ export default {
     }
   },
   mounted() {
-    console.log(this.chartData)
+    // console.log(this.chartData)
     this.initChart()
     if (this.autoResize) {
       this.__resizeHandler = debounce(() => {
@@ -9,7 +9,7 @@ export default {
   name: 'titlesection',
   props:['title'],
   created() {
-    console.log(this.title)
+    // console.log(this.title)
   }
 }
 </script>
 export function formatNum(str) {
+  // console.log(typeof str)
+  // console.log(str)
+  var str = (str).toString();
   var newStr = "";
   var count = 0;
   for (var i = str.length - 1; i >= 0; i--) {
@@ -16,7 +16,9 @@
 // }
 function formatNumArr(str) {
-  console.log(typeof str)
+  // console.log(typeof str)
+  // console.log(str)
+  var str = (str).toString();
   var newStr = "";
   var count = 0;
   for (var i = str.length - 1; i >= 0; i--) {
@@ -7,7 +7,7 @@
         <youdaopingsection class="sectionsmall"></youdaopingsection>
       </li>
       <li class="margin0-12">
-        <div class="heightper-top"></div>
+        <mapsection class="heightper-top"></mapsection>
         <div class="heightper-bottom">
           <outsection style="width: 50%;float: left;height: 100%;display: flex;flex-direction: column"></outsection>
           <vehiclesection style="width: 50%;float: left;height: 100%;display: flex;flex-direction: column"></vehiclesection>
@@ -33,6 +33,7 @@ import berthsection from &#39;../views/berthsection&#39;
 import newssection from '../views/newssection'
 import outsection from '../views/outsection'
 import vehiclesection from '../views/vehiclesection'
+import mapsection from '../views/mapsection'
 export default {
   name: 'mainContainer',
@@ -45,7 +46,8 @@ export default {
     berthsection,
     newssection,
     outsection,
-    vehiclesection
+    vehiclesection,
+    mapsection
   },
   data() {
     return {
@@ -91,6 +93,9 @@ export default {
   .heightper-top {
     border: 1px solid #2391FA;
     flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
   }
   .heightper-bottom {
+<template>
+    <div>
+      <ul class="title-wrap">
+        <li>
+          <img src="../assets/img/parkingtotal.svg">
+          <div>
+            <p>{{parkingtotal|formatNum}}</p>
+            <p>停车场总数</p>
+          </div>
+        </li>
+        <li>
+          <img src="../assets/img/membertotal.svg">
+          <div>
+            <p>{{membertotal|formatNum}}</p>
+            <p>会员总数</p>
+          </div>
+        </li>
+        <li>
+          <img src="../assets/img/incometotal.svg">
+          <div>
+            <p>{{incometotal|formatNum}}</p>
+            <p>今日收入总数</p>
+          </div>
+        </li>
+        <li>
+          <img src="../assets/img/ordertotal.svg">
+          <div>
+            <p>{{ordertotal|formatNum}}</p>
+            <p>今日订单数</p>
+          </div>
+        </li>
+      </ul>
+      <div class="flexfm" style="background: #f00"></div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'mapsection',
+  data() {
+    return {
+      parkingtotal: '7338',
+      membertotal: '738',
+      incometotal: '1156738',
+      ordertotal: '6738'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .title-wrap{
+    display: flex;
+    padding-top: 17px;
+    padding-bottom: 18px;
+      li{
+      flex: 1;
+      height: 45px;
+      text-align: center;
+      overflow: hidden;
+      font-size: 0;
+        img{
+          display: inline-block;
+          width: 45px;
+          height: 45px;
+          margin-right: 14px;
+        }
+        div{
+          display: inline-block;
+          vertical-align: top;
+          text-align: left;
+          max-width: 100px;
+          overflow: hidden;
+          p{
+            &:nth-of-type(1){
+              font-size:24px;
+              font-weight:500;
+              color:rgba(255,255,255,1);
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+            &:nth-of-type(2){
+              font-size:14px;
+              font-weight:bold;
+              color:rgba(0,207,254,.7);
+              margin-top: 7px;
+            }
+          }
+        }
+    }
+  }
+</style>
@@ -95,7 +95,7 @@ export default {
           @include newsType("../assets/img/errortype1.png");
         }
         .text{
-          width:calc(100% - 123px);
+          flex: 1;
           overflow:hidden;
           text-overflow:ellipsis;
         }