station-test-ui/src/views/report/alarmDeviceCount/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="content-item1-head">共有19台设备 <span class="triangle"></span> </div>
            <div class="pie-left-content">
                <base-pie-chart 
                :options="pieOptionsA"
                height="100%"
                width="100%"
            />
            </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" bodyStyle="{height:'360px'}">
        <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" 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>

            <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" 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>
      </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="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 BasePieChart from '@/components/Charts/BasePieChart';
import formOperate from "@/layout/rl-list-operate/rlListOperate";
export default {
   mixins: [formOperate],
  name:'total_alarmDeviceCount',
  components: { NormalCard, BasePieChart },

  data() {
    return {
      // url: "report/hydraulicCount",
      url: "report/alarmDeviceCount",
      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_dataA: [],
      pie_dataB: [],
      pie_dataC: [],
      pieOptionsA: {},
      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: '',
      pieColorA:['#d7511e',  '#1890ff'],
      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='故障设备列表';

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

       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() {
        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:this.pieColorA,
          title: {
              text: "故障总表",
              textStyle: {
                color: '#80a0b0',
                fontSize: 16,
                fontWeight: 600
              },
               bottom:'10',
              left:'center',
            },
          tooltip: {
            formatter: '数量<br/>{b0}：{c0}'
          },
          legend: {
            show: false
          },
          series: [{
              type: "pie",
              center: 'center',
              radius: [0, '50%'],
              data: this.pie_dataA,
               labelLine: {
                show: false
              },
              label: {
                show: false,
                position: 'center'
              },
          }]
        }
    },
    getPieBOptions(){
        return {
          color:this.pieColor,
          title: {
              text: "TOP5故障频次",
              textStyle: {
                color: '#80a0b0',
                fontSize: 16,
                fontWeight: 600
              },
               bottom:'10',
              left:'center',
            },
          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: "TOP5故障设备",
              textStyle: {
                color: '#80a0b0',
                fontSize: 16,
                fontWeight: 600
              },
              bottom:'10',
              left:'center',
            },
          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;
}

.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:5px;
  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>