泊位

liuqimichale
1 parent a390d377
Showing 6 changed files with 178 additions and 9 deletions
src/components/halfPieChart.vue
src/styles/reset.css
src/views/berthsection.vue
src/views/dicisection.vue
src/views/sfysection.vue
src/views/youdaopingsection.vue
+<template>
+  <div :class="className" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+
+require('echarts/theme/macarons') // echarts theme
+import {debounce} from '../utils/debounce'
+
+export default {
+  name: 'halfPieChart',
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '135px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      sidebarElm: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+    }
+  },
+  mounted() {
+    this.initChart()
+    if (this.autoResize) {
+      this.__resizeHandler = debounce(() => {
+        if (this.chart) {
+          this.chart.resize()
+        }
+      }, 100)
+      window.addEventListener('resize', this.__resizeHandler)
+    }
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    if (this.autoResize) {
+      window.removeEventListener('resize', this.__resizeHandler)
+    }
+
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    setOptions({xData, yData} = {}) {
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: "{b} : {c} ({d}%)"
+        },
+        series: [
+
+          {
+            name: '半径模式',
+            type: 'pie',
+            radius: ['75%', '90%'],
+            center: ['50%', '50%'],
+            label: {
+              show: false
+            },
+            lableLine: {
+              show: false
+            },
+            data: [
+              {
+                value: 35,
+                name: '诱导屏',
+                itemStyle: {
+                  normal: {
+                    color: {
+                      colorStops: [{
+                        offset: 0,
+                        color: '#FFBA00' // 0% 处的颜色
+                      }, {
+                        offset: 1,
+                        color: '#FF8100' // 100% 处的颜色
+                      }]
+                    },
+                  }
+                }
+              },
+              {
+                value: 55,
+                name: '道闸',
+                itemStyle: {
+                  normal: {
+                    color: {
+                      colorStops: [{
+                        offset: 0,
+                        color: '#00CAFE' // 0% 处的颜色
+                      }, {
+                        offset: 1,
+                        color: '#2772F4' // 100% 处的颜色
+                      }]
+                    },
+                  }
+                }
+              },
+
+            ],
+            animationType: 'scale',
+            animationEasing: 'elasticOut',
+            animationDelay: function(idx) {
+              return Math.random() * 200;
+            }
+          }
+
+        ]
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    }
+  }
+}
+</script>
@@ -102,3 +102,10 @@ table {
   flex: 1;
 }
  
+.pos-rel{
+  position: relative;
+}
+.pos-abs{
+  position: absolute;
+}
+
@@ -3,12 +3,18 @@
     <titlesection title="泊位"></titlesection>
     <totalsection :totalNum="totalVal"></totalsection>
     <ul class="flexfm berth-wrap">
-      <li></li>
+      <li class="pos-rel">
+        <halfPieChart></halfPieChart>
+        <div class="pos-abs halfPieText">
+          <p>78%</p>
+          <p>占有</p>
+        </div>
+      </li>
       <li>
-        <div>
+        <div class="berth-main">
           <p><span class="free">{{ free|formatNum }}</span> <span>空余</span></p>
         </div>
-        <div>
+        <div class="berth-main">
           <p><span class="nofree">{{ nofree|formatNum }}</span> <span>占有</span></p>
         </div>
  
@@ -20,14 +26,15 @@
 <script>
 import titlesection from '../components/titlesection'
 import totalsection from '../components/total'
-import { formatNum } from '../filters/filters'
+import halfPieChart from '../components/halfPieChart'
 import {fetchList} from '../api/api'
  
 export default {
   name: 'berthsection',
   components: {
     titlesection,
-    totalsection
+    totalsection,
+    halfPieChart
   },
   data() {
     return {
@@ -55,7 +62,24 @@ export default {
     display: flex;
     li{
       flex: 1;
-      div{
+      .halfPieText{
+        width: 100%;
+        text-align: center;
+        top:50%;
+        transform:translateY(-50%) ;
+        p{
+          &:nth-of-type(1){
+            @include fonttextStyle(24px);
+            background-image: $fontOrange;
+          }
+          &:nth-of-type(2){
+            padding-top: 5px;
+           font-size: 12px;
+            color: #fff;
+          }
+        }
+      }
+      .berth-main{
         height: 50%;
         display: flex;
         align-items:center;
@@ -15,7 +15,6 @@
 <script>
 import titlesection from '../components/titlesection'
 import totalsection from '../components/total'
-import { formatNum } from '../filters/filters'
 import {fetchList} from '../api/api'
  
 export default {
@@ -22,7 +22,6 @@
 <script>
 import titlesection from '../components/titlesection'
 import totalsection from '../components/total'
-import { formatNum } from '../filters/filters'
 import {fetchList} from '../api/api'
  
 export default {
@@ -26,7 +26,6 @@
 <script>
 import titlesection from '../components/titlesection'
 import allPieChart from '../components/allPieChart'
-import { formatNum } from '../filters/filters'
 import {fetchList} from '../api/api'
  
 const lineChartData = {