1.登录跳转智能分析页面，2.保安员证样式，3.智能分析派遣echarts

guanqb

2023-12-28 3d5fc8c51fac346f5445388ec654b671ab8d1141

1.登录跳转智能分析页面，2.保安员证样式，3.智能分析派遣echarts

 src/api/securityAnalysis/securityAnalysis.js

@@ -1,4 +1,4 @@
import request from '@/router/axios';
import request from '@/router/axios'

export const getinformationselectExtype = (deptid, jurisdiction) => { //保安员审查情况统计  只需要公司的deptid
    return request({
@@ -123,4 +123,14 @@
            jurisdiction: jurisdiction,
        }
    })
}

export const getPQStatistics = (params) => {
    return request({
        url: '/api/dispatcher/getStatistics',
        method: 'get',
        params: {
            ...params
        }
    })
}

 src/page/login/userlogin.vue

@@ -1,196 +1,156 @@
<template>
  <el-form
    class="login-form"
    status-icon
    :rules="loginRules"
    ref="loginForm"
    :model="loginForm"
    label-width="0"
  >
    <!-- <el-form-item v-if="tenantMode" prop="tenantId"> -->
    <el-form-item v-if="false" prop="tenantId">
      <el-input
        size="small"
        @keyup.enter.native="handleLogin"
        v-model="loginForm.tenantId"
        auto-complete="off"
        :placeholder="$t('login.tenantId')"
      >
        <i slot="prefix" class="icon-quanxian" />
      </el-input>
    </el-form-item>
    <el-form-item prop="username">
      <el-input
        size="small"
        @keyup.enter.native="handleLogin"
        v-model="loginForm.username"
        auto-complete="off"
        :placeholder="$t('login.username')"
      >
        <i slot="prefix" class="icon-yonghu" />
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        size="small"
        @keyup.enter.native="handleLogin"
        :type="passwordType"
        v-model="loginForm.password"
        auto-complete="off"
        :placeholder="$t('login.password')"
      >
        <i
          class="el-icon-view el-input__icon"
          slot="suffix"
          @click="showPassword"
        />
        <i slot="prefix" class="icon-mima" />
      </el-input>
    </el-form-item>
    <el-form-item v-if="this.website.captchaMode" prop="code">
      <el-row :span="24">
        <el-col :span="16">
          <el-input
            size="small"
            @keyup.enter.native="handleLogin"
            v-model="loginForm.code"
            auto-complete="off"
            :placeholder="$t('login.code')"
          >
            <i slot="prefix" class="icon-yanzhengma" />
          </el-input>
        </el-col>
        <el-col :span="8">
          <div class="login-code">
            <img
              :src="loginForm.image"
              class="login-code-img"
              @click="refreshCode"
            />
          </div>
        </el-col>
      </el-row>
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        size="small"
        @click.native.prevent="handleLogin"
        class="login-submit"
        >{{ $t("login.submit") }}
      </el-button>
    </el-form-item>
  </el-form>
    <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
        <!-- <el-form-item v-if="tenantMode" prop="tenantId"> -->
        <el-form-item v-if="false" prop="tenantId">
            <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.tenantId" auto-complete="off"
                :placeholder="$t('login.tenantId')">
                <i slot="prefix" class="icon-quanxian" />
            </el-input>
        </el-form-item>
        <el-form-item prop="username">
            <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.username" auto-complete="off"
                :placeholder="$t('login.username')">
                <i slot="prefix" class="icon-yonghu" />
            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input size="small" @keyup.enter.native="handleLogin" :type="passwordType" v-model="loginForm.password"
                auto-complete="off" :placeholder="$t('login.password')">
                <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword" />
                <i slot="prefix" class="icon-mima" />
            </el-input>
        </el-form-item>
        <el-form-item v-if="this.website.captchaMode" prop="code">
            <el-row :span="24">
                <el-col :span="16">
                    <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.code" auto-complete="off"
                        :placeholder="$t('login.code')">
                        <i slot="prefix" class="icon-yanzhengma" />
                    </el-input>
                </el-col>
                <el-col :span="8">
                    <div class="login-code">
                        <img :src="loginForm.image" class="login-code-img" @click="refreshCode" />
                    </div>
                </el-col>
            </el-row>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="small" @click.native.prevent="handleLogin" class="login-submit">{{
                $t("login.submit") }}
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import { mapGetters } from "vuex";
import { info } from "@/api/system/tenant";
import { getCaptcha } from "@/api/user";
import { getTopUrl } from "@/util/util";
import { mapGetters } from "vuex"
import { info } from "@/api/system/tenant"
import { getCaptcha } from "@/api/user"
import { getTopUrl } from "@/util/util"

