FE-V2-BIG-DATA/src/views/dangerDetail.vue

<template>
  <div class="main" v-cloak>
    <Header/>
    <div class="main_t">
      <div class="main_t_t">
        <i class="main_t_t_l">当前位置：首页 &gt;</i>
        <i>安全隐患统计</i>
      </div>
      <div class="main_t_b" id="danger_chart"></div>
    </div>
    <div class="main_btn">
      <i :key="index"  :class='currentIndex==index?"active":""'  v-for="(item,index) in btnList" @click="btnFun(index)">{{item}}</i>
    </div>
    <div class="main_b">
      <!--查询条件-->
      <el-form :model="editForm" ref="queryParams" class="form-box" :inline="true" style="margin:20px;">
        <el-form-item label="隐患类型" prop="dangerId" label-width="98px">
          <el-select v-model="editForm.optionId" popper-class="select-big-data" placeholder="请选择隐患类型">
            <el-option
                v-for="item in dangerList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实验室" prop="dangerId" label-width="98px">
          <el-select v-model="editForm.subId" popper-class="select-big-data" placeholder="请选择实验室">
            <el-option
                v-for="item in labList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="dateRange" label-width="68px">
          <el-date-picker
              popper-class="select-big-data-time"
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label-width="0">
          <el-button type="primary" @click.native.prevent="onSearch" native-type="submit">查询</el-button>
          <el-button @click="resetForm('searchForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <!--列表-->
      <el-table :data="tableData"  style="width: 100%" height="420" :row-class-name="tableRowClassName">
        <el-table-column align="center" header-align='center' type="index" :index="indexMethod" label="序号" width="60"></el-table-column>
        <el-table-column align="center" header-align='center' prop="optionName" label="隐患类型"></el-table-column>
        <el-table-column align="center" header-align='center' prop="subName" label="实验室名称"></el-table-column>
        <el-table-column align="center" header-align='center' prop="typeName" label="安全分类"></el-table-column>
        <el-table-column align="center" header-align='center' prop="levelName" label="安全分级"></el-table-column>
        <el-table-column align="center" header-align='center' prop="count" label="数量"></el-table-column>
      </el-table>
      <el-pagination
          style="margin-top: 14px"
          background
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :current-page.sync="editForm.pageNum"
          :page-size="editForm.pageSize"
          layout="total,prev, pager, next"
          :total="totalNum">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  checkOptionList,
  departmentsList,
  getSubjectDict,
  optionChartDetails,
  optionCharts, optionLabCharts
} from "../api/http"
import Header from '@/components/header.vue'
export default {
  components: {
    Header
  },
  data() {
    return {
      editForm:{
        deptLevel:'',//这个是登陆后，刘波给你的院校的类型
        schoolDeptId:'',//院系id
        optionId:'',//隐患类型
        subId:'',//实验室类型
        beginTimeStr:'',//开始时间
        endTimeStr:'',//结束时间
        pageNum:1,
        pageSize:10
      },

      subjectOptions:[],//院系
      dangerList:[],//隐患类型
      labList:[],//实验室
      dateRange:[],//时间
      totalNum:0,
      tableData:[],
      btnList:['按隐患类型统计','按实验室统计'],
      currentIndex:0,
    }
  },
  methods: {
    btnFun(index){
      this.currentIndex = index
      console.log(this.currentIndex)
      if(this.currentIndex==0){
        this.getAjaxData()
      }else{
        this.getLabAjaxData()
      }
    },
    back(){
      this.$router.push('/')
    },
    tableRowClassName({ rowIndex}) {
      if (rowIndex%2 === 0) {
        return 'success-row';
      } else{

        return 'warning-row';
      }
    },
    indexMethod(index) {
      return (this.editForm.pageNum - 1) * this.editForm.pageSize + index + 1;
    },
    //隐患类型
    checkOptionList:function () {
      let _this=this;
      checkOptionList({}).then((res) =>{
        if(res.code==200){
          let data=res.data;
          _this.dangerList=data
        }
      })
    },
    //查询院系
    departmentsList:function () {
      let _this=this;
      departmentsList().then((res) =>{
        if(res.code==200){
          let data=res.data;
          _this.subjectOptions=data
        }
      })
    },
    //查询实验室
    getSubjectDict:function () {
      let _this=this;
      getSubjectDict().then((res) =>{
        if(res.code==200){
          let data=res.data;
          _this.labList=data

        }
      })
    },
    //请求列表
    getAjaxList:function (){
      let _this=this;
      //列表
      let obj={
        'type':localStorage.getItem('deptLevel'),
        'optionId':this.editForm.optionId,
        'subId':this.editForm.subId,
        'pageNum':this.editForm.pageNum,
        'pageSize':this.editForm.pageSize,
        'startTime':this.editForm.beginTimeStr,
        'endTime':this.editForm.endTimeStr,
      }
      optionChartDetails(obj).then((res) =>{
        if(res.code==200){
          let data = res.rows;
          if(data && data.length>0){
            _this.tableData = data;
            _this.totalNum = parseInt(res.total);
          }else{
            _this.tableData = [];
            _this.totalNum = 0;
          }
        }
      })
    },
    //查询图表
    getAjaxData: function () {
      let _this=this;

      //人员违规统计图表
      let obj={
        'type':localStorage.getItem('deptLevel'),
        'subId':this.editForm.subId,
        'startTime':this.editForm.beginTimeStr,
        'endTime':this.editForm.endTimeStr,
      }
      optionCharts(obj).then((res) =>{
        if(res.code==200){
          let dataX=[];
          let dataCount=[];
          let data=res.data.list;
          for (var i = 0; i < data.length; i++) {
            dataX.push( data[i].optionName)
            dataCount.push(data[i].count)
          }
          _this.safetyDetailFun(dataX,dataCount,false)

        }
      })
    },
    getLabAjaxData: function () {
      let _this=this;
      //人员违规统计图表
      let obj={
        'pageNum':1,
        'pageSize':50,
      }
      optionLabCharts(obj).then((res) =>{
        if(res.code==200){
          let dataX=[];
          let dataCount=[];
          let data=res.data;
          for (var i = 0; i < data.length; i++) {
            dataX.push( data[i].subName)
            dataCount.push(data[i].count)
          }
          _this.safetyDetailFun(dataX,dataCount,true)

        }
      })
    },
    /*查询*/
    onSearch() {
      if(this.dateRange.length>0){
        this.editForm.beginTimeStr = this.dateRange[0];
        this.editForm.endTimeStr = this.dateRange[1];
      }
      this.editForm.pageNum =1;
      this.currentIndex=0;
      this.getAjaxList();
      this.getAjaxData();
    },
    /*重置*/
    resetForm() {
      this.editForm.schoolDeptId = "";
      this.editForm.optionId = "";
      this.editForm.subId = "";
      this.editForm.beginTimeStr = "";
      this.editForm.endTimeStr = "";
      this.dateRange = [];
      this.onSearch();
    },
    handleCurrentChange(val) {
      this.editForm.pageNum = val;
      this.getAjaxList();
    },
    /*安全隐患详情图表*/
    safetyDetailFun:function (dataX,dataCount,SlideType) {
      let safetydetailOption = {

        color: ['#3398DB'],
        tooltip : {
          /* trigger: 'axis',
           axisPointer : {            // 坐标轴指示器，坐标轴触发有效
               type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
           }*/
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            data : dataX,
            axisLabel: {
              textStyle: {//改变X轴字体颜色
                color: '#fff',

              },
              //设置一行显示几个字,自己设置
              formatter: function (params) {
                var newParamsName = "";
                var paramsNameNumber = params.length;
                var provideNumber = 6;
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                if (paramsNameNumber > provideNumber) {
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                  }
                } else {
                  newParamsName = params;
                }
                return newParamsName;
              }
            },
            lineStyle: {
              "color": "#486CC2",
              width:2,
            },
            axisTick: {
              show: false,

            },
            axisLine:{
              lineStyle:{
                color:'#2E4C74',//改变X轴颜色
                width:2,

              }
            },

          }
        ],
        yAxis : [
          {
            type : 'value',


            splitLine: {           // 分隔线
              show: false,        // 默认显示，属性show控制显示与否
              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                color: ['#fff'],
                width: 1,
                type: 'solid',
                opacity:0.15
              },

            },
            axisLabel: {
              textStyle: {//改变X轴字体颜色
                color: '#fff',

              },
            },
            axisTick:{//去掉X轴刻度
              show:false,
            },
            axisLine:{
              show:true,
              lineStyle:{
                color:'#2E4C74',//改变X轴颜色
                width: '2',

              }
            },

          }

        ],
        dataZoom: [
          {
            type: "slider",
            show: SlideType,
            xAxisIndex: [0],
            start: 0,
            end: 50,
            bottom:'-4%',
            textStyle:{
              color:"#ccd7d7"
            }
          },
        ],


        series : [
          {
            name:'安全隐患',
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff',
                }
              }
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: 'rgba(22, 31, 63, 0.5)'},

                      {offset: 1, color: '#00D1FF'}
                    ]
                )
              },

            },
            type:'bar',
            barWidth: '60%',
            barMaxWidth: '10%',
            data:dataCount
          }
        ]
      };
      var danger_chart = this.$echarts.init(document.getElementById('danger_chart'));
      danger_chart.setOption(safetydetailOption);
    }
  },
  mounted() {
    this.checkOptionList()
    this.departmentsList()
    this.getSubjectDict()
    this.getAjaxData()
    this.getAjaxList()
  },


}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

@function rw($px){

  @return $px*100/1920 *1vw;
}
@function rh($px){

  @return $px*100/1080 *1vh;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.main {
  width: rw(1920);
  height: rh(1080);
  /* background: url("../img/index_bg.png") no-repeat;
   background-size: 100% 100%;*/
  position: relative;
  left: 0;
  top: 0;
  z-index: 50;

  background: #062338;
  .main_btn{
    position: absolute;
    top: rh(140);
    right: rw(102);
    z-index: 1000;
    width: rw(260);
    height: rh(40);
    border: 1px solid #1ED0F8;
    border-radius: 0px rw(4) rh(4) 0px;
    display: flex;
    overflow: hidden;
    >i{
      flex: 1;
      font-size: rh(14);
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #999999;
      background: none;
      line-height:rh(40);
      text-align: center;
    }
    .active{
      color: #FFFFFF;
      background: #1ED0F8;
    }
  }

  .header {
    width: 100%;
    position: absolute;
    left: rw(0);
    top: rh(0);
    z-index: 100;
    display: flex;
    justify-content: flex-start;

    .header_l {
      width: rw(182);
      height: rh(44);
      margin: rh(10) 0 0 rw(40);
    }
    .header_c {
      width: rw(1180);
      height: rh(152);
      margin-left: rw(136);
      background: url("~@/assets/image/index_icon2.png") no-repeat;
      background-size: 100% 100%;
      font-size: rh(30);
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #FFFFFF;
      line-height: rh(30);
      text-align: center;
      padding-top: rh(26);
    }
    .header_r {
      margin-left: rw(264);
      width: rw(82);
      height: rh(32);
      margin-top: rh(18);
    }
  }
  .main_t{
    width: rw(1852);
    height: rh(352);
    position: absolute;
    left: rw(34);
    top: rh(86);
    z-index: 200;
    background: rgba(9, 55, 81, 0.6);
    .main_t_t{
      margin: rh(20) 0 0 rw(18);
      >i{
        font-size: rh(16);
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        line-height: rh(16);
      }
      >i:nth-of-type(1){

      }
      >i:nth-of-type(2){
        color: #1ED0F8;
      }
    }
    .main_t_b{
      width: rw(1852);
      height: rh(302);
    }
  }
  .main_b{
    background: rgba(9, 55, 81, 0.6);
    padding: 0 rw(32);
    width: rw(1852);
    height: rh(602);
    position: absolute;
    left: rw(34);
    top: rh(468);
    z-index: 200;

  }
}
</style>
<style lang="scss">
li{list-style:none}
i,em,b{font-style:normal;font-weight:100;}
body{margin: 0}
</style>