道闸诱导屏

liuqimichale
1 parent 7818f74f
Showing 4 changed files with 278 additions and 3 deletions
src/components/allPieChart.vue
src/views/dicisection.vue
src/views/mainContainer.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: 'allPieChart',
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    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',
+          silent: true,
+          clockWise: true,
+          hoverAnimation: false,
+          animationType: 'scale',
+          radius: '8%',
+          center: ['50%', '50%'],
+          label: {
+            normal: {
+              position: 'center'
+            }
+          },
+          data: [{
+            value: 100,
+            itemStyle: {
+              normal: {
+                color: {
+                  colorStops: [{
+                    offset: 0,
+                    color: '#fff' // 0% 处的颜色
+                  }, {
+                    offset: 1,
+                    color: '#cfcfcf' // 100% 处的颜色
+                  }]
+                }
+              }
+            }
+          }]
+        },
+
+          {
+            name: '半径模式',
+            type: 'pie',
+            radius: ['10%', '40%'],
+            center: ['50%', '50%'],
+            roseType: 'radius',
+            label: {
+              show: false
+            },
+            lableLine: {
+              show: false
+            },
+            data: [{
+              value: 55,
+              name: '待维修',
+              itemStyle: {
+                normal: {
+                  color: {
+                    colorStops: [{
+                      offset: 0,
+                      color: '#FF7671' // 0% 处的颜色
+                    }, {
+                      offset: 1,
+                      color: '#A14AFF' // 100% 处的颜色
+                    }]
+                  },
+                }
+              }
+            },
+              {
+                value: 35,
+                name: '维修中',
+                itemStyle: {
+                  normal: {
+                    color: {
+                      colorStops: [{
+                        offset: 0,
+                        color: '#FFEA4F' // 0% 处的颜色
+                      }, {
+                        offset: 1,
+                        color: '#F89212' // 100% 处的颜色
+                      }]
+                    },
+                  }
+                }
+              },
+              {
+                value: 200,
+                name: '运行中',
+                itemStyle: {
+                  normal: {
+                    color: {
+                      colorStops: [{
+                        offset: 0,
+                        color: '#57FFE0' // 0% 处的颜色
+                      }, {
+                        offset: 1,
+                        color: '#3469E2' // 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>
@@ -80,7 +80,7 @@ export default {
     left: 0;
   }
   @mixin countStyle($color){
-    width: 100px;
+    width: 80px;
     padding-left: 23px;
     text-align: left;
     color: $color;
@@ -4,7 +4,7 @@
       <li>
         <pdasection class="sectionsmall"></pdasection>
         <dicisection class="sectionsmall margin12-0"></dicisection>
-        <div class="sectionsmall"></div>
+        <youdaopingsection class="sectionsmall"></youdaopingsection>
       </li>
       <li class="margin0-12">
         <div class="heightper-top"></div>
@@ -24,12 +24,14 @@
 import loadinggif from '../components/loading'
 import pdasection from '../views/pdasection'
 import dicisection from '../views/dicisection'
+import youdaopingsection from '../views/youdaopingsection'
 export default {
   name: 'mainContainer',
   components: {
     loadinggif,
     pdasection,
-    dicisection
+    dicisection,
+    youdaopingsection
   },
   data() {
     return {
+<template>
+  <div>
+    <titlesection title="道闸/诱导屏"></titlesection>
+    <ul class="flexfm ydp-dz-wrap">
+      <li>
+        <div>
+          <div class="bg-wrap">
+            <p>123</p>
+            <p>123</p>
+          </div>
+        </div>
+        <div>
+          <div class="bg-wrap">
+            <p>123</p>
+            <p>123</p>
+          </div>
+        </div>
+      </li>
+      <!--<allPieChart tag="li"></allPieChart>-->
+      <li>
+        <allPieChart :chart-data="lineChartData"/>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import titlesection from '../components/titlesection'
+import allPieChart from '../components/allPieChart'
+import { formatNum } from '../filters/filters'
+import {fetchList} from '../api/api'
+
+const lineChartData = {
+  newVisitis: {
+    yData: [100, 120, 161],
+    xData: ['正常', '异常', '故障']
+  }
+}
+
+
+export default {
+  name: 'youdaopingsection',
+  components: {
+    titlesection,
+    allPieChart
+  },
+  data() {
+    return {
+      lineChartData: lineChartData.newVisitis
+    }
+  },
+  created() {
+  },
+  methods: {
+    getList() {
+      fetchList()
+      .then(res => {
+        console.log(res);
+
+      });
+    },
+  }
+}
+</script>
+
+<style lang="scss"  scoped>
+  .ydp-dz-wrap{
+    display: flex;
+    li{
+      height: 100%;
+      flex: 1;
+      &:nth-of-type(1)>div{
+        height: 50%;
+        .bg-wrap{
+          width: 111px;
+          height: 52px;
+          position: relative;
+          top:50%;
+          left: 50%;
+          transform: translate(-50%,-50%);
+          background-color: #f00;
+        }
+      }
+    }
+  }
+</style>