<template>
  <div class="app-container home">
    <!-- 我的履职 -->
    <el-row :gutter="20" style="margin-bottom: 10px;">
      <el-col :sm="24" :lg="24">
        <el-card class="update-log">
          <div slot="header" class="sx">
            <div>我的履职</div>
            <el-date-picker v-model="monthValue" value-format="yyyyMM" format="yyyy年MM月" type="month"
              @change="changeYear" placeholder="选择年月">
            </el-date-picker>
          </div>
          <div class="my-lz">
            <el-col :span="5">
              <div class="name-box">
                <img :src="avatar" class="avatar-img">
                <div class="avatar-box">
                  <div class="userName">
                    <div>{{ user.nickName }}</div>
                    <div v-if="(performUserSet.real_xclz_num + performUserSet.real_bzlz_num)<performUserSet.lz_total">
                      履职进行中</div>
                    <div v-else>履职完成</div>
                  </div>
                  <div class="deptName" v-if="user.dept.deptName">{{ user.dept.deptName }} <span
                      v-if="user.dept.leader">（{{user.dept.leader }}）</span></div>
                </div>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="lvzhi-box">
                <div class="lz-img" style="background-color: #51D351;">
                  <img src="@/assets/images/wdlz.svg" alt="dark">
                </div>
                <div class="lz-title-box">
                  <div class="lztitle">
                    <div>{{ performUserSet.real_xclz_num + performUserSet.real_bzlz_num }}</div>
                    <div>{{ performUserSet.xclz_unit_type }}</div>
                  </div>
                  <div class="lzsubtitle">我的履职</div>
                </div>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="lvzhi-box">
                <div class="lz-img" style="background-color: #73A0FA;">
                  <img src="@/assets/images/xclz.svg" alt="dark">
                </div>
                <div class="lz-title-box">
                  <div class="lztitle">
                    <div>{{ performUserSet.real_xclz_num }}</div>
                    <div>{{ performUserSet.xclz_unit_type }}</div>
                  </div>
                  <div class="lzsubtitle">现场履职</div>
                </div>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="lvzhi-box">
                <div class="lz-img" style="background-color: #52C1F5;">
                  <img src="@/assets/images/bzlz.svg" alt="dark">
                </div>
                <div class="lz-title-box">
                  <div class="lztitle">
                    <div>{{ performUserSet.real_bzlz_num }}</div>
                    <div>{{ performUserSet.xclz_unit_type }}</div>
                  </div>
                  <div class="lzsubtitle">班组履职</div>
                </div>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="lvzhi-box">
                <div class="lz-img" style="background-color: #FB6260;">
                  <img src="@/assets/images/fxwt.svg" alt="dark">
                </div>
                <div class="lz-title-box">
                  <div class="lztitle">
                    <div>{{ performUserSet.problemNum }}</div>
                    <div>项</div>
                  </div>
                  <div class="lzsubtitle">发现问题</div>
                </div>
              </div>
            </el-col>
            <el-col :span="3">
              <div class="lvzhi-box">
                <div class="lz-img" style="background-color: #FF7A8C;">
                  <img src="@/assets/images/qjts.svg" alt="dark">
                </div>
                <div class="lz-title-box">
                  <div class="lztitle">
                    <div>{{ performUserSet.leaveDaysHistory }}</div>
                    <div>天</div>
                  </div>
                  <div class="lzsubtitle">请假天数</div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="lzhz-box">
                <div>应履职 {{ performUserSet.lz_total }} {{ performUserSet.xclz_unit_type }}</div>
                <div>现场履职 {{ performUserSet.xclz_num }} {{ performUserSet.xclz_unit_type }}</div>
                <div>班组履职 {{ performUserSet.bzlz_num }} {{ performUserSet.xclz_unit_type }}</div>
              </div>

            </el-col>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 履职概览 -->
    <el-row :gutter="20" style="margin-bottom: 10px;">
      <el-col :sm="24" :lg="24">
        <el-card class="update-log">
          <div slot="header" class="clearfix" style="display:flex;justify-content: space-between;">
            <div class="header-title">
              <div></div>
              <div>履职概览</div>
            </div>
            <!-- <div style="width: 95%;text-align: right;">
              <el-radio-group v-model="lzglType" size="small">
                <el-radio-button label="0">全部</el-radio-button>
                <el-radio-button label="1">同级</el-radio-button>
                <el-radio-button label="2">下级</el-radio-button>
              </el-radio-group>
            </div> -->
          </div>
          <div class="lzgl-body">
            <el-col :span="5">
              <div class="lzgl-box">
                <div class="lz-img" style="background-color: #E6E6FF;">
                  <img src="@/assets/images/zrs.svg" alt="dark">
                </div>
                <div class="lz-title-box">
                  <div class="lzsubtitle">总履职人数</div>
                  <div class="lztitle">
                    <div>{{lzInfo2.lzrs}}人</div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="lzgl-box">
                <div class="lz-img" style="background-color: #DBF7E9;">
                  <img src="@/assets/images/ywc.svg" alt="dark">
                </div>
                <div class="lz-title-box">
                  <div class="lzsubtitle">已完成</div>
                  <div class="lztitle">
                    <div>{{lzInfo2.wcrs}}人</div>
                  </div>
                  <div class="lznum" style="color: #00CC99;">{{formatBFb(lzInfo2.wcrsBfb)}}%</div>
                </div>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="lzgl-box">
                <div class="lz-img" style="background-color: #DBE6FF;">
                  <img src="@/assets/images/wwc.svg" alt="dark">
                </div>
                <div class="lz-title-box">
                  <div class="lzsubtitle">未完成</div>
                  <div class="lztitle">
                    <div>{{lzInfo2.wwcrs}}人</div>
                  </div>
                  <div class="lznum" style="color: #F96A6C;">{{formatBFb(lzInfo2.wwcrsBfb)}}%</div>
                </div>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="lzgl-box">
                <div class="lz-img" style="background-color: #FFF4E6;">
                  <img src="@/assets/images/qj.svg" alt="dark">
                </div>
                <div class="lz-title-box">
                  <div class="lzsubtitle">请假</div>
                  <div class="lztitle">
                    <div>{{lzInfo2.qj}}人</div>
                  </div>
                  <div class="lznum" style="color: #F96A6C;">天数：{{lzInfo2.qjts}}天</div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="glhz-box">
                <div class="glhz-title-box">
                  <div>履职次数</div>
                  <div style="color:#409EFF">{{lzInfo2.lzcs}}</div>
                </div>
                <div class="glhz-title-box">
                  <div>无问题数</div>
                  <div style="color:#0FD1B6">{{lzInfo2.wwts}}</div>
                </div>
                <div class="glhz-title-box">
                  <div>发现问题数</div>
                  <div style="color:#F67162">{{lzInfo2.fxwts}}</div>
                </div>
              </div>
            </el-col>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 单位排名&人员排名&领导概况 -->
    <el-row :gutter="20" style="margin-bottom: 10px;">
      <el-col :xs="24" :sm="24" :md="12" :lg="9">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <div class="header-title">
              <div></div>
              <div>单位排名</div>
            </div>
          </div>
          <div class="dwpm-body">
            <el-row class="dwpm-title-box">
              <el-col :span="2">
                <div>排名</div>
              </el-col>
              <el-col :span="10">
                <div>分公司</div>
              </el-col>
              <el-col :span="4">
                <div>应履职</div>
              </el-col>
              <el-col :span="4">
                <div>已履职</div>
              </el-col>
              <el-col :span="4">
                <div>履职率</div>
              </el-col>
            </el-row>
            <div v-if="dwpmList.length>0">
              <el-row class="dwpm-subtitle-box" v-for="(item, index) in dwpmList" :key="index">
                <el-col :span="2">
                  <div class="dwpm-subtitle-number"
                    :style="index == 0 ? 'background-color:rgba(255, 50, 50, 1);' : (index == 1 ? 'background-color:rgba(255, 152, 0, 1);' : (index == 2 ? 'background-color:rgba(255, 210, 0, 1);' : 'background-color:rgba(35, 145, 255, 1);'))">
                    {{ (index + 1) }}
                  </div>
                </el-col>
                <el-col :span="10">
                  <div class="dwpm-subtitle-name">{{ item.postName }}</div>
                </el-col>
                <el-col :span="4">
                  <div class="dwpm-subtitle-value">{{item.lzNum}}</div>
                </el-col>
                <el-col :span="4">
                  <div class="dwpm-subtitle-value">{{ item.realLzNum }}</div>
                </el-col>
                <el-col :span="4">
                  <div class="dwpm-subtitle-value">{{formatBFb(item.lzBfb)}}%</div>
                </el-col>
              </el-row>
            </div>

            <el-row v-else class="dwpm-subtitle-box">
              <el-col :span="24">
                <div class="nodata">暂无数据</div>
              </el-col>
            </el-row>



          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="9">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <div class="header-title">
              <div></div>
              <div>人员排名</div>
            </div>
          </div>
          <div class="rypm-body">
            <el-row class="rypm-title-box">
              <el-col :span="2">
                <div>排名</div>
              </el-col>
              <el-col :span="4">
                <div>姓名</div>
              </el-col>
              <el-col :span="3">
                <div>应履职</div>
              </el-col>
              <el-col :span="3">
                <div>已履职</div>
              </el-col>
              <el-col :span="4">
                <div>发现问题</div>
              </el-col>
              <el-col :span="8">
                <div>履职进度</div>
              </el-col>
            </el-row>
            <div v-if="rypmList.length>0">
              <el-row class="rypm-subtitle-box" v-for="(item, index) in rypmList" :key="index">
                <el-col :span="2">
                  <div class="rypm-subtitle-number" @click="showPerformRecord(item)"
                    :style="index == 0 ? 'background-color:rgba(255, 50, 50, 1);' : (index == 1 ? 'background-color:rgba(255, 152, 0, 1);' : (index == 2 ? 'background-color:rgba(255, 210, 0, 1);' : 'background-color:rgba(204, 204, 204, 1);'))">
                    {{ (index + 1) }}
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="rypm-subtitle-name" @click="showPerformRecord(item)">{{ item.nickName }}</div>
                </el-col>
                <el-col :span="3">
                  <div class="rypm-subtitle-value" @click="showPerformRecord(item)">
                    {{ item.lzTotal }}{{item.bzlzUnitType}}</div>
                </el-col>
                <el-col :span="3">
                  <div class="rypm-subtitle-value" style="color:#19BE6B" @click="showPerformRecord(item)">
                    {{ item.reallzNum }}{{item.bzlzUnitType}}
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="rypm-subtitle-value" style="color:#F56C6C" @click="showPerformRecord(item)">
                    {{ item.problemNum||0 }}</div>
                </el-col>
                <el-col :span="8">
                  <div @click="showPerformRecord(item)">
                    <el-progress :percentage="formatBFb(item.lzBfb)"
                      :color="index == 0 ? rypmColors.color1 : (index == 1 ? rypmColors.color2 : (index == 2 ? rypmColors.color3 : rypmColors.color4))"></el-progress>
                  </div>

                </el-col>
              </el-row>
            </div>

            <el-row v-else class="rypm-subtitle-box">
              <el-col :span="24">
                <div class="nodata">暂无数据</div>
              </el-col>
            </el-row>

          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="6">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <div class="header-title">
              <div></div>
              <div>领导概况</div>
            </div>
          </div>
          <div class="ldgk-body">
            <el-row class="ldgk-title-box">
              <el-col :span="10">
                <div>姓名</div>
              </el-col>
              <el-col :span="7">
                <div>应履职</div>
              </el-col>
              <el-col :span="7">
                <div>已履职</div>
              </el-col>
            </el-row>
            <div v-if="ldgkList.length>0">
              <el-row class="ldgk-subtitle-box" v-for="(item, index) in ldgkList" :key="index">
                <el-col :span="10">
                  <div class="ldgk-subtitle-name">{{ item.nickName  }}</div>
                </el-col>
                <el-col :span="7">
                  <div class="ldgk-subtitle-value">{{ item.lzTotal  }}{{item.xclzUnitType}}</div>
                </el-col>
                <el-col :span="7">
                  <div class="ldgk-subtitle-value" style="color:#19BE6B">{{ item.reallzNum }}{{item.xclzUnitType}}</div>
                </el-col>
              </el-row>
            </div>

            <el-row v-else class="ldgk-subtitle-box">
              <el-col :span="24">
                <div class="nodata">暂无数据</div>
              </el-col>
            </el-row>

          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 履职问题分布情况 -->
    <el-row :gutter="20" style="margin-bottom: 10px;">
      <el-col :sm="24" :lg="24">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <div class="header-title">
              <div></div>
              <div>履职问题分布情况</div>
            </div>
          </div>
          <div class="sc-body">
            <el-row>
              <el-col :span="8">
                <pie-chart :chart-data="pieChartData" @showValue="showValue" />
                <div class="scwt1-name">安全履职检查手册问题</div>
              </el-col>
              <el-col :span="8" style="margin-top: 60px;">
                <el-row class="scwt-percentage" v-for="(item,index) in firstInfo" :key="index">

                  <el-col :span="6" class="scwt-title"><span
                      @click="showValue({name:item.name,typeName:'firstName'})">{{item.name}}</span></el-col>
                  <el-col :span="14" style="margin: 0px 5px;"><span
                      @click="showValue({name:item.name,typeName:'firstName'})"><el-progress :text-inside="true"
                        :stroke-width="14" :percentage="Math.round(item.value/firstCount*100)" :color="customColor"
                        @click="showValue({name:item.name,typeName:'firstName'})"></el-progress></span></el-col>
                  <el-col :span="3" class="scwt-subtitle"><span
                      @click="showValue({name:item.name,typeName:'firstName'})">{{item.value}}</span></el-col>

                </el-row>
                <div class="scwt-name">手册一级目录问题</div>
              </el-col>
              <el-col :span="8" style="margin-top: 60px;">
                <el-row class="scwt-percentage" v-for="(item,index) in secondInfo" :key="index"
                  @click="showValue({name:item.name,typeName:'secondName'})">
                  <el-col :span="6" class="scwt-title"><span @click="showValue({name:item.name,typeName:'secondName'})">
                      {{item.name}}</span></el-col>
                  <el-col :span="14" style="margin: 0px 5px;"><span
                      @click="showValue({name:item.name,typeName:'secondName'})"><el-progress :text-inside="true"
                        :stroke-width="14" :percentage="Math.round(item.value/secondCount*100)"
                        :color="customColor"></el-progress></span></el-col>
                  <el-col :span="3" class="scwt-subtitle"><span
                      @click="showValue({name:item.name,typeName:'secondName'})">{{item.value}}</span></el-col>
                </el-row>
                <div class="scwt-name">手册二级目录问题</div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>


    <!-- 履职问题 弹窗 -->
    <el-dialog title="履职问题" :visible.sync="lzwtOpen" width="90%" append-to-body>
      <el-form :model="lzwtParams" ref="lzwtParams" size="small" :inline="true">
        <el-form-item label="手册名称" prop="handbookName">
          <el-input v-model="lzwtParams.handbookName" placeholder="请输入手册名称关键字" clearable />
        </el-form-item>
        <el-form-item label="一级目录" prop="firstName">
          <el-input v-model="lzwtParams.firstName" placeholder="请输入一级目录关键字" clearable />
        </el-form-item>
        <el-form-item label="二级目录" prop="secondName">
          <el-input v-model="lzwtParams.secondName" placeholder="请输入二级目录关键字" clearable />
        </el-form-item>
        <el-form-item label="日期范围">
          <el-date-picker v-model="monthrange2" style="width: 240px" value-format="yyyy-MM" type="monthrange"
            range-separator="-" start-placeholder="开始月份" end-placeholder="结束月份" clearable></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryLzwt">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryLzwt">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loadingLzwt" :data="performDetailsList">
        <el-table-column label="序号" align="center" type="index" width="50" />
        <el-table-column label="履职手册" prop="handbookName" :show-overflow-tooltip="true" />
        <el-table-column label="一级目录" prop="firstName" :show-overflow-tooltip="true" />
        <el-table-column label="二级目录" prop="secondName" :show-overflow-tooltip="true" />
        <el-table-column label="履职工程名称" prop="projectName" :show-overflow-tooltip="true" />
        <el-table-column label="发现问题/现场情况" prop="remark" :show-overflow-tooltip="true" />
        <el-table-column  v-hasPermi="['system:config:showResponsiblePerson']"  label="责任人" prop="responsiblePerson" :show-overflow-tooltip="true" />
        <el-table-column label="问题照片数" align="center" prop="imgNum" :show-overflow-tooltip="true" width="100">
          <template slot-scope="scope">
            <span class="address-box" @click="handleShow(scope.row)">{{scope.row.imgNum}}</span>
          </template>
        </el-table-column>
        <el-table-column label="履职类型" prop="type" :show-overflow-tooltip="true" width="80">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_lz_type" :value="scope.row.type" />
          </template>
        </el-table-column>
        <el-table-column label="履职定位" prop="address" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span class="address-box" @click="positioning(scope.row)">{{scope.row.address?scope.row.address:''}}</span>
          </template>
        </el-table-column>
        <el-table-column label="履职人" prop="nickName" :show-overflow-tooltip="true" width="100" />
        <el-table-column label="同行人" prop="otherUserName" :show-overflow-tooltip="true" />
        <el-table-column label="履职时间" prop="createTime" width="100" />
      </el-table>
      <pagination v-show="totalLzwt > 0" :total="totalLzwt" :page.sync="lzwtParams.pageNum"
        :limit.sync="lzwtParams.pageSize" @pagination="getProblemList" style="margin-bottom: 20px;" />
    </el-dialog>

    <!-- 地图定位 -->
    <el-dialog title="查看地址" :visible.sync="dialogMap" width="800PX" append-to-body v-if="sign">
      <div class="location-box">
        <template>
          <baidu-map style="height: 400px" class="map" :zoom="12" :center="center" :scroll-wheel-zoom="true">
            <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"></bm-map-type>
            <bm-marker :position="center" :dragging="true" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
          </baidu-map>
        </template>
      </div>
      <div class="map-address">{{mapAddress}}</div>
    </el-dialog>

    <el-dialog title="问题详情" :visible.sync="openWtxq" width="780px" append-to-body>

      <div class="wtxq-box">
        <div class="wtxq-top-box">
          <div class="title-box">{{issueData.projectName?issueData.projectName:'无'}}</div>
          <div class="subtitle-box">
            <div>{{issueData.handbookName?issueData.handbookName:'无'}}</div>
            <div>{{issueData.type==0?'现场履职':'班组履职'}}</div>
          </div>
          <div class="people-box">
            <div>履职人：{{issueData.nickName?issueData.nickName:'无'}}</div>
            <div>同行人：
              <div class="people">{{issueData.otherUserName?issueData.otherUserName:'无'}}</div>
            </div>
            <div>{{issueData.createTime?issueData.createTime:'暂无时间'}}</div>
          </div>
        </div>
        <div class="wtxq-center-box" style="margin-bottom:20px;">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-weight: 700;font-size: 15px;color: #333333;">履职检查重点</span>
            </div>
            <div class="center-box">
              <div class="title2-box">{{issueData.indexMap?issueData.indexMap.firstName:''}}</div>
              <div class="content-box">
                <span>{{issueData.indexMap?issueData.indexMap.secondName:''}}</span><span>{{issueData.indexMap?issueData.indexMap.secondContent:''}}</span>
              </div>
            </div>
          </el-card>
        </div>
        <div class="wtxq-bottom-box" style="margin-bottom:30px;">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-weight: 700;font-size: 13px;color: #D9001B;">发现问题</span>
            </div>
            <div class="title3">
              <div>现场情况</div>
              <div>{{issueData.remark?issueData.remark:'暂无情况'}}</div>
            </div>
            <el-divider  v-hasPermi="['system:config:showResponsiblePerson']"></el-divider>
            <div class="title3"  v-hasPermi="['system:config:showResponsiblePerson']">
              <div>责任人</div>
              <div>{{issueData.responsiblePerson?issueData.responsiblePerson:'暂无责任人'}}</div>
            </div>
            <el-divider></el-divider>
            <div class="img-box">
              <div class="img-name">照片</div>
              <div class="img-data" v-for='(item,index) in issueData.img' :key="index">
                <el-image class="avatar-img" :src="item.url" :preview-src-list="getSrcList(issueData.img)">
                </el-image>
              </div>
            </div>
          </el-card>
        </div>
        <!-- <div class="wtxq-bottom-box" style="margin-bottom:30px;" >
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="font-weight: 700;font-size: 13px;color: #D9001B;">整改结果</span>
            </div>
            <el-form ref="form" :model="form" label-width="80px">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="整改描述" prop="zgRemark">
                    <el-input type="textarea" v-model="form.zgRemark" placeholder="请填写整改描述" :disabled="isZgRemark">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="照片" prop="templateList" ref="templateList">
                    <el-upload :limit="3" :file-list="templateList" :multiple="false" accept=".jpg, .png"
                      :action="uploadImgUrl" :headers="headers" list-type="picture-card"
                      :on-preview="handlePictureCardPreview" :class="{'hide': isUploading}">
                      <i class="el-icon-plus"></i>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </div> -->
      </div>
    </el-dialog>


    <!-- 照片墙 -->
    <el-dialog :visible.sync="dialogImg">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>


    <PerformRecord :visible="dialogPerformRecord" :time="monthValue" @closeDialog="closeDialog"></PerformRecord>














  </div>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import {
    getUserProfile
  } from "@/api/system/user";
  import {
    performSetUserInfo
  } from "@/api/perform_set/user"
  import {
    performOverview,
    performDeptRank,
    performUserRank,
    performLeadRank,
    handbookInfo,
    handbookFirst,
    handbookSecond,
    getProblemList

  } from "@/api/index"

  import {
    getIssue
  } from "@/api/report/perform_issue";

  import {
    getToken
  } from "@/utils/auth";
  import PieChart from './dashboard/PieChart'
  import PerformRecord from './components/PerformRecord.vue'

  export default {
    name: "Index",
    dicts: ['sys_record_status', 'sys_lz_type'],
    components: {
      PieChart,
      PerformRecord
    },
    data() {
      return {
        lzglType: "0",
        user: {},
        performUserSet: {},
        dwpmList: [],
        rypmColors: {
          color1: 'rgba(255, 50, 50, 1)',
          color2: 'rgba(255, 152, 0, 1)',
          color3: 'rgba(255, 210, 0, 1)',
          color4: 'rgba(35, 145, 255, 1)'
        },
        rypmList: [],
        ldgkList: [],
        customColor: 'rgba(255, 122, 140, 1)',
        pieChartData: [],
        monthValue: "",
        lzInfo2: {},
        firstInfo: [],
        firstCount: 0,
        secondInfo: [],
        secondCount: 0,

        // 履职问题 弹窗
        lzwtOpen: false,
        lzwtParams: {
          handbookName: '',
          firstName: '',
          secondName: '',
          startTime: '',
          endTime: '',
          pageNum: 1,
          pageSize: 10,
        },
        loadingLzwt: false,
        performDetailsList: [],
        totalLzwt: 0,
        monthrange2: '',

        // 地图 弹窗
        sign: false,
        dialogMap: false,
        mapAddress: '',
        center: {
          lng: 0,
          lat: 0,
        },
        //问题详情
        openWtxq: false,
        // 履职问题详情数据
        issueData: {},
        isUploading: false,
        isZgRemark: false,
        form: {},

        // 图片
        headers: {
          Authorization: "Bearer " + getToken()
        },
        dialogImageUrl: '',
        dialogImg: false,
        isUploading: false,
        isZgRemark: false,
        baseUrl: process.env.VUE_APP_BASE_API,
        uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
        templateList: [],
        uploadList: [],

        //
        dialogPerformRecord: false,




      };
    },
    computed: {
      ...mapGetters([
        'sidebar',
        'avatar',
        'device'
      ]),
    },
    created() {
      let year = new Date().getFullYear();
      let month = new Date().getMonth() + 1;
      month = month <= 9 ? '0' + month : month;
      this.monthValue = (year + month).toString();
      this.getUser();
      this.init();

    },
    methods: {
      init() {
        this.getPerformSetUserInfo();
        this.performOverview();
        this.performDeptRank();
        this.performUserRank();
        this.performLeadRank();
        this.handbookInfo();
        this.handbookFirst();
        this.handbookSecond();
      },
      getUser() {
        getUserProfile().then(response => {
          this.user = response.data;
          this.roleGroup = response.roleGroup;
          this.postGroup = response.postGroup;
        });
      },
      getPerformSetUserInfo() {
        performSetUserInfo({
          yyyyMM: this.monthValue
        }).then(response => {
          // console.log(response.data);
          this.performUserSet = response.data;
        });
      },
      performOverview() {
        performOverview({
          yyyymm: this.monthValue
        }).then(res => {

          let ls = {};
          ls.lzrs = res.data.personNum || 0;
          ls.wcrs = res.data.endNum || 0;
          if(ls.lzrs==0){
            ls.wcrsBfb =0
          }else{
            ls.wcrsBfb = (ls.wcrs / ls.lzrs * 100).toFixed(1)
          }
          ls.wwcrs = ls.lzrs - ls.wcrs;
          ls.wwcrsBfb = 100 - ls.wcrsBfb;
          console.log("ls.wwcrsBfb",ls.wwcrsBfb);
          ls.qj = res.data.leavePerson || 0;
          ls.qjts = res.data.leaveNum || 0;
          ls.wwts = res.data.noProblemNum || 0;
          ls.fxwts = res.data.problemNum || 0;
          ls.lzcs = ls.wwts + ls.fxwts;
          this.lzInfo2 = ls;
          // this.performUserSet = response.data;
        });
      },
      performDeptRank() {
        performDeptRank({
          yyyymm: this.monthValue
        }).then(res => {
          this.dwpmList = res.rows;
        })
      },
      performUserRank() {
        performUserRank({
          yyyymm: this.monthValue
        }).then(res => {
          this.rypmList = res.rows;
        })
      },
      performLeadRank() {
        performLeadRank({
          yyyymm: this.monthValue
        }).then(res => {
          this.ldgkList = res.rows;

        })
      },
      handbookInfo() {
        this.pieChartData = [];
        handbookInfo({
          yyyyMM: this.monthValue
        }).then(res => {
          let ls = [];
          res.rows.forEach(item => {
            ls.push({
              name: item.name,
              value: item.num
            })
          })
          this.pieChartData = ls;
        })
      },
      handbookFirst() {
        this.firstCount = 0;

        handbookFirst({
          yyyyMM: this.monthValue
        }).then(res => {
          this.firstInfo = [];
          res.rows.forEach(item => {
            this.firstInfo.push({
              name: item.name,
              value: item.num
            })
            this.firstCount += item.num;
          })
          // this.ldgkList=res.rows;
        })
      },
      handbookSecond() {
        this.secondCount = 0;
        handbookSecond({
          yyyyMM: this.monthValue
        }).then(res => {
          this.secondInfo = [];
          res.rows.forEach(item => {
            this.secondInfo.push({
              name: item.name,
              value: item.num
            })
            this.secondCount += item.num;
          })
          // this.ldgkList=res.rows;
        })
      },
      formatBFb(value) {
        if (value == null || value == '' || value == 0) {
          return 0;
        } else if (value == 100) {
          return 100
        } else {
          return parseFloat(parseFloat(value).toFixed(1));
        }

      },

      changeYear() {
        this.init()
      },
      showValue(e) {
        this.lzwtParams = {
          handbookName: '',
          firstName: '',
          secondName: '',
          startTime: '',
          endTime: '',
          pageNum: 1,
          pageSize: 10,
        }
        this.lzwtParams[e.typeName] = e.name;
        this.lzwtOpen = true;

        let lsDate=this.monthValue.slice(0, 4) + '-' + this.monthValue.slice(4);

        this.monthrange2=[lsDate,lsDate]
         this.handleQueryLzwt();
      },
      handleQueryLzwt() {
        this.lzwtParams.pageNum = 1;
        console.log(this.monthrange2);

        if (this.monthrange2[0]) {
          this.lzwtParams.startTime = this.monthrange2[0] + '-01'
        } else {
          this.lzwtParams.startTime = ''
        }
        if (this.monthrange2[1]) {
          this.lzwtParams.endTime = this.monthrange2[1] + '-' + this.getLastDayOfMonth(this.monthrange2[1])
        } else {
          this.lzwtParams.endTime = ''
        }
        this.getProblemList();

      },
      resetQueryLzwt() {
        this.lzwtParams = {
          handbookName: '',
          firstName: '',
          secondName: '',
          startTime: '',
          endTime: '',
          pageNum: 1,
          pageSize: 10,
        }
        this.getProblemList();

      },
      getProblemList() {
        let f = {};

        f = {
          ...this.lzwtParams
        };
        getProblemList(f).then(res => {
          this.performDetailsList = res.rows;
          this.totalLzwt = res.total;
        })

      },
      positioning(row) {
        this.sign = true;
        this.dialogMap = true;
        //经度和纬度
        this.center.lng = Number(row.lon);
        this.center.lat = Number(row.lat);
        this.mapAddress = row.address;
      },
      getLastDayOfMonth(date) {
        const currentDate = new Date(date);
        const year = currentDate.getFullYear();
        const month = currentDate.getMonth() + 1; // 月份从0开始，需要加1
        const lastDayOfMonth = new Date(year, month, 0).getDate();
        return lastDayOfMonth;
      },
      /** 详情按钮操作 */
      handleShow(row) {
        this.isUploading = true;
        this.isZgRemark = true;
        getIssue(row.id).then(response => {
          this.issueData = response.data;
          // 问题照片赋值
          const imgData = [];
          if (response.data.img && JSON.parse(response.data.img).length > 0) {
            JSON.parse(response.data.img).forEach(item => {
              imgData.push({
                url: process.env.VUE_APP_BASE_API + item.url,
              });
            });
          }
          this.issueData.img = imgData;
          //整改描述赋值
          this.form.zgRemark = response.data.zgRemark ? response.data.zgRemark : '';
          // 整改图片赋值
          if (response.data.zgImg) {
            JSON.parse(response.data.zgImg).forEach(item => {
              this.templateList.push({
                url: process.env.VUE_APP_BASE_API + item.url,
                fileName: item.url,
              });
            });
          }
          this.openWtxq = true;
        });
      },
      getSrcList(urls) {
        let arr = [];
        urls.forEach(item => {
          arr.push(item.url);
        })
        return arr;
      },
      showPerformRecord(item) {
        this.dialogPerformRecord = true;
      },
      closeDialog() {
        this.dialogPerformRecord = false;
      }


    }
  };
