fj-dc-ui/.svn/pristine/db/dbb9d71d608013e0a520732042805553e1f811fd.svn-base

<template>
  <div>
    <div class="detailsTop" style="border: 1px dotted skyblue;">
      <div id="dcry" style="width: 100%;height: 100%;"></div>
    </div>
    <div class="detailsBottom" ref="table">
        <el-table
          border
          ref="multipleTable"
          :data="tableData"

          tooltip-effect="dark"
        >
          <el-table-column align="center" label="序号" min-width="50">
            <template slot-scope="scope">{{ (pageNum - 1) * pageSize + (scope.$index + 1) }}</template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            prop="orgNm"
            label="督查机构名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            prop="persName"
            label="督查人员名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            prop="pnm"
            label="督查组名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            prop="name"
            label="督查类型名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="80"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="primary" size="mini"  @click.stop="lookOver(scope.row.guid)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 100]"
          :page-size="20"
          :pager-count="3"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="text-align: center;margin-top: 1vh;">
        </el-pagination>

    <el-dialog :title="督查人员信息" :visible.sync="perInfoVisible" :append-to-body="true" :close-on-click-modal="false" width="20%">
      <div class="process_line" style="text-align: center;">
        <div style="width:100%; height:210px;text-align:center; padding-top:10px;">
        　<img v-if="peopleDetail.imgurl != null" style="width: 150px;height: 200px;"
            :src="peopleDetail.imgurl" alt="">
          <img v-else src="../../static/pic.jpg" alt="">
        </div>
        <div style="width:100%;height:35px;text-align:center; padding-top:0;font-size: 18px;font-weight: bold;">
          　　 <p>{{peopleDetail.persName}}</p>
        </div>
        <div class="item content4">
          <div class="item item2">
            <span class="label">单 位：</span>
            <div style="width:170px;border-bottom:1px solid #dddddd;display: inline-block;">
              <span class="spanInlineBlock" :title="peopleDetail.orgNm">{{peopleDetail.orgNm || "---"}}</span>
            </div>
          </div>
          <div class="item item2">
            <span class="label">职务/职称：</span>
            <div style="width:170px;border-bottom:1px solid #dddddd;display: inline-block;">
              <span class="spanInlineBlock" :title="peopleDetail.admDuty">{{peopleDetail.admDuty || "---"}}</span>
            </div>
          </div>
          <div class="item item2">
            <span class="label">编 号：</span>
            <div style="width:170px;border-bottom:1px solid #dddddd;display: inline-block;">
              <span class="spanInlineBlock" :title="peopleDetail.idnm">{{peopleDetail.idnm || "---"}}</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import request from '../../utils/gw_ajax_request';
    export default {
        name: "dcryDetails",
        props: ["adCode","requestSttmTime","requestEntmTime","requestOrgId","requestObjectType",'dcryVisible'],
        data() {
          return {
            tableHeight: '',
            tableData: [],
            pageNum: 1,
            pageSize: 20,
            total: 0,
            perInfoVisible:false,
            peopleDetail:'',
            guid:'',
            xData: [],
            yData: []
          }
        },
        mounted() {
          this.getEcharts();
          this.getTableData();
          this.init();
        },
        methods:{
          init() {
            this.tableHeight = this.$refs['table'].offsetHeight - 45;
          },
          getTableData(){
            let params = {
              "adCode": this.adCode,
              "pageSize": this.pageSize,
              "pageNum": this.pageNum,
              "startTime": this.requestSttmTime,
              "endTime": this.requestEntmTime,
              "orgIds": this.requestOrgId,
              "pTypes": this.requestObjectType
            }
            this.$nextTick(function () {
              request.post(`/pc/index/findPerByAdCode`,params).then(res =>{
                console.log(res)
                if(res.success){
                  this.tableData = res.data.list;
                  this.total = res.data.total;
                }else{
                  this.$message.error(res.message);
                }
              }).catch(err =>{
                this.$message.error(err);
              })
            })

          },
          getEcharts(){
            let params = {
              "adCode": this.adCode,
              "startTime": this.requestSttmTime,
              "endTime": this.requestEntmTime,
              "orgIds": this.requestOrgId,
              "pTypes": this.requestObjectType
            };
            this.$nextTick(function () {
              request.post(`/pc/index/findPerCountByAdCode`, params).then(res => {
                if(res.success){
                  let CountData = res.data;
                  let xData = [];
                  let yData = [];
                  CountData.forEach((item, index) => {
                    xData.push(item.name);
                    yData.push(item.total);
                  });
                  this.xData = xData;
                  this.yData = yData;
                  console.log(this.xData,this.yData);
                  this.initCharts();
                }

              }).catch(err => {

              })
            })


          },
          handleSizeChange(val) {
            this.pageSize = val;
            this.getTableData();
          },
          handleCurrentChange(val) {
            this.pageNum = val;
            this.getTableData();
          },
          initCharts(){
            let me = this;
            me.myChart = echarts.init(document.getElementById('dcry'));
            me.myChart.setOption({
              grid: {
                left: '7%',
                right: '5%',
                top: '15%',
                bottom: '25%',
              },
              title: {
                show: false
              },
              tooltip : {
                trigger: 'axis',
                label: {
                  show: true
                },
                formatter: function (params) {
                  return params[0].axisValue + ': ' +params[0].data + '个'
                }
              },
              legend: {
                data: me.xData,
                right: '3%',
                top: '10%',
                itemWidth: 11,
                itemHeight: 11,
                textStyle: {
                  color: '#ffffff',
                  fontSize: 13
                }
              },
              toolbox: {
                show: false,
              },
              xAxis: [
                {
                  type: 'category',
                  show: true,
                  axisTick: {
                    show: false,
                    alignWithLabel: true
                  },
                  axisLabel: {
                    rotate: 30,
                    color: '#333',
                  },
                  axisLine: {
                    show: true,
                    lineStyle: {
                      color: 'rgba(63, 158, 255, 1)'
                    }
                  },
                  data: me.xData
                }
              ],
              yAxis: {
                axisLabel:{
                  color:'#333'
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: 'rgba(63, 158, 255, 1)'
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    type: 'dashed',
                    color: 'rgba(33,148,246,0.2)'
                  }
                },
                axisTick: {
                  show: false
                },
                splitArea: {
                  show: true,
                  areaStyle: {
                    color: 'rgba(255,255,255,1)'
                  }
                },
                type: 'value',
                max: function(value) {
                  return value.max;
                },
                min: function(value) {
                  return value.min;
                },
              },
              series: [
                {
                  type:'bar',
                  label: {
                    normal: {
                      show: true,
                      position: 'top',
                      textStyle: {
                        color: '#ff9780'
                      }
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: "#ff9780" // 0% 处的颜色
                      }, {
                        offset: 1,
                        color: "#FFBD9C" // 100% 处的颜色
                      }], false)
                    }
                  },
                  barWidth: '40%',
                  yAxisIndex: 0,
                  data: me.yData
                }
              ]
            });
          },
        // 详情接问题查看详情展示
      lookOver(id){
        request.get(`/bis/insp/${id}`).then(res =>{
                if(res.success){
                  this.peopleDetail = res.data;
                  this.perInfoVisible = true;
                }else{
                  this.$message.error(res.message);
                }
              }).catch(err =>{
                this.$message.error(err);
              })

      }
        },
        watch:{
          adCode(n,o){
            this.adCode = n;
            this.getTableData();
          }
        },

    }
</script>

<style>
  .detailsTop,.detailsBottom{
    height: 30vh;
    overflow: auto;
  }
  .detailsBottom{
    margin-top: 2vh;
  }
  .process_line{
    z-index: 100000;
  }
  /*.v-modal{z-index: 1999 !important;}*/
</style>