<template>
  <div class="main">
    <div class="minHeader shadow">
      <Breadcrumb :breadData="breadData"></Breadcrumb>

    </div>
    <div class="minTop shadow mt20">
      <div>
        <div class="flex between card__header">
          <p class="fs20 c3 b">全县安全生产形势分析</p>
          <p class="c9">截止到5月底</p>
        </div>
        <div class="p20 flex between">
          <div class="mr20 w57">
            <div>
              <div class="flex acenter lh30">
                <img src="../assets/images/people.png" class="mr12 icon16"/>
                <p>事故起数 19 起，同比前两年平均值</p>
                <em class="norm ml12">↓37.7%</em>
              </div>
              <div class="flex acenter lh30">
                <img src="../assets/images/ren.png" class="mr12 icon16"/>
                <p>死亡人数 18 人，同比前两年平均值</p>
                <em class="norm ml12">↓16.3%</em>
              </div>
            </div>
            <div class="textCenter mt20 c3">2021年全市安全生产事故情况</div>
            <div class="zhan mt12">
              <div id="main1" style="max-width: 100%; height: 280px"></div>
            </div>
          </div>
          <div class="w41">
            <div class="flex around acenter h60">
              <div class="flex acenter column">
                <p class="c9">一般事务</p>
                <p class="fs18 c149 b">22</p>
              </div>
              <div class="flex acenter column">
                <p class="c9">较大事务</p>
                <p class="fs18 cff8 b">0</p>
              </div>
              <div class="flex acenter column">
                <p class="c9">重大事务</p>
                <p class="fs18 cd4 b">0</p>
              </div>
            </div>
            <div class="textCenter mt20 c3">2021年全市安全生产事故情况</div>
            <div class="zhan mt12">
              <div id="main2" style="max-width: 100%; height: 280px"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="minTop shadow mt20 flex between">
      <div class="w49 h510">
        <div class="flex between card__header">
          <p class="fs20 c3 b">重点领域整治攻坚</p>
          <p class="c9">截止到5月底</p>
        </div>
        <div class="p20">
          <div class="flex around wrap w100">
            <p
              class=""
              :class="whShow ? 'bg149 cf btn' : 'bgf c3 borc8 btn1'"
              @click="wh"
            >
              危化领域
            </p>
            <p
              class=""
              :class="whShow ? 'bgf c3 borc8 btn1' : 'bg149 cf btn'"
              @click="gk"
            >
              工矿领域
            </p>
            <el-tooltip
              class="item btn2 cf"
              effect="white"
              content="建设中..."
              placement="top"
            >
              <p>消防领域</p>
            </el-tooltip>
            <el-tooltip
              class="item btn2 cf"
              effect="white"
              content="建设中..."
              placement="top"
            >
              <p>道路交通</p>
            </el-tooltip>
            <el-tooltip
              class="item btn2 cf mt20"
              effect="white"
              content="建设中..."
              placement="top"
            >
              <p>建设施工</p>
            </el-tooltip>
            <el-tooltip
              class="item btn2 cf mt20"
              effect="white"
              content="建设中..."
              placement="top"
            >
              <p>城市运行</p>
            </el-tooltip>
            <el-tooltip
              class="item btn2 cf mt20"
              effect="white"
              content="建设中..."
              placement="top"
            >
              <p>旅游领域</p>
            </el-tooltip>
            <el-tooltip
              class="item btn2 cf mt20"
              effect="white"
              content="建设中..."
              placement="top"
            >
              <p>特种设备</p>
            </el-tooltip>
          </div>
          <div class="flex around mt20" v-if="whShow">
            <div class="flex column acenter">
              <div
                class="el-progress--circle"
                style="height: 80px; width: 80px"
              >
                <div class="bgs bg15b"></div>
                <svg viewBox="0 0 100 100">
                  <path
                    d="
                                        M 50 50
                                        m 0 -47
                                        a 47 47 0 1 1 0 94
                                        a 47 47 0 1 1 0 -94
                                        "
                    stroke="#e5e9f2"
                    stroke-width="5.0"
                    fill="none"
                    class="el-progress-circle__track"
                    style="
                      stroke-dasharray: 295.31px, 295.31px;
                      stroke-dashoffset: 0px;
                    "
                  ></path>
                  <path
                    d="
                                        M 50 50
                                        m 0 -47
                                        a 47 47 0 1 1 0 94
                                        a 47 47 0 1 1 0 -94
                                        "
                    stroke="#48e1a7"
                    fill="none"
                    stroke-linecap="round"
                    stroke-width="5.0"
                    class="el-progress-circle__path"
                    style="
                      stroke-dasharray: 171.28px, 295.31px;
                      stroke-dashoffset: 0px;
                      transition: stroke-dasharray 0.6s ease 0s,
                        stroke 0.6s ease 0s;
                    "
                  ></path>
                </svg>
                <div class="el-progress_text">58%</div>
              </div>
              <div class="textCenter mt12">
                <p>危化领域</p>
                <p>安全生产风险普查率</p>
              </div>
            </div>
            <div class="flex column acenter">
              <div
                class="el-progress--circle"
                style="height: 80px; width: 80px"
              >
                <div class="bgs bgff8"></div>
                <svg viewBox="0 0 100 100">
                  <path
                    d="
                                        M 50 50
                                        m 0 -47
                                        a 47 47 0 1 1 0 94
                                        a 47 47 0 1 1 0 -94
                                        "
                    stroke="#e5e9f2"
                    stroke-width="5.0"
                    fill="none"
                    class="el-progress-circle__track"
                    style="
                      stroke-dasharray: 295.31px, 295.31px;
                      stroke-dashoffset: 0px;
                    "
                  ></path>
                  <path
                    d="
                                        M 50 50
                                        m 0 -47
                                        a 47 47 0 1 1 0 94
                                        a 47 47 0 1 1 0 -94
                                        "
                    stroke="#ff8126"
                    fill="none"
                    stroke-linecap="round"
                    stroke-width="5.0"
                    class="el-progress-circle__path"
                    style="
                      stroke-dasharray: 171.28px, 295.31px;
                      stroke-dashoffset: 0px;
                      transition: stroke-dasharray 0.6s ease 0s,
                        stroke 0.6s ease 0s;
                    "
                  ></path>
                </svg>
                <div class="el-progress_text">58%</div>
              </div>
              <div class="textCenter mt12">
                <p>化工产业</p>
                <p>“禁限控”目录制定率</p>
              </div>
            </div>
            <div class="flex column acenter">
              <div
                class="el-progress--circle"
                style="height: 80px; width: 80px"
              >
                <div class="bgs bgffc"></div>
                <svg viewBox="0 0 100 100">
                  <path
                    d="
                                        M 50 50
                                        m 0 -47
                                        a 47 47 0 1 1 0 94
                                        a 47 47 0 1 1 0 -94
                                        "
                    stroke="#e5e9f2"
                    stroke-width="5.0"
                    fill="none"
                    class="el-progress-circle__track"
                    style="
                      stroke-dasharray: 295.31px, 295.31px;
                      stroke-dashoffset: 0px;
                    "
                  ></path>
                  <path
                    d="
                                        M 50 50
                                        m 0 -47
                                        a 47 47 0 1 1 0 94
                                        a 47 47 0 1 1 0 -94
                                        "
                    stroke="#ffc341"
                    fill="none"
                    stroke-linecap="round"
                    stroke-width="5.0"
                    class="el-progress-circle__path"
                    style="
                      stroke-dasharray: 171.28px, 295.31px;
                      stroke-dashoffset: 0px;
                      transition: stroke-dasharray 0.6s ease 0s,
                        stroke 0.6s ease 0s;
                    "
                  ></path>
                </svg>
                <div class="el-progress_text">58%</div>
              </div>
              <div class="textCenter mt12">
                <p>重大危险源</p>
                <p>在线管控</p>
              </div>
            </div>
          </div>
          <div class="flex around mt20 wrap" v-if="gkShow">
            <div class="flex column acenter icon160">
              <div
                class="el-progress--circle"
                style="height: 80px; width: 80px"
              >
                <div class="bgs bg15b"></div>
                <svg viewBox="0 0 100 100">
                  <path
                    d="
                                        M 50 50
                                        m 0 -47
                                        a 47 47 0 1 1 0 94
                                        a 47 47 0 1 1 0 -94
                                        "
                    stroke="#e5e9f2"
                    stroke-width="5.0"
                    fill="none"
                    class="el-progress-circle__track"
                    style="
                      stroke-dasharray: 295.31px, 295.31px;
                      stroke-dashoffset: 0px;
                    "
                  ></path>
                  <path
                    d="
                                        M 50 50
                                        m 0 -47
                                        a 47 47 0 1 1 0 94
                                        a 47 47 0 1 1 0 -94
                                        "
                    stroke="#48e1a7"
                    fill="none"
                    stroke-linecap="round"
                    stroke-width="5.0"
                    class="el-progress-circle__path"
                    style="
                      stroke-dasharray: 171.28px, 295.31px;
                      stroke-dashoffset: 0px;
                      transition: stroke-dasharray 0.6s ease 0s,
                        stroke 0.6s ease 0s;
                    "
                  ></path>
                </svg>
                <div class="el-progress_text">11座</div>
              </div>
              <div class="textCenter mt12">
                <p>尾矿库</p>
                <p>在线监测监控</p>
              </div>
            </div>
            <div class="flex column acenter icon160">
              <div
                class="el-progress--circle"
                style="height: 80px; width: 80px"
              >
                <div class="bgs bgff8"></div>
                <svg viewBox="0 0 100 100">
                  <path
                    d="
                                        M 50 50
                                        m 0 -47
                                        a 47 47 0 1 1 0 94
                                        a 47 47 0 1 1 0 -94
                                        "
                    stroke="#e5e9f2"
                    stroke-width="5.0"
                    fill="none"
                    class="el-progress-circle__track"
                    style="
                      stroke-dasharray: 295.31px, 295.31px;
                      stroke-dashoffset: 0px;
                    "
                  ></path>
                  <path
                    d="
                                        M 50 50
                                        m 0 -47
                                        a 47 47 0 1 1 0 94
                                        a 47 47 0 1 1 0 -94
                                        "
                    stroke="#ff8126"
                    fill="none"
                    stroke-linecap="round"
                    stroke-width="5.0"
                    class="el-progress-circle__path"
                    style="
                      stroke-dasharray: 171.28px, 295.31px;
                      stroke-dashoffset: 0px;
                      transition: stroke-dasharray 0.6s ease 0s,
                        stroke 0.6s ease 0s;
                    "
                  ></path>
                </svg>
                <div class="el-progress_text">95%</div>
              </div>
              <div class="textCenter mt12">
                <p>三项岗位人员</p>
                <p>上岗持证率</p>
              </div>
            </div>
            <div class="flex column acenter icon160">
              <div
                class="el-progress--circle"
                style="height: 80px; width: 80px"
              >
                <div class="bgs bgffc"></div>
                <svg viewBox="0 0 100 100">
                  <path
                    d="
                                        M 50 50
                                        m 0 -47
                                        a 47 47 0 1 1 0 94
                                        a 47 47 0 1 1 0 -94
                                        "
                    stroke="#e5e9f2"
                    stroke-width="5.0"
                    fill="none"
                    class="el-progress-circle__track"
                    style="
                      stroke-dasharray: 295.31px, 295.31px;
                      stroke-dashoffset: 0px;
                    "
                  ></path>
                  <path
                    d="
                                        M 50 50
                                        m 0 -47
                                        a 47 47 0 1 1 0 94
                                        a 47 47 0 1 1 0 -94
                                        "
                    stroke="#ffc341"
                    fill="none"
                    stroke-linecap="round"
                    stroke-width="5.0"
                    class="el-progress-circle__path"
                    style="
                      stroke-dasharray: 171.28px, 295.31px;
                      stroke-dashoffset: 0px;
                      transition: stroke-dasharray 0.6s ease 0s,
                        stroke 0.6s ease 0s;
                    "
                  ></path>
                </svg>
                <div class="el-progress_text">100%</div>
              </div>
              <div class="textCenter mt12">
                <p>尾矿库符合要求</p>
                <p>堆积坝的整改率</p>
              </div>
            </div>
            <div class="flex column acenter icon160 mt12">
              <div
                class="el-progress--circle"
                style="height: 80px; width: 80px"
              >
                <div class="bgs bg20d"></div>
                <svg viewBox="0 0 100 100">
                  <path
                    d="
                                        M 50 50
                                        m 0 -47
                                        a 47 47 0 1 1 0 94
                                        a 47 47 0 1 1 0 -94
                                        "
                    stroke="#e5e9f2"
                    stroke-width="5.0"
                    fill="none"
                    class="el-progress-circle__track"
                    style="
                      stroke-dasharray: 295.31px, 295.31px;
                      stroke-dashoffset: 0px;
                    "
                  ></path>
                  <path
                    d="
                                        M 50 50
                                        m 0 -47
                                        a 47 47 0 1 1 0 94
                                        a 47 47 0 1 1 0 -94
                                        "
                    stroke="#20DBEE"
                    fill="none"
                    stroke-linecap="round"
                    stroke-width="5.0"
                    class="el-progress-circle__path"
                    style="
                      stroke-dasharray: 171.28px, 295.31px;
                      stroke-dashoffset: 0px;
                      transition: stroke-dasharray 0.6s ease 0s,
                        stroke 0.6s ease 0s;
                    "
                  ></path>
                </svg>
                <div class="el-progress_text">29%</div>
              </div>
              <div class="textCenter mt12">
                <p>涉爆粉尘企业</p>
                <p>网络专题学习率</p>
              </div>
            </div>
            <div class="flex column acenter icon160 mt12">
              <div
                class="el-progress--circle"
                style="height: 80px; width: 80px"
              >
                <div class="bgs bg369"></div>
                <svg viewBox="0 0 100 100">
                  <path
                    d="
                                        M 50 50
                                        m 0 -47
                                        a 47 47 0 1 1 0 94
                                        a 47 47 0 1 1 0 -94
                                        "
                    stroke="#e5e9f2"
                    stroke-width="5.0"
                    fill="none"
                    class="el-progress-circle__track"
                    style="
                      stroke-dasharray: 295.31px, 295.31px;
                      stroke-dashoffset: 0px;
                    "
                  ></path>
                  <path
                    d="
                                        M 50 50
                                        m 0 -47
                                        a 47 47 0 1 1 0 94
                                        a 47 47 0 1 1 0 -94
                                        "
                    stroke="#3699F7"
                    fill="none"
                    stroke-linecap="round"
                    stroke-width="5.0"
                    class="el-progress-circle__path"
                    style="
                      stroke-dasharray: 171.28px, 295.31px;
                      stroke-dashoffset: 0px;
                      transition: stroke-dasharray 0.6s ease 0s,
                        stroke 0.6s ease 0s;
                    "
                  ></path>
                </svg>
                <div class="el-progress_text">62.9%</div>
              </div>
              <div class="textCenter mt12">
                <p>涉爆粉尘企业安全生产</p>
                <p>社会化服务覆盖率</p>
              </div>
            </div>
            <div class="flex column acenter icon160 mt12">
              <div
                class="el-progress--circle"
                style="height: 80px; width: 80px"
              >
                <div class="bgs bga0f"></div>
                <svg viewBox="0 0 100 100">
                  <path
                    d="
                                        M 50 50
                                        m 0 -47
                                        a 47 47 0 1 1 0 94
                                        a 47 47 0 1 1 0 -94
                                        "
                    stroke="#e5e9f2"
                    stroke-width="5.0"
                    fill="none"
                    class="el-progress-circle__track"
                    style="
                      stroke-dasharray: 295.31px, 295.31px;
                      stroke-dashoffset: 0px;
                    "
                  ></path>
                  <path
                    d="
                                        M 50 50
                                        m 0 -47
                                        a 47 47 0 1 1 0 94
                                        a 47 47 0 1 1 0 -94
                                        "
                    stroke="#AA00FF"
                    fill="none"
                    stroke-linecap="round"
                    stroke-width="5.0"
                    class="el-progress-circle__path"
                    style="
                      stroke-dasharray: 171.28px, 295.31px;
                      stroke-dashoffset: 0px;
                      transition: stroke-dasharray 0.6s ease 0s,
                        stroke 0.6s ease 0s;
                    "
                  ></path>
                </svg>
                <div class="el-progress_text">95%</div>
              </div>
              <div class="textCenter mt12">
                <p>粉尘爆炸危险场所</p>
                <p>防爆电气设施采用率</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ml20 w49">
        <div class="flex between card__header">
          <p class="fs20 c3 b">企业风险普查</p>
          <p class="c9">截止到5月底</p>
        </div>
        <div class="p20 flex between">
          <el-tabs v-model="activeName1" type="card" @tab-click="handleClick1">
            <el-tab-pane label="重点领域安全生产风险普查率" name="first">
              <div
                id="main3"
                style="max-width: 100%; height: 320px"
                v-show="activeName1 == 'first'"
              ></div>
            </el-tab-pane>
            <el-tab-pane label="企业风险档案" name="second">
              <div
                id="main4"
                style="max-width: 100%; height: 320px"
                v-show="activeName1 == 'second'"
              ></div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="minTop shadow mt20 flex between">
      <div class="w49">
        <div class="flex between card__header">
          <p class="fs20 c3 b">自然灾害防控</p>
          <!-- <p class="c9">截止到5月底</p> -->
        </div>
        <div class="p20 flex between">
          <el-tabs v-model="activeName2" type="card" @tab-click="handleClick2">
            <el-tab-pane label="基层防汛“掌上应急”开通情况" name="first">
              <p class="textCenter mb12">全市基层防汛“掌上应急”开通情况</p>
              <div id="main5" style="max-width: 100%; height: 210px"></div>
            </el-tab-pane>
            <el-tab-pane label="村级防汛防台形势图修编" name="second">
              <p class="textCenter mb12">全市村级防汛防台形势图修编</p>
              <div id="main6" style="max-width: 100%; height: 210px"></div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="ml20 w49">
        <div class="flex between card__header">
          <p class="fs20 c3 b">应急救援</p>
          <p class="c9">截止到5月底</p>
        </div>
        <div class="p20 flex between">
          <el-tabs v-model="activeName3" type="card" @tab-click="handleClick3">
            <el-tab-pane label="救援队伍建设" name="first">
              <div class="p20">
                <p class="textRight c9">已完成数/总任务数</p>
                <div class="mb12 mr40">
                  <div class="flex between ml20 mb12">
                    <p>培育社会救援队伍 (支)</p>
                    <p>1/3</p>
                  </div>
                  <div class="flex acenter">
                    <em class="zfx">◆</em>
                    <el-progress
                      :percentage="33.3"
                      :show-text="false"
                    ></el-progress>
                  </div>
                </div>
                <div class="mb12 mr40">
                  <div class="flex between ml20 mb12">
                    <p>乡镇综合应急救援队伍（队）</p>
                    <p>4/18</p>
                  </div>
                  <div class="flex acenter">
                    <em class="zfx">◆</em>
                    <el-progress
                      :percentage="22.22"
                      :show-text="false"
                    ></el-progress>
                  </div>
                </div>
                <div class="mb12 mr40">
                  <div class="flex between ml20 mb12">
                    <p>救援直升机临时起降点（个）</p>
                    <p>2/9</p>
                  </div>
                  <div class="flex acenter">
                    <em class="zfx">◆</em>
                    <el-progress
                      :percentage="22.22"
                      :show-text="false"
                    ></el-progress>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="避灾安置场所建设" name="second">
              <p></p>
              <div id="main7" style="max-width: 100%; height: 210px"></div>
            </el-tab-pane>

            <el-tab-pane label="森林火险防控" name="third" disabled="true" title="建设中" tooltip="建设中">
              <el-tooltip class="item-tabs" effect="light" placement="top"  slot="label">
                <div slot="content">
                  建设中
                </div>
                <span><i class="el-icon-date"></i> 森林火险防控</span>
              </el-tooltip>

              <div id="main8" style="max-width: 100%; height: 210px"></div>
            </el-tab-pane>

          </el-tabs>
        </div>
      </div>
    </div>
    <div class="minTop shadow mt20">
      <div>
        <div class="flex between card__header acenter">
          <div class="flex acenter">
            <p class="fs20 c3 b mr12">突发事件</p>
            <div class="cc8">{{ myCity }}应急管理综合指挥平台</div>
          </div>
          <p class="c9">截止到5月底</p>
        </div>
        <div class="p20 flex between aqsc">
          <el-table :data="tableData" height="250" border style="width: 100%">
            <!-- <el-table-column prop="id" label="" width="180">
                            </el-table-column> -->
            <el-table-column type="index" :index="indexMethod">
            </el-table-column>
            <el-table-column prop="uname" label="事件名称" width="400">
            </el-table-column>
            <el-table-column prop="level" label="事故等级" width="80">
            </el-table-column>
            <el-table-column prop="types" label="事故类型" width="100">
            </el-table-column>
            <el-table-column prop="time" label="发生时间" width="220">
            </el-table-column>
            <el-table-column prop="origin" label="信息来源"></el-table-column>
            <el-table-column prop="msg" label="应急预案" width="120">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    let one, two, three, four, five, six, seven;
    const _myCity = "青田县";
    import Breadcrumb from "../components/Breadcrumb.vue";
    import {getUserInfo, getTask, postUserInfo} from '../api/index'

    import
    {
        messageFun
    }
    from
    '../util/jianquan'
    export default {
        name: "epidemic",
        components: {Breadcrumb},
        data() {
            return {
                breadData: {
                    page_name: "安全生产",
                    annual_target:
                        "为自觉接受媒体监督,有效行使工作职责，努力做到权为民所用，更好地服务社群，树立良好形象。",
                    leading: "应急管理局",
                },
                myCity: _myCity,
                activeName1: "second",
                activeName2: "first",
                activeName3: "first",
                tableData: [
                    {
                        id: 1,
                        uname:
                            "丽水市百货大楼晶都步行街外立面改造装修工程发生一起高处坠落事故",
                        level: "一般",
                        types: "建筑业",
                        time: "2021年06月18日 08:25:00",
                        origin: "丽水市莲都区应急管理局",
                        msg: "应急预案",
                    },
                    {
                        id: 2,
                        uname: "云和县发生一起事故造成1人死亡事件",
                        level: "一般",
                        types: "商贸其他",
                        time: "2021年06月10日 08:25:00",
                        origin: "龙泉市应急管理局",
                        msg: "应急预案",
                    },
                    {
                        id: 3,
                        uname: "龙泉发生一起叉车碰撞事故，致一人死亡",
                        level: "一般",
                        types: "轻工",
                        time: "2021年06月10日 07:25:00",
                        origin: "乡镇上报",
                        msg: "应急预案",
                    },
                    {
                        id: 4,
                        uname:
                            "丽水市百货大楼晶都步行街外立面改造装修工程发生一起高处坠落事故",
                        level: "一般",
                        types: "建筑业",
                        time: "2021年06月18日 08:25:00",
                        origin: "丽水市莲都区应急管理局",
                        msg: "应急预案",
                    },
                    {
                        id: 5,
                        uname: "青田县山口镇至方山乡公路发生山体塌方",
                        level: "一般",
                        types: "地质灾害",
                        time: "2021年05月27日 08:25:00",
                        origin: "青田县应急管理局",
                        msg: "应急预案",
                    },
                    {
                        id: 6,
                        uname:
                            "青田县东源镇浙江以勒标准件制造有限公司发生一起触电事故致一人死亡",
                        level: "特别重大",
                        types: "商贸其他",
                        time: "2021年05月12日 08:25:00",
                        origin: "青田应急值班室",
                        msg: "应急预案",
                    },
                ],
                gkShow: false,
                whShow: true,
                showTit: false,
            };
        },

        mounted() {
            this.listenMessage();
            let _this = this;
            this.initGzbgChart();
            this.initGzbgChart2();
            this.initGzbgChart3();
            this.initGzbgChart4();
            this.initGzbgChart5();
            this.initGzbgChart6();
            this.initGzbgChart7();
            window.parent.postMessage(document.body.scrollHeight, '*');
            window.onresize = () => {
                return (() => {
                    _this.initGzbgChart();
                    _this.initGzbgChart2();
                    _this.initGzbgChart3();
                    _this.initGzbgChart4();
                    _this.initGzbgChart5();
                    _this.initGzbgChart6();
                    _this.initGzbgChart7();
                    window.parent.postMessage(document.body.scrollHeight, '*');
                })();
            };
            window.addEventListener("resize", function (e) {
                window.parent.postMessage(document.body.scrollHeight, '*');
            });

        },
        methods: {
            listenMessage() {
                window.addEventListener('message', this.bindThis.bind(this));
            },
            async bindThis(e){
              const query=this.$route.query;
              if(query.debug=="true")
              {
                  return;
              }
              const ret=await messageFun(e);
              if(ret==false)
              {
                  this.$router.push("err");
              }
            },
            handleClick1(tab, event) {
                this.activeName1 = tab.name;
                this.$nextTick(function () {
                    this.initGzbgChart3();
                    this.initGzbgChart4();
                });
            },
            handleClick2(tab, event) {
                this.$nextTick(function () {
                    this.initGzbgChart5();
                    this.initGzbgChart6();
                });
            },
            handleClick3(tab, event) {
                this.$nextTick(function () {
                    this.initGzbgChart7();
                    // this.initGzbgChart8();
                });
            },
            indexMethod(index) {
                return index * 1 + 1;
            },
            gk() {
                this.gkShow = true;
                this.whShow = !this.whShow;
            },
            wh() {
                this.whShow = true;
                this.gkShow = !this.gkShow;
            },
            warns() {
                this.showTit = true;
            },
            initGzbgChart() {
                if (one != null && one != "" && one != undefined) {
                    one.dispose(); //销毁
                }
                one = this.$echarts.init(document.getElementById("main1"));
                one.setOption({
                    color: ["#1492ff", "#d40000"],
                    tooltip: {
                        trigger: "axis",
                    },
                    legend: {
                        data: ["事故起数", "死亡人数"],
                        bottom: 0,
                    },
                    grid: {
                        top: "8%",
                        left: "3%",
                        right: "5%",
                        bottom: "15%",
                        containLabel: true,
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: "category",
                            data: [
                                "1月",
                                "2月",
                                "3月",
                                "4月",
                                "5月",
                                "6月",
                                "7月",
                                "8月",
                                "9月",
                                "10月",
                                "11月",
                                "12月",
                            ],
                        },
                    ],
                    yAxis: {
                        type: "value",
                        show: false,
                    },
                    series: [
                        {
                            name: "事故起数",
                            type: "bar",
                            data: [6, 1, 7, 5, 4, 0, 0, 0, 0, 0, 0, 0],
                            label: {
                                // 在图形上显示每个数据
                                show: true,
                                position: "top",
                                itemStyle: {
                                    color: "#1492ff", //柱子的颜色
                                },
                            },
                        },
                        {
                            name: "死亡人数",
                            type: "bar",
                            data: [7, 1, 6, 4, 4, 0, 0, 0, 0, 0, 0, 0],
                            label: {
                                // 在图形上显示每个数据
                                show: true,
                                position: "top",
                                itemStyle: {
                                    normal: {
                                        color: "#d40000", //柱子的颜色
                                    },
                                },
                            },
                        },
                    ],
                });
            },
            initGzbgChart2() {
                if (two != null && two != "" && two != undefined) {
                    two.dispose(); //销毁
                }
                two = this.$echarts.init(document.getElementById("main2"));
                two.setOption({
                    color: ["#ff6b00", "#d40000", "#15be50"],
                    tooltip: {
                        trigger: "item",
                    },
                    legend: {
                        bottom: 0,
                        left: "center",
                    },
                    series: [
                        {
                            name: ["3", "18", "0"],
                            type: "pie",
                            radius: ["50%", "70%"],
                            data: [
                                {value: 4, name: "工矿商贸", seriesName: "0"},
                                {value: 18, name: "道路交通", seriesName: "0"},
                                {value: 0, name: "消防火灾", seriesName: "0"},
                            ],
                            label: {
                                show: true,
                                // position: 'top',
                                formatter: "{c}起",
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)",
                                },
                            },
                        },
                    ],
                });
            },
            initGzbgChart3() {
                if (three != null && three != "" && three != undefined) {
                    three.dispose(); //销毁
                }
                three = this.$echarts.init(document.getElementById("main3"));
                three.setOption({
                    color: ["#15be50"],
                    xAxis: {
                        type: "category",
                        data: [
                            "危化领域",
                            "工矿领域",
                            "消防领域",
                            "道路交通",
                            "建设施工",
                            "城市运行",
                            "旅游领域",
                            "特种设备",
                        ],
                        axisLabel: {
                            textStyle: {
                                color: "#333", //坐标值得具体的颜色
                                fontSize: 14,
                            },
                            interval: 0,
                        },
                        axisTick: {
                            show: true,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#dddddd",
                            },
                        },
                    },
                    yAxis: {
                        show: false,
                    },
                    series: [
                        {
                            data: [20, 14, 18, 15, 10, 14, 26, 23],
                            type: "bar",
                            label: {
                                show: true,
                                position: "top",
                                formatter: "{c}%",
                            },
                            barWidth: 30, // 柱子宽度
                        },
                    ],
                    grid: {
                        top: "5%",
                        left: "3%",
                        right: "5%",
                        bottom: "5%",
                        containLabel: true,
                    },
                });
            },
            initGzbgChart4() {
                if (four != null && four != "" && four != undefined) {
                    four.dispose(); //销毁
                }
                four = this.$echarts.init(document.getElementById("main4"));
                four.setOption({
                    color: ["#EE6666", "#FAC858", "#5470C6", "#91CC75"],
                    tooltip: {
                        trigger: "item",
                    },
                    legend: {
                        right: 0,
                        orient: "vertical",
                        top: "center",
                    },
                    grid: {
                        top: "5%",
                        left: "3%",
                        right: "5%",
                        bottom: "18%",
                        containLabel: true,
                    },
                    series: [
                        {
                            name: "访问来源",
                            type: "pie",
                            radius: "50%",
                            data: [
                                {value: 0.22, name: "重大风险", seriesName: "15"},
                                {value: 0.06, name: "较大风险", seriesName: "4 "},
                                {value: 14.39, name: "一般风险", seriesName: "975"},
                                {value: 85.33, name: "低风险", seriesName: "5809"},
                            ],
                            label: {
                                show: true,
                                // position: 'top',
                                formatter: "{b} {d} {c}%",
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)",
                                },
                            },
                        },
                    ],
                });
            },
            initGzbgChart5() {
                if (five != null && five != "" && five != undefined) {
                    five.dispose(); //销毁
                }
                five = this.$echarts.init(document.getElementById("main5"));
                five.setOption({
                    xAxis: {
                        type: "category",
                        data: ["05-01", "05-08", "05-15", "05-22", "05-27", "05-31"],
                    },
                    yAxis: {
                        type: "value",
                        min: 0,
                        max: 100,
                        splitNumber: 5,
                        splitLine: {
                            show: true,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#333333",
                            },
                        },
                        axisLabel: {
                            formatter: "{value}%",
                        },
                    },
                    series: [
                        {
                            data: [15, 21, 23, 39, 42, 65],
                            type: "line",
                        },
                    ],
                    grid: {
                        top: "4%",
                        left: "3%",
                        right: "5%",
                        bottom: "18%",
                        containLabel: true,
                    },
                });
            },
            initGzbgChart6() {
                if (six != null && six != "" && six != undefined) {
                    six.dispose(); //销毁
                }
                six = this.$echarts.init(document.getElementById("main6"));
                six.setOption({
                    color: ["#FF3E38", "#53A8E8"],
                    tooltip: {
                        trigger: "11",
                    },
                    legend: {
                        // orient: 'vertical',
                        left: "center",
                    },
                    series: [
                        {
                            name: "访问来源",
                            type: "pie",
                            radius: "50%",
                            data: [
                                {value: 0, name: "未编修", seriesName: "0"},
                                {value: 100, name: "已编修", seriesName: "140"},
                            ],
                            label: {
                                show: true,
                                // position: 'top',
                                formatter: "{b} {d} {c}% ",
                                fontSize: 16,
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)",
                                },
                            },
                        },
                    ],
                    grid: {
                        top: "4%",
                        left: "3%",
                        right: "5%",
                        bottom: "18%",
                        containLabel: true,
                    },
                });
            },
            initGzbgChart7() {
                if (seven != null && seven != "" && seven != undefined) {
                    seven.dispose(); //销毁
                }
                seven = this.$echarts.init(document.getElementById("main7"));
                seven.setOption({
                    xAxis: {
                        type: "category",
                        data: [
                            "05-01",
                            "05-08",
                            "05-15",
                            "05-22",
                            "05-27",
                            "05-31",
                            "06-07",
                            "06-14",
                            "06-21",
                        ],
                    },
                    legend: {
                        data: ["乡镇应急救援队伍"],
                    },
                    yAxis: {
                        type: "value",
                        min: 0,
                        max: 120,
                        splitNumber: 5,
                        splitLine: {
                            show: true,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#333333",
                            },
                        },
                    },
                    series: [
                        {
                            data: [21, 41, 50, 70, 77, 90, 105, 112, 117],
                            type: "line",
                        },
                    ],
                    grid: {
                        top: "10%",
                        left: "3%",
                        right: "5%",
                        bottom: "0%",
                        containLabel: true,
                    },
                });
            },
        },
    };