export default {
  name: "userlogin",
  data() {
    return {
      tenantMode: this.website.tenantMode,
      loginForm: {
        //保安单位ID
        tenantId: "000000",
        //用户名
        username: "",
        //密码
        password: "",
        //账号类型
        type: "account",
        //验证码的值
        code: "",
        //验证码的索引
        key: "",
        //预加载白色背景
        image:
          "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
      },
      loginRules: {
        tenantId: [
          { required: false, message: "请输入保安单位ID", trigger: "blur" },
        ],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 1, message: "密码长度最少为6位", trigger: "blur" },
        ],
      },
      passwordType: "password",
    };
  },
  created() {
    this.getTenant();
    this.refreshCode();
  },
  mounted() {},
  computed: {
    ...mapGetters(["tagWel","userInfo"]),
  },
  props: [],
  methods: {
    refreshCode() {
      getCaptcha().then((res) => {
        const data = res.data;
        this.loginForm.key = data.key;
        this.loginForm.image = data.image;
      });
    name: "userlogin",
    data () {
        return {
            tenantMode: this.website.tenantMode,
            loginForm: {
                //保安单位ID
                tenantId: "000000",
                //用户名
                username: "",
                //密码
                password: "",
                //账号类型
                type: "account",
                //验证码的值
                code: "",
                //验证码的索引
                key: "",
                //预加载白色背景
                image:
                    "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
            },
            loginRules: {
                tenantId: [
                    { required: false, message: "请输入保安单位ID", trigger: "blur" },
                ],
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" },
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    { min: 1, message: "密码长度最少为6位", trigger: "blur" },
                ],
            },
            passwordType: "password",
        }
    },
    showPassword() {
      this.passwordType === ""
        ? (this.passwordType = "password")
        : (this.passwordType = "");
    created () {
        this.getTenant()
        this.refreshCode()
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "登录中,请稍后。。。",
            spinner: "el-icon-loading",
          });
          this.$store
            .dispatch("LoginByUsername", this.loginForm)
            .then(() => {

              console.log(this.userInfo)
              let path = this.tagWel.value
              if (this.userInfo.role_name.indexOf("考勤管理员")>-1){
                path = "check/record"
              }
              this.$router.push({ path: path });
              loading.close();
    mounted () { },
    computed: {
        ...mapGetters(["tagWel", "userInfo"]),
    },
    props: [],
    methods: {
        refreshCode () {
            getCaptcha().then((res) => {
                const data = res.data
                this.loginForm.key = data.key
                this.loginForm.image = data.image
            })
            .catch(() => {
              loading.close();
              this.refreshCode();
            });
        }
      });
        },
        showPassword () {
            this.passwordType === ""
                ? (this.passwordType = "password")
                : (this.passwordType = "")
        },
        handleLogin () {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    const loading = this.$loading({
                        lock: true,
                        text: "登录中,请稍后。。。",
                        spinner: "el-icon-loading",
                    })
                    this.$store
                        .dispatch("LoginByUsername", this.loginForm)
                        .then(() => {

                            console.log(this.userInfo)
                            // let path = this.tagWel.value登录跳转首页改完跳转保安单位情况智能分析
                            let path = '/securityAnalysis'
                            if (this.userInfo.role_name.indexOf("考勤管理员") > -1) {
                                path = "check/record"
                            }
                            this.$router.push({ path: path })
                            loading.close()
                        })
                        .catch(() => {
                            loading.close()
                            this.refreshCode()
                        })
                }
            })
        },
        getTenant () {
            let domain = getTopUrl()
            // 临时指定域名，方便测试
            //domain = "https://bladex.vip";
            info(domain).then((res) => {
                const data = res.data
                if (data.success && data.data.tenantId) {
                    this.tenantMode = false
                    this.loginForm.tenantId = data.data.tenantId
                    this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`
                }
            })
        },
    },
    getTenant() {
      let domain = getTopUrl();
      // 临时指定域名，方便测试
      //domain = "https://bladex.vip";
      info(domain).then((res) => {
        const data = res.data;
        if (data.success && data.data.tenantId) {
          this.tenantMode = false;
          this.loginForm.tenantId = data.data.tenantId;
          this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
        }
      });
    },
  },
};
}
</script>

<style>
</style>
<style></style>

 src/views/securityAnalysis/index.vue

@@ -1,13 +1,13 @@
<template>
  <div class="securityAnalysis">
    <!-- securityAnalysis -->
    <div class="securityAnalysisleft">
      <!-- 保安员审查情况统计
    <div class="securityAnalysis">
        <!-- securityAnalysis -->
        <div class="securityAnalysisleft">
            <!-- 保安员审查情况统计
        <div>饼图</div> -->
      <!-- </div> -->
            <!-- </div> -->

      <div class="examinesBtn" v-if="examineBtnVisiable">
        <!-- <el-radio-group
            <div class="examinesBtn" v-if="examineBtnVisiable">
                <!-- <el-radio-group
          v-model="tabPosition"
          size="small"
          @change="handleClick"
@@ -15,1063 +15,994 @@
          <el-radio-button label="1">保安员审查情况统计</el-radio-button>
          <el-radio-button label="2">企业登录预警情况统计</el-radio-button>
        </el-radio-group> -->
        <el-dropdown class="examinesBtnChouse" @command="handleClick">
          <span class="el-dropdown-link">
            {{ examinesBtnChousetext }} <i class="el-icon-caret-bottom"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">保安员审查情况统计</el-dropdown-item>
            <el-dropdown-item command="2"
              >企业登录预警情况统计</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <!-- <div class="examinesBtnChouse">
                <el-dropdown class="examinesBtnChouse" @command="handleClick">
                    <span class="el-dropdown-link">
                        {{ examinesBtnChousetext }} <i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="1">保安员审查情况统计</el-dropdown-item>
                        <el-dropdown-item command="2">企业登录预警情况统计</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!-- <div class="examinesBtnChouse">
          {{ examinesBtnChousetext }} <i class="el-icon-caret-bottom"></i>
        </div> -->
      </div>
      <div class="examines" v-show="showECH1">
        <img
          src="http://60.220.177.113:2081/img/table.png"
          alt=""
          class="myToolbox"
          @click="openMyToolBox('保安员审查情况明细', 1)"
        />
        <div id="ech1" class="examinesin" ref="ech1">1</div>
      </div>
      <div class="examiness" v-show="!showECH1">
        <img
          src="http://60.220.177.113:2081/img/table.png"
          alt=""
          class="myToolbox"
          @click="openMyToolBox('企业登录情况明细', 7)"
        />
        <div id="ech1s" class="examinessin" ref="ech1s"></div>
      </div>
      <!-- 保安员审查情况统计
            </div>
            <div class="examines" v-show="showECH1">
                <img src="http://60.220.177.113:2081/img/table.png" alt="" class="myToolbox"
                    @click="openMyToolBox('保安员审查情况明细', 1)" />
                <div id="ech1" class="examinesin" ref="ech1">1</div>
            </div>
            <div class="examiness" v-show="!showECH1">
                <img src="http://60.220.177.113:2081/img/table.png" alt="" class="myToolbox"
                    @click="openMyToolBox('企业登录情况明细', 7)" />
                <div id="ech1s" class="examinessin" ref="ech1s"></div>
            </div>
            <!-- 保安员审查情况统计
        <div>饼图</div> -->
      <div class="certificate">
        <img
          src="http://60.220.177.113:2081/img/table.png"
          alt=""
          class="myToolbox"
          @click="openMyToolBox('保安员持证情况明细', 2)"
        />
        <div class="certificatein" ref="ech2">
          <!-- 保安员持证情况统计
            <div class="certificate">
                <img src="http://60.220.177.113:2081/img/table.png" alt="" class="myToolbox"
                    @click="openMyToolBox('保安员持证情况明细', 2)" />
                <div class="certificatein" ref="ech2">
                    <!-- 保安员持证情况统计
        <div>饼图</div> -->
        </div>
      </div>
                </div>
            </div>

      <!-- <div class="czbut"></div> -->
    </div>
    <div class="securityAnalysiscenter">
      <div class="examination">
        <img
          src="http://60.220.177.113:2081/img/table.png"
          alt=""
          class="myToolbox"
          @click="openMyToolBox('保安员考试情况明细', 3)"
        />
        <div class="examinationin" ref="ech3">
          <!-- 保安员考试情况统计
            <!-- <div class="czbut"></div> -->
        </div>
        <div class="securityAnalysiscenter">
            <div class="examination">
                <img src="http://60.220.177.113:2081/img/table.png" alt="" class="myToolbox"
                    @click="openMyToolBox('保安员考试情况明细', 3)" />
                <div class="examinationin" ref="ech3">
                    <!-- 保安员考试情况统计
        <div>堆叠面积图</div> -->
        </div>
      </div>
                </div>
            </div>

      <div class="dispatchUnit">
        <img
          src="http://60.220.177.113:2081/img/table.png"
          alt=""
          class="myToolbox"
          @click="openMyToolBox('派遣服务单位明细', 4)"
        />
        <div class="dispatchUnitin" ref="ech4">
          <!-- 派遣服务单位统计
            <div class="dispatchUnit">
                <img src="http://60.220.177.113:2081/img/table.png" alt="" class="myToolbox"
                    @click="openMyToolBox('派遣服务单位明细', 4)" />
                <div class="dispatchUnitin" ref="ech4">
                    <!-- 派遣服务单位统计
        <div>柱状图</div> -->
                </div>
            </div>
        </div>
      </div>
    </div>
    <div class="securityAnalysisright">
      <div class="dispatchSecurity">
        <img
          src="http://60.220.177.113:2081/img/table.png"
          alt=""
          class="myToolbox"
          @click="openMyToolBox('保安员年龄分布情况明细', 5)"
        />
        <div class="dispatchSecurityin" ref="ech5">
          <!-- 保安员年龄分布情况统计
        <div class="securityAnalysisright">
            <div class="dispatchSecurity">
                <img src="http://60.220.177.113:2081/img/table.png" alt="" class="myToolbox"
                    @click="openMyToolBox('保安员年龄分布情况明细', 5)" />
                <div class="dispatchSecurityin" ref="ech5">
                    <!-- 保安员年龄分布情况统计
        <div>饼图</div> -->
        </div>
      </div>
      <div class="socialSecurity">
        <img
          src="http://60.220.177.113:2081/img/table.png"
          alt=""
          class="myToolbox"
          @click="openMyToolBox('保安员学历分布情况明细', 6)"
        />
        <div class="socialSecurityin" ref="ech6">
          <!-- 社保缴纳情况统计
                </div>
            </div>
            <div class="socialSecurity">
                <img src="http://60.220.177.113:2081/img/table.png" alt="" class="myToolbox"
                    @click="openMyToolBox('保安员学历分布情况明细', 6)" />
                <div class="socialSecurityin" ref="ech6">
                    <!-- 社保缴纳情况统计
        <div>饼图</div> -->
                </div>
            </div>
        </div>
      </div>
    </div>
    <div>
      <el-dialog
        width="80%"
        :title="titles"
        append-to-body
        :visible.sync="dialogVisible"
        lock-scroll="false"
        top="1vh"
        center
      >
        <situation
          :card="{ deptId: deptid, jurisdiction: jurisdiction }"
          v-if="sees == 1"
        >
          <!-- 保安员审查情况统计 -->
        </situation>
        <div>
            <el-dialog width="80%" :title="titles" append-to-body :visible.sync="dialogVisible" lock-scroll="false"
                top="1vh" center>
                <situation :card="{ deptId: deptid, jurisdiction: jurisdiction }" v-if="sees == 1">
                    <!-- 保安员审查情况统计 -->
                </situation>

        <loginRecord :card="{ jurisdiction: jurisdiction }" v-if="sees == 7">
          <!-- 保安员审查情况统计 -->
        </loginRecord>
                <loginRecord :card="{ jurisdiction: jurisdiction }" v-if="sees == 7">
                    <!-- 保安员审查情况统计 -->
                </loginRecord>

        <certificate
          :card="{ deptId: deptid, jurisdiction: jurisdiction }"
          v-if="sees == 2"
        >
          <!-- 保安员持证情况统计 -->
        </certificate>
        <examination
          :card="{ deptid: deptid, jurisdiction: jurisdiction }"
          v-if="sees == 3"
        >
          <!-- 保安员考试情况统计 -->
        </examination>
        <dispatch
          :card="{ deptId: deptid, jurisdiction: jurisdiction }"
          v-if="sees == 4"
        >
          <!-- 派遣服务单位 注意deptId  I为大写 -->
        </dispatch>
        <assignment
          :card="{ deptid: deptid, jurisdiction: jurisdiction }"
          v-if="sees == 5"
        >
          <!-- 保安派遣情况 -->
        </assignment>
        <socialSecurity
          :card="{ deptid: deptid, jurisdiction: jurisdiction }"
          :reself="dialogVisible"
          v-if="sees == 6"
        >
          <!-- 社保缴纳情况 -->
        </socialSecurity>
      </el-dialog>
                <certificate :card="{ deptId: deptid, jurisdiction: jurisdiction }" v-if="sees == 2">
                    <!-- 保安员持证情况统计 -->
                </certificate>
                <examination :card="{ deptid: deptid, jurisdiction: jurisdiction }" v-if="sees == 3">
                    <!-- 保安员考试情况统计 -->
                </examination>
                <dispatch :card="{ deptId: deptid, jurisdiction: jurisdiction }" v-if="sees == 4">
                    <!-- 派遣服务单位 注意deptId  I为大写 -->
                </dispatch>
                <assignment :card="{ deptid: deptid, jurisdiction: jurisdiction }" v-if="sees == 5">
                    <!-- 保安派遣情况 -->
                </assignment>
                <socialSecurity :card="{ deptid: deptid, jurisdiction: jurisdiction }" :reself="dialogVisible"
                    v-if="sees == 6">
                    <!-- 社保缴纳情况 -->
                </socialSecurity>
            </el-dialog>
        </div>
    </div>
  </div>
</template>
<script>
import {
  getinformationselectExtype, //保安员审查情况统计
  getinformationselectHold, //保安员持证
  getinformationselectDis, //派遣服务单位
  getinformationstatistics, //保安员考试情况统计
  getExamStatisInfo, //保安员考试情况统计
  getinformationselectDisp, //保安派遣情况
  getAgeStatistics, //保安员年龄分布情况
  getinformationselectSoil, //社保缴纳情况统计
  getEducationStatistics,
  getLoginDataStatistics
} from "@/api/securityAnalysis/securityAnalysis";
import { mapGetters } from "vuex";
import { mapState } from "vuex";
import { getRoleDetail } from "@/api/system/role";
import certificate from "./child/certificate.vue";
import examination from "./child/examination.vue";
import situation from "./child/situation.vue";
import loginRecord from "./child/loginRecord.vue";
import dispatch from "./child/dispatch.vue";
import assignment from "./child/assignment.vue";
import socialSecurity from "./child/socialSecurity.vue";
    getinformationselectExtype, //保安员审查情况统计
    getinformationselectHold, //保安员持证
    getinformationselectDis, //派遣服务单位
    getinformationstatistics, //保安员考试情况统计
    getExamStatisInfo, //保安员考试情况统计
    getinformationselectDisp, //保安派遣情况
    getAgeStatistics, //保安员年龄分布情况
    getinformationselectSoil, //社保缴纳情况统计
    getEducationStatistics,
    getLoginDataStatistics,
    getPQStatistics//派遣服务单位统计修改
} from "@/api/securityAnalysis/securityAnalysis"
import { mapGetters } from "vuex"
import { mapState } from "vuex"
import { getRoleDetail } from "@/api/system/role"
import certificate from "./child/certificate.vue"
import examination from "./child/examination.vue"
import situation from "./child/situation.vue"
import loginRecord from "./child/loginRecord.vue"
import dispatch from "./child/dispatch.vue"
import assignment from "./child/assignment.vue"
import socialSecurity from "./child/socialSecurity.vue"
export default {
  components: {
    certificate,
    examination,
    situation,
    dispatch,
    assignment,
    socialSecurity,
    loginRecord
  },
  data() {
    return {
      EC1: "", //保安员审查情况统计 // 饼图
      EC1s: "", //登录预警统计 // 饼图
      EC2: "", //保安员持证情况统计 // 饼图
      EC3: "", //保安员考试情况统计 // 堆叠面积图
      EC4: "", //派遣服务单位统计 // 柱状图
      EC5: "", //保安派遣情况统计 // 饼图
      EC6: "", //社保缴纳情况统计 // 饼图
      deptid: "",
      oneVisiable: true,
      examineBtnVisiable: true,
      jurisdiction: "",
      tabPosition: 1,
      examinetionTitle: "保安员审查情况统计",
      examine1: [],
      dialogVisible: false,
      titles: "",
      sees: "",
      colors: ["#29C093", "#F34A4A"], //[正常，异常]；
      showECH1: true, //显示保安员审查情况统计或企业登录预警情况统计
      changeSizeTime: null,
      examinesBtnChousetext: "保安员审查情况统计"
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    }),
    ...mapGetters(["windowWidth", "windowHeight"]),
    ids1() {
      let ids1 = [];
      this.selectionList1.forEach(ele => {
        ids1.push(ele.id);
      });
      return ids1.join(",");
    components: {
        certificate,
        examination,
        situation,
        dispatch,
        assignment,
        socialSecurity,
        loginRecord
    },
    ids2() {
      let ids2 = [];
      this.selectionList2.forEach(ele => {
        ids2.push(ele.id);
      });
      return ids2.join(",");
    }
  },
  watch: {
    dialogVisible() {
      if (this.dialogVisible == false && this.sees == "1") {
        this.getEC1(this.tabPosition);
      }
      if (this.dialogVisible == false && this.sees == "2") {
        this.getEC2();
      }
      if (this.dialogVisible == false && this.sees == "3") {
        this.getEC3();
      }
      if (this.dialogVisible == false && this.sees == "4") {
        this.getEC4();
      }
      if (this.dialogVisible == false && this.sees == "5") {
        this.getEC5();
      }
      if (this.dialogVisible == false && this.sees == "6") {
        this.getEC6();
      }
    },
    windowWidth() {
      let that = this;
      if (that.changeSizeTime) {
        return;
      } else {
        that.changeSizeTime = setTimeout(() => {
          that.changeSize();
          clearTimeout(that.changeSizeTime);
          that.changeSizeTime = null;
        }, 600);
      }
    },
    windowHeight() {
      let that = this;
      if (that.changeSizeTime) {
        return;
      } else {
        that.changeSizeTime = setTimeout(() => {
          that.changeSize();
          clearTimeout(that.changeSizeTime);
          that.changeSizeTime = null;
        }, 600);
      }
    }
  },
  methods: {
    //更新图表尺寸
    changeSize() {
      console.log("更新图表尺寸");
      this.EC1.resize();
      this.EC1s.resize();
      this.EC2.resize();
      this.EC3.resize();
      this.EC4.resize();
      this.EC5.resize();
      this.EC6.resize();
    },
    //tab 切换
    handleClick(val) {
      // if (val == this.tabPosition) {
      //   return;
      // }
      if (val == 1) {
        this.showECH1 = true;
        this.examinesBtnChousetext = "保安员审查情况统计";
      } else {
        this.showECH1 = false;
        this.examinesBtnChousetext = "企业登录预警情况统计";
      }
      this.tabPosition = val;
      this.getEC1(val);
    },
    creatOurEcharts() {
      // return;
      this.EC1 = echarts.init(this.$refs.ech1);
      this.EC1s = echarts.init(this.$refs.ech1s);
      this.EC2 = echarts.init(this.$refs.ech2);
      this.EC3 = echarts.init(this.$refs.ech3);
      this.EC4 = echarts.init(this.$refs.ech4);
      this.EC5 = echarts.init(this.$refs.ech5);
      this.EC6 = echarts.init(this.$refs.ech6);
      this.biginOUREC();
    },
    changedata(a, ok, no, okmsg, nomsg) {
      var d = [];
      if (a.length != 0) {
        var yes = 0,
          not = 0;
        for (var k in a) {
          yes += a[k][ok];
          not += a[k][no];
    data () {
        return {
            EC1: "", //保安员审查情况统计 // 饼图
            EC1s: "", //登录预警统计 // 饼图
            EC2: "", //保安员持证情况统计 // 饼图
            EC3: "", //保安员考试情况统计 // 堆叠面积图
            EC4: "", //派遣服务单位统计 // 柱状图
            EC5: "", //保安派遣情况统计 // 饼图
            EC6: "", //社保缴纳情况统计 // 饼图
            deptid: "",
            oneVisiable: true,
            examineBtnVisiable: true,
            jurisdiction: "",
            tabPosition: 1,
            examinetionTitle: "保安员审查情况统计",
            examine1: [],
            dialogVisible: false,
            titles: "",
            sees: "",
            colors: ["#29C093", "#F34A4A"], //[正常，异常]；
            showECH1: true, //显示保安员审查情况统计或企业登录预警情况统计
            changeSizeTime: null,
            examinesBtnChousetext: "保安员审查情况统计"
        }
        d = [
          {
            value: yes,
            name: okmsg
          },
          {
            value: not,
            name: nomsg
          }
        ];
      } else {
        d = [
          {
            value: 0,
            name: okmsg
          },
          {
            value: 0,
            name: nomsg
          }
        ];
      }
      // console.log(d, ok, no);
      return d;
    },
    getTime() {
      var data = new Date();
      var time = data.toLocaleString().slice(0, 9);
      return time;
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo
        }),
        ...mapGetters(["windowWidth", "windowHeight"]),
        ids1 () {
            let ids1 = []
            this.selectionList1.forEach(ele => {
                ids1.push(ele.id)
            })
            return ids1.join(",")
        },
        ids2 () {
            let ids2 = []
            this.selectionList2.forEach(ele => {
                ids2.push(ele.id)
            })
            return ids2.join(",")
        }
    },
    GetPercent(num, total) {
      num = parseFloat(num);
      total = parseFloat(total);
      if (isNaN(num) || isNaN(total)) {
        return "-";
      }
      return total <= 0
        ? "0%"
        : Math.round((num / total) * 10000) / 100.0 + "%";
    },
    openMyToolBox(titles, id) {
      var that = this;
      that.dialogVisible = true;
      that.sees = id;
      that.titles = titles;
    },
    gettoolbox(title, titles, id) {
      //由于在1366，,768分辨率下，会被覆盖掉不能点击，所以放弃
      return;
      var that = this;
      return {
        show: false,
        itemSize: 25,
        top: 5,
        right: 15,
        feature: {
          myTool1: {
            show: true,
            zlevel: 999,
            z: 999,
            title: "点击查看详情",
            icon: "image://http://60.220.177.113:2081/img/table.png",
            onclick: function() {
              that.dialogVisible = true;
              that.sees = id;
              that.titles = titles;
    watch: {
        dialogVisible () {
            if (this.dialogVisible == false && this.sees == "1") {
                this.getEC1(this.tabPosition)
            }
          }
        }
      };
    },
    setColor(d, color) {
      for (var k in d) {
        var itemStyle = {
          color: color[k]
        };
        d[k]["itemStyle"] = itemStyle;
      }
      console.log(d);
      return d;
    },
    getEC1(tab) {
      var that = this;
      if (tab == 1) {
        getinformationselectExtype(this.deptid, this.jurisdiction)
          .then(res => {
            var a = res.data.data;
            var b = that.changedata(a, "zc", "bzc", "情况正常", "情况异常");
            that.setEC1(b);
            that.EC1.resize();
          })
          .catch(res => {
            var b = that.changedata([], "zc", "bzc", "情况正常", "情况异常");
            that.setEC1(b);
            that.EC1.resize();
          });
      }
      if (tab == 2) {
        getLoginDataStatistics(this.jurisdiction).then(res => {
          var b = res.data.data;
          var data = [
            {
              value: b[0],
              name: "近14天登录企业数"
            },
            {
              value: b[1],
              name: "近14天未登录企业数"
            if (this.dialogVisible == false && this.sees == "2") {
                this.getEC2()
            }
          ];
          that.setEC1s(data);
          that.EC1s.resize();
        });
      }
    },
    setEC1(d) {
      this.examine1 = [
        {
          title: "审查时间：",
          value: this.getTime()
            if (this.dialogVisible == false && this.sees == "3") {
                this.getEC3()
            }
            if (this.dialogVisible == false && this.sees == "4") {
                this.getEC4()
            }
            if (this.dialogVisible == false && this.sees == "5") {
                this.getEC5()
            }
            if (this.dialogVisible == false && this.sees == "6") {
                this.getEC6()
            }
        },
        {
          title: "问题保安员人数：",
          value: d[1].value + "人"
        windowWidth () {
            let that = this
            if (that.changeSizeTime) {
                return
            } else {
                that.changeSizeTime = setTimeout(() => {
                    that.changeSize()
                    clearTimeout(that.changeSizeTime)
                    that.changeSizeTime = null
                }, 600)
            }
        },
        {
          title: "问题保安员比例：",
          value: this.GetPercent(+d[1].value, +d[0].value + +d[1].value)
        windowHeight () {
            let that = this
            if (that.changeSizeTime) {
                return
            } else {
                that.changeSizeTime = setTimeout(() => {
                    that.changeSize()
                    clearTimeout(that.changeSizeTime)
                    that.changeSizeTime = null
                }, 600)
            }
        }
      ];
      var option, data;
      data = this.setColor(d, this.colors);
      option = {
        title: {
          text: this.examinetionTitle,
          top: 25,
          left: "center"
    },
    methods: {
        //更新图表尺寸
        changeSize () {
            console.log("更新图表尺寸")
            this.EC1.resize()
            this.EC1s.resize()
            this.EC2.resize()
            this.EC3.resize()
            this.EC4.resize()
            this.EC5.resize()
            this.EC6.resize()
        },
        tooltip: {
          trigger: "item"
        //tab 切换
        handleClick (val) {
            // if (val == this.tabPosition) {
            //   return;
            // }
            if (val == 1) {
                this.showECH1 = true
                this.examinesBtnChousetext = "保安员审查情况统计"
            } else {
                this.showECH1 = false
                this.examinesBtnChousetext = "企业登录预警情况统计"
            }
            this.tabPosition = val
            this.getEC1(val)
        },
        legend: {
          x: "center",
          y: "90%",
        creatOurEcharts () {
            // return;
            this.EC1 = echarts.init(this.$refs.ech1)
            this.EC1s = echarts.init(this.$refs.ech1s)
            this.EC2 = echarts.init(this.$refs.ech2)
            this.EC3 = echarts.init(this.$refs.ech3)
            this.EC4 = echarts.init(this.$refs.ech4)
            this.EC5 = echarts.init(this.$refs.ech5)
            this.EC6 = echarts.init(this.$refs.ech6)
            this.biginOUREC()
        },
        // toolbox: this.gettoolbox("审查情况查询", "保安员审查情况明细", 1),
        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: "50%",
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            label: {
              formatter: "{name|{b}}\n({d}%)",
              rich: {
                time: {
                  fontSize: 10,
                  color: "#999"
        changedata (a, ok, no, okmsg, nomsg) {
            var d = []
            if (a.length != 0) {
                var yes = 0,
                    not = 0
                for (var k in a) {
                    yes += a[k][ok]
                    not += a[k][no]
                }
              }
                d = [
                    {
                        value: yes,
                        name: okmsg
                    },
                    {
                        value: not,
                        name: nomsg
                    }
                ]
            } else {
                d = [
                    {
                        value: 0,
                        name: okmsg
                    },
                    {
                        value: 0,
                        name: nomsg
                    }
                ]
            }
          }
        ]
      };
            return d
        },
        getTime () {
            var data = new Date()
            var time = data.toLocaleString().slice(0, 9)
            return time
        },
        GetPercent (num, total) {
            num = parseFloat(num)
            total = parseFloat(total)
            if (isNaN(num) || isNaN(total)) {
                return "-"
            }
            return total <= 0
                ? "0%"
                : Math.round((num / total) * 10000) / 100.0 + "%"
        },
        openMyToolBox (titles, id) {
            var that = this
            that.dialogVisible = true
            that.sees = id
            that.titles = titles
        },
        gettoolbox (title, titles, id) {
            //由于在1366，,768分辨率下，会被覆盖掉不能点击，所以放弃
            return
        },
        setColor (d, color) {
            for (var k in d) {
                var itemStyle = {
                    color: color[k]
                }
                d[k]["itemStyle"] = itemStyle
            }
            return d
        },
        getEC1 (tab) {
            var that = this
            if (tab == 1) {
                getinformationselectExtype(this.deptid, this.jurisdiction)
                    .then(res => {
                        var a = res.data.data
                        var b = that.changedata(a, "zc", "bzc", "情况正常", "情况异常")
                        that.setEC1(b)
                        that.EC1.resize()
                    })
                    .catch(res => {
                        var b = that.changedata([], "zc", "bzc", "情况正常", "情况异常")
                        that.setEC1(b)
                        that.EC1.resize()
                    })
            }
            if (tab == 2) {
                getLoginDataStatistics(this.jurisdiction).then(res => {
                    var b = res.data.data
                    var data = [
                        {
                            value: b[0],
                            name: "近14天登录企业数"
                        },
                        {
                            value: b[1],
                            name: "近14天未登录企业数"
                        }
                    ]
                    that.setEC1s(data)
                    that.EC1s.resize()
                })
            }
        },
        setEC1 (d) {
            this.examine1 = [
                {
                    title: "审查时间：",
                    value: this.getTime()
                },
                {
                    title: "问题保安员人数：",
                    value: d[1].value + "人"
                },
                {
                    title: "问题保安员比例：",
                    value: this.GetPercent(+d[1].value, +d[0].value + +d[1].value)
                }
            ]
            var option, data
            data = this.setColor(d, this.colors)
            option = {
                title: {
                    text: this.examinetionTitle,
                    top: 25,
                    left: "center"
                },
                tooltip: {
                    trigger: "item"
                },
                legend: {
                    x: "center",
                    y: "90%",
                },
                // toolbox: this.gettoolbox("审查情况查询", "保安员审查情况明细", 1),
                series: [
                    {
                        // name: "访问来源",
                        type: "pie",
                        radius: "50%",
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        },
                        label: {
                            formatter: "{name|{b}}\n({d}%)",
                            rich: {
                                time: {
                                    fontSize: 10,
                                    color: "#999"
                                }
                            }
                        }
                    }
                ]
            }

      this.EC1.setOption(option);
    },
    //登录情况统计
    setEC1s(d) {
      var option, data;
      data = this.setColor(d, this.colors);
      option = {
        title: {
          text: "",
          top: 25,
          left: "center"
            this.EC1.setOption(option)
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          x: "center",
          y: "90%"
        },
        // toolbox: this.gettoolbox("登录情况查询", "企业登录情况明细", 7),
        series: [
          {
            type: "pie",
            radius: "50%",
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            label: {
              formatter: "{name|{b}}\n({d}%)",
              rich: {
                time: {
                  fontSize: 10,
                  color: "#999"
                }
              }
        //登录情况统计
        setEC1s (d) {
            var option, data
            data = this.setColor(d, this.colors)
            option = {
                title: {
                    text: "",
                    top: 25,
                    left: "center"
                },
                tooltip: {
                    trigger: "item"
                },
                legend: {
                    x: "center",
                    y: "90%"
                },
                // toolbox: this.gettoolbox("登录情况查询", "企业登录情况明细", 7),
                series: [
                    {
                        type: "pie",
                        radius: "50%",
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        },
                        label: {
                            formatter: "{name|{b}}\n({d}%)",
                            rich: {
                                time: {
                                    fontSize: 10,
                                    color: "#999"
                                }
                            }
                        }
                    }
                ]
            }
          }
        ]
      };
      this.EC1s.setOption(option);
            this.EC1s.setOption(option)
        },
        getEC2 () {
            var that = this
            getinformationselectHold(this.deptid, this.jurisdiction)
                .then(res => {
                    var a = res.data.data
                    var b = that.changedata(a, "cz", "wcz", "持证", "未持证")
                    that.setEC2(b)
                })
                .catch(res => {
                    var b = that.changedata([], "cz", "wcz", "持证", "未持证")
                    that.setEC2(b)
                })
        },
        setEC2 (data) {
            var option
            var that = this
            data = this.setColor(data, this.colors)
            option = {
                title: {
                    text: "保安员持证情况统计",
                    // subtext: "纯属虚构",
                    top: 25,
                    left: "center"
                },
                tooltip: {
                    trigger: "item"
                },
                legend: {
                    // orient: "vertical",
                    // left: "left", x: "center",
                    x: "center",
                    y: "83%"
                },
                // toolbox: this.gettoolbox("持证情况查询", "保安员持证情况明细", 2),
                series: [
                    {
                        // name: "访问来源",
                        type: "pie",
                        radius: "50%",
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        },
                        label: {
                            formatter: "{name|{b}}\n({d}%)",
                            rich: {
                                time: {
                                    fontSize: 10,
                                    color: "#999"
                                }
                            }
                        }
                    }
                ]
            }

            this.EC2.setOption(option)
        },
        getEC3 () {
            getExamStatisInfo(this.deptid, this.jurisdiction).then(res => {
                this.setEC3(res.data.data)
            })
        },
        //考试数据统计
        setEC3 (data) {
            //获取年份
            const seriesdata = []
            data.forEach(item => {
                if (item.type == 1) {
                    seriesdata.push({
                        name: item.name + "-合格人数",
                        type: "bar",
                        stack: item.name,
                        emphasis: {
                            focus: "series"
                        },
                        data: item.examSocreStatis
                    })
                }
                if (item.type == 2) {
                    seriesdata.push({
                        name: item.name + "-不合格人数",
                        type: "bar",
                        stack: item.name,
                        emphasis: {
                            focus: "series"
                        },
                        data: item.examSocreStatis
                    })
                }
            })
            var datetime = [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月"
            ]
            //echarts 图表数据
            var option = {
                title: {
                    text: "保安员考试情况统计",
                    left: "center",
                    top: 20
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                color: ["#91CD76", "#EF6667"],
                legend: {
                    data: ["a", "b"],
                    icon: "circle",
                    itemWidth: 10,
                    itemHeight: 10,
                    itemGap: 20
                },
                // toolbox: this.gettoolbox("考试情况查询", "保安员考试情况明细", 3),
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        data: datetime
                    }
                ],
                yAxis: [
                    {
                        type: "value"
                    }
                ],
                series: seriesdata
            }

            this.EC3.setOption(option)
        },
        getEC4 () {
            let params = {}
            if (this.userInfo.role_name.split(",").indexOf("admin") == -1 && this.userInfo.role_name.split(",").indexOf("administrator") == -1) {
                params = {
                    deptId: this.userInfo.dept_id
                }
            }
            getPQStatistics(params).then(res => {
                this.setEC4(res.data.data)
            })
        },
        setEC4 (chartData) {
            let data1 = []
            let data2 = []
            let categories = []
            if (chartData.length == 0) {//没数据也展示xy轴
                data1 = [{ value: 0 }]
                data2 = [{ value: 0 }]
                categories = ['']
            }
            chartData.forEach(item => {
                data1.push({ value: item.holdNum == -1 ? 0 : item.holdNum, deptId: item.deptId, type: '持证', companyName: item.unitName })
                data2.push({ value: item.unHoldNum == -1 ? 0 : item.unHoldNum, deptId: item.deptId, type: '未持证', companyName: item.unitName })
                categories.push(item.unitName)
            })
            var option = {
                title: {
                    text: "派遣服务单位统计",
                    top: 20,
                    left: "center"
                },
                legend: {
                    data: ["持证", "未持证"],
                    textStyle: {
                        // color: "white" // 更改图例文本颜色
                    },
                    top: 20,
                    right: 100
                },
                grid: {
                    left: "10%", // 设置图表左边距
                    top: "15%",
                    bottom: "15%",
                },
                xAxis: {
                    type: "category",
                    data: categories,
                    axisLabel: {
                        // rotate: 45,//x轴标签倾斜
                        textStyle: {
                            // color: "#ffffff", // 设置x轴标签字体颜色
                            fontSize: 12
                        }
                    }
                },
                yAxis: {
                    axisLabel: {
                        // textStyle: {
                        //     color: "#ffffff" // 设置y轴标签字体颜色
                        // }
                    },
                    minInterval: 1,
                },
                series: [
                    {
                        name: "持证",
                        type: "bar",
                        data: data1,
                        barMaxWidth: 50,
                        itemStyle: {
                            color: "#29c093"
                        }
                    },
                    {
                        name: "未持证",
                        type: "bar",
                        data: data2,
                        barMaxWidth: 50,
                        itemStyle: {
                            color: "#f34a4a"
                        }
                    }
                ]
            }
            this.EC4.setOption(option)
        },
        getEC5 () {
            var that = this
            getAgeStatistics(this.deptid, this.jurisdiction).then(res => {
                var data = res.data.data
                var a = [
                    {
                        value: data[0],
                        name: "18-30周岁"
                    },
                    {
                        value: data[1],
                        name: "30-45周岁"
                    },
                    {
                        value: data[2],
                        name: "45-60周岁"
                    }
                ]
                this.setEC5(a)
            })
        },
        setEC5 (d) {
            var option
            // d = this.setColor(d, this.colors);
            option = {
                title: {
                    text: "保安员年龄分布情况统计",
                    // subtext: "纯属虚构",
                    top: 25,
                    left: "center"
                },
                tooltip: {
                    trigger: "item"
                },
                // toolbox: this.gettoolbox(
                //   "保安员年龄分布情况查询",
                //   "保安员年龄分布情况明细",
                //   5
                // ),
                legend: {
                    x: "center",
                    y: "90%"
                },
                series: [
                    {
                        type: "pie",
                        radius: "50%",
                        data: d,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        },
                        label: {
                            formatter: "{b}\n({d}%)"
                        }
                    }
                ]
            }

            this.EC5.setOption(option)
        },
        getEC6 () {
            var that = this
            getEducationStatistics(this.deptid, this.jurisdiction).then(res => {
                var a = res.data.data
                that.setEC6(a)
            })
        },
        setEC6 (d) {
            var option
            // d = this.setColor(d, this.colors);
            option = {
                title: {
                    text: "保安员学历分布情况统计",
                    top: 25,
                    left: "center"
                },
                tooltip: {
                    trigger: "item"
                },
                // toolbox: this.gettoolbox(
                //   "保安员学历分布情况查询",
                //   "保安员学历分布情况明细",
                //   6
                // ),
                legend: {
                    // left: "left",
                    x: "center",
                    y: "83%"
                },
                series: [
                    {
                        // name: "访问来源",
                        type: "pie",
                        radius: "50%",
                        data: d,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        },
                        label: {
                            // alignTo: "edge",
                            formatter: "{name|{b}}\n({d}%)",
                            // minMargin: 5,
                            // edgeDistance: 10,
                            // lineHeight: 15,
                            rich: {
                                time: {
                                    fontSize: 10,
                                    color: "#999"
                                }
                            }
                        }
                    }
                ]
            }

            this.EC6.setOption(option)
        },
        biginOUREC () {
            this.getEC1(1)
            this.getEC2()
            this.getEC3()
            this.getEC4()
            this.getEC5()
            this.getEC6()
            // this.setEC1();
            // this.setEC2();
            // this.setEC3();
            // this.setEC4();
            // this.setEC5();
            // this.setEC6();
        }
    },
    getEC2() {
      var that = this;
      getinformationselectHold(this.deptid, this.jurisdiction)
        .then(res => {
          var a = res.data.data;
          var b = that.changedata(a, "cz", "wcz", "持证", "未持证");
          that.setEC2(b);
    created () {
        if (
            this.userInfo.role_name == "保安公司管理员" ||
            this.userInfo.role_name == "分公司管理员"
        ) {
            this.examinetionTitle = "保安员审查情况统计"
            this.examineBtnVisiable = false
        } else {
            this.examinetionTitle = ""
        }
    },
    mounted () {
        this.$nextTick(() => {
            var roleIds = this.userInfo.role_id.split(",")
            roleIds.forEach(roleId => {
                getRoleDetail(roleId).then(res => {
                    var roleAlias = res.data.data.roleAlias
                    var roleName = res.data.data.roleName
                    if (roleName != "保安公司管理员" && roleName != "分公司管理员") {
                        this.deptid = ""
                        this.jurisdiction = this.userInfo.jurisdiction
                    } else {
                        this.deptid = this.userInfo.dept_id
                        this.jurisdiction = ""
                    }
                    this.creatOurEcharts()
                })
            })
        })
        .catch(res => {
          var b = that.changedata([], "cz", "wcz", "持证", "未持证");
          that.setEC2(b);
        });
    },
    setEC2(data) {
      var option;
      var that = this;
      data = this.setColor(data, this.colors);
      // console.log(data, "持证");
      option = {
        title: {
          text: "保安员持证情况统计",
          // subtext: "纯属虚构",
          top: 25,
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          // orient: "vertical",
          // left: "left", x: "center",
          x: "center",
          y: "83%"
        },
        // toolbox: this.gettoolbox("持证情况查询", "保安员持证情况明细", 2),
        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: "50%",
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            label: {
              formatter: "{name|{b}}\n({d}%)",
              rich: {
                time: {
                  fontSize: 10,
                  color: "#999"
                }
              }
            }
          }
        ]
      };

      this.EC2.setOption(option);
    },
    getEC3() {
      getExamStatisInfo(this.deptid, this.jurisdiction).then(res => {
        this.setEC3(res.data.data);
      });
    },
    //考试数据统计
    setEC3(data) {
      //获取年份
      const seriesdata = [];
      data.forEach(item => {
        if (item.type == 1) {
          seriesdata.push({
            name: item.name + "-合格人数",
            type: "bar",
            stack: item.name,
            emphasis: {
              focus: "series"
            },
            data: item.examSocreStatis
          });
        }
        if (item.type == 2) {
          seriesdata.push({
            name: item.name + "-不合格人数",
            type: "bar",
            stack: item.name,
            emphasis: {
              focus: "series"
            },
            data: item.examSocreStatis
          });
        }
      });
      var datetime = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
      ];
      //echarts 图表数据
      var option = {
        title: {
          text: "保安员考试情况统计",
          left: "center",
          top: 20
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        color: ["#91CD76", "#EF6667"],
        legend: {
          data: ["a", "b"],
          icon: "circle",
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 20
        },
        // toolbox: this.gettoolbox("考试情况查询", "保安员考试情况明细", 3),
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: datetime
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: seriesdata
      };

      this.EC3.setOption(option);
    },
    getEC4() {
      var date = new Date();
      var nowYear = date.getFullYear();
      var that = this;
      getinformationselectDis(this.deptid, this.jurisdiction).then(res => {
        var a = res.data,
          d = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

        var setNum = (start, end, i) => {
          // console.log(start, end, i);
          for (let a = +start - 1; a < +end; a++) {
            ++d[a];
          }
        };
        for (var k = 0; k < a.length; k++) {
          var overYear = a[k].end_time.slice(0, 4);
          var overMout = a[k].end_time.slice(5, 7);
          var bigYear = a[k].start_time.slice(0, 4);
          var bigMout = a[k].start_time.slice(5, 7);
          if (overYear > nowYear) {
            if (bigYear < nowYear) {
              setNum(1, 12, k);
            } else if (bigYear == nowYear) {
              setNum(+bigMout, 12, k);
            }
          } else if (overYear == nowYear) {
            if (bigYear < nowYear) {
              setNum(1, +overMout, k);
            } else if (bigYear == nowYear) {
              setNum(+bigMout, +overMout, k);
            }
          }
        }
        that.setEC4(d);
      });
    },
    setEC4(data) {
      var xxd = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
      ];
      var date = new Date();
      var d = date.getFullYear();
      // console.log(d);
      var option = {
        title: {
          text: "派遣服务单位统计",
          top: 20,
          left: "center"
        },
        xAxis: {
          type: "category",
          data: xxd
          // data: xd,
        },
        // toolbox: this.gettoolbox("派遣单位查询", "派遣服务单位明细", 4),
        yAxis: {
          type: "value"
        },
        tooltip: {
          trigger: "item",
          formatter: d + "年{b} : {c} 个"
        },
        series: [
          {
            data: data,
            type: "bar"
          }
        ]
      };
      this.EC4.setOption(option);
    },
    getEC5() {
      var that = this;
      getAgeStatistics(this.deptid, this.jurisdiction).then(res => {
        var data = res.data.data;
        var a = [
          {
            value: data[0],
            name: "18-30周岁"
          },
          {
            value: data[1],
            name: "30-45周岁"
          },
          {
            value: data[2],
            name: "45-60周岁"
          }
        ];
        console.log(a, "111111");
        this.setEC5(a);
      });
    },
    setEC5(d) {
      var option;
      // d = this.setColor(d, this.colors);
      option = {
        title: {
          text: "保安员年龄分布情况统计",
          // subtext: "纯属虚构",
          top: 25,
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        // toolbox: this.gettoolbox(
        //   "保安员年龄分布情况查询",
        //   "保安员年龄分布情况明细",
        //   5
        // ),
        legend: {
          x: "center",
          y: "90%"
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: d,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            label: {
              formatter: "{b}\n({d}%)"
            }
          }
        ]
      };

      this.EC5.setOption(option);
    },
    getEC6() {
      var that = this;
      getEducationStatistics(this.deptid, this.jurisdiction).then(res => {
        var a = res.data.data;
        that.setEC6(a);
      });
    },
    setEC6(d) {
      var option;
      // d = this.setColor(d, this.colors);
      option = {
        title: {
          text: "保安员学历分布情况统计",
          top: 25,
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        // toolbox: this.gettoolbox(
        //   "保安员学历分布情况查询",
        //   "保安员学历分布情况明细",
        //   6
        // ),
        legend: {
          // left: "left",
          x: "center",
          y: "83%"
        },
        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: "50%",
            data: d,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            label: {
              // alignTo: "edge",
              formatter: "{name|{b}}\n({d}%)",
              // minMargin: 5,
              // edgeDistance: 10,
              // lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: "#999"
                }
              }
            }
          }
        ]
      };

      this.EC6.setOption(option);
    },
    biginOUREC() {
      this.getEC1(1);
      this.getEC2();
      this.getEC3();
      this.getEC4();
      this.getEC5();
      this.getEC6();
      // this.setEC1();
      // this.setEC2();
      // this.setEC3();
      // this.setEC4();
      // this.setEC5();
      // this.setEC6();
    }
  },
  created() {
    if (
      this.userInfo.role_name == "保安公司管理员" ||
      this.userInfo.role_name == "分公司管理员"
    ) {
      this.examinetionTitle = "保安员审查情况统计";
      this.examineBtnVisiable = false;
    } else {
      this.examinetionTitle = "";
    }
  },
  mounted() {
    this.$nextTick(() => {
      var roleIds = this.userInfo.role_id.split(",");
      roleIds.forEach(roleId => {
        getRoleDetail(roleId).then(res => {
          var roleAlias = res.data.data.roleAlias;
          var roleName = res.data.data.roleName;
          if (roleName != "保安公司管理员" && roleName != "分公司管理员") {
            this.deptid = "";
            this.jurisdiction = this.userInfo.jurisdiction;
          } else {
            this.deptid = this.userInfo.dept_id;
            this.jurisdiction = "";
          }
          this.creatOurEcharts();
        });
      });
    });
  }
};
}
</script>

<style lang="scss">
$widths: 20%;
.securityAnalysis {
  width: 100%;
  height: calc(100% - 35px);
  // border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;

  .securityAnalysisleft,
  .securityAnalysiscenter,
  .securityAnalysisright {
    //   // border: 1px solid #000;
    position: relative;
    width: 29%;
    height: 100%;
    // border: 1px solid red;
    //   box-sizing: border-box;
.securityAnalysis {
    width: 100%;
    height: calc(100% - 35px);
    // border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
  }
  .securityAnalysiscenter {
    width: 40% !important;
  }
  .examination,
  .dispatchUnit,
  .dispatchSecurity,
  .socialSecurity {
    position: relative;
    width: 100%;
    height: 49%;
    // border: 1px solid #000;
    box-sizing: border-box;
    background-color: #fff;
  }

  .certificate {
    position: relative;
    width: 100%;
    height: 49%;
    // top: 13.3rem;
    box-sizing: border-box;
    background-color: #fff;
  }

  .examinesBtn {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    .examinesBtnChouse {
      background-color: #409eff;
      padding: 5px 10px;
      border-radius: 5px;
      color: #fff;
      position: relative;
      top: 20px;
      z-index: 900;
      text-align: center;
    .securityAnalysisleft,
    .securityAnalysiscenter,
    .securityAnalysisright {
        //   // border: 1px solid #000;
        position: relative;
        width: 29%;
        height: 100%;
        // border: 1px solid red;
        //   box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
    }
  }
  .examines,
  .examiness {
    width: 100%;
    height: 49%;
    // display: flex;
    // align-items: center;
    background-color: #fff;
  }

  //myself
  .examinesin,
  .examinessin,
  .certificatein,
  .examinationin,
  .dispatchUnitin,
  .dispatchSecurityin,
  .socialSecurityin {
    width: 100%;
    height: 100%;
  }
  .myToolbox {
    position: absolute;
    top: 14px;
    right: 20px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    z-index: 1000;
    &:hover {
    .securityAnalysiscenter {
        width: 40% !important;
    }
  }

    .examination,
    .dispatchUnit,
    .dispatchSecurity,
    .socialSecurity {
        position: relative;
        width: 100%;
        height: 49%;
        // border: 1px solid #000;
        box-sizing: border-box;
        background-color: #fff;
    }

    .certificate {
        position: relative;
        width: 100%;
        height: 49%;
        // top: 13.3rem;
        box-sizing: border-box;
        background-color: #fff;
    }

    .examinesBtn {
        top: 0;
        left: 0;
        position: absolute;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;

        .examinesBtnChouse {
            background-color: #409eff;
            padding: 5px 10px;
            border-radius: 5px;
            color: #fff;
            position: relative;
            top: 20px;
            z-index: 900;
            text-align: center;
        }
    }

    .examines,
    .examiness {
        width: 100%;
        height: 49%;
        // display: flex;
        // align-items: center;
        background-color: #fff;
    }

    //myself
    .examinesin,
    .examinessin,
    .certificatein,
    .examinationin,
    .dispatchUnitin,
    .dispatchSecurityin,
    .socialSecurityin {
        width: 100%;
        height: 100%;
    }

    .myToolbox {
        position: absolute;
        top: 14px;
        right: 20px;
        width: 25px;
        height: 25px;
        cursor: pointer;
        z-index: 1000;

        &:hover {}
    }
}
</style>

 src/views/securityGuard/baoanz.vue

@@ -17,7 +17,7 @@
            <div class="b-m-ups-1 b-m-ups-3">
                {{ data.cardid }}
            </div>
            <div class="b-m-ups-1">
            <div class="b-m-ups-1 address">
                {{ data.registered || "---" }}
            </div>
            <div class="b-m-ups-1 b-m-ups-2">
@@ -120,7 +120,6 @@
            width: 91px;
            position: absolute;
            left: 474px;
            // top: 120px;
            top: 78px;
            height: 93px;
            overflow: hidden;
@@ -135,33 +134,33 @@
        }

        .b-m-ups-1 {
            width: 50%;
            height: 13px;
            font-size: 21px;
            width: 54%;
            height: 12.3px;
            font-size: 16px;
            font-weight: 400;
            position: relative;
            top: 108px;
            left: 270px;
            top: 113px;
            left: 260px;
            margin-bottom: 22px;
        }

        // .securitynumber-1 {
        //   font-size: 22px;
        //   margin-bottom: 18px;
        // }
        .b-m-ups-2 {
            left: 304px;
            left: 296px;
        }

        .b-m-ups-3 {
            left: 356px;
            left: 350px;
        }

        .realName {
            left: 92px;
            top: 94px;
            top: 100px;
            font-size: 16px;
        }

        .address {
            top: 110px;
        }
    }
}
</style>