feat:管理内容

app/src/components/rate3D.vue

@@ -1,10 +1,15 @@
 <template>
-    <div ref="chart" class="item" style="width: 98px; height: 80px" />
+    <div ref="chart" class="item" style="width: 94px; height:138px" />
   </template>
   
   <script>
   import * as echarts from "echarts";
   export default {
+    props: {
+        data: Number,
+        text: String,
+        title: String
+    },
     data() {
       return {
         chart: null,
@@ -15,46 +20,103 @@
       //   // 初始化图表实例
       this.chart = echarts.init(chartDom);
       this.initChart();
+      
     },
     methods: {
       initChart() {
-        option = {
-    backgroundColor: '#000',
+      const  option = {
+            // backgroundColor: '#111',
     title: [{
-        bottom: 50,
-        width: '100%',
-        left: 'center',
-        text: '今日运单数',
+        text: this.title,
+        x: 'center',
+        top: '84%',
+        textStyle: {
+            color: '#fff',
+            fontSize:12,
+            // fontWeight: '100',
+        }
+    }, {
+        text: this.text,
+        x: 'center',
+        top: '42%',
         textStyle: {
-            fontWeight: 'normal',
-            fontSize: 42,
-            color: "#40E7F4"
+            fontSize: '12',
+            color: '#fdf914',
+            fontFamily: 'Lato',
+            // foontWeight: '600',
         },
     }],
-    series: [{
+    polar: {
+        radius: ['38%', '53%'],
+        center: ['50%', '50%'],
+    },
+    angleAxis: {
+        max: 100,
+        show: false,
+    },
+    radiusAxis: {
+        type: 'category',
+        show: true,
+        axisLabel: {
+            show: false,
+        },
+        axisLine: {
+            show: false,
+
+        },
+        axisTick: {
+            show: false
+        },
+    },
+    series: [
+        {
+            name: '',
+            type: 'bar',
+            roundCap: true,
+            barWidth: 60,
+            showBackground: true,
+            backgroundStyle: {
+                color: 'rgba(66, 66, 66, .3)',
+            },
+            data: [this.data],
+            coordinateSystem: 'polar',
+            itemStyle: {
+                normal: {
+                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                        offset: 0,
+                        color: '#fdf914'
+                    }, {
+                        offset: 1,
+                        color: '#38a700'
+                    }]),
+                }
+            }
+        }, 
+        {
             type: 'gauge',
-            name: '业务指标',
-            radius: '50%',
+            name: '',
+            radius: '100%',
             startAngle: '0',
             endAngle: '-359.99',
-            splitNumber: '240',
+            splitNumber: '200',
+            center: ['50%', '50%'],
             pointer: {
                 show: false
             },
+            title: {
+                show: false
+            },
             detail: {
                 show: false
             },
             data: [{
-                value: 0,
+                value: 95,
                 name: ''
             }],
             axisLine: {
                 lineStyle: {
-                    color: [
-                        [1, 'rgba(120, 200, 45, 1)']
-                    ],
                     width: 20,
-                    opacity: .2
+                    opacity: 0
                 }
             },
             axisTick: {
@@ -62,10 +124,27 @@
             },
             splitLine: {
                 show: true,
-                length: 20,
+                length: 0,
                 lineStyle: {
-                    color: 'rgba(0,0,0,1)',
-                    width: 2,
+                    color: {
+                        type: 'linear',
+                        x: 1,
+                        y: 0,
+                        x2: 0,
+                        y2: 0,
+                        colorStops: [{
+                            offset: 0,
+                            color: '#111'
+                        }, {
+                            offset: 0.5,
+                            color: 'rgba(66, 66, 66, 1)',
+                        }, {
+                            offset: 1,
+                            color: '#111'
+                        }],
+                        globalCoord: false
+                    },
+                    width: 1,
                     type: 'solid',
                 },
             },
@@ -73,59 +152,107 @@
                 show: false
             }
         },
+        {
+            name: '',
+            type: 'pie',
+            startAngle: 90,
+            radius: ['100%', '82%'],
+            hoverAnimation: false,
+            center: ['50%', '50%'],
+            itemStyle: {
+                normal: {
+                    labelLine: {
+                        show: false
+                    },
+                    color: 'rgba(66, 66, 66, .4)',
+                    shadowBlur: 10,
+                    shadowColor: 'rgba(253, 249, 20, .3)',
+                }
+            },
+            data: [{
+                value: 100,
 
-
+            }]
+        },
         {
-            name: '今日运单数',
+            name: '',
             type: 'pie',
-            radius: ['30%', '38%'],
+            startAngle: 90,
+            radius: ['62.5%', '64%'],
+            hoverAnimation: false,
             center: ['50%', '50%'],
-            startAngle: 175,
-            clockWise: false,
+            itemStyle: {
+                normal: {
+                    labelLine: {
+                        show: false
+                    },
+                    color: 'rgba(66, 66, 66, .3)',
+                    shadowBlur: 10,
+                    shadowColor: 'rgba(253, 249, 20, .3)',
+                }
+            },
+            data: [{
+                value: 100,
+
+            }]
+        },
+        {
+            name: '',
+            type: 'pie',
+            startAngle: 90,
+            radius: ['64.5%', '65.8%'],
             hoverAnimation: false,
+            center: ['50%', '50%'],
             itemStyle: {
                 normal: {
-                    color: ['rgba(176, 212, 251, 1)'],
-                    label: {
-                        position: 'center'
+                    labelLine: {
+                        show: false
                     },
+                    color: 'rgba(66, 66, 66, .2)',
+                    shadowBlur: 10,
+                    shadowColor: 'rgba(253, 249, 20, .3)',
+                }
+            },
+            data: [{
+                value: 100,
+
+            }]
+        },
+        {
+            name: '',
+            type: 'pie',
+            startAngle: 90,
+            radius: ['66.5%', '67.5%'],
+            hoverAnimation: false,
+            center: ['50%', '50%'],
+            itemStyle: {
+                normal: {
                     labelLine: {
                         show: false
-                    }
+                    },
+                    color: 'rgba(66, 66, 66, .1)',
+                    shadowBlur: 10,
+                    shadowColor: 'rgba(253, 249, 20, .3)',
                 }
             },
             data: [{
-                value: 1,
-                name: '完成工作量',
-                label: {
-                    formatter: '2678',
-                    textStyle: {
-                        color: '#fff',
-                        fontSize: 42
-                    }
-                },
-                itemStyle: {
-                    normal: {
-                        color: { // 完成的圆环的颜色
-                            colorStops: [{
-                                offset: 0,
-                                color: '#00cefc' // 0% 处的颜色
-                            }, {
-                                offset: 1,
-                                color: '#367bec' // 100% 处的颜色
-                            }]
-                        },
-                    }
-                },
+                value: 100,
+
             }]
-        }
+        },
     ]
 };
         this.chart.setOption(option);
         //自适应图表
         window.onresize = this.chart.resize;
       },
-    },
+       numb(){
+    
+    myChart.setOption(option, true)
+},
+
+    }
+    
   };
   </script>
   