</script>

<style scoped lang="scss">
  .home {
    .my-lz {
      display: flex;
      align-items: center;

      .name-box {
        display: flex;
        align-items: center;

        .avatar-img {
          width: 65px;
          height: 65px;
          border-radius: 65px;
        }

        .avatar-box {
          margin-left: 30px;

          .userName {
            display: flex;
            align-items: center;

            div:nth-child(1) {
              font-size: 18px;
              font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
              font-weight: 700;
              color: #666666;
            }

            div:nth-child(2) {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 75px;
              height: 23px;
              background: inherit;
              background-color: rgba(255, 153, 0, 1);
              border: none;
              border-radius: 5px;
              font-size: 11px;
              color: #FFFFFF;
              margin-left: 20px;
            }
          }

          .deptName {
            font-family: 'Arial Normal', 'Arial', sans-serif;
            font-weight: 400;
            color: #999999;
            font-size: 13px;
            margin-top: 5px;
          }
        }

      }

      .lvzhi-box {
        display: flex;
        align-items: center;

        .lz-img {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 60px;
          height: 60px;
          box-shadow: rgba(0, 0, 0, 0.047) 0px 0px 5px;
          font-family: "微软雅黑 Bold", 微软雅黑, sans-serif;
          font-weight: 700;
          font-style: normal;
          font-size: 28px;
          color: rgb(255, 255, 255);
          border-radius: 10px;

          img {
            width: 40px;
            height: 40px
          }
        }

        .lz-title-box {
          margin-left: 20px;

          .lztitle {
            display: flex;
            align-items: center;

            div:nth-child(1) {
              font-size: 28px;
              font-family: 'Montserrat Bold', 'Montserrat', sans-serif;
              font-weight: 700;
              color: #666666;
            }

            div:nth-child(2) {
              font-family: '方正小标宋_GBK', sans-serif;
              font-weight: 400;
              font-size: 13px;
              color: #666666;
              margin: 8px 0px 0px 10px;
            }
          }

          .lzsubtitle {
            font-size: 14px;
            font-family: '微软雅黑', sans-serif;
            font-weight: 400;
            color: #999999;
          }
        }

      }

      .lzhz-box {
        font-family: '方正小标宋_GBK', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        color: #FF9900;
        text-align: left;

        div {
          margin-bottom: 10px;
        }
      }
    }

    .lzgl-body {
      display: flex;
      align-items: center;

      .lzgl-box {
        display: flex;

        .lz-img {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 60px;
          height: 60px;
          box-shadow: rgba(0, 0, 0, 0.047) 0px 0px 5px;
          font-family: "微软雅黑 Bold", 微软雅黑, sans-serif;
          font-weight: 700;
          font-style: normal;
          font-size: 28px;
          color: rgb(255, 255, 255);
          border-radius: 60px;

          img {
            width: 30px;
            height: 30px
          }
        }

        .lz-title-box {
          margin-left: 20px;

          .lztitle {
            display: flex;
            align-items: center;
            margin: 5px 0px;

            div:nth-child(1) {
              font-size: 28px;
              font-family: 'Montserrat Bold', 'Montserrat', sans-serif;
              font-weight: 700;
              color: #333333;
            }
          }

          .lzsubtitle {
            font-size: 14px;
            font-family: '微软雅黑', sans-serif;
            font-weight: 400;
            color: #666666;
          }

          .lznum {
            font-family: 'Arial Normal', 'Arial', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 13px;
          }
        }
      }

      .glhz-box {

        .glhz-title-box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 10px 0px;

          div:nth-child(1) {
            font-size: 13px;
            color: #333333;
            font-family: 'Arial Normal', 'Arial', sans-serif;
            font-weight: 400;
            font-style: normal;
          }

          div:nth-child(2) {
            font-family: 'Montserrat Bold', 'Montserrat', sans-serif;
            font-weight: 700;
            font-style: normal;
            font-size: 16px;
          }
        }
      }
    }

    .dwpm-body {
      .dwpm-title-box {
        font-family: 微软雅黑, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        color: rgb(153, 153, 153)
      }

      .dwpm-subtitle-box {
        margin-top: 18px;

        .dwpm-subtitle-number {
          display: table-cell;
          border-radius: 5px;
          background-color: #f0f2f5;
          width: 25px;
          height: 25px;
          text-align: center;
          vertical-align: middle;
          font-family: "Arial Normal", "Arial", sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 13px;
          letter-spacing: normal;
          color: #FFFFFF
        }

        .dwpm-subtitle-name {
          font-family: "MicrosoftYaHei", "Microsoft YaHei", sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.647058823529412);
          text-align: left;
          line-height: 22px;
        }

        .dwpm-subtitle-value {
          display: flex;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.647058823529412);
          text-align: right;
          line-height: 22px;
          font-family: "Arial Normal", "Arial", sans-serif;
          font-weight: 400;
          font-style: normal;
        }
      }
    }

    .rypm-body {
      .rypm-title-box {
        font-family: 微软雅黑, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        color: rgb(153, 153, 153)
      }

      .rypm-subtitle-box {
        margin-top: 18px;

        .rypm-subtitle-number {
          display: table-cell;
          border-radius: 5px;
          background-color: #f0f2f5;
          width: 25px;
          height: 25px;
          text-align: center;
          vertical-align: middle;
          font-family: "Arial Normal", "Arial", sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 13px;
          letter-spacing: normal;
          color: #FFFFFF;
          cursor: pointer;
        }

        .rypm-subtitle-name {
          font-family: "MicrosoftYaHei", "Microsoft YaHei", sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.647058823529412);
          text-align: left;
          line-height: 22px;
          cursor: pointer;
        }

        .rypm-subtitle-value {
          display: flex;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.647058823529412);
          text-align: right;
          line-height: 22px;
          font-family: "Arial Normal", "Arial", sans-serif;
          font-weight: 400;
          font-style: normal;
          cursor: pointer;
        }
      }
    }

    .ldgk-body {
      .ldgk-title-box {
        font-family: 微软雅黑, sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        color: rgb(153, 153, 153)
      }

      .ldgk-subtitle-box {
        margin-top: 18px;

        .ldgk-subtitle-name {
          font-family: "MicrosoftYaHei", "Microsoft YaHei", sans-serif;
          font-weight: 400;
          font-style: normal;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.647058823529412);
          text-align: left;
          line-height: 25px;
        }

        .ldgk-subtitle-value {
          display: flex;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.647058823529412);
          text-align: right;
          line-height: 25px;
          font-family: "Arial Normal", "Arial", sans-serif;
          font-weight: 400;
          font-style: normal;
        }
      }
    }

    .sc-body {
      .scwt-percentage {
        display: flex;
        align-items: center;
        margin-bottom: 30px;

        .scwt-title {
          font-size: 13px;
          text-align: right;
          color: #333333;
        }

        .scwt-subtitle {
          font-size: 13px;
          color: #2C3542;
        }
      }

      .scwt-name {
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 13px;
        color: #666666;
        margin: 30px 0px;
        text-align: center;
        cursor: pointer;
      }

      .scwt1-name {
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 13px;
        color: #666666;
        text-align: center;
        cursor: pointer;
      }
    }

    .header-title {
      display: flex;
      align-items: center;

      div:nth-child(1) {
        width: 5px;
        height: 15px;
        background-color: #31A7FF;
        margin-right: 5px;
      }
    }
  }

  .sx {
    display: flex;
    justify-content: space-between;
    align-items: center;

  }

  .nodata {
    color: #ccc;
    text-align: center;
    padding: 20px;
  }


  .img-num-box {
    font-size: 13px;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #409EFF;
    cursor: pointer;
  }

  .address-box {
    font-size: 13px;
    font-family: 微软雅黑, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: rgb(64, 158, 255);
    cursor: pointer;
  }

  .wtxq-box {
    .wtxq-top-box {
      display: flex;
      flex-direction: column;

      .title-box {
        font-size: 16px;
        font-family: '微软雅黑 Bold', '微软雅黑', sans-serif;
        font-style: normal;
        font-weight: 700;
        margin-bottom: 10px;
      }

      .subtitle-box {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: '微软雅黑', sans-serif;
        font-weight: 400;
        color: #333333;
        margin-bottom: 10px;

        div:nth-child(2) {
          margin-left: 100px;
        }
      }

      .people-box {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: '微软雅黑', sans-serif;
        font-weight: 400;
        margin-bottom: 10px;
        color: #333333;

        div:nth-child(2) {
          margin-left: 30px;
          display: flex;
          align-items: center;

          .people {
            margin-right: 10px;
            margin-left: 0px;
          }
        }

        div:nth-child(3) {
          color: #999999;
          margin-left: 85px;
        }
      }
    }
  }

  .wtxq-center-box {
    .center-box {
      width: 100%;
      padding: 10px;
      background: inherit;
      background-color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(228, 228, 228, 1);
      border-radius: 8px;
      font-family: 'Arial Normal', 'Arial', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 15px;
      letter-spacing: normal;
      color: #333333;

      .title2-box {
        letter-spacing: normal;
        color: #333333;
        font-family: '微软雅黑 Bold', '微软雅黑', sans-serif;
        font-weight: 700;
        font-size: 15px;
      }

      .content-box {
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        color: #000000;
        font-size: 13px;

        span:nth-child(1) {
          font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
          font-weight: 700;
        }
      }
    }
  }

  .wtxq-bottom-box {
    .title3 {
      display: flex;
      align-items: center;
      font-size: 13px;

      div:nth-child(1) {
        width: 60px;
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        font-style: normal;
        color: #333333;
      }

      div:nth-child(2) {
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        font-style: normal;
        color: #999999;
      }
    }

    .img-box {
      display: flex;
      align-items: center;
      font-size: 13px;

      .img-name {
        width: 60px;
        font-family: "Arial Normal", "Arial", sans-serif;
        font-weight: 400;
        font-style: normal;
        color: #333333;
      }

      .img-data {
        width: 78px;
        margin-right: 20px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .img-none {
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        font-style: normal;
        color: #999999;
      }
    }
  }

  .el-divider--horizontal {
    margin: 10px 0;
  }

  .map-address {
    font-family: '微软雅黑 Bold', '微软雅黑', sans-serif;
    font-weight: 700;
    color: #666666;
    font-size: 16px;
    text-align: center;
    margin-top: 30px;
  }

  .hide .el-upload--picture-card {
    display: none;
  }
</style>
<style>
  .el-progress-bar__innerText {
    color: #ffffff !important;
  }
</style>
