<template>
  <div class="box">
    <div id="mapDiv"></div>
    <div id="right-btn">
      <p class="right-item" @click="addPolygon">
        <i class="el-icon-edit"></i> 完成
      </p>
      <p class="right-item" @click="delPolygon">
        <i class="el-icon-delete"></i> 删除
      </p>
    </div>
    <!-- <el-tabs class="tabsNew" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="个人消息" name="first">个人消息</el-tab-pane>
    <el-tab-pane label="系统公告" name="second">系统公告</el-tab-pane>
  </el-tabs> -->
    <div class="header">
      <dv-decoration-2 class="leftDur" :dur="1" />
      <dv-decoration-2 class="rightDur" :dur="1" />
      <dv-decoration-5 class="centerDur" :dur="1" />
      <div class="navbar">
        <div class="left_menu">⚡{{ hour + ":" + minutes + ":" + miss }}</div>
        <div class="content_menu">双重预防综合管理系统</div>
        <div class="right-menu">
          <template v-if="device !== 'mobile'">
            <!-- <search id="header-search" class="right-menu-item" /> -->

            <div @click="toPush" class="right-menu-item work">
              <i class="el-icon-s-platform"></i> 工作台
            </div>

            <el-dropdown trigger="click">
      <span class="el-dropdown-link work right-menu-item1">
        APP下载
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>
          <img class="qrCode" :src="shuangUrl" alt="">
          <img class="qrCode" :src="nfcUrl" alt="">

        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <div @click="toColor" class="right-menu-item work">
              <i class="el-icon-picture colorIcon"></i>
            </div>
            <div @click.prevent="seeNew" class="right-menu-item work">
              <Information :newType="newType" @close="close" />
            </div>

            <!-- <el-badge :value="12" class="el-icon-s-comment right-menu-item works">
</el-badge> -->
            <screenfull id="screenfull" class="right-menu-item hover-effect work" />
          </template>

          <el-dropdown
            class="avatar-container right-menu-item hover-effect"
            trigger="click"
          >
            <div class="avatar-wrapper">
              <img src="@/assets/images/profile.png" class="user-avatar" />
              <!-- <img :src="avatar" class="user-avatar"> -->
              <!-- <i class="el-icon-caret-bottom" /> -->
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="logout">
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div
      v-if="animaClick && !newType"
      class="shouqi1 animate__animated animate__fadeInLeft"
      @click="packUp"
    >
      <img src="@/assets/images/caret-right.svg" alt="" />
    </div>
    <div class="boxContent" v-if="!animaClick && !newType">
      <div
        :class="
          animaClick
            ? 'lefts animate__animated animate__bounceOutLeft'
            : 'lefts animate__animated animate__backInLeft'
        "
      >
        <div class="shouqi" @click="packUp">
          <img src="@/assets/images/caret-left.svg" alt="" />
        </div>
        <dv-border-box-6 class="leftTop">
          <Prople @seeUser="seeUser" @seeArea="seeArea" />
        </dv-border-box-6>
        <div class="leftCenter">
          <dv-border-box-6
            ><Executable @seeDanger="seeDanger"
          /></dv-border-box-6>
        </div>
        <div class="leftBottom">
          <dv-border-box-6>
            <Electronic @seeWork="seeWork" />
          </dv-border-box-6>
        </div>
      </div>
    </div>
    <div
      v-if="animaClick && !newType"
      class="shouqi2 animate__animated animate__fadeInRight"
      @click="packUp"
    >
      <img src="@/assets/images/caret-left.svg" alt="" />
    </div>
    <div v-if="!animaClick && !newType" class="boxContent1">
      <div
        :class="
          animaClick
            ? 'lefts animate__animated animate__bounceOutRight'
            : 'lefts animate__animated animate__backInRight'
        "
      >
        <div class="shouqi3" @click="packUp">
          <img src="@/assets/images/caret-right.svg" alt="" />
        </div>
        <!-- <dv-border-box-11 class="leftTop" title="企业信息">

