修改

src/views/report/hydraulicCount/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,55 +12,89 @@
                 :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>
+              <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="pieOptions"
+                height="300px"
+                width="100%"
+            />
+            </div>
+            <div class="pie-right-content">
+                
+                <div class="content-item-head">共有200台设备 <span class="triangle"></span> </div>
+                <div class="content-item">有100台设备正常使用 <span class="triangle2"></span> </div>
+                <div class="content-item">有40台设备40+天闲置 <span class="triangle2"></span> </div>
+                <div class="content-item">有60台设备20+天闲置 <span class="triangle2"></span> </div>
+                
+            </div>
         </template>
       </normal-card>
     </div>
-    <!-- 液压扳手图表 -->
-     <div class="charts">
-      <normal-card  shadow="always" >
-        <template slot="content">
-          <bar-pie-chart 
-            :barOptions="wrenchBarOptions"
-            :pieOptions="wrenchPieOptions"
-          />
-        </template>
-      </normal-card>
+
+    <div class="datatable">
+      <div class="table-title">40+天未使用设备列表</div>
+      <el-table :data="tableData40" row-key="id" fit border width="100%" >
+          <el-table-column type="index" width="50" label="序号" align="center"/>
+          <!-- <el-table-column label="设备类型" prop="type" align="center"/> -->
+          <el-table-column label="设备名称" prop="name" align="center"/>
+          <el-table-column label="出厂编号" prop="number" align="center" />
+          <el-table-column label="上次使用时间" prop="online_time" align="center" />
+          <el-table-column label="上次使用地址" prop="address" align="center" />
+          <el-table-column label="未使用天数" prop="unused_days" align="center" />
+          <el-table-column label="备注" prop="remarks" align="center" />
+      </el-table>
     </div>
 
+    <div class="datatable">
+      <div class="table-title">20+天未使用设备列表</div>
+      <el-table :data="tableData20" row-key="id" fit border width="100%" >
+          <el-table-column type="index" width="50" label="序号" align="center"/>
+          <!-- <el-table-column label="设备类型" prop="type" align="center"/> -->
+          <el-table-column label="设备名称" prop="name" align="center"/>
+          <el-table-column label="出厂编号" prop="number" align="center" />
+          <el-table-column label="上次使用时间" prop="online_time" align="center" />
+          <el-table-column label="上次使用地址" prop="address" align="center" />
+          <el-table-column label="未使用天数" prop="unused_days" align="center" />
+          <el-table-column label="备注" prop="remarks" align="center" />
+      </el-table>
+    </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">正常使用设备列表</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="type" align="center"/> -->
+          <el-table-column label="设备名称" prop="name" align="center"/>
+          <el-table-column label="出厂编号" prop="number" align="center" />
+          <el-table-column label="上次使用时间" prop="online_time" align="center" />
+          <el-table-column label="上次使用地址" prop="address" align="center" />
+          <el-table-column label="未使用天数" prop="unused_days" align="center" />
+          <el-table-column label="备注" prop="remarks" align="center" />
       </el-table>
     </div>
    
@@ -68,14 +102,14 @@
 </template>
 <script>
 import NormalCard from '@/components/Card/NormalCard';
