修改

src/styles/index.scss

@@ -262,7 +262,7 @@ aside {
 .el-card{
   color:#FFF;
   background-color: #172434;
-  border:1px solid #172434;
+  border:1px solid #030506;
 }
 .el-tree{
   color:#FFF;

src/views/report/alarmDeviceCount/index.vue

@@ -34,7 +34,7 @@
       <normal-card  shadow="always" >
         <template slot="content">
           
-            
+            <div class="content-item1-head">共有19台设备 <span class="triangle"></span> </div>
             <div class="pie-left-content">
                 <base-pie-chart 
                 :options="pieOptionsA"
@@ -42,19 +42,17 @@
                 width="100%"
             />
             </div>
-            <div class="pie-right-content" style="padding-top:40px;">
-                <div class="content-item1-head">共有19台设备 <span class="triangle"></span> </div>
-                <div class="content-item1 " @click="showTable('A',0)">有15台设备出现故障 <span class="triangle1"></span> </div>
-   
-  
-                
+            <div class="pie-right-content" style="padding-top:50px;">
+                <!-- <div class="content-item1 " @click="showTable('A',0)">有15 <span class="triangle1"></span> </div> -->
+                 <div v-for="(item,index) in pie_dataA" :key="index" class="content-item1" :style="'background-color:'+pieColorA[index]+';'" @click="showTable('A',index)"> 有{{item.value}}台{{item.name}}<span class="triangle2" :style="'border-left-color:'+pieColorA[index]+';'"></span> </div>
+
             </div>
 
         </template>
       </normal-card>
       </div>
       <div class="charts">
-      <normal-card  shadow="always" >
+      <normal-card  shadow="always" bodyStyle="{height:'360px'}">
         <template slot="content">
 
              <div class="pie-left-content">
@@ -80,11 +78,9 @@
                 />
                </div>
             </div>
-            <div class="pie-right-content">
+            <div class="pie-right-content" style="padding-top:80px;">
   
               <div v-for="(item,index) in pie_dataB" :key="index" class="content-item" :style="'background-color:'+pieColor[index]+';'" @click="showTable('B',index)"> {{item.name}}故障{{item.value}}次 <span class="triangle2" :style="'border-left-color:'+pieColor[index]+';'"></span> </div>
-              
-  
 
                 
             </div>
@@ -113,7 +109,7 @@
                </div>
             </div>
   
-            <div class="pie-right-content">
+            <div class="pie-right-content" style="padding-top:80px;">
               <div v-for="(item,index) in pie_dataC" :key="index" class="content-item" :style="'background-color:'+pieColor[index]+';'" @click="showTable('C',index)"> {{item.name}}故障{{item.value}}次 <span class="triangle2" :style="'border-left-color:'+pieColor[index]+';'"></span> </div>
             </div>
         </template>
@@ -225,6 +221,7 @@ export default {
       },
       value1: '',
       value2: '',
+      pieColorA:['#d7511e',  '#1890ff'],
       pieColor:['#fc8452', '#91cc75','#fac858','#ee6666','#73c0de','#9a60b4']
       
     };
@@ -300,14 +297,16 @@ export default {
 
     getPieOptions(){
         return {
-          color:['#d7511e',  '#1890ff'],
+          color:this.pieColorA,
           title: {
               text: "故障总表",
               textStyle: {
                 color: '#80a0b0',
                 fontSize: 16,
                 fontWeight: 600
-              }
+              },
+               bottom:'10',
+              left:'center',
             },
           tooltip: {
             formatter: '数量<br/>{b0}：{c0}'
@@ -333,14 +332,16 @@ export default {
     getPieBOptions(){
         return {
           color:this.pieColor,
-          // title: {
-          //     text: "表B",
-          //     textStyle: {
-          //       color: '#80a0b0',
-          //       fontSize: 16,
-          //       fontWeight: 600
-          //     }
-          //   },
+          title: {
+              text: "TOP5故障频次",
+              textStyle: {
+                color: '#80a0b0',
+                fontSize: 16,
+                fontWeight: 600
+              },
+               bottom:'10',
+              left:'center',
+            },
           tooltip: {
             formatter: '设备数量<br/>{b0}：{c0}'
           },
@@ -365,14 +366,16 @@ export default {
     getPieCOptions(){
         return {
           color:this.pieColor,
-          // title: {
-          //     text: "表C",
-          //     textStyle: {
-          //       color: '#80a0b0',
-          //       fontSize: 16,
-          //       fontWeight: 600
-          //     }
-          //   },
+          title: {
+              text: "TOP5故障设备",
+              textStyle: {
+                color: '#80a0b0',
+                fontSize: 16,
+                fontWeight: 600
+              },
+              bottom:'10',
+              left:'center',
+            },
           tooltip: {
             formatter: '数量<br/>{b0}：{c0}'
           },
@@ -478,7 +481,7 @@ export default {
   width:90%;
   max-width:260px;
   min-width:200px;
-  margin-top:30px;
+  margin-top:5px;
   background-color:#1d5d99;
   color: #FFF;
   height:30px;

src/views/report/hydraulicCount/index.vue

@@ -31,9 +31,9 @@
       </el-row>
 
     <div class="charts">
-      <normal-card  shadow="always" >
+      <normal-card  shadow="always" bodyStyle="{height:'360px'}">
         <template slot="content">
-        
+            <div class="content-item-head">共有19台设备 <span class="triangle"></span> </div>
             <div class="pie-left-content">
                 <base-pie-chart 
                 :options="pieOptions"
@@ -41,9 +41,9 @@
                 width="100%"
               />
             </div>
-            <div class="pie-right-content">
+            <div class="pie-right-content" style="padding-top:50px;">
+                
                 
-                <div class="content-item-head">共有19台设备 <span class="triangle"></span> </div>
                 <div class="content-item bg-color1" @click="showTable('normal')">有5台设备正常使用 <span class="triangle2"></span> </div>
                 <div class="content-item bg-color2" @click="showTable('20day')">有6台设备20+天闲置 <span class="triangle3"></span> </div>
                 <div class="content-item bg-color3" @click="showTable('40day')">有8台设备40+天闲置 <span class="triangle4"></span> </div>
@@ -174,7 +174,9 @@ export default {
                 color: '#80a0b0',
                 fontSize: 16,
                 fontWeight: 600
-              }
+              },
+              bottom:'10',
+              left:'center',
             },
           tooltip: {
             formatter: '设备数量<br/>{b0}：{c0}'
@@ -248,7 +250,7 @@ export default {
 .content-item-head{
   // width:40%;
   width:240px;
-  margin-top:30px;
+  margin-top:5px;
   background-color:#1d5d99;
   color: #FFF;
   height:30px;

src/views/report/maintainCount/index.vue

@@ -31,65 +31,74 @@
       </el-row>
 
     <div class="charts">
-      <normal-card  shadow="always" >
+      <normal-card  shadow="always" bodyStyle="{height:'400px'}">
         <template slot="content">
-          
-            
-            <div class="pie-left-content">
-                <base-pie-chart 
-                :options="pieOptionsA"
-                height="300px"
-                width="100%"
-            />
-            </div>
-            <div class="pie-right-content" style="padding-top:40px;">
-                <div class="content-item-head">共有19台设备 <span class="triangle"></span> </div>
-                <div class="content-item bg-color1" @click="showTable(1)">有效期内15台 <span class="triangle2"></span> </div>
-                <div class="content-item bg-color3" @click="showTable(2)">已失效4台 (小于15天)<span class="triangle4"></span> </div>
-  
-                
-            </div>
+            <div class="content-box">
+              
+              <div class="content-item-head">共有19台设备 <span class="triangle"></span> </div>
+              <div class="pie-left-content">
+                  <base-pie-chart 
+                  :options="pieOptionsA"
+                  height="300px"
+                  width="100%"
+              />
+              
+              </div>
+              <div class="pie-right-content" style="padding-top:80px;">
+                  
+                  <div class="content-item bg-color1" @click="showTable(1)">有效期内15台 <span class="triangle2"></span> </div>
+                  <div class="content-item bg-color3" @click="showTable(2)">已失效4台 (小于15天)<span class="triangle4"></span> </div>
+    
+                  
+              </div>
 
-             <div class="pie-left-content">
-                <base-pie-chart 
-                :options="pieOptionsC"
-                height="300px"
-                width="100%"
-            />
             </div>
-            <div class="pie-right-content">
-                <div class="content-item" > 
-                  <el-select  v-model="queryParam.days"   class="filter-item form-search-input fl"  placeholder="时间段" >
-                    <el-option
-                      v-for="item in daysOptions"
-                      :key="item.value"
-                      :label="item.text"
-                      :value="item.value">
-                    </el-option>
-                  </el-select>
+
+            <div class="content-box">
+              <div class="content-item-head">共有19台设备 <span class="triangle"></span> </div>
+                <div class="pie-left-content">
+                    <base-pie-chart 
+                    :options="pieOptionsC"
+                    height="300px"
+                    width="100%"
+                />
                 </div>
-                
-                <div class="content-item-head">共有19台设备 <span class="triangle"></span> </div>
-                <div class="content-item bg-color1" @click="showTable(3)">已维护14台<span class="triangle2"></span> </div>
-                <div class="content-item bg-color3" @click="showTable(4)">未维护5台<span class="triangle4"></span> </div>
+                <div class="pie-right-content" style="padding-top:20px;">
+                    <div class="content-item" > 
+                      <el-select  v-model="queryParam.days"   class="filter-item form-search-input fl"  placeholder="时间段" >
+                        <el-option
+                          v-for="item in daysOptions"
+                          :key="item.value"
+                          :label="item.text"
+                          :value="item.value">
+                        </el-option>
+                      </el-select>
+                    </div>
+                    
+                    
+                    <div class="content-item bg-color1" @click="showTable(3)">已维护14台<span class="triangle2"></span> </div>
+                    <div class="content-item bg-color3" @click="showTable(4)">未维护5台<span class="triangle4"></span> </div>
 
-                
+                    
+                </div>
             </div>
 
-             <div class="pie-left-content">
-                <base-pie-chart 
-                :options="pieOptionsB"
-                height="300px"
-                width="100%"
-            />
-            </div>
-            <div class="pie-right-content">
-                
+            <div class="content-box">
                 <div class="content-item-head">有效期内30台 <span class="triangle"></span> </div>
-                <div class="content-item bg-color1" @click="showTable(5)"> 有效使用20台(大于45天) <span class="triangle2"></span> </div>
-                <div class="content-item bg-color2" @click="showTable(6)"> 警告失效4台(15天~45天) <span class="triangle3"></span> </div>
-                <div class="content-item bg-color3" @click="showTable(7)"> 失效6台(0~15天) <span class="triangle4"></span> </div>
-                
+                <div class="pie-left-content">
+                    <base-pie-chart 
+                    :options="pieOptionsB"
+                    height="300px"
+                    width="100%"
+                />
+                </div>
+                <div class="pie-right-content" style="padding-top:80px;">
+                    
+                    
+                    <div class="content-item2 bg-color1" @click="showTable(5)"> 有效使用20台(大于45天) <span class="triangle2"></span> </div>
+                    <div class="content-item2 bg-color2" @click="showTable(6)"> 警告失效4台(15天~45天) <span class="triangle3"></span> </div>
+                    
+                </div>
             </div>
         </template>
       </normal-card>
@@ -103,7 +112,7 @@
           <el-table-column label="出厂编号" prop="number" align="center" />
           <el-table-column label="上次所在位置" prop="address" align="center" />
           <el-table-column label="有效截止时间" prop="online_time" align="center" />
-          <el-table-column label="未使用天数" prop="unused_days" align="center" />
+          <el-table-column label="有效天数" prop="unused_days" align="center" />
           <el-table-column label="备注" prop="remarks" align="center" />
       </el-table>
     </div>
@@ -277,12 +286,14 @@ export default {
         return {
           color:['#91cc75',  '#94a6b7'],
           title: {
-              text: "表A",
+              text: "检验状态分析",
               textStyle: {
                 color: '#80a0b0',
                 fontSize: 16,
                 fontWeight: 600
-              }
+              },
+              bottom:'10',
+              left:'center',
             },
           tooltip: {
             formatter: '数量<br/>{b0}：{c0}'
@@ -309,12 +320,14 @@ export default {
         return {
           color:['#91cc75', '#1890ff', '#94a6b7'],
           title: {
-              text: "表B",
+              text: "有效状态分析",
               textStyle: {
                 color: '#80a0b0',
                 fontSize: 16,
                 fontWeight: 600
-              }
+              },
+              bottom:'10',
+              left:'center',
             },
           tooltip: {
             formatter: '设备数量<br/>{b0}：{c0}'
@@ -341,12 +354,14 @@ export default {
         return {
           color:['#91cc75',  '#94a6b7'],
           title: {
-              text: "表C",
+              text: "维护状态分析",
               textStyle: {
                 color: '#80a0b0',
                 fontSize: 16,
                 fontWeight: 600
-              }
+              },
+              bottom:'10',
+              left:'center',
             },
           tooltip: {
             formatter: '数量<br/>{b0}：{c0}'
@@ -408,8 +423,14 @@ export default {
 .filter-container{
   margin-bottom: 30px;
 }
+.content-box{
+  width: 33%;
+  height:100%;
+
+  float: left;
+}
 .pie-left-content{
-  width:25%;
+  width:50%;
   height:100%;
   float: left;
   margin-bottom: 20px;
@@ -417,12 +438,12 @@ export default {
   border-right:0px;
 }
 .pie-right-content{
-  width:20%;
+  width:50%;
   height:100%;
   float: left;
   margin-bottom: 20px;
   // border:1px solid #1d5d99;
-  margin-right: 20px;
+
   border-left:0px;
 
 
@@ -430,8 +451,8 @@ export default {
 .content-item-head{
    width:90%;
   max-width:260px;
-  min-width:200px;
-  margin-top:30px;
+  min-width:180px;
+  margin-top:5px;
   background-color:#1d5d99;
   color: #FFF;
   height:30px;
@@ -449,6 +470,17 @@ export default {
 .content-item{
   width:90%;
   max-width:260px;
+  min-width:180px;
+  height:26px;
+  margin-top:30px;
+  padding:0px 10px;
+  line-height:26px;
+ 
+  color: #FFF;
+}
+.content-item2{
+  width:90%;
+  max-width:260px;
   min-width:200px;
   height:26px;
   margin-top:30px;

src/views/report/workCount/index.vue

@@ -33,7 +33,7 @@
 
       <div class="charts">
       
-      <normal-card  shadow="always" >
+      <normal-card  shadow="always" bodyStyle="{height:'360px'}">
         <template slot="content">
               <div class="card-header">共计40台设备,共服务10个风场、20台风机、100次螺栓 <span class="card-header-triangle"></span> </div>
              <div class="pie-left-content">
@@ -59,7 +59,7 @@
                 />
                </div>
             </div>
-            <div class="pie-right-content">
+            <div class="pie-right-content" style="padding-top:80px;">
               <div v-for="(item,index) in pie_dataB" :key="index" class="content-item" :style="'background-color:'+pieColor[index]+';'" @click="showTable('B',index)"> {{item.name}}服务螺栓{{item.value}}次 <span class="triangle2" :style="'border-left-color:'+pieColor[index]+';'"></span> </div>
             </div>
 
@@ -87,7 +87,7 @@
                </div>
             </div>
   
-            <div class="pie-right-content">
+            <div class="pie-right-content" style="padding-top:80px;">
               <div v-for="(item,index) in pie_dataC" :key="index" class="content-item" :style="'background-color:'+pieColor[index]+';'" @click="showTable('C',index)"> {{item.name}}服务螺栓{{item.value}}次 <span class="triangle2" :style="'border-left-color:'+pieColor[index]+';'"></span> </div>
             </div>
         </template>
@@ -268,14 +268,16 @@ export default {
     getPieBOptions(){
         return {
           color:this.pieColor,
-          // title: {
-          //     text: "表B",
-          //     textStyle: {
-          //       color: '#80a0b0',
-          //       fontSize: 16,
-          //       fontWeight: 600
-          //     }
-          //   },
+          title: {
+              text: "TOP5服务工具",
+              textStyle: {
+                color: '#80a0b0',
+                fontSize: 16,
+                fontWeight: 600
+              },
+              bottom:'10',
+              left:'center',
+            },
           tooltip: {
             formatter: '设备数量<br/>{b0}：{c0}'
           },
@@ -300,14 +302,16 @@ export default {
     getPieCOptions(){
         return {
           color:this.pieColor,
-          // title: {
-          //     text: "表C",
-          //     textStyle: {
-          //       color: '#80a0b0',
-          //       fontSize: 16,
-          //       fontWeight: 600
-          //     }
-          //   },
+          title: {
+              text: "TOP5服务风场",
+              textStyle: {
+                color: '#80a0b0',
+                fontSize: 16,
+                fontWeight: 600
+              },
+              bottom:'10',
+              left:'center',
+            },
           tooltip: {
             formatter: '数量<br/>{b0}：{c0}'
           },

src/views/screen/index.vue

@@ -698,7 +698,7 @@ export default {
         },
         xAxis: {
           type: "category",
-          name: "日期",
+          name: "月份",
           nameLocation: "end",
 
           data: this.lineAlarmxAxisData,