</dv-border-box-11> -->
        <dv-border-box-6 class="rightTop">
          <Gases @seeContingency="seeContingency"
        /></dv-border-box-6>
        <div class="rightCenter">
          <dv-border-box-6>
            <Equipment />
          </dv-border-box-6>
          <!-- <dv-border-box-11 title="dv-border-box-11">dv-border-box-11</dv-border-box-11> -->
        </div>
        <div class="rightBottom">
          <dv-border-box-6>
            <Emergencies />
          </dv-border-box-6>
        </div>
      </div>
    </div>
    <div class="footBox">
             <ul>
            <li
              @click="getNum(item, index)"
              v-for="(item, index) in deviceOption"
              :key="index"
            >
              <img :src="item.icon" alt="" />
              <div>{{ item.label }}</div>
            </li>
          </ul>
          </div>

    <div class="foot">
      <div class="footContent">
        <div class="footLeft"></div>
        <div class="footCenter">

        </div>
        <div class="footRight"></div>
      </div>
    </div>

    <!-- 企业信息弹框 -->
    <el-dialog
      title="人员信息"
      :visible.sync="dialogUser"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      top="25vh"
      width="60%"
    >
      <el-table
        :data="userList"
        height="50vh"
        :row-style="{ height: '0px' }"
        :header-cell-style="{ 'text-align': 'center', padding: '0px' }"
        :cell-style="{ 'text-align': 'center', padding: '2px' }"
        style="width: 100%"
      >
        <el-table-column label="序号" align="center" width="80px">
          <template slot-scope="scope">
            <span> {{ (userNum - 1) * userSize + (scope.$index + 1) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户名称" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.nickName || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="部门" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.dept.deptName || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号码" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.phonenumber || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户岗位" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span>{{
              scope.row.postList
                .map((item) => {
                  return item.postName;
                })
                .join() || "-"
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="userTotal > 0"
        :page.sync="userNum"
        :limit.sync="userSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="userTotal"
        @pagination="seeUser"
      />
    </el-dialog>
    <el-dialog
      title="生产区域信息"
      :visible.sync="dialogArea"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      top="25vh"
      width="60%"
    >
      <el-table
        :data="areaList"
        height="50vh"
        :row-style="{ height: '0px' }"
        :header-cell-style="{ 'text-align': 'center', padding: '0px' }"
        :cell-style="{ 'text-align': 'center', padding: '2px' }"
        style="width: 100%"
      >
        <el-table-column label="区域名称" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.areaName || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="作业等级" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.workLevelView || "-" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="作业负责人岗位" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.postName || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="今日作业人数"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <span>{{
              !scope.row.workUserCount && scope.row.workUserCount != 0
                ? "-"
                : scope.row.workUserCount
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      :title="dangerTitle"
      :visible.sync="dialogDanger"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      top="25vh"
      width="60%"
    >
      <el-table
        :data="dangerList"
        height="48vh"
        :row-style="{ height: '0px' }"
        :header-cell-style="{ 'text-align': 'center', padding: '0px' }"
        :cell-style="{ 'text-align': 'center', padding: '2px' }"
        style="width: 100%"
      >
        <el-table-column label="序号" align="center" width="80px">
          <template slot-scope="scope">
            <span>
              {{ (dangerNum - 1) * dangerSize + (scope.$index + 1) }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="隐患名称" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.dangerName || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发现时间" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.registTime || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="隐患描述" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.dangerDesc || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="所在区域" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.areaName || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="整改部门" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.deptName || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="整改负责人"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.manageUserName || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="整改期限" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.dangerManageDeaddline || "-" }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="dangerTotal > 0"
        :page.sync="dangerNum"
        :limit.sync="dangerSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="dangerTotal"
        @pagination="seeDanger(dangerValue)"
      />
    </el-dialog>
    <el-dialog
      :title="workTitle"
      :visible.sync="dialogWork"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      top="25vh"
      width="60%"
    >
      <el-table
        :data="workList"
        height="48vh"
        :row-style="{ height: '0px' }"
        :header-cell-style="{ 'text-align': 'center', padding: '0px' }"
        :cell-style="{ 'text-align': 'center', padding: '2px' }"
        style="width: 100%"
      >
        <el-table-column label="序号" align="center" width="80px">
          <template slot-scope="scope">
            <span> {{ (workNum - 1) * workSize + (scope.$index + 1) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="作业类型" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{
              workTypeName(workType, scope.row.workTicketType) || "-"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="级别" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.workLevelName || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="作业票名称"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.workTicketContent || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="作业票编号"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.workTicketNo || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="作业状态" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{
              workTicketStatus[scope.row.workTicketStatus] || "-"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.applicantTime || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请单位" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.applicantDeptName || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="作业负责人"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.workTicketDirectorName || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="负责人电话"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.phonenumber || "-" }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="workTotal > 0"
        :page.sync="workNum"
        :limit.sync="workSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="workTotal"
        @pagination="seeWork(workValue)"
      />
    </el-dialog>
    <!-- 应急弹框 -->
    <el-dialog
      title="应急演习总计"
      :visible.sync="contingencyAlert"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      top="25vh"
      width="60%"
    >
      <el-table
        :data="contingencyList"
        height="50vh"
        :row-style="{ height: '0px' }"
        :header-cell-style="{ 'text-align': 'center', padding: '0px' }"
        :cell-style="{ 'text-align': 'center', padding: '2px' }"
        style="width: 100%"
      >
        <el-table-column label="序号" align="center" width="80">
          <template slot-scope="scope">
            <span>
              {{
                (contingencyNum - 1) * contingencySize + (scope.$index + 1)
              }}</span
            >
          </template>
        </el-table-column>

        <el-table-column label="项目内容" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.planName || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="计划月份" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.planMonth || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="负责人" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.directorBy || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="完成人" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.finishBy || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="完成时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.finishTime || "-" }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="contingencyTotal > 0"
        :page.sync="contingencyNum"
        :limit.sync="contingencySize"
        :page-sizes="[10, 20, 30, 50]"
        :total="contingencyTotal"
        @pagination="getYearList"
      />
    </el-dialog>
    <el-dialog
      title="已完成"
      :visible.sync="overviewAlert"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      top="25vh"
      width="60%"
    >
      <el-table
        :data="overviewList"
        height="50vh"
        :row-style="{ height: '0px' }"
        :header-cell-style="{ 'text-align': 'center', padding: '0px' }"
        :cell-style="{ 'text-align': 'center', padding: '2px' }"
        style="width: 100%"
      >
        <el-table-column label="序号" align="center" width="80">
          <template slot-scope="scope">
            <span>
              {{ (overviewNum - 1) * overviewSize + (scope.$index + 1) }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="演习编号" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.drillSn || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="演习名称" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.drillName || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="演习时间" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.realityStartTime || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="演习类型" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.drillTypeName || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="演习区域" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.drillArea || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="演习地点" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.drillDeck || "-" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="审核状态" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{
              stateList.filter(
                (item) => item.value == scope.row.processStatus
              )[0].label
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="overviewTotal > 0"
        :page.sync="overviewNum"
        :limit.sync="overviewSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="overviewTotal"
        @pagination="getOverview"
      />
    </el-dialog>
    <el-dialog
      title="应急队伍"
      :visible.sync="teamAlert"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      top="25vh"
      width="60%"
    >
      <el-table
        :data="teamList"
        height="50vh"
        :row-style="{ height: '0px' }"
        :header-cell-style="{ 'text-align': 'center', padding: '0px' }"
        :cell-style="{ 'text-align': 'center', padding: '2px' }"
        style="width: 100%"
      >
        <el-table-column label="序号" align="center" width="80">
          <template slot-scope="scope">
            <span> {{ (teamNum - 1) * teamSize + (scope.$index + 1) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="队伍名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.contingentName || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="队伍状态" align="center">
          <template slot-scope="scope">
            <span>{{
              scope.row.contingentStatus === 1 ? "已启用" : "未启用"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="修改时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.updateDate || "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="组织架构" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="organization(scope.row.id)">
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="teamTotal > 0"
        :page.sync="teamNum"
        :limit.sync="teamSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="teamTotal"
        @pagination="getTeamList"
      />
    </el-dialog>
    <!-- 完成记录弹框 -->
    <el-dialog
      title="完成记录"
      :visible.sync="statisticsAlert"
      :close-on-click-modal="false"
      :fullscreen="true"
      :close-on-press-escape="false"
      top="25vh"
      width="60%"
    >
      <el-table
        height="90vh"
        :data="statisticsList"
        :row-style="{ height: '0px' }"
        :header-cell-style="{
          'text-align': 'center',
          padding: '0px',
          border: '1px solid #ccc',
        }"
        :cell-style="{
          'text-align': 'center',
          padding: '2px',
          border: '1px solid #ccc',
          height: '60px',
        }"
        style="width: 100%, overflow:auto"
      >
        <el-table-column label="序号" align="center">
          <template slot-scope="scope">
            <span> {{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="演习计划名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.planName }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-for="(item, index) in month"
          :key="index"
          :label="item"
          align="center"
        >
          <template slot-scope="scope">
            <span
              class="text"
              v-show="scope.row.data[index].type === '0'"
            ></span>
            <span
              class="text"
              style="background: green"
              v-show="scope.row.data[index].type === '1'"
            ></span>
            <span
              class="text"
              style="background: red"
              v-show="scope.row.data[index].type === '2'"
            ></span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      :visible.sync="organizationAlert"
      :fullscreen="true"
      title="组织架构图"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="org-boxs">
        <vue2-org-tree
          name="test"
          :data="datas"
          :horizontal="horizontal"
          :render-content="renderContent"
          :label-class-name="labelClassName"
          collapsable
          @on-expand="onExpand"
        />
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="colorAlert"
      :fullscreen="true"
      title="四色图"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
    <ColorImgManagement style="height: 100%;"/>
    </el-dialog>
  </div>
</template>

<script>
import {
  listUser,
  getDangerList,
  getWork,
  getYearList,
  overviewList,
  statistics,
  getTeamList,
  workTicketAreaWorkStatistics
} from "@/api/home";
import { deviceList } from "@/api/risk/facility";
import {
  getTree,
} from "@/api/emergencies";
import { mapGetters, mapState } from "vuex";
import Breadcrumb from "@/components/Breadcrumb";
import TopNav from "@/components/TopNav";
import Hamburger from "@/components/Hamburger";
import Screenfull from "@/components/Screenfull";
import SizeSelect from "@/components/SizeSelect";
import Search from "@/components/HeaderSearch";
import RuoYiGit from "@/components/RuoYi/Git";
import RuoYiDoc from "@/components/RuoYi/Doc";
import Prople from "./homeItem/prople";
import Information from "@/layout/components/information";
import Executable from "./homeItem/executable.vue";
import Gases from "./homeItem/gases.vue";
import Equipment from "./homeItem/equipment.vue";
import Emergencies from "./homeItem/emergencies.vue";
import Electronic from "./homeItem/electronic.vue";
import ChartsComponents from "@/components/echarts-com/index.vue";
import ColorImgManagement from './risk/colorImgManagement.vue'
export default {
  data() {
    return {
      manUrl: require("@/assets/images/jianshi.png"),
      mansUrl: require("@/assets/images/dingwei.png"),
      shuangUrl: require("@/assets/images/shuang.png"),
      nfcUrl: require("@/assets/images/nfc.png"),
      baseUrl:process.env.VUE_APP_BASE_API,
      labelClassName: "bg-none",
      colorAlert: false,
      horizontal: false,
      organizationAlert: false,
      //应急数据
      contingencyList: [],
      contingencyTitle: "",
      contingencyNum: 1,
      contingencySize: 10,
      contingencyTotal: 0,
      contingencyAlert: false,
      contingencyType: 10,
      teamList: [],
      teamNum: 1,
      teamSize: 10,
      teamTotal: 0,
      teamAlert: false,
      overviewAlert: false,
      overviewList: [],
      overviewNum: 1,
      overviewSize: 10,
      overviewTotal: 0,
      statisticsList: [],
      statisticsAlert: false,
      month: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
      //作业票数据
      dialogWork: false,
      workTitle: "",
      workList: [],
      workTotal: 0,
      workNum: 1,
      workSize: 10,
      workValue: {},
      //企业信息弹框
      dialogUser: false,
      userNum: 1,
      userSize: 10,
      userTotal: 0,
      //人员数据
      userList: [],
      //区域弹框
      dialogArea: false,
      areaList: [],
      newType: false,
      //隐患弹框
      dialogDanger: false,
      dangerList: [],
      dangerValue: "",
      dangerTitle: "",
      dangerTotal: 0,
      dangerSize: 10,
      dangerNum: 1,
      activeName: "second",
      currentLnglats: null,
      currentPolygon: null,
      map: null,
      animaClick: false,
      hour: "",
      minutes: "",
      datas: {},
      miss: "",
      workType: [
        {
          code: "10",
          name: "动火作业",
        },
        {
          code: "20",
          name: "受限作业",
        },
        {
          code: "30",
          name: "盲板抽堵",
        },
        {
          code: "40",
          name: "高处作业",
        },
        {
          code: "50",
          name: "吊装作业",
        },
        {
          code: "60",
          name: "临时用电",
        },
        {
          code: "70",
          name: "动土作业",
        },
        {
          code: "80",
          name: "断路作业",
        },
      ],

      //底部数据
      deviceOption: [
        {
          label: "工程车一类",
          value: 1,
          icon: require("@/assets/images/shipin.png"),
          type: false,
        },
        {
          label: "工程车二类",
          value: 2,
          icon: require("@/assets/images/yingji.png"),
          type: false,
        },
        {
          label: "安全仪表",
          value: 3,
          icon: require("@/assets/images/anquan.png"),
          type: false,
        },
        {
          label: "安全阀",
          value: 4,
          icon: require("@/assets/images/anquanfa.png"),
          type: false,
        },
        {
          label: "气体检测报警器",
          value: 5,
          icon: require("@/assets/images/baojing.png"),
          type: false,
        },
        {
          label: "特种设备",
          value: 6,
          icon: require("@/assets/images/tezhong.png"),
          type: false,
        },
        {
          label: "消防设施",
          value: 7,
          icon: require("@/assets/images/xiaofang.png"),
          type: false,
        },
        {
          label: "其他",
          value: 8,
          icon: require("@/assets/images/qita.png"),
          type: false,
        },
      ],
      stateList: [
        {
          value: 1,
          label: "待审核",
        },
        {
          value: 2,
          label: "已审核",
        },
        {
          value: 3,
          label: "已驳回",
        },
      ], // 审核状态数据
      workTicketStatus: {
        10: "待交底",
        20: "待接受",
        30: "会签中",
        40: "作业中",
        50: "已验收",
      },
      redirect: undefined,
    };
  },
  components: {
    Breadcrumb,
    TopNav,
    Hamburger,
    Screenfull,
    SizeSelect,
    Search,
    RuoYiGit,
    RuoYiDoc,
    Prople,
    Executable,
    Electronic,
    ChartsComponents,
    Gases,
    Information,
    Emergencies,
    Equipment,
    ColorImgManagement
  },
  watch: {
    $route: {
      handler: function (route) {
        // this.redirect = route.query && route.query.redirect;
        console.log(route.query.redirect);
      },
      immediate: true,
    },
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"]),
    workTypeName() {
      return (arr, type) => {
        const obj = arr.reduce((t, item) => {
          return {
            ...t,
            [item.code]: item.name,
          };
        }, {});
        return obj[type];
      };
    },
    setting: {
      get() {
        return this.$store.state.settings.showSettings;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "showSettings",
          value: val,
        });
      },
    },
    topNav: {
      get() {
        return this.$store.state.settings.topNav;
      },
    },
  },
  mounted() {
    // sysUserStatistics().then(res => {
    //   console.log(res)
    // })
    this.onLoad();

    setInterval(() => {
      this.hour =
        new Date().getHours() < 10
          ? "0" + new Date().getHours()
          : new Date().getHours();
      this.minutes =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      this.miss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
    }, 1000);
  },
  methods: {
     // 组织结构
     organization(id) {
      getTree({ contingentId: id }).then((res) => {
        if (res.code === 200) {
          console.log(res);
          this.datas = res.data[0] || {};
          this.toggleExpand(this.datas, true);
          this.organizationAlert = true;
        }
      });
    },
    renderContent(h, data) {
      console.log(data);
      return (
        <span
          style="width:100%;height:100%;display:block;padding:10px 15px;border-radius:3px;margin-right:20px"
          class={
            data.relations === "1-1"
              ? "bg-tomato"
              : data.relations === "1-2"
              ? "bg-gold"
              : data.relations === "1-3"
              ? "bg-gray"
              : data.relations === "1-4"
              ? "bg-lightpink"
              : data.relations === "1-5"
              ? "bg-blue"
              : "bg-green"
          }
        >


            <div slot="reference">
              <p style="height:6vh;padding:0;margin-bottom:1vh;">
                <img
                  style="width:6vh;height:6vh;"
                  src={this.manUrl}
                />
              </p>
              <p style="font-size:1.6vh;">{data.drillPost}</p>
              <p style="font-size:1vh;">{data.persons}</p>
            </div>
        </span>
      );
    },
    toggleExpand(data, val) {
      var _this = this;
      if (Array.isArray(data)) {
        data.forEach(function (item) {
          _this.$set(item, "expand", val);
          if (item.children) {
            _this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          _this.toggleExpand(data.children, val);
        }
      }
    },
    onExpand(e, data) {
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
    initRisk(val) {
      switch (val) {
        case 1:
          return "低风险";
        case 2:
          return "一般风险";
        case 3:
          return "较大风险";
        case 4:
          return "重大风险";
      }
    },
    //查看应急
    seeContingency(val) {
      this.contingencyNum = 1;
      this.contingencySize = 10;
      this.contingencyTotal = 0;
      this.contingencyType = val;
      if (val === 10) {
        this.getYearList();
      } else if (val === 20) {
        this.getOverview();
      } else if (val === 30) {
        this.statistics();
      } else if (val === 40) {
        this.getTeamList();
      }
    },
    toColor() {
      this.colorAlert = true
    },
    // /查看总数
    getYearList() {
      getYearList({
        pageNum: this.contingencyNum,
        pageSize: this.contingencySize,
        planYear: new Date().getFullYear()
      }).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.contingencyTotal = res.total;
          this.contingencyList = res.rows;
          this.contingencyAlert = true;
        }
      });
    },
    //查看应急队伍
    getTeamList() {
      getTeamList({
        pageNum: this.teamNum,
        pageSize: this.teamSize,
      }).then((res) => {
        if (res.code === 200) {
          this.teamTotal = res.total;
          this.teamList = res.rows;
          this.teamAlert = true;
        }
      });
    },

    //查看已完成
    getOverview() {
      overviewList({
        drillStatus: 2,
        pageSize: this.overviewSize,
        pageNum: this.overviewNum,
      }).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.overviewTotal = res.total;
          this.overviewList = res.rows;
          this.overviewAlert = true;
        }
      });
    },
    //查看完成记录
    statistics() {
      statistics({ year: new Date().getFullYear() }).then((res) => {
        if (res.code === 200) {
          console.log(res);
          this.statisticsList = res.data;
          this.statisticsAlert = true;
        }
      });
    },
    seeWork(item) {
      this.workValue = item;
      this.workTitle = item.workTicketTypeName;
      getWork({
        pageNum: this.workNum,
        pageSize: this.workSize,
        workTicketType: item.workTicketType,
      }).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.workTotal = res.total;
          this.workList = res.rows;
          console.log(res.rows);
          this.dialogWork = true;
        }
      });
    },
    seeDanger(value) {
      this.dangerValue = value;
      if (value === 2) {
        getDangerList({
          dangerManageDeaddline: new Date()
            .toLocaleDateString()
            .replace(/\//g, "-"),
          pageSize: this.dangerSize,
          pageNum: this.dangerNum,
        }).then((res) => {
          if (res.code === 200) {
            this.dangerTotal = res.total;
            this.dangerList = res.rows;
            this.dangerTitle = "整改逾期";
            this.dialogDanger = true;
          }
        });
      } else {
        getDangerList({
          dangerLevel: value,
          pageSize: this.dangerSize,
          pageNum: this.dangerNum,
        }).then((res) => {
          if (res.code === 200) {
            this.dangerTotal = res.total;
            this.dangerList = res.rows;
            if (value === 0) {
              this.dangerTitle = "一般隐患";
            }
            if (value === 1) {
              this.dangerTitle = "重大隐患";
            }
            this.dialogDanger = true;
          }
        });
      }
    },
    // 查看企业信息弹框
    seeUser() {
      listUser({ pageSize: this.userSize, pageNum: this.userNum, excludeUserId: 1 }).then(
        (res) => {
          if (res.code === 200) {
            this.userList = res.rows;
            this.userTotal = res.total;
            console.log(res.rows);
          }
        }
      );
      this.dialogUser = true;
    },
    seeArea() {
      workTicketAreaWorkStatistics().then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.areaList = res.data;
          this.dialogArea = true;
        }
      });
    },
    close(val) {
      this.newType = val;
    },
    toPush() {
      console.log(this.$route);
      this.$router.push({ path: "/server" });
    },
    seeNew() {
      console.log(111);
      this.newType = true;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getNum(item, index) {
      this.map.clearOverLays();
      this.deviceOption[index].type = !this.deviceOption[index].type;
      this.deviceOption.forEach((pro, id) => {
        if (id !== index) {
          this.deviceOption[id].type = false
        }
      })
        if (this.deviceOption[index].type) {
          deviceList({
            pageNum: 1,
            pageSize: 1000000,
            deviceType: item.value,
          }).then((res) => {
            if (res.code === 200) {
              console.log(res.rows);
              res.rows.forEach((item) => {
                let position = new T.LngLat(item.longitude, item.latitude);
                let icon = new T.Icon({
                  // iconUrl: item.deviceImg + '', //请求图标图片的URL
                  iconUrl: item.deviceImg ? process.env.VUE_APP_BASE_API + item.deviceImg : this.mansUrl, //请求图标图片的URL
                  iconSize: new T.Point(20, 20), //图标可视区域的大小。
                  iconAnchor: new T.Point(30, 30), //图标的定位锚点
                });
                var marker = new T.Marker(position, {
                  icon: icon,
                });
                marker.addEventListener("click", function () {
                  console.log(item);
                  const winHtml = `<div style="width:170px;margin:10px 0">设备编号：${
                    item.deviceCode || "-"
                  }</div><div style="width:170px">设备名称：${
                    item.deviceName || "-"
                  }</div>`;
                  marker.openInfoWindow(winHtml);
                });
                // this.map.addOverLay(label);
                this.map.addOverLay(marker);
              });
            }
          });
        }

    },
    draw() {
      var polygonTool = new T.PolygonTool(this.map, {
        showLabel: false, // 不显示面积信息
        color: "#ffcd42",
        weight: 3,
        opacity: 0.5,
        fillColor: "#ffdc00",
        fillOpacity: 0.5,
      });
      polygonTool.open();
      polygonTool.addEventListener("draw", this.drawFinish); // 监听双击绘制完成事件，调用drawFinish方法
    },
    // 圈地结束
    drawFinish(e) {
      this.currentLnglats = e.currentLnglats;
      e.currentPolygon.addEventListener("dblclick", this.dblclickPolygon); // 绘制完成给覆盖物添加双击事件
    },
    // 删除圈地
    delPolygon() {
      this.map.removeOverLay(this.currentPolygon); // 清除当前选中的覆盖物
      this.handlerMenu(); // 执行一个方法
    },
    //隐藏按钮菜单
    handlerMenu() {
      let menu = document.getElementById("right-btn");
      menu.style.visibility = "hidden";
    },
    // 完成圈地提交
    addPolygon() {
      //调用接口，传递参数
      console.log(this.currentLnglats);
      this.map.removeOverLay(this.currentPolygon); // 清除当前选中的覆盖物
      this.handlerMenu(); // 执行一个方法
    },
    dblclickPolygon(e) {
      this.currentPolygon = e.target; // 把当前操作的覆盖物赋值给一个全局变量
      let menu = document.getElementById("right-btn");
      let evt = window.event || arguments[0];
      menu.style.left = evt.clientX - 220 + "px";
      menu.style.top = evt.clientY - 60 + "px";
      menu.style.visibility = "visible";
    },
    //地图初始化
    onLoad() {
      var imageURL =
        "http://t0.tianditu.gov.cn/img_w/wmts?" +
        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=c8d9cd645bd34ae0fc54995e1f6c87e9";
      let zoom = 18;
      let lay = new T.TileLayer(imageURL, {
        minZoom: 1,
        maxZoom: 18,
        unlimited: false, //1.设置缩放级别为整数
        constrainResolution: true,
        //2.关闭无级缩放地图
        smoothResolutionConstraint: false,
      });
      var config = { layers: [lay] };
      this.map = new T.Map("mapDiv", config);
      this.map.centerAndZoom(new T.LngLat(116.935, 39.07), zoom);
      this.map.isDrag(false);
      this.map.disableInertia();
      this.map.disableKeyboard();
      this.map.disableDoubleClickZoom(); // 禁止双击地图放大
      this.map.isDrag(); // 禁止双击地图放大
    },
    packUp() {
      this.animaClick = !this.animaClick;
    },
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
    async logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            location.href = "/index";
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
#right-btn {
  visibility: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 999;
  background-color: #fff;
  cursor: pointer;
  border: 1px solid #1e4048;
}

.right-item {
  padding: 1px 15px;
  font-size: 12px;
}

.right-item {
  color: #23aaf2;
}
.right-item:hover {
  font-weight: 700;
  color: #1e4048;
}

.box {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
#mapDiv {
  position: absolute;
  width: 100vw;
  height: 100vh;
}
.header {
  position: relative;
  width: 100%;
  height: 50px;
  background: rgba(30, 64, 72, 0.9);
  z-index: 999;
}
.leftDur {
  width: 500px;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.rightDur {
  width: 500px;
  height: 5px;
  position: absolute;
  right: 0;
  bottom: 0;
  transform: rotate(180deg);
}
::v-deep .tdt-infowindow-content-wrapper {
  background: rgba(30, 64, 72, 0.8);
  color: #fff;
  border-radius: 5px;
}
::v-deep .tdt-infowindow-tip-container .tdt-infowindow-tip {
  background: rgba(30, 64, 72, 0.8);
}
.centerDur {
  width: 500px;
  height: 40px;
  position: absolute;
  left: calc(50% - 250px);
  bottom: -18px;
}
.shouqi {
  z-index: 9999;
  position: absolute;
  right: -50px;
  top: calc(50% - 20px);
  width: 30px;
  height: 40px;
  background: linear-gradient(
    360deg,
    #51beff 0%,
    rgba(0, 159, 255, 0.45) 1%,
    rgba(0, 132, 211, 0.41) 4%,
    rgba(0, 126, 201, 0.9) 9%,
    rgba(0, 0, 0, 0) 100%
  );
  transform: perspective(10px) rotateY(6deg);
  img {
    width: 30px;
    height: 40px;
  }
}
.shouqi1 {
  z-index: 9999;
  position: absolute;
  left: 50px;
  top: 47vh;
  width: 30px;
  height: 40px;
  background: linear-gradient(
    360deg,
    #51beff 0%,
    rgba(0, 159, 255, 0.45) 1%,
    rgba(0, 132, 211, 0.41) 4%,
    rgba(0, 126, 201, 0.9) 9%,
    rgba(0, 0, 0, 0) 100%
  );
  transform: perspective(10px) rotateY(6deg);
  img {
    width: 30px;
    height: 40px;
  }
}
.shouqi3 {
  z-index: 9999;
  position: absolute;
  left: -50px;
  top: calc(50% - 20px);
  width: 30px;
  height: 40px;
  background: linear-gradient(
    360deg,
    #51beff 0%,
    rgba(0, 159, 255, 0.45) 1%,
    rgba(0, 132, 211, 0.41) 4%,
    rgba(0, 126, 201, 0.9) 9%,
    rgba(0, 0, 0, 0) 100%
  );
  transform: perspective(10px) rotateY(-6deg);
  img {
    width: 30px;
    height: 40px;
  }
}
.shouqi2 {
  z-index: 9999;
  position: absolute;
  right: 50px;
  top: 47vh;
  width: 30px;
  height: 40px;
  background: linear-gradient(
    360deg,
    #51beff 0%,
    rgba(0, 159, 255, 0.45) 1%,
    rgba(0, 132, 211, 0.41) 4%,
    rgba(0, 126, 201, 0.9) 9%,
    rgba(0, 0, 0, 0) 100%
  );
  transform: perspective(10px) rotateY(6deg);
  img {
    width: 30px;
    height: 40px;
  }
}

.lefts {
  z-index: 999;
  position: relative;
  width: 400px;
  height: auto;
  margin: 30px;
  background: none;

  .leftTop {
    width: 400px;
    height: 200px;
    background: rgba(30, 64, 72, 0.8);
    border-radius: 10px;
  }
  .leftCenter {
    width: 400px;
    height: 200px;
    border-radius: 10px;
    background: rgba(30, 64, 72, 0.8);
    margin: 20px 0;
  }
  .leftBottom {
    width: 400px;
    height: 270px;
    background: rgba(30, 64, 72, 0.8);
    border-radius: 10px;
  }
  .rightBottom {
    width: 400px;
    height: 270px;
    background: rgba(30, 64, 72, 0.8);
    border-radius: 10px;
  }
  .rightTop {
    width: 400px;
    height: 200px;
    background: rgba(30, 64, 72, 0.8);
    border-radius: 10px;
  }
  .rightCenter {
    width: 400px;
    height: 200px;
    border-radius: 10px;
    background: rgba(30, 64, 72, 0.8);
    margin: 20px 0;
  }
  .dv11 {
    padding: 10px;
    width: 400px;
    height: 220px;
  }
}

#echart {
  width: 100%;
  height: 100%;
}
.dv7 {
  width: 260px;
  height: 30px;
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
  color: #fff;
  /* background: #032930; */
}
.navbar {
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .left_menu {
    width: 33%;
    color: #fff;
    font-weight: 700;
  }
  .content_menu {
    width: 34%;
    color: #fff;
    font-size: 26px;
    text-align: center;
    font-weight: 700;
  }
  .right-menu {
    text-align: right;
    width: 33%;
    height: 100%;
    line-height: 50px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #fff;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }
    .right-menu-item1 {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }
    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        margin-top: 5px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 35px;
          height: 35px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}
.boxContent {
  width: 400px;
  position: absolute;
  left: 0;
}
.boxContent1 {
  z-index: 999;
  width: 400px;
  position: absolute;
  right: 70px;
}
.footBox{
  width: 60vw;
  height: 100px !important;
  position: fixed;
  bottom: 25px;
  left: 19%;
  z-index: 1001;
        ul {
        width: 96%;
        display: flex;
        padding: 0;
        margin-left: 3%;

        justify-content: space-around;
        li {
          width: 12%;
          min-height: 70px;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          align-content: center;
          align-items: center;
          cursor: pointer;
          img {
            width: 60px;
            /* height: 40px; */
            background: transparent;
            /* border: 1px solid rgb(49, 205, 186); */
          }
          div {
            text-align: center;
            color:#00f7f8;
          }
        }
      }
      }
.foot {
  z-index: 1000;
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  bottom: 0;
  /* background: linear-gradient(
        360deg,
        #51beff 0%,
        rgba(0, 159, 255, 0.8) 1%,
        rgba(0, 132, 211, 0.8) 4%,
        rgba(0, 126, 201, 0.8) 9%,
        rgba(1, 0, 0, 0) 100%
      ); */
  /* background: red; */
  .footContent {
    width: 100%;
    height: 100%;
    display: flex;
    align-content: end;
    align-items: end;
    .footLeft,
    .footRight {
      width: 20%;
      height: 40px;
      background: #1e4048;
    }
    .footCenter {
      position: relative;
      width: 60%;
      height: 85px;
      color: #fff;
      font-size: 14px;
      background: rgba(30, 64, 72, 0.9);
      transform: perspective(50px) rotateX(6deg);


    }
  }
}
.work {
  font-size: 16px !important;
  cursor: pointer;
}
.works {
  font-size: 20px !important;
  padding-top: 10px !important;
}
::v-deep .el-tabs__item {
  color: #fff !important;
}
::v-deep .is-active {
  color: #1890ff !important;
}

.icon {
  font-size: 35px;
  color: #1e4048;
}
.text {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: 10px;
}
.org-boxs {
  width: 100%;
  height: 100%;
  text-align: center;
  /*background: #030C24;*/
  /* background-image: -webkit-radial-gradient(
    ellipse farthest-corner at center 40%,
    #000d4d 0%,
    #000105 100%
  );
  background-image: radial-gradient(
    ellipse farthest-corner at center 40%,
    #000d4d 0%,
    #000105 100%
  ); */
  overflow-y: scroll;
}
.org-tree-container {
  background: none !important;
}
.org-tree-node-label {
  white-space: nowrap;
}
.bg-none {
  background-color: #030c24;
  color: #ffffed;
}
.bg-white {
  background-color: #ecf5ff;
}
.org-tree-node-label .org-tree-node-label-inner {
  width: 6vw;
  padding: 0px 0px;
  text-align: center;
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  /* border: 1px solid @colors;*/
  overflow: hidden;
  box-sizing: border-box;
}
.bg-tomato {
  background-color: #9e4a1c;
}
.bg-gold {
  background-color: #eca150;
}
.bg-gray {
  background-color: #deceaa;
}
.bg-lightpink {
  background-color: lightpink;
}
.bg-blue {
  background-color: #057d9f;
}
.bg-green {
  background-color: #50cb90;
}
.colorIcon{
  font-size: 18px;
}
.qrCode{
  width: 150px;
  margin: 10px 30px;
}
</style>