-import BarPieChart from '../components/BarPieChart.vue';
+import BasePieChart from '@/components/Charts/BasePieChart';
 
 import { getChinaAreaName } from '@/utils/common'
 import formOperate from "@/layout/rl-list-operate/rlListOperate";
 export default {
    mixins: [formOperate],
   name:'total_hydraulicCount',
-  components: { NormalCard, BarPieChart },
+  components: { NormalCard, BasePieChart },
   filters: {
     getChinaAreaName: getChinaAreaName
   },
@@ -84,22 +118,19 @@ export default {
       url: "report/hydraulicCount",
       data: [],
       tableData: [],
-      // 图形配置
-      barXData: [],
-      barSeriesData: [],
-      barOptions: {},
+      tableData20: [],
+      tableData40: [],
+      deviceTypes:[],
+
+
       pieSeriesData: [],
       pieOptions: {},
 
-      wrenchBarXData: [],
-      wrenchBarSeriesData: [],
-      wrenchPieSeriesData: [],
-      wrenchBarOptions:{},//扳手柱状图
-      wrenchPieOptions:{},//扳手饼图
+    
       departments: [],
       queryParam:{
         depart_id:'',
-        creator:'',
+        device_type:'0',
       },
       departProps: {
               label: "department_name",
@@ -111,9 +142,11 @@ export default {
     };
   },
   created: function() {
-
-        // 获取所属单位
-        this.getDepartOptions();
+    this.$http.post("sysDictData/getOptions", { type: "DeviceType" }).then(resp => {
+        this.deviceTypes = resp.data
+    });
+    // 获取所属单位
+    // this.getDepartOptions();
        
   },
   methods: {    
@@ -122,21 +155,13 @@ export default {
      */
     afterGetList() {
       this.tableData=this.data.list
+      this.tableData20=this.data.list20
+      this.tableData40=this.data.list40
 
-      this.pieSeriesData=this.data.pump_pie
+      this.pieSeriesData=this.data.pie_data
       this.pieOptions = this.getPieOptions()
 
-      this.barXData=this.data.pump_bar.xData
-      this.barSeriesData=this.data.pump_bar.yData
-      this.barOptions = this.getBarOptions()
-      
-
-      this.wrenchPieSeriesData=this.data.wrench_pie
-      this.wrenchPieOptions=this.getWrenchPieOptions()
-
-      this.wrenchBarXData=this.data.wrench_bar.xData
-      this.wrenchBarSeriesData=this.data.wrench_bar.yData
-      this.wrenchBarOptions=this.getWrenchBarOptions()
+    
       
     },
 
@@ -162,46 +187,11 @@ export default {
             this.checkedDepart = []
             this.handleSearch()
     },
-    getBarOptions(){
-          return {
-            title: {
-              text: "液压泵型号统计",
-              textStyle: {
-                color: '#80a0b0',
-                fontSize: 16,
-                fontWeight: 600
-              }
-            },
-            legend: {
-              show: false
-            },
-            xAxis: {
-                data: this.barXData
-            },
-            yAxis: {
-              name: "设备数量",
-              nameTextStyle: {
-                color: '#80a0b0',
-              },
-              minInterval: 1
-            },
-            dataZoom: [
-                {
-                    type: 'inside'
-                }
-            ],
-            series: [{
-                name: "设备数量",
-                type: "bar",
-                barMaxWidth: '40',
-                data: this.barSeriesData
-            }]
-          }
-      },
+    
       getPieOptions(){
         return {
           title: {
-              text: "液压泵状态统计",
+              text: "设备状态状态统计",
               textStyle: {
                 color: '#80a0b0',
                 fontSize: 16,
@@ -227,86 +217,8 @@ export default {
           }]
         }
     },
-    getWrenchBarOptions(){
-          return {
-            title: {
-              text: "液压扳手型号统计",
-              textStyle: {
-                color: '#80a0b0',
-                fontSize: 16,
-                fontWeight: 600
-              }
-            },
-            legend: {
-              show: false
-            },
-            xAxis: {
-                data: this.wrenchBarXData
-            },
-            yAxis: {
-              name: "设备数量",
-              nameTextStyle: {
-                color: '#80a0b0',
-              },
-              minInterval: 1
-            },
-            dataZoom: [
-                {
-                    type: 'inside'
-                }
-            ],
-            series: [{
-                name: "设备数量",
-                type: "bar",
-                barMaxWidth: '40',
-                data: this.wrenchBarSeriesData
-            }]
-          }
-      },
-      getWrenchPieOptions(){
-        return {
-          title: {
-              text: "液压扳手检测状态统计",
-              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.wrenchPieSeriesData,
-              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
-            };
-          }
-        }
-    }
+    
+    
 
 
   },
@@ -335,6 +247,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);
   }
@@ -343,4 +256,49 @@ export default {
 .filter-container{
   margin-bottom: 30px;
 }
+.pie-left-content{
+  width:45%;
+  height:100%;
+  float: left;
+}
+.pie-right-content{
+  width:50%;
+  height:100%;
+  float: left;
+}
+.content-item-head{
+  // width:40%;
+  width:240px;
+  margin-top:30px;
+  background-color:#1890ff;
+  color: #FFF;
+  height:30px;
+  padding-left:10px;
+  line-height:30px;
+}
+.triangle{
+      float: right;
+      margin-right:-30px;
+			width: 0;
+			height: 0;
+			border:15px solid transparent;
+			border-left-color:#1890ff;
+}
+.content-item{
+  width:240px;
+  height:26px;
+  margin-top:30px;
+  padding:0px 10px;
+  line-height:26px;
+  background-color:#1890ff;
+  color: #FFF;
+}
+.triangle2{
+      float: right;
+      margin-right:-36px;
+			width: 0;
+			height: 0;
+			border:13px solid transparent;
+			border-left-color:#1890ff;
+}
 </style>