修改

src/config/componentsMap.js

@@ -82,21 +82,17 @@ export default {
     // 报表分析 => 设备汇总
     // 液压泵统计
     hydraulicCount: () =>  import ('@/views/report/hydraulicCount'),
-
-    //风场设备统计
-    windCount: () => import ('@/views/report/windCount'),
     // 告警设备统计
     alarmDeviceCount: () => import ('@/views/report/alarmDeviceCount'),
-    // 单位设备状态统计
-    companyCount: () =>  import ('@/views/report/companyCount'),
+    // 作业记录统计
+    workCount: () =>  import ('@/views/report/workCount'),
     maintainCount: () => import ('@/views/report/maintainCount'),
-
-
     // 报表分析 => 概览 => 数据统计
     dataCount: () => import ('@/views/report/dataCount'),
     // 热力图
     heatmap: () => import ('@/views/report/heatmap'),
 
+    
     //大屏
     screen: () => import ('@/views/screen'),
 

src/views/report/alarmDeviceCount/index.vue

@@ -3,7 +3,7 @@
        <el-row :gutter="12">
         <el-col :span="24">
             <div class="filter-container">
-              <el-cascader
+              <!-- <el-cascader
                 class="filter-item fl form-search-input"
                 @change="handleSearch"
                 placeholder="请选择所属部门"
@@ -12,76 +12,183 @@
                 :props="departProps"
                 filterable
                 clearable>
-              </el-cascader>
-        
-              <!-- <el-input
-                v-model="queryParam.creator"
-                placeholder="安装人员"
-                clearable
-                @change="handleSearch"
-                class="filter-item form-search-input fl"
-              /> -->
+              </el-cascader> -->
+              <el-select  v-model="queryParam.device_type"   class="filter-item form-search-input fl"  placeholder="请选择设备类型" >
+                <el-option
+                  v-for="item in deviceTypes"
+                  :key="item.value"
+                  :label="item.text"
+                  :value="item.value">
+                </el-option>
+              </el-select>
             
               <el-button class="filter-item fl" icon="el-icon-search" @click="handleSearch">
                 搜索
               </el-button>
-            <el-button class="filter-item fl" icon="el-icon-refresh" @click="handleRefresh">
-              重置
-            </el-button>
+              
           </div>
         </el-col>
       </el-row>
-    <!-- 图表 -->
+
     <div class="charts">
       <normal-card  shadow="always" >
         <template slot="content">
-          <bar-pie-chart 
-            :barOptions="barOptions"
-            :pieOptions="pieOptions"
-          />
+          
+            
+            <div class="pie-left-content">
+                <base-pie-chart 
+                :options="pieOptionsA"
+                height="100%"
+                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>
+
         </template>
       </normal-card>
-    </div>
+      </div>
+      <div class="charts">
+      <normal-card  shadow="always" >
+        <template slot="content">
+
+             <div class="pie-left-content">
+               <div class="pie-left-content-search">
+                  <el-date-picker
+                    v-model="value1"
+                    type="daterange"
+                    align="right"
+                    class="pie-time-picker"
+                    unlink-panels
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    :picker-options="pickerOptions">
+                  </el-date-picker>
+                   <div class="content-item-head">共计36次故障 <span class="triangle"></span> </div>
+               </div>
+               <div class="pie-left-content-pie">
+                 <base-pie-chart 
+                  :options="pieOptionsB"
+                  height="300px"
+                  width="100%"
+                />
+               </div>
+            </div>
+            <div class="pie-right-content">
+  
+              <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>
+
+            <div class="pie-left-content">
+               <div class="pie-left-content-search">
+                 <el-date-picker
+                    v-model="value2"
+                    type="daterange"
+                    align="right"
+                    class="pie-time-picker"
+                    unlink-panels
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    :picker-options="pickerOptions">
+                  </el-date-picker>
+                  <div class="content-item-head">共计36次故障 <span class="triangle"></span> </div>
+               </div>
+               <div class="pie-left-content-pie">
+                  <base-pie-chart 
+                      :options="pieOptionsC"
+                      height="300px"
+                      width="100%"
+                  />
+               </div>
+            </div>
+  
+            <div class="pie-right-content">
+              <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>
+      </normal-card>
+    </div>
 
-    <!-- 表格 -->
     <div class="datatable">
-      <div class="table-title">设备告警统计表</div>
-      <el-table :data="tableData" :span-method="objectSpanMethod" row-key="id" fit border width="100%" >
-          <el-table-column label="设备类型" prop="type" align="center" fixed="left"/>
-          <el-table-column label="状态" prop="name" align="center" fixed="left"/>
-          <el-table-column label="数量" prop="value" align="center" />
+      <div class="table-title">{{tableTitle}}</div>
+      <el-table :data="tableData" row-key="id" fit border width="100%" >
+          <el-table-column type="index" width="50" label="序号" align="center"/>
+          <el-table-column label="设备名称" prop="name" align="center"/>
+          <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="code" align="center" />
+          <el-table-column label="故障描述" prop="comment" align="center" />
+
+          <el-table-column label="备注" prop="remarks" align="center" />
       </el-table>
     </div>
+
    
   </div>
 </template>
 <script>
 import NormalCard from '@/components/Card/NormalCard';
-import BarPieChart from '../components/BarPieChart.vue';
-
+import BasePieChart from '@/components/Charts/BasePieChart';
 import formOperate from "@/layout/rl-list-operate/rlListOperate";
 export default {
    mixins: [formOperate],
   name:'total_alarmDeviceCount',
-  components: { NormalCard, BarPieChart },
+  components: { NormalCard, BasePieChart },
 
   data() {
     return {
+      // url: "report/hydraulicCount",
       url: "report/alarmDeviceCount",
       data: [],
+      tableA:true,
+      tableC:false,
       tableData: [],
-      // 图形配置
-      barXData: [],
-      barSeriesData: [],
-      barOptions: {},
-      pieSeriesData: [],
-      pieOptions: {},
+      tableTitle:'有效期内设备列表(A)',
+      deviceTypes:[],
+      daysOptions:[
+        {
+          value:"7",
+          text:'7天内',
+        },
+        {
+          value:"30",
+          text:'30天内',
+        },
+        {
+          value:"90",
+          text:'90天内',
+        },
+        {
+          value:"180",
+          text:'半年内',
+        },
+      ],
 
+      pie_dataA: [],
+      pie_dataB: [],
+      pie_dataC: [],
+      pieOptionsA: {},
+      pieOptionsB: {},
+      pieOptionsC: {},
+
+    
       departments: [],
       queryParam:{
         depart_id:'',
-        creator:'',
+        device_type:'0',
+        days:'90',
       },
       departProps: {
               label: "department_name",
@@ -89,13 +196,45 @@ export default {
               checkStrictly: true,
               expandTrigger: 'hover'
       },
+      pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+      },
+      value1: '',
+      value2: '',
+      pieColor:['#fc8452', '#91cc75','#fac858','#ee6666','#73c0de','#9a60b4']
       
     };
   },
   created: function() {
-
-        // 获取所属单位
-        this.getDepartOptions();
+    this.$http.post("sysDictData/getOptions", { type: "DeviceType" }).then(resp => {
+        this.deviceTypes = resp.data
+    });
+    // 获取所属单位
+    // this.getDepartOptions();
        
   },
   methods: {    
@@ -104,18 +243,38 @@ export default {
      */
     afterGetList() {
       this.tableData=this.data.list
+      this.tableTitle='故障设备列表';
 
-      this.pieSeriesData=this.data.pump_pie
-      this.pieOptions = this.getPieOptions()
+      this.pie_dataA=this.data.pie_dataA
+      this.pieOptionsA = this.getPieOptions()
 
-      this.barXData=this.data.pump_bar.xData
-      this.barSeriesData=this.data.pump_bar.yData
-      this.barOptions = this.getBarOptions()
-      
+       this.pie_dataB=this.data.pie_dataB
+      this.pieOptionsB = this.getPieBOptions()
 
+       this.pie_dataC=this.data.pie_dataC
+      this.pieOptionsC = this.getPieCOptions()
+    
       
     },
 
+    showTable(name,index){
+       switch (name) {
+        case 'A':
+            let item=this.pie_dataA[index];
+            this.tableTitle=item.name+'列表';
+            break
+        case 'B':
+            let itemB=this.pie_dataB[index];
+            this.tableTitle=itemB.name+'故障列表';
+            break
+        case 'C':
+            let itemC=this.pie_dataC[index];
+            this.tableTitle=itemC.name+'故障列表';
+            break
+        default:
+            break
+       }
+    },
 
 
     getDepartOptions() {
@@ -138,45 +297,50 @@ export default {
             this.checkedDepart = []
             this.handleSearch()
     },
-    getBarOptions(){
-          return {
-            title: {
-              text: "液压泵告警统计",
+
+    getPieOptions(){
+        return {
+          color:['#d7511e',  '#1890ff'],
+          title: {
+              text: "故障总表",
               textStyle: {
                 color: '#80a0b0',
                 fontSize: 16,
                 fontWeight: 600
               }
             },
-            legend: {
-              show: false
-            },
-            xAxis: {
-                data: this.barXData
-            },
-            yAxis: {
-              name: "设备数量",
-              nameTextStyle: {
-                color: '#80a0b0',
+          tooltip: {
+            formatter: '数量<br/>{b0}：{c0}'
+          },
+          legend: {
+            show: false
+          },
+          series: [{
+              type: "pie",
+              center: 'center',
+              radius: [0, '50%'],
+              data: this.pie_dataA,
+               labelLine: {
+                show: false
               },
-              minInterval: 1
-            },
-            dataZoom: [
-                {
-                    type: 'inside'
-                }
-            ],
-            series: [{
-                name: "设备数量",
-                type: "bar",
-                barMaxWidth: '40',
-                data: this.barSeriesData
-            }]
-          }
+              label: {
+                show: false,
+                position: 'center'
+              },
+          }]
+        }
     },
-    getPieOptions(){
+    getPieBOptions(){
         return {
-        
+          color:this.pieColor,
+          // title: {
+          //     text: "表B",
+          //     textStyle: {
+          //       color: '#80a0b0',
+          //       fontSize: 16,
+          //       fontWeight: 600
+          //     }
+          //   },
           tooltip: {
             formatter: '设备数量<br/>{b0}：{c0}'
           },
@@ -187,31 +351,50 @@ export default {
               type: "pie",
               center: 'center',
               radius: [0, '50%'],
-              data: this.pieSeriesData,
+              data: this.pie_dataB,
               labelLine: {
-                  smooth: 0.2,
-                  length: 5,
-                  length2: 5
+                show: false
+              },
+              label: {
+                show: false,
+                position: 'center'
               },
           }]
         }
     },
-    
-    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-        if (columnIndex === 0) {
-          if (rowIndex % 4 === 0) {
-            return {
-              rowspan: 4,
-              colspan: 1
-            };
-          } else {
-            return {
-              rowspan: 0,
-              colspan: 0
-            };
-          }
+    getPieCOptions(){
+        return {
+          color:this.pieColor,
+          // title: {
+          //     text: "表C",
+          //     textStyle: {
+          //       color: '#80a0b0',
+          //       fontSize: 16,
+          //       fontWeight: 600
+          //     }
+          //   },
+          tooltip: {
+            formatter: '数量<br/>{b0}：{c0}'
+          },
+          legend: {
+            show: false
+          },
+          series: [{
+              type: "pie",
+              center: 'center',
+              radius: [0, '50%'],
+              data: this.pie_dataC,
+              labelLine: {
+                show: false
+              },
+              label: {
+                show: false,
+                position: 'center'
+              },
+          }]
         }
-    }
+    },
+    
 
 
   },
@@ -227,6 +410,7 @@ export default {
 
   .charts {
     padding-bottom: 20px;
+    min-width: 1024px;
   }
 
   .datatable {
@@ -240,6 +424,7 @@ export default {
       height: 40px;
       font-size: 16px;
       font-weight: 600;
+      margin-top: 10px;
     }
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   }
@@ -248,4 +433,124 @@ export default {
 .filter-container{
   margin-bottom: 30px;
 }
+
+.pie-left-content{
+  width:25%;
+  height:100%;
+  float: left;
+  margin-bottom: 20px;
+  // border:1px solid #1d5d99;
+  border-right:0px;
+}
+.pie-right-content{
+  width:20%;
+  height:100%;
+  float: left;
+  margin-bottom: 20px;
+  // border:1px solid #1d5d99;
+  margin-right: 20px;
+  border-left:0px;
+}
+.pie-left-content-search{
+  width:100%;
+  height:10%;
+  float: left;
+  margin-bottom: 20px;
+  // border:1px solid #1d5d99;
+  margin-right: 20px;
+  border-left:0px;
+}
+.pie-left-content-pie{
+  width:100%;
+  height:90%;
+  float: left;
+  margin-bottom: 20px;
+  // border:1px solid #1d5d99;
+  margin-right: 20px;
+  margin-top: -22px;
+  border-left:0px;
+
+}
+.pie-time-picker{
+  width:95%;
+}
+.content-item1-head{
+  width:90%;
+  max-width:260px;
+  min-width:200px;
+  margin-top:30px;
+  background-color:#1d5d99;
+  color: #FFF;
+  height:30px;
+  padding-left:10px;
+  line-height:30px;
+}
+.content-item-head{
+   width:90%;
+  max-width:260px;
+  min-width:200px;
+  background-color:#1d5d99;
+  color: #FFF;
+  height:30px;
+  padding-left:10px;
+  margin-top:5px;
+  line-height:30px;
+}
+.triangle{
+      float: right;
+      margin-right:-30px;
+			width: 0;
+			height: 0;
+			border:15px solid transparent;
+			border-left-color:#1d5d99;
+}
+.content-item1{
+  width:90%;
+  max-width:260px;
+  min-width:200px;
+  height:26px;
+  margin-top:30px;
+  padding:0px 10px;
+  line-height:26px;
+  background-color:#d7511e;
+  color: #FFF;
+}
+.triangle1{
+      float: right;
+      margin-right:-36px;
+			width: 0;
+			height: 0;
+			border:13px solid transparent;
+			border-left-color:#d7511e;
+}
+
+.content-item{
+  width:90%;
+  max-width:260px;
+  min-width:200px;
+  height:26px;
+  margin-top:15px;
+  padding:0px 10px;
+  line-height:26px;
+ 
+  color: #FFF;
+}
+.bg-color1{
+    background-color:#d7511e;
+}
+.bg-color2{
+    background-color:#1890ff;
+}
+.bg-color3{
+    background-color:#94a6b7;
+}
+.triangle2{
+      float: right;
+      margin-right:-36px;
+			width: 0;
+			height: 0;
+			border:13px solid transparent;
+		
+}
+
 </style>

src/views/report/companyCount/index.vue

@@ -1,261 +0,0 @@
-<template>
-  <div class="app-container">
-       <el-row :gutter="12">
-        <el-col :span="24">
-            <div class="filter-container">
-              <el-cascader
-                class="filter-item fl form-search-input"
-                @change="handleSearch"
-                placeholder="请选择所属单位"
-                :options="departments"
-                v-model="queryParam.depart_id"
-                :props="departProps"
-                filterable
-                clearable>
-              </el-cascader>
-        
-              <!-- <el-input
-                v-model="queryParam.creator"
-                placeholder="安装人员"
-                clearable
-                @change="handleSearch"
-                class="filter-item form-search-input fl"
-              /> -->
-            
-              <el-button class="filter-item fl" icon="el-icon-search" @click="handleSearch">
-                搜索
-              </el-button>
-            <el-button class="filter-item fl" icon="el-icon-refresh" @click="handleRefresh">
-              重置
-            </el-button>
-          </div>
-        </el-col>
-      </el-row>
-    <!-- 图表 -->
-    <div class="charts">
-      <normal-card  shadow="always" >
-        <template slot="content">
-
-             <base-bar :options="barOptions" width="100%" height="100%"  />
-        </template>
-      </normal-card>
-    </div>
-
-
-    <!-- 表格 -->
-    <div class="datatable">
-      <div class="table-title">设备统计表</div>
-      <el-table :data="tableData" :span-method="objectSpanMethod" row-key="id" fit border width="100%" >
-          <el-table-column label="设备类型" prop="type" align="center" fixed="left"/>
-          <el-table-column label="状态" prop="name" align="center" fixed="left"/>
-          <el-table-column label="数量" prop="value" align="center" />
-      </el-table>
-    </div>
-   
-  </div>
-</template>
-<script>
-import NormalCard from '@/components/Card/NormalCard';
-
-import BaseBar from "@/components/Charts/BaseBarChart";
-import formOperate from "@/layout/rl-list-operate/rlListOperate";
-export default {
-   mixins: [formOperate],
-  name:'total_companyCount',
-  components: { NormalCard, BaseBar },
-
-  data() {
-    return {
-      url: "report/companyCount",
-      data: [],
-      tableData: [],
-      // 图形配置
-      barXData: [],
-      barSeriesData: [],
-      barOptions: {},
-      pieSeriesData: [],
-      pieOptions: {},
-
-      departments: [],
-      queryParam:{
-        depart_id:'',
-        creator:'',
-      },
-      departProps: {
-              label: "department_name",
-              value: "id",
-              checkStrictly: true,
-              expandTrigger: 'hover'
-      },
-      
-    };
-  },
-  created: function() {
-
-        // 获取所属单位
-        this.getDepartOptions();
-       
-  },
-  methods: {    
-    /**
-     * 监听搜索组件中查出的数据
-     */
-    afterGetList() {
-      this.tableData=this.data.list
-
-      this.pieSeriesData=this.data.pump_pie
-      this.pieOptions = this.getPieOptions()
-
-      this.barXData=this.data.bar_data.xData
-      this.barPumpData=this.data.bar_data.pump_yData
-      this.barWrenchData=this.data.bar_data.wrench_yData
-      this.barFlangeData=this.data.bar_data.flange_yData
-      this.barOptions = this.getBarOptions()
-      
-
-      
-    },
-
-
-
-    getDepartOptions() {
-        this.$http.get('departments').then( resp => {
-            this.departments = resp.data
-        })
-    },
-     /**
-         * 清除过滤器
-         */
-    clearFilter() {
-            this.queryParam = {
-                device_type: '',
-                net_state: '',
-                citys: [],
-                depart_id: [],
-                creator: '',
-                created_at: [],
-            };
-            this.checkedDepart = []
-            this.handleSearch()
-    },
-    getBarOptions(){
-          return {
-            title: {
-              text: "设备统计",
-              textStyle: {
-                color: '#80a0b0',
-                fontSize: 16,
-                fontWeight: 600
-              }
-            },
-            
-            xAxis: {
-                data: this.barXData
-            },
-            yAxis: {
-              name: "设备数量",
-              nameTextStyle: {
-                color: '#80a0b0',
-              },
-              minInterval: 1
-            },
-            dataZoom: [
-                {
-                    type: 'inside'
-                }
-            ],
-            series: [
-              {
-                name: "液压泵",
-                type: "bar",
-                barMaxWidth: '40',
-                data: this.barPumpData
-              },{
-                name: "液压扳手",
-                type: "bar",
-                barMaxWidth: '40',
-                data: this.barWrenchData
-              },{
-                name: "风机",
-                type: "bar",
-                barMaxWidth: '40',
-                data: this.barFlangeData
-              },
-            ]
-          }
-    },
-    getPieOptions(){
-        return {
-        
-          tooltip: {
-            formatter: '设备数量<br/>{b0}：{c0}'
-          },
-          legend: {
-            show: false
-          },
-          series: [{
-              type: "pie",
-              center: 'center',
-              radius: [0, '50%'],
-              data: this.pieSeriesData,
-              labelLine: {
-                  smooth: 0.2,
-                  length: 5,
-                  length2: 5
-              },
-          }]
-        }
-    },
-    
-    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-        if (columnIndex === 0) {
-          if (rowIndex % 4 === 0) {
-            return {
-              rowspan: 4,
-              colspan: 1
-            };
-          } else {
-            return {
-              rowspan: 0,
-              colspan: 0
-            };
-          }
-        }
-    }
-
-
-  },
-
-};
-</script>
-<style lang="scss" scoped>
-/** 表格错位问题 */
-::v-deep .el-table th.gutter {
-  display:table-cell !important;
-}
-.app-container {
-
-  .charts {
-    padding-bottom: 20px;
-  }
-
-  .datatable {
-    .table-title {
-      background-color: #edebff;
-      color: #1890ff;
-      display: flex;
-      width: 100%;
-      justify-content: center;
-      align-items: center;
-      height: 40px;
-      font-size: 16px;
-      font-weight: 600;
-    }
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  }
-
-}
-.filter-container{
-  margin-bottom: 30px;
-}
-</style>

src/views/report/hydraulicCount/index.vue

@@ -212,6 +212,7 @@ export default {
 
   .charts {
     padding-bottom: 20px;
+    min-width: 1024px;
   }
 
   .datatable {

src/views/report/maintainCount/index.vue

@@ -128,13 +128,12 @@ import BasePieChart from '@/components/Charts/BasePieChart';
 import formOperate from "@/layout/rl-list-operate/rlListOperate";
 export default {
    mixins: [formOperate],
-  name:'total_hydraulicCount',
+  name:'total_maintainCount',
   components: { NormalCard, BasePieChart },
 
   data() {
     return {
-      // url: "report/hydraulicCount",
-      url: "report/alarmDeviceCount",
+      url: "report/maintainCount",
       data: [],
       tableA:true,
       tableC:false,
@@ -296,7 +295,7 @@ export default {
               center: 'center',
               radius: [0, '50%'],
               data: this.pieSeriesData,
-              labelLine: {
+               labelLine: {
                 show: false
               },
               label: {
@@ -386,6 +385,7 @@ export default {
 
   .charts {
     padding-bottom: 20px;
+    min-width: 1024px;
   }
 
   .datatable {

src/views/report/windCount/index.vue

@@ -1,239 +0,0 @@
-<template>
-  <div class="app-container">
-       <el-row :gutter="12">
-        <el-col :span="24">
-            <div class="filter-container">
-              <el-cascader
-                class="filter-item fl form-search-input"
-                @change="handleSearch"
-                placeholder="请选择所属部门"
-                :options="departments"
-                v-model="queryParam.depart_id"
-                :props="departProps"
-                filterable
-                clearable>
-              </el-cascader>
-               <el-select
-                  v-model="queryParam.wind_id"
-                  placeholder="所属风场"
-                  class="filter-item form-search-input fl"
-                  clearable
-                >
-                <el-option
-                      v-for="item in windOptions"
-                      :key="item.id"
-                      :label="item.name"
-                      :value="item.id">
-                    </el-option>
-                </el-select>
-              <!-- <el-input
-                v-model="queryParam.creator"
-                placeholder="安装人员"
-                clearable
-                @change="handleSearch"
-                class="filter-item form-search-input fl"
-              /> -->
-            
-              <el-button class="filter-item fl" icon="el-icon-search" @click="handleSearch">
-                搜索
-              </el-button>
-            <el-button class="filter-item fl" icon="el-icon-refresh" @click="handleRefresh">
-              重置
-            </el-button>
-          </div>
-        </el-col>
-      </el-row>
-    <!-- 液压泵图表 -->
-    <div class="charts">
-      <normal-card  shadow="always" >
-        <template slot="content">
-          <base-bar :options="barOptions" width="100%" height="100%"  />
-        </template>
-      </normal-card>
-    </div>
-
-
-    <!-- 表格 -->
-    <div class="datatable">
-      <div class="table-title">风场液压泵列表</div>
-      <el-table :data="tableData" row-key="id" fit border width="100%" >
-
-          <el-table-column label="风场名称" prop="name" align="center" fixed="left"/>
-          <el-table-column label="液压泵总数" prop="total" align="center" />
-          <el-table-column label="液压泵在线数" prop="online" align="center" />
-          <el-table-column label="液压泵离线数" prop="offline" align="center" />
-      </el-table>
-    </div>
-   
-  </div>
-</template>
-<script>
-import NormalCard from '@/components/Card/NormalCard';
-
-import BaseBar from "@/components/Charts/BaseBarChart";
-
-import { getChinaAreaName } from '@/utils/common'
-import formOperate from "@/layout/rl-list-operate/rlListOperate";
-export default {
-   mixins: [formOperate],
-  name:'total_windCount',
-  components: { NormalCard, BaseBar },
-  filters: {
-    getChinaAreaName: getChinaAreaName
-  },
-  data() {
-    return {
-      url: "report/windCount",
-      data: [],
-      tableData: [],
-      // 图形配置
-      barXData: [],
-      barSeriesData: [],
-      barOptions: {},
-      windOptions:[],
-      departments: [],
-      queryParam:{
-        depart_id:'',
-        creator:'',
-      },
-      departProps: {
-              label: "department_name",
-              value: "id",
-              checkStrictly: true,
-              expandTrigger: 'hover'
-      },
-      
-    };
-  },
-  created: function() {
-
-        // 获取所属单位
-        this.getDepartOptions();
-         this.$http.get("wind").then((response) => {
-          this.windOptions = response.data;
-        });
-  },
-  methods: {    
-    /**
-     * 监听搜索组件中查出的数据
-     */
-    afterGetList() {
-      this.tableData=this.data.list
-
-      console.log(this.data)
-      this.barXData=this.data.xdata
-      this.barSeriesData=this.data.ydata
-      this.barOptions = this.getBarOptions()
-      
-
-      
-    },
-
-
-
-    getDepartOptions() {
-        this.$http.get('departments').then( resp => {
-            this.departments = resp.data
-        })
-    },
-     /**
-         * 清除过滤器
-         */
-    clearFilter() {
-            this.queryParam = {
-                device_type: '',
-                net_state: '',
-                citys: [],
-                depart_id: [],
-                creator: '',
-                created_at: [],
-            };
-            this.checkedDepart = []
-            this.handleSearch()
-    },
-    getBarOptions(){
-          return {
-            title: {
-              text: "风场设备统计",
-              textStyle: {
-                color: '#80a0b0',
-                fontSize: 16,
-                fontWeight: 600
-              }
-            },
-            legend: {
-              show: true //不显示 柱形名称
-            },
-            xAxis: {
-                data: this.barXData
-            },
-            yAxis: {
-              name: "设备数量",
-              nameTextStyle: {
-                color: '#80a0b0',
-              },
-              minInterval: 1
-            },
-            dataZoom: [
-                {
-                    type: 'inside'
-                }
-            ],
-            series: [
-              {
-                name: "风机",
-                type: "bar",
-                barMaxWidth: '40',
-                data: this.barSeriesData,
-               
-              },
-              {
-                name: "液压泵",
-                type: "bar",
-                barMaxWidth: '40',
-                data: this.barSeriesData,
-               
-              }
-            ]
-          }
-    },
-     
-   
-   
-
-
-  },
-
-};
-</script>
-<style lang="scss" scoped>
-/** 表格错位问题 */
-::v-deep .el-table th.gutter {
-  display:table-cell !important;
-}
-.app-container {
-
-  .charts {
-    padding-bottom: 20px;
-  }
-
-  .datatable {
-    .table-title {
-      background-color: #edebff;
-      color: #1890ff;
-      display: flex;
-      width: 100%;
-      justify-content: center;
-      align-items: center;
-      height: 40px;
-      font-size: 16px;
-      font-weight: 600;
-    }
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  }
-
-}
-.filter-container{
-  margin-bottom: 30px;
-}
-</style>

src/views/report/workCount/index.vue

@@ -0,0 +1,510 @@
+<template>
+  <div class="app-container">
+       <el-row :gutter="12">
+        <el-col :span="24">
+            <div class="filter-container">
+              <!-- <el-cascader
+                class="filter-item fl form-search-input"
+                @change="handleSearch"
+                placeholder="请选择所属部门"
+                :options="departments"
+                v-model="queryParam.depart_id"
+                :props="departProps"
+                filterable
+                clearable>
+              </el-cascader> -->
+              <el-select  v-model="queryParam.device_type"   class="filter-item form-search-input fl"  placeholder="请选择设备类型" >
+                <el-option
+                  v-for="item in deviceTypes"
+                  :key="item.value"
+                  :label="item.text"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            
+              <el-button class="filter-item fl" icon="el-icon-search" @click="handleSearch">
+                搜索
+              </el-button>
+              
+          </div>
+        </el-col>
+      </el-row>
+
+
+      <div class="charts">
+      
+      <normal-card  shadow="always" >
+        <template slot="content">
+              <div class="card-header">共计40台设备,共服务10个风场、20台风机、100次螺栓 <span class="card-header-triangle"></span> </div>
+             <div class="pie-left-content">
+               <div class="pie-left-content-search">
+                  <el-date-picker
+                    v-model="value1"
+                    type="daterange"
+                    align="right"
+                    class="pie-time-picker"
+                    unlink-panels
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    :picker-options="pickerOptions">
+                  </el-date-picker>
+                   <div class="content-item-head">共服务36次螺栓 <span class="triangle"></span> </div>
+               </div>
+               <div class="pie-left-content-pie">
+                 <base-pie-chart 
+                  :options="pieOptionsB"
+                  height="300px"
+                  width="100%"
+                />
+               </div>
+            </div>
+            <div class="pie-right-content">
+              <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>
+
+            <div class="pie-left-content">
+               <div class="pie-left-content-search">
+                 <el-date-picker
+                    v-model="value2"
+                    type="daterange"
+                    align="right"
+                    class="pie-time-picker"
+                    unlink-panels
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    :picker-options="pickerOptions">
+                  </el-date-picker>
+                  <div class="content-item-head">共服务36次螺栓 <span class="triangle"></span> </div>
+               </div>
+               <div class="pie-left-content-pie">
+                  <base-pie-chart 
+                      :options="pieOptionsC"
+                      height="300px"
+                      width="100%"
+                  />
+               </div>
+            </div>
+  
+            <div class="pie-right-content">
+              <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>
+      </normal-card>
+    </div>
+
+    <div class="datatable">
+      <div class="table-title">{{tableTitle}}</div>
+      <el-table :data="tableData" row-key="id" fit border width="100%" >
+          <el-table-column type="index" width="50" label="序号" align="center"/>
+          <el-table-column label="设备名称" prop="name" align="center"/>
+          <el-table-column label="出厂编号" prop="number" align="center" />
+          <el-table-column label="风场名称" prop="wind_name" align="center" />
+          <el-table-column label="风机数量" prop="fan_num" align="center" />
+          <el-table-column label="螺栓数量" prop="bolt_num" align="center" />
+          <el-table-column label="备注" prop="remarks" align="center" />
+      </el-table>
+    </div>
+
+   
+  </div>
+</template>
+<script>
+import NormalCard from '@/components/Card/NormalCard';
+import BasePieChart from '@/components/Charts/BasePieChart';
+import formOperate from "@/layout/rl-list-operate/rlListOperate";
+export default {
+   mixins: [formOperate],
+  name:'total_workCount',
+  components: { NormalCard, BasePieChart },
+
+  data() {
+    return {
+      url: "report/workCount",
+      data: [],
+      tableA:true,
+      tableC:false,
+      tableData: [],
+      tableTitle:'有效期内设备列表(A)',
+      deviceTypes:[],
+      daysOptions:[
+        {
+          value:"7",
+          text:'7天内',
+        },
+        {
+          value:"30",
+          text:'30天内',
+        },
+        {
+          value:"90",
+          text:'90天内',
+        },
+        {
+          value:"180",
+          text:'半年内',
+        },
+      ],
+
+
+      pie_dataB: [],
+      pie_dataC: [],
+
+      pieOptionsB: {},
+      pieOptionsC: {},
+
+    
+      departments: [],
+      queryParam:{
+        depart_id:'',
+        device_type:'0',
+        days:'90',
+      },
+      departProps: {
+              label: "department_name",
+              value: "id",
+              checkStrictly: true,
+              expandTrigger: 'hover'
+      },
+      pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+      },
+      value1: '',
+      value2: '',
+      pieColor:['#fc8452', '#91cc75','#fac858','#ee6666','#73c0de','#9a60b4']
+      
+    };
+  },
+  created: function() {
+    this.$http.post("sysDictData/getOptions", { type: "DeviceType" }).then(resp => {
+        this.deviceTypes = resp.data
+    });
+    // 获取所属单位
+    // this.getDepartOptions();
+       
+  },
+  methods: {    
+    /**
+     * 监听搜索组件中查出的数据
+     */
+    afterGetList() {
+      this.tableData=this.data.list
+      this.tableTitle='有效期内设备列表(A)';
+
+
+
+       this.pie_dataB=this.data.pie_dataB
+      this.pieOptionsB = this.getPieBOptions()
+
+       this.pie_dataC=this.data.pie_dataC
+      this.pieOptionsC = this.getPieCOptions()
+    
+      
+    },
+
+    showTable(name,index){
+       switch (name) {
+        case 'B':
+            let itemB=this.pie_dataB[index];
+            this.tableTitle=itemB.name+'服务列表';
+            break
+        case 'C':
+            let itemC=this.pie_dataC[index];
+            this.tableTitle=itemC.name+'服务列表';
+            break
+        default:
+            break
+       }
+    },
+
+
+    getDepartOptions() {
+        this.$http.get('departments').then( resp => {
+            this.departments = resp.data
+        })
+    },
+     /**
+         * 清除过滤器
+         */
+    clearFilter() {
+            this.queryParam = {
+                device_type: '',
+                net_state: '',
+                citys: [],
+                depart_id: [],
+                creator: '',
+                created_at: [],
+            };
+            this.checkedDepart = []
+            this.handleSearch()
+    },
+
+  
+    getPieBOptions(){
+        return {
+          color:this.pieColor,
+          // title: {
+          //     text: "表B",
+          //     textStyle: {
+          //       color: '#80a0b0',
+          //       fontSize: 16,
+          //       fontWeight: 600
+          //     }
+          //   },
+          tooltip: {
+            formatter: '设备数量<br/>{b0}：{c0}'
+          },
+          legend: {
+            show: false
+          },
+          series: [{
+              type: "pie",
+              center: 'center',
+              radius: [0, '50%'],
+              data: this.pie_dataB,
+              labelLine: {
+                show: false
+              },
+              label: {
+                show: false,
+                position: 'center'
+              },
+          }]
+        }
+    },
+    getPieCOptions(){
+        return {
+          color:this.pieColor,
+          // title: {
+          //     text: "表C",
+          //     textStyle: {
+          //       color: '#80a0b0',
+          //       fontSize: 16,
+          //       fontWeight: 600
+          //     }
+          //   },
+          tooltip: {
+            formatter: '数量<br/>{b0}：{c0}'
+          },
+          legend: {
+            show: false
+          },
+          series: [{
+              type: "pie",
+              center: 'center',
+              radius: [0, '50%'],
+              data: this.pie_dataC,
+              labelLine: {
+                show: false
+              },
+              label: {
+                show: false,
+                position: 'center'
+              },
+          }]
+        }
+    },
+    
+
+
+  },
+
+};
+</script>
+<style lang="scss" scoped>
+/** 表格错位问题 */
+::v-deep .el-table th.gutter {
+  display:table-cell !important;
+}
+.app-container {
+
+  .charts {
+    padding-bottom: 20px;
+    min-width: 1024px;
+  }
+
+  .datatable {
+    .table-title {
+      background-color: #edebff;
+      color: #1890ff;
+      display: flex;
+      width: 100%;
+      justify-content: center;
+      align-items: center;
+      height: 40px;
+      font-size: 16px;
+      font-weight: 600;
+      margin-top: 10px;
+    }
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+
+}
+.filter-container{
+  margin-bottom: 30px;
+}
+.card-header{
+  width:90%;
+  max-width:500px;
+  min-width:450px;
+  background-color:#1890ff;
+  color: #FFF;
+  height:30px;
+  padding-left:10px;
+  margin-top:5px;
+  margin-bottom:20px;
+  line-height:30px;
+}
+.card-header-triangle{
+      float: right;
+      margin-right:-30px;
+			width: 0;
+			height: 0;
+			border:15px solid transparent;
+			border-left-color:#1890ff;
+}
+.pie-left-content{
+  width:25%;
+  height:100%;
+  float: left;
+  margin-bottom: 20px;
+  // border:1px solid #1d5d99;
+  border-right:0px;
+}
+.pie-right-content{
+  width:20%;
+  height:100%;
+  float: left;
+  margin-bottom: 20px;
+  // border:1px solid #1d5d99;
+  margin-right: 20px;
+  border-left:0px;
+}
+.pie-left-content-search{
+  width:100%;
+  height:10%;
+  float: left;
+  margin-bottom: 20px;
+  // border:1px solid #1d5d99;
+  margin-right: 20px;
+  border-left:0px;
+}
+.pie-left-content-pie{
+  width:100%;
+  height:90%;
+  float: left;
+  margin-bottom: 20px;
+  // border:1px solid #1d5d99;
+  margin-right: 20px;
+  margin-top: -22px;
+  border-left:0px;
+
+}
+.pie-time-picker{
+  width:95%;
+}
+.content-item1-head{
+  width:90%;
+  max-width:260px;
+  min-width:200px;
+  margin-top:30px;
+  background-color:#1d5d99;
+  color: #FFF;
+  height:30px;
+  padding-left:10px;
+  line-height:30px;
+}
+.content-item-head{
+   width:90%;
+  max-width:260px;
+  min-width:200px;
+  background-color:#1d5d99;
+  color: #FFF;
+  height:30px;
+  padding-left:10px;
+  margin-top:5px;
+  line-height:30px;
+}
+.triangle{
+      float: right;
+      margin-right:-30px;
+			width: 0;
+			height: 0;
+			border:15px solid transparent;
+			border-left-color:#1d5d99;
+}
+.content-item1{
+  width:90%;
+  max-width:260px;
+  min-width:200px;
+  height:26px;
+  margin-top:30px;
+  padding:0px 10px;
+  line-height:26px;
+  background-color:#d7511e;
+  color: #FFF;
+}
+.triangle1{
+      float: right;
+      margin-right:-36px;
+			width: 0;
+			height: 0;
+			border:13px solid transparent;
+			border-left-color:#d7511e;
+}
+
+.content-item{
+  width:90%;
+  max-width:260px;
+  min-width:200px;
+  height:26px;
+  margin-top:15px;
+  padding:0px 10px;
+  line-height:26px;
+ 
+  color: #FFF;
+}
+.bg-color1{
+    background-color:#d7511e;
+}
+.bg-color2{
+    background-color:#1890ff;
+}
+.bg-color3{
+    background-color:#94a6b7;
+}
+.triangle2{
+      float: right;
+      margin-right:-36px;
+			width: 0;
+			height: 0;
+			border:13px solid transparent;
+		
+}
+
+</style>