app/src/views/Fire/components/Construction.vue

@@ -1,6 +1,14 @@
 <template>
     <div>
-<div class="unit">
+
+<div class="unit-echats">
+    <div class="unit-g ">
+        管理形式
+        <unit3D/>
+    </div>
+        
+</div>
+<div class="unit maintenance">
     <span class="unit-c">管理主体</span>
     <div class="unit-num">
         <div><span class="num">1223</span>
@@ -14,15 +22,8 @@
     </div>
    
 </div>
-<div class="unit-echats">
-    <div class="unit-g">
-        管理形式
-        <unit3D/>
-    </div>
-        
-</div>
-<div class="unit maintenance">
-    <span class="unit-c  unit-w">维保形式</span>
+<div class="unit ">
+    <span class="  unit-w">维保形式</span>
     <div class="unit-num ">
         <div><span class="num">123</span>
         <span>家</span></div>
@@ -89,6 +90,7 @@ margin: 25px 18px 0 0;
 .unit-g{
     font-size:18px;
     margin-left: 10px; 
+   padding-top: 10px;
 }
 .maintenance{
     margin-top: 30px;

app/src/views/Fire/components/ManagementContent.vue

@@ -1,33 +1,73 @@
 <template>
-    <div>
-<div>完成率百分比</div>
-<div class="rate">
-    <rate3D/>
- 
-</div>
+    <div class="dle">
+        <div v-for="(item,index) in list" :key="index" >
+            <rate3D :data="item.val" :text="item.text" :title="item.title" ></rate3D>
+            
+        </div>
+
     </div>
 </template>
 
 <script >
 import rate3D from '../../../components/rate3D.vue';
 export default {
-components:{rate3D}
+    components:{rate3D},
+    data(){
+        return{
+            list:[
+                {
+                    title:'交接班记录/日',
+                    text:'55%',
+                    val:55,
+                },
+                {
+                    title:'巡查记录/日',
+                    text:'55%',
+                    val:75,
+                },
+                {
+                    title:'安全培训/年',
+                    text:'55%',
+                    val:55,
+                },
+                {
+                    title:'消防预案',
+                    text:'55%',
+                    val:55,
+                },
+                {
+                    title:'演练记录/年',
+                    text:'55%',
+                    val:55,
+                },
+                {
+                    title:'评估报告/年',
+                    text:'55%',
+                    val:100,
+                },
+                {
+                    title:'维保记录/月',
+                    text:'55%',
+                    val:15,
+                },
+                {
+                    title:'安全制度',
+                    text:'55%',
+                    val:35,
+                },
+                
+            ]
+        }
+    }
 }
 </script>
 
 <style lang="less" scoped>
-.rate{
-.rate-noe{
-   width: 98px;
-   height: 8px;
-   background-color: rgb(24, 24, 24);
-   border-radius: 50%;
-}
-.rate-two{
-    width: 68px;
-    height: 6px;
-    background-color: rgb(24, 24, 24);
-    border-radius: 50%;
-}
+.dle{
+    display: flex;
+    flex-flow:row wrap;
+    justify-content: space-around;
+    margin: 20px 0px;
+ 
 }
 </style>

app/src/views/Fire/components/UnitInfo.vue

@@ -129,6 +129,7 @@
     data() {
       return {
         seach:'',
+        options:[],
         list1: [
           ["环球金融大厦", "独有", "中海物业"],
           ["天祥广场", "独有", "中海物业"],