</script>

<style lang="scss">
  #app {
    background: #fff !important;
  }

/* @media screen and (max-width: 1200px) {*/
  /*.main {*/
  /*  width: 100%;*/
  /*  background-color: #fff;*/
  /*  margin: 0px auto;*/
  /*  padding: 30px 0;*/
  /*}*/

  /*.minHeader,*/
  /*.market {*/
  /*  width: calc(100% - 40px);*/
  /*  box-sizing: border-box;*/
  /*  border-radius: 4px;*/
  /*  // padding: 20px;*/
  /*  margin: 20px auto 0;*/
  /*  background: #fff;*/
  /*}*/

  /*.minTop {*/
  /*  width: calc(100% - 40px);*/
  /*  box-sizing: border-box;*/
  /*  border-radius: 4px;*/
  /*  margin: 20px auto;*/
  /*}*/

  // }

  // @media screen and (min-width: 1200px) {
   .main {
     /*width: 1200px;*/
     margin: 0px auto;
     padding: 30px 0;
   }

   .minHeader,
   .market {
     /*width: 1200px;*/
     border-radius: 4px;
     background: #fff;
   }

   .minTop {
     background-color: #fff;
     /*width: 1200px;*/
     border-radius: 4px;
    }
  // }

  .card__header {
    padding: 18px 20px;
    border-bottom: 1px solid #ebeef5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .el-breadcrumb__inner.is-link {
    font-size: 16px !important;
  }

  .el-icon-s-marketing {
    color: rgb(54, 153, 247);
    font-size: 30px;
  }

  .cline {
    width: 1px;
    height: 30px;
    background: #dddddd;
    margin: 0 8px;
  }

  .hl30 {
    height: 30px;
    line-height: 30px;
  }

  .shadow {
    box-shadow: 0 2px 12px 0 #ccc;
  }

  .norm {
    font-style: normal;
    color: #15be50;
  }

  .zhan {
    width: 100%;
    height: 280px;
    /* background: #ccc; */
  }

  .w100 {
    width: 100%;
  }

  .w49 {
    width: 49%;
  }

  .w57 {
    width: 57%;
  }

  .w41 {
    width: 41%;
  }

  .lh30 {
    line-height: 30px;
  }

  .h60 {
    height: 60px;
  }

  .btn {
    width: 22%;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
  }

  .btn1 {
    width: 22%;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
  }

  .btn2 {
    width: 22%;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    text-align: center;
    background: #c8c9cc !important;
    cursor: pointer;
    color: #fff !important;
    font-size: 16px !important;
    border-color: #c8c9cc !important;
  }

  .btn1:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }

  .btn:hover {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
  }

  .pore {
    position: relative;
  }

  .el-popover {
    min-width: 55px !important;
    left: 415px !important;
  }

  .el-tooltip__popper {
    border: 1px solid #ecf5ff !important;
    background: #fff !important;
  }

  /* .poab {
        position: absolute;
        top: -70px;
        width: 80px;
        height: 40px;
        line-height: 40px;
        color: #333333;
        border: 1px solid #ebeef5;
        background: #fff;
        border-radius: 4px;
        top: -60px;
        left: 50%;
        transform: translate(-50%, 10px);
    }
    .popper__arrow {
        position: absolute;
        width: 5px;
        top: -10px;
        left: 50%;
        transform: translate(-50%, 0px);
        height: 0;
    }
    .corner {
        width: 0px;
        height: 0px;
        border: 5px solid #f3f3ed;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;

    } */
  .el-progress--circle,
  .el-progress--dashboard {
    display: inline-block;
    position: relative;
  }

  .el-button:hover {
    color: #fff;
    border-color: #c8c9cc !important;
    background-color: #c8c9cc;
  }

  .el-progress_text {
    font-size: 16px !important;
    color: #000;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    margin: 0;
    transform: translateY(-50%);
  }

  .bgs {
    width: 60px;
    height: 60px;
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    margin: auto;
    border-radius: 50%;
    /* background: #48e1a7; */
  }

  .bgc89 {
    background: #c8c9cc;
  }

  .borc8 {
    border: 1px solid #c8c9cc;
  }

  .el-tabs {
    width: 100% !important;
  }

  .mb12 {
    margin-bottom: 12px;
  }

  .zfx {
    color: #ff6b00;
    font-style: normal;
    font-size: 20px;
    vertical-align: middle;
    line-height: 22px;
    margin-right: 12px;
  }

  .el-progress {
    width: 100% !important;
  }

  .cc8 {
    background: #c8c9cc;
    color: #fff;
    padding: 12px 20px;
    border-radius: 5px;
  }

  .aqsc .el-table__row .el-table_1_column_2 {
    color: #409eff;
    font-size: 12px;
  }

  .el-table__row .el-table_1_column_7 {
    color: #aaa !important;
  }

  .el-table thead {
    color: #333 !important;
  }

  .el-table td,
  .el-table th {
    text-align: center !important;
  }

  .textRight {
    text-align: right;
  }

  .icon160 {
    width: 160px;
  }

  .h510 {
    height: 510px;
  }
</style>
