station-test-ui/src/views/report/maintainCount/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" >
        <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="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>
                
                <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>

             <div class="pie-left-content">
                <base-pie-chart 
                :options="pieOptionsB"
                height="300px"
                width="100%"
            />
            </div>
            <div class="pie-right-content">
                
                <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>
        </template>
      </normal-card>
    </div>

    <div class="datatable" v-if="tableA">
      <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="unused_days" align="center" />
          <el-table-column label="备注" prop="remarks" align="center" />
      </el-table>
    </div>
    <div class="datatable" v-if="tableC">
      <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="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_maintainCount',
  components: { NormalCard, BasePieChart },

  data() {
    return {
      url: "report/maintainCount",
      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:'半年内',
        },
      ],

      pieSeriesData: [],
      pieOptionsA: {},
      pieOptionsB: {},
      pieOptionsC: {},

    
      departments: [],
      queryParam:{
        depart_id:'',
        device_type:'0',
        days:'90',
      },
      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='有效期内设备列表(A)';

      this.pieSeriesData=this.data.pie_dataA
      this.pieOptionsA = this.getPieOptions()

       this.pieSeriesData=this.data.pie_dataB
      this.pieOptionsB = this.getPieBOptions()

       this.pieSeriesData=this.data.pie_dataC
      this.pieOptionsC = this.getPieCOptions()
    
      
    },

    showTable(name){
      switch (name) {
        case 1:
            this.tableTitle='有效期内设备列表';
            this.tableA=true;
            this.tableC=false;
            break
        case 2:
            this.tableTitle='已失效(小于15天)设备列表';
            this.tableA=true;
            this.tableC=false;
            break
        case 3:
            this.tableTitle='已维护设备列表';
            this.tableA=false;
            this.tableC=true;
            break
        case 4:
            this.tableTitle='未维护设备列表';
            this.tableA=false;
            this.tableC=true;
            break
        case 5:
            this.tableTitle='有效使用(大于45天)设备列表';
            this.tableA=true;
            this.tableC=false;
            break
        case 6:
            this.tableTitle='警告失效(15天~45天)设备列表';
            this.tableA=true;
            this.tableC=false;
            break
        case 7:
            this.tableTitle='失效(0~15天)设备列表';
            this.tableA=true;
            this.tableC=false;
            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()
    },

    getPieOptions(){
        return {
          color:['#91cc75',  '#94a6b7'],
          title: {
              text: "表A",
              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.pieSeriesData,
               labelLine: {
                show: false
              },
              label: {
                show: false,
                position: 'center'
              },
          }]
        }
    },
    getPieBOptions(){
        return {
          color:['#91cc75', '#1890ff', '#94a6b7'],
          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.pieSeriesData,
              labelLine: {
                show: false
              },
              label: {
                show: false,
                position: 'center'
              },
          }]
        }
    },
    getPieCOptions(){
        return {
          color:['#91cc75',  '#94a6b7'],
          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.pieSeriesData,
              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;
}
.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;


}
.content-item-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;
}
.triangle{
      float: right;
      margin-right:-30px;
			width: 0;
			height: 0;
			border:15px solid transparent;
			border-left-color:#1d5d99;
}
.content-item{
  width:90%;
  max-width:260px;
  min-width:200px;
  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>