station-test-ui/src/views/report/hydraulicCount/index.vue

<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" 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"
                height="300px"
                width="100%"
              />
            </div>
            <div class="pie-right-content" style="padding-top:50px;">
                
                
                <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>
                
            </div>
        </template>
      </normal-card>
    </div>

    <div class="datatable">
      <div class="table-title">{{tableTitle}}</div>
      <el-table :data="tableData" stripe 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>
</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_hydraulicCount',
  components: { NormalCard, BasePieChart },

  data() {
    return {
      url: "report/hydraulicCount",
      data: [],
      tableData: [],
      tableTitle:'正常使用设备列表',
      deviceTypes:[],


      pieSeriesData: [],
      pieOptions: {},

    
      departments: [],
      queryParam:{
        depart_id:'',
        device_type:'0',
      },
      departProps: {
              label: "department_name",
              value: "id",
              checkStrictly: true,
              expandTrigger: 'hover'
      },
      
    };
  },
  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='正常使用设备列表';

      this.pieSeriesData=this.data.pie_data
      this.pieOptions = this.getPieOptions()

    
      
    },

    showTable(name){
      if(name=='40day'){
        this.tableData=this.data.list40
        this.tableTitle='40+天未使用设备列表';
      }else if(name=='20day'){
        this.tableData=this.data.list20
        this.tableTitle='20+天未使用设备列表';
      }else{
        this.tableData=this.data.list
        this.tableTitle='正常使用设备列表';
      }
 
    },


    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()
    },
    
      getPieOptions(){
        return {
          color:['#91cc75', '#1890ff', '#94a6b7'],
          title: {
              text: "设备状态统计",
              textStyle: {
                color: '#80a0b0',
                fontSize: 16,
                fontWeight: 600
              },
              bottom:'10',
              left:'center',
            },
          tooltip: {
            formatter: '设备数量<br/>{b0}：{c0}'
          },
           toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              saveAsImage: { show: true }
            },
            right:200,
          },
          legend: {
            show: false
          },
          series: [{
              type: "pie",
              center: 'center',
              radius: [0, '50%'],
              data: this.pieSeriesData,
              labelLine: {
                  smooth: 0.2,
                  length: 5,
                  length2: 5
              },
          }]
        }
    },
    
    


  },

};
</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;
}
.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:5px;
  background-color:#1d5d99;
  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:#1d5d99;
}
.content-item{
  width:240px;
  height:26px;
  margin-top:30px;
  padding:0px 10px;
  line-height:26px;
 
  color: #FFF;
}
.bg-color1{
    background-color:#91cc75;
}
.bg-color2{
    background-color:#1890ff;
}
.bg-color3{
    background-color:#94a6b7;
}
.triangle2{
      float: right;
      margin-right:-36px;
			width: 0;
			height: 0;
			border:13px solid transparent;
			border-left-color:#91cc75;
}
.triangle3{
      float: right;
      margin-right:-36px;
			width: 0;
			height: 0;
			border:13px solid transparent;
			border-left-color:#1890ff;
}
.triangle4{
      float: right;
      margin-right:-36px;
			width: 0;
			height: 0;
			border:13px solid transparent;
			border-left-color:#94a6b7;
}
</style>