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

<template>
<div class="main">

        <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="plan_chart"></div>-->
        </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.subjectId" 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="740"   :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="left" header-align='center' prop="subjectName" label="实验室">
                     <template slot-scope="scope" >
                        <div class="lab_border">
                           <span class="lab_span"><i>{{scope.row.classifiedName}}</i><i>{{scope.row.typeName}}</i></span>
                           <span class="lab_span2">{{scope.row.subjectName}}</span>
                        </div>
                     </template>
                </el-table-column>
                <el-table-column align="center" header-align='center' prop="createTimeStr" label="起始时间"></el-table-column>
                <el-table-column align="center" header-align='center' prop="overTime" label="结束时间"></el-table-column>
                <el-table-column align="center" header-align='center' prop="alarmInfo" label="风险预警">
                 <template slot-scope="scope">
                     <span class="risk_span"><img v-if="scope.row.alarmInfo==1" src="@/assets/image/icon_fxyj_xz.png"/><img  v-if="scope.row.alarmInfo==0" src="@/assets/image/icon_fxyj_zc.png"/>声光报警</span>
                     <span class="risk_span"><img v-if="scope.row.phoneInfo==1" src="@/assets/image/icon_fxyj_xz.png"/><img  v-if="scope.row.phoneInfo==0" src="@/assets/image/icon_fxyj_zc.png"/>电话</span>
                     <span class="risk_span"><img v-if="scope.row.phoneInfo==1" src="@/assets/image/icon_fxyj_xz.png"/><img  v-if="scope.row.phoneInfo==0" src="@/assets/image/icon_fxyj_zc.png"/>短信</span>
                 </template>
                </el-table-column>
                <el-table-column align="center" header-align='center' prop="sesorContent" label="应急处置">
                     <template slot-scope="scope" >
                         <span class="risk_span"><img v-if="scope.row.windInfo==1" src="@/assets/image/icon_fxyj_xz.png"/><img  v-if="scope.row.windInfo==0" src="@/assets/image/icon_fxyj_zc.png"/>通风</span>
                         <span class="risk_span"><img v-if="scope.row.powerInfo==1" src="@/assets/image/icon_fxyj_xz.png"/><img  v-if="scope.row.powerInfo==0" src="@/assets/image/icon_fxyj_zc.png"/>断电</span>
                         <span class="risk_span"><img  src="@/assets/image/icon_fxyj_zc.png"/>短信</span>
                     </template>
                </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 {departmentsList, getRiskPlanList, getSubjectDict, getYearControlInfo,} from "../api/http"
import Header from '@/components/header.vue'
export default {
  components: {
    Header
  },
  data() {
    return {
      editForm:{
        deptLevel:'',//这个是登陆后，刘波给你的院校的类型
        groupDeptId:'',//院系id
        subjectId:'',//实验室类型
        beginTimeStr:'',//开始时间
        endTimeStr:'',//结束时间
        pageNum:1,
        pageSize:10
      },
      subjectOptions:[],//院系
      labList:[],//实验室
      dateRange:[],//时间
      totalNum:0,
      tableData:[],

    }
  },
  methods: {
    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;
    },
    //请求列表
    getAjaxList:function (){


      let _this=this;
      //列表
      let obj={
        'groupDeptId':this.editForm.groupDeptId,
        'subjectId':this.editForm.subjectId,
        'pageNum':this.editForm.pageNum,
        'pageSize':this.editForm.pageSize,
        'beginTimeStr':this.editForm.beginTimeStr,
        'endTimeStr':this.editForm.endTimeStr,
      }
      getRiskPlanList(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={
        'deptLevel':localStorage.getItem('deptLevel')
      }
      //图表
      getYearControlInfo(obj).then((res) =>{
        if(res.code==200){
          let dataX=[];
          let dataValue=[];
          let data=res.data.list;
          for (var i = 0; i < data.length; i++) {


            dataX.push( data[i].yearMonth)
            dataValue.push(data[i].num)
          }
          // planDetailFun(dataX,dataValue)

        }
      })

      //查询院系
      departmentsList().then((res) =>{
        if(res.code==200){
          let data=res.data;
          _this.subjectOptions=data
        }
      })
      //查询实验室
      getSubjectDict().then((res) =>{
        if(res.code==200){
          let data=res.data;
          _this.labList=data

        }
      })



    },
    /*查询*/
    onSearch() {

      if(this.dateRange.length>0){
        this.editForm.beginTimeStr = this.dateRange[0];
        this.editForm.endTimeStr = this.dateRange[1];
      }
      this.editForm.pageNum =1;
      this.getAjaxList();
      this.getAjaxData();
    },
    /*重置*/
    resetForm() {

      this.editForm.groupDeptId = "";
      this.editForm.subjectId = "";
      this.editForm.beginTimeStr = "";
      this.editForm.endTimeStr = "";
      this.dateRange = [];
      this.onSearch();

    },
    handleCurrentChange(val) {
      this.editForm.pageNum = val;
      this.getAjaxList();
    },
    /*安全隐患详情图表*/
     planDetailFun:function (dataX,dataVal) {
  const data = dataVal
  const sideData = data.map(item => item)//侧边主体高度
  let planOption =  {


    tooltip: {
      /*   trigger: 'axis',

         axisPointer: { // 坐标轴指示器，坐标轴触发有效
             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
         }*/
    },
    /*内边距*/
    grid: {
      top: '14%',
      left: '2%',
      right: '2%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: {
      data: dataX,
      //坐标轴
      axisLine: {
        lineStyle: {
          "color": "#486CC2",
          width:2,
        }
      },
      axisTick: {
        show: false,
        length: 9,
        alignWithLabel: true,
        lineStyle: {
          color: '#7DFFFD'
        }
      },
      //坐标值标注
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff',
          fontSize:16,
        }
      }
    },
    yAxis: [
      {

        //坐标轴
        axisLine: {
          lineStyle: {
            "color": "#486CC2",
            width:2,
          }
        },
        axisTick: {
          show: false,

        },
        //坐标值标注
        axisLabel: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize:16,
          }
        },
        //分格线
        splitLine: {
          show: false,
          lineStyle: {
            color: '#4784e8'
          }
        }
      }
    ],
    series: [{
      name: '预案执行统计',//正面
      //柱状图顶部数值
      "label": {
        "normal": {
          "show": true,
          "position": "top",
          fontSize: 14,
          fontWeight: '500',
          color: '#fff',
          padding:[2,2,2,10],
        }
      },
      tooltip: {
        show: false
      },
      type: 'bar',
      barWidth: 24.5,

      itemStyle: {
        normal: {
          color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            offset: 0,
            color: "#228efb" // 0% 处的颜色
          }, {
            offset: 0.6,
            color: "#04acf3" // 60% 处的颜色
          }, {
            offset: 1,
            color: "#05e5e5" // 100% 处的颜色
          }], false)
        }
      },

      data: data,


    }, {
      type: 'bar',//侧边
      name: '预案执行统计',
      barWidth: 8,
      itemStyle: {
        normal: {
          color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            offset: 0,
            color: "#228efb" // 0% 处的颜色
          }, {
            offset: 0.6,
            color: "#04acf3" // 60% 处的颜色
          }, {
            offset: 1,
            color: "#05e5e5" // 100% 处的颜色
          }], false)
        }
      },
      barGap: 0,
      data: sideData
    }, {
      name: '预案执行统计',
      tooltip: {
        show: false
      },
      type: 'pictorialBar',
      itemStyle: {
        borderWidth: 1,
        borderColor: '#0058FF',
        color: '#0058FF'
      },
      symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
      symbolSize: ['32', '12'],
      symbolOffset: ['-1', '-11'],
      //symbolRotate: -5,
      symbolPosition: 'end',
      data: data,
      z: 3
    },
    ]
  };
  var plan_chart = this.$echarts.init(document.getElementById('plan_chart'));
  plan_chart.setOption(planOption);
}
  },
  mounted() {
    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;
}
.lab_border{
  display: flex;
  align-items: center;
}
.lab_span{
  display: inline-block;
  border: 1px solid #0183FA;
  border-radius: rh(6);
  padding: rh(6) rw(16);
  margin-right: rw(8);
  >i{
    font-size: rh(12);
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #0183FA;
    line-height: rh(16);
    display: block;
  }
  >i:nth-of-type(1){}
  >i:nth-of-type(2){}
}
.lab_span2{
  display: inline-block;
  font-size: rh(14);
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
}
.risk_span{
  font-size: rh(14);
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
  margin-right: rw(28);
  >img{
    width: rw(14);
    height:rh(14);
    margin-right: rw(8);
    position: relative;
    top: rh(2);
  }
}
.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;

  .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{
    /*background: rgba(9, 55, 81, 0.6);*/
    width: rw(1852);
    /* height: rh(352);*/
    position: absolute;
    left: rw(34);
    top: rh(86);
    z-index: 200;
    .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(862);
    position: absolute;
    left: rw(34);
    top: rh(168);
    z-index: 200;
  }
}
</style>
<style lang="scss">
li{list-style:none}
i,em,b{font-style:normal;font-weight:100;}
body{margin: 0}
</style>