数字滚动 滚动数字 countTo

<template>
  <div class="container">
    <div class="header">
      <div class="top">
        <Date />
      </div>
      <div class="sec_top">
        <div class="top-left">
          <img src="../../assets/images/large/qjdc.png" alt />
        </div>
        <div class="se_top">
          <div
            class="nav"
            v-for="(item, index) in navTab"
            :key="index"
            :class="{ tabactive: activeTab == index }"
            @click="changeaTb(index)"
          >
            <div>{{ item }}</div>
          </div>
        </div>
        <div class="top-right">
          <img src="../../assets/images/large/qyhx.png" alt />
        </div>
        <div class="top-right-back">
          <a
            href="http://localhost/#/publish/74?token=fSsdCh09Y2A%2BIUl%2Bxuf6tw%3D%3D"
            target="_self"
          >
            <img src="../../assets/images/large/back_1.png" alt />
          </a>
        </div>
      </div>
    </div>

    <div class="content">
      <!-- <div v-if="!isShow" class="model" style="width: 13rem;
    height: 100%;
      position: relative;">-->
      <div class="left" v-if="isShow">
        <div style="margin-top: -0.625rem">
          <div class="sec-img">
            <img src="../../assets/images/large/zdxm.png" alt style="width:12.75rem" />
          </div>
        </div>
        <div class="prototal">
          <img src="../../assets/images/large/ptotal.png" alt />
          <div>
            <div class="title">项目总数</div>
            <div class="tnum">
              <countTo :startVal="0" :endVal="1098" :duration="3000" separator></countTo>
            </div>
          </div>
          <div>
            <div class="title">项目总投资额</div>
            <div class="num">
              <span>
                <countTo :startVal="0" :endVal="457.12" :duration="3000" :decimals="2" separator></countTo>
              </span>
              <span class="unit">亿元</span>
            </div>
          </div>
          <div>
            <div class="title">累计到位投资</div>
            <div class="num">
              <span>
                <countTo :startVal="0" :endVal="347.92" :duration="3000" :decimals="2"></countTo>
              </span>
              <span class="unit">亿元</span>
            </div>
          </div>
        </div>
        <chart-view
          style="height: 2.25rem; width: 12rem"
          :chart-option="barOptions"
          :auto-resize="true"
          height="100%"
        ></chart-view>
        <div class="sbjd">
          <div class="sbshow" v-for="(item, index) in sjlist" :key="index">
            <img :src="item.img" alt />
            <div style="margin-left: 0.125rem">
              <div class="title">{{ item.name }}</div>
              <div class="num">
                <countTo
                  :startVal="0"
                  :endVal="item.num"
                  :duration="3000"
                  :style="{ color: item.color }"
                ></countTo>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="sec-img">
            <img src="../../assets/images/large/cyfz.jpg" alt style="height: 0.875rem;" />
          </div>
        </div>
        <div>
          <div class="showBusiness">
            <img src="../../assets/images/large/zdcyicon.png" alt />
            <span>主导产业一总数</span>
            <countTo class="cy1" :startVal="0" :endVal="1403" :duration="3000" separator></countTo>
            <span>主导产业二总数</span>
            <countTo class="cy2" :startVal="0" :endVal="2303" :duration="3000" separator></countTo>
          </div>
          <chart-view
            style="height: 4.5rem; width: 11rem"
            :chart-option="chartOpt2"
            :auto-resize="true"
            height="100%"
            ref="lineCharts"
          ></chart-view>

          <!-- <div id="line" style="height: 4.5rem; width: 11rem" ref="lines"></div> -->
        </div>
        <div class="sec-titleImg" style="margin-left: 0.875rem">
          <img src="../../assets/images/large/cyfz2.png" alt />
        </div>
        <div class="sec-img">
          <img src="../../assets/images/large/business.png" alt />
        </div>
        <!-- <div
        id="barwater"
        style="height: 5.5rem; width: 11rem"
        ref="barwater"
        ></div>-->

        <chart-view
          style="height: 5.5rem; width: 12rem"
          :chart-option="chartOpt1"
          :auto-resize="true"
          height="100%"
        ></chart-view>
        <div class="left-side">
          <img src="../../assets/images/large/leftside.png" alt />
        </div>
        <div class="sec-titleImg" style="margin-left: 0.875rem">
          <img src="../../assets/images/large/jjyx.png" alt />
        </div>
        <div class="trend">
          <div class="sec-img">
            <img src="../../assets/images/large/ztts.png" alt />
          </div>
          <!--3D饼图 GO-->
          <div class="gdp">
            <div class="gdpvalue">
              <img src="../../assets/images/large/gdp.png" alt />
              <!-- <div > -->
              <span style="font-style: italic">生产总值</span>
              <span class="strongnum">112</span>
              <span>亿元</span>
            </div>
            <!-- <div class="warning-pie" id="pieChart" style="width:100%;height:5.5rem"></div> -->
            <div class="big-box" style="width: 100%; height: 3.5rem">
              <div class="com-container" ref="container"></div>
              <div class="dz"></div>
              <div class="tulibox">
                <div v-for="(item, index) in peiData" :key="index" class="tuliboxitem">
                  <div class="name">{{ item.name }}</div>
                  <div class="acc">
                    <countTo :startVal="0" :endVal="item.account" :duration="3000"></countTo>元
                  </div>
                  <div class="value">{{ item.y }}%</div>
                  <div class="rate">
                    同比
                    <span
                      style="margin-left: 0.25rem"
                      :style="{
                        color:
                          item.rate > 0
                            ? 'rgba(255, 88, 88, 1)'
                            : 'rgba(22, 226, 132, 1)',
                      }"
                    >{{ item.rate }}%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="sec-img">
          <img src="../../assets/images/large/zdcy.png" alt />
        </div>
        <div class="industry">
          <div class="item" v-for="(item, index) in industryList" :key="index">
            <img :src="item.icon" alt />
            <div>{{ item.name }}</div>
            <div>
              <countTo class="value" :startVal="0" :endVal="item.value" :duration="3000" separator></countTo>
              <span>家</span>
            </div>
            <div class="firm">
              <span>营收</span>
              <countTo
                class="firmvalue"
                :startVal="0"
                :endVal="item.firm"
                :duration="3000"
                separator
              ></countTo>
              <span>亿元</span>
            </div>
            <div class="revenue">
              <span>税收</span>
              <countTo
                class="revenuevalue"
                :startVal="0"
                :endVal="item.revenue"
                :duration="3000"
                separator
                :decimals="1"
              ></countTo>
              <span>亿元</span>
            </div>
          </div>
        </div>
      </div>
      <!-- </div> -->
      <div class="map">
        <div class="asideleft" @click="detail" v-if="isShow">
          <div class="map-left">
            <div class="mjitem" style="left: 0">
              企业总数
              <countTo class="count" :startVal="0" :endVal="5791" :duration="3000" separator></countTo>
              <span class="units">个</span>
            </div>
          </div>
          <div class="map-left" style="top: 8.2rem; left: -5.5rem">
            <div class="mjitem" style="left: -0.5rem">
              园区总面积
              <countTo
                class="count"
                :startVal="0"
                :endVal="6.23"
                :duration="3000"
                :decimals="2"
                separator
              ></countTo>
              <span class="units">km2</span>
            </div>
          </div>
          <div class="map-left" style="top: 10rem; left: -5.5rem">
            <div class="mjitem" style="left: -0.5rem">
              规划总面积
              <countTo
                class="count"
                :startVal="0"
                :endVal="5.21"
                :duration="3000"
                separator
                :decimals="2"
              ></countTo>
              <span class="units">km2</span>
            </div>
          </div>
          <div class="map-left" style="top: 11.8rem; left: -5.8rem">
            <div class="mjitem" style="left: -0.5rem">
              已利用面积
              <countTo class="count" :startVal="0" :endVal="3.21" :duration="3000" :decimals="2"></countTo>
              <span class="units">km2</span>
            </div>
          </div>
          <div class="map-left" style="top: 13.5rem; left: -5.8rem">
            <div class="mjitem" style="left: -0.4rem">
              楼宇面积
              <countTo class="count" :startVal="0" :endVal="148" :duration="3000"></countTo>
              <span class="units">楼</span>
            </div>
          </div>
          <div class="map-left" style="top: 15.2rem; left: -5.5rem">
            <div class="mjitem" style="left: -1.5rem">
              可租售面积
              <countTo class="count" :startVal="0" :endVal="7853180" :duration="3000"></countTo>
              <span class="units">km2</span>
            </div>
          </div>
          <div class="map-left" style="top: 16.8rem; left: -5.5rem">
            <div class="mjitem" style="left: -0.4rem">
              空置率
              <countTo class="count" :startVal="0" :endVal="16.48" :decimals="2" :duration="3000"></countTo>
              <span class="units">%</span>
            </div>
          </div>
          <div class="map-left" style="top: 18.4rem; left: -5rem">
            <div class="mjitem" style="left: -1.3rem">
              空置面积
              <countTo class="count" :startVal="0" :endVal="1294192" :duration="3000"></countTo>km2
            </div>
          </div>
        </div>
        <div class="asideright" v-if="isShow">
          <div class="map-right">
            <div class="rkitem">
              <div class="rkname">区域总面积</div>
              <countTo class="count" :startVal="0" :endVal="60.61" :decimals="2" :duration="3000"></countTo>
              <span class="units">km2</span>
            </div>
          </div>
          <div class="map-right" style="top: 9.2rem; right: -10.5rem">
            <div class="rkitem">
              <div class="rkname">区域总面积</div>
              <countTo class="count" :startVal="0" :endVal="60.61" :decimals="2" :duration="3000"></countTo>
              <span class="units">km2</span>
            </div>
          </div>
          <div class="map-right" style="top: 12rem; right: -10.8rem">
            <div class="rkitem">
              <div class="rkname">区域总面积</div>
              <countTo class="count" :startVal="0" :endVal="60.61" :decimals="2" :duration="3000"></countTo>
              <span class="units">km2</span>
            </div>
          </div>
          <div class="map-right" style="top: 15rem; right: -10.3rem">
            <div class="rkitem">
              <div class="rkname">区域总面积</div>
              <countTo class="count" :startVal="0" :endVal="60.61" :decimals="2" :duration="3000"></countTo>
              <span class="units">km2</span>
            </div>
          </div>
          <div class="map-right" style="top: 17.8rem; right: -9.5rem">
            <div class="rkitem">
              <div class="rkname">区域总面积</div>
              <countTo class="count" :startVal="0" :endVal="60.61" :decimals="2" :duration="3000"></countTo>
              <span class="units">km2</span>
            </div>
          </div>
        </div>
        <div class="location">
          <div class="building">
            <img @click="detail" src="../../assets/images/large/building2.png" alt />
          </div>
          <div class="bottomBox">
            <div class="bqy">
              <img src="../../assets/images/large/gx.png" alt />
              <div>高新技术企业</div>
            </div>
            <div class="bqy">
              <img src="../../assets/images/large/ss.png" alt />
              <div>上市企业</div>
            </div>
            <div class="bqy">
              <img src="../../assets/images/large/djs.png" alt />
              <div>独角兽企业</div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div v-if="!isShow" class="model" style="width: 16rem;
    height: 100%;
      position: relative;">-->
      <div class="right" v-if="isShow">
        <div class="secr-img" style="margin-top: -0.625rem">
          <img src="../../assets/images/large/qyl.png" alt />
        </div>
        <chart-view
          style="height: 5rem; width: 11rem; margin-left: 10.5rem"
          :chart-option="chartqyBar"
          :auto-resize="true"
          height="100%"
          ref="lineqyBar"
        ></chart-view>
        <div class="sec-titleImg" style="margin-right: 3.5rem;margin-top: 0.5rem;">
          <img src="../../assets/images/large/qydc.png" alt />
        </div>
        <div class="secr-img" style="margin-left: 9.5rem">
          <img src="../../assets/images/large/qyzl.png" alt />
        </div>
        <div class="qyzl">
          <div>
            <div class="shownum">
              <img src="../../assets/images/large/zyqy.png" alt />
              <div>
                <div class="title">在营企业总数</div>
                <div class="tnum">
                  <countTo :startVal="0" :endVal="1098" :duration="3000" separator></countTo>
                </div>
              </div>
            </div>
            <div class="shownum">
              <img src="../../assets/images/large/ssqy.png" alt />
              <div>
                <div class="title">上市企业</div>
                <div class="num">
                  <countTo :startVal="0" :endVal="231" :duration="3000" separator></countTo>
                </div>
              </div>
            </div>
          </div>
          <!-- <div style=" height: 100%; width: 5rem"> -->
          <chart-view
            style="height: 100%; width: 10rem"
            :chart-option="sxbarOptions"
            :auto-resize="true"
            ref="refsxbar"
            height="100%"
          ></chart-view>
          <!-- </div> -->
        </div>
        <div class="sec-titleImg" style="margin-right: 2.5rem">
          <img src="../../assets/images/large/zd.png" alt />
        </div>
        <div class="secr-img" style="margin-left: 10rem">
          <img src="../../assets/images/large/zdtj.png" alt />
        </div>
        <div class="prototal-right" style="margin-left: 12rem">
          <img src="../../assets/images/large/ptotal.png" alt />
          <div>
            <div class="title" style="font-size:0.3rem">项目总数</div>
            <div class="tnum">
              <countTo :startVal="0" :endVal="1098" :duration="3000" separator></countTo>
            </div>
          </div>
          <div>
            <div class="title">项目总投资额</div>
            <div class="num">
              <span>
                <countTo :startVal="0" :endVal="457.12" :duration="3000" :decimals="2" separator></countTo>亿元
              </span>
            </div>
          </div>
          <div>
            <div class="title">累计到位投资</div>
            <div class="num">
              <span>
                <countTo :startVal="0" :endVal="347.92" :duration="3000" :decimals="2"></countTo>亿元
              </span>
            </div>
          </div>
        </div>
        <chart-view
          style="height: 2.25rem; width: 12rem; margin-left: 11rem"
          :chart-option="barOptions"
          :auto-resize="true"
          height="100%"
        ></chart-view>
        <div class="secr-img" style="margin-left: 9.5rem">
          <img src="../../assets/images/large/zdjd.png" alt />
          <div class="xmpogress">
            <div class="protitle">
              <div class="tl" v-for="item in protitleList" :key="item">{{ item }}</div>
            </div>

            <div class="prodata" v-for="(item, index) in prodataList" :key="index">
              <div class="proitem">{{ item.name }}</div>
              <div class="proitem">{{ item.qy }}</div>
              <div class="proitem" style="color: #ffb400">{{ item.progress }}</div>
              <div class="proitem">{{ item.lcb }}</div>
              <div class="proitem">{{ item.step }}</div>
              <div class="proitem">{{ item.status }}</div>
            </div>
          </div>
          <!-- <el-table
            :data="tableData"
            :row-style="{ height: '0.45rem' }"
            style="width: 100%"
          >
            <el-table-column prop="name" label="项目名称"> </el-table-column>
            <el-table-column prop="qy" label="项目所属企业"> </el-table-column>
            <el-table-column prop="progress" label="项目审批进度">
            </el-table-column>
            <el-table-column prop="lcb" label="项目承诺里程碑">
            </el-table-column>
            <el-table-column prop="step" label="项目阶段"> </el-table-column>
            <el-table-column prop="status" label="最新状态"> </el-table-column>
          </el-table>-->
        </div>
        <div class="project">
          <div class="sec-img" style="margin-top:0.5rem">
            <img src="../../assets/images/large/xmjd.png" alt />
          </div>
          <!--3D饼图 GO-->
          <div class="gdps">
            <div class="projectTotal">
              <img src="../../assets/images/large/ptotal.png" alt />
              <span style="font-style: italic">项目总数</span>
              <span class="strongnum">112</span>
              <span>亿元</span>
            </div>
            <!-- <div class="warning-pie" id="pieChart" style="width:100%;height:5.5rem"></div> -->
            <div class="big-box" style="width: 100%; height: 3.5rem">
              <div class="com-container" ref="container1"></div>
              <div class="dz"></div>
              <div class="tulibox">
                <div v-for="(item, index) in projectData" :key="index" class="tuliboxitem">
                  <div class="name">{{ item.name }}</div>
                  <div class="acc">
                    <countTo :startVal="0" :endVal="item.y" :duration="3000"></countTo>个
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- </div> -->
    </div>

    <el-dialog :visible.sync="dialogVisible" width="46rem" class="animate__zoomIn">
      <div class="dialog">
        <div class="close" @click="dialogVisible = false">
          <img class="close-img" src="../../assets/images/large/gb.png" alt />
        </div>
        <div class="dialog-title">中国节能环保集团有限公司</div>
        <div>
          <swiper ref="mySwiper" class="swiper" :options="swiperOption">
            <swiper-slide :key="index" v-for="(item, index) in swiperList">
              <div class="banner">
                <img :src="item.img" alt />
              </div>
            </swiper-slide>
          </swiper>
        </div>
        <div class="dialog-content">
          <el-row>
            <el-col v-for="(t,i) in companyDetail" :key="i" :span="i == 0 ? 24 : 8">
              <span>{{t.label + ' : ' }}</span>
              <span style="color:RGBA(255, 255, 255, 0.9);margin-left:5px">{{t.value}}</span>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import "animate.css";
import "@/utils/flexs.js";
import { fontChart } from "@/utils/echartPxToRem.js";
import "@/assets/styles/largeScreen.scss";
import countTo from "vue-count-to";
import ChartView from "@/components/Chart/index.vue";
import Date from "@/components/Date/index.vue";
import coverImgUrl from "../../assets/images/large/boxactive.png";
// import { getPie3D, getParametricEquation } from '@/utils/charts.js'
import HighCharts from "highcharts";
import Highcharts3d from "highcharts/highcharts-3d";
Highcharts3d(HighCharts);
// const color = ['#259AA2','#1A52A3', '#86CBF0','#F6BE52','F0833A']
export default {
  components: {
    countTo,
    ChartView,
    Date,
    swiper,
    swiperSlide
  },

  data() {
    return {
      chartOpt1: null,
      chartOpt2: null,
      barOptions: null,
      chartqyBar: null,
      // charts: null,
      sxbarOptions: null,
      navTab: ["产业园区分布", "办公楼宇分布", "入驻企业分布"],
      activeTab: 0,
      sjlist: [
        {
          name: "申报评价阶段",
          img: require("../../assets/images/large/sbpj.png"),
          num: 358,
          color: "#32DCFB"
        },
        {
          name: "国土规划阶段",
          img: require("../../assets/images/large/gtgh.png"),
          num: 766,
          color: "#CF6346"
        },
        {
          name: "施工许可阶段",
          img: require("../../assets/images/large/sgxk.png"),
          num: 976,
          color: "#01D2A8"
        },
        {
          name: "施工验收阶段",
          img: require("../../assets/images/large/sgys.png"),
          num: 976,
          color: "#FFDF48"
        }
      ],
      industryList: [
        {
          icon: require("../../assets/images/large/majorIcon.png"),
          name: "重点产业1",
          value: 24,
          firm: 23,
          revenue: 7.2
        },
        {
          icon: require("../../assets/images/large/majorIcon.png"),
          name: "重点产业2",
          value: 15,
          firm: 23,
          revenue: 7.2
        },
        {
          icon: require("../../assets/images/large/majorIcon.png"),
          name: "重点产业3",
          value: 41,
          firm: 23,
          revenue: 7.2
        },
        {
          icon: require("../../assets/images/large/majorIcon.png"),
          name: "重点产业4",
          value: 37,
          firm: 23,
          revenue: 7.2
        },
        {
          icon: require("../../assets/images/large/majorIcon.png"),
          name: "重点产业5",
          value: 12,
          firm: 23,
          revenue: 7.2
        }
      ],
      prodataList: [
        {
          name: "改建回迁1",
          qy: "中建第三建设",
          progress: "审批中",
          lcb: "2025年",
          step: "2025年",
          status: "审批中"
        },
        {
          name: "改建回迁1",
          qy: "中建第三建设",
          progress: "审批中",
          lcb: "2025年",
          step: "2025年",
          status: "审批中"
        },
        {
          name: "改建回迁1",
          qy: "中建第三建设",
          progress: "审批中",
          lcb: "2025年",
          step: "2025年",
          status: "审批中"
        },
        {
          name: "改建回迁1",
          qy: "中建第三建设",
          progress: "审批中",
          lcb: "2025年",
          step: "2025年",
          status: "审批中"
        },
        {
          name: "改建回迁1",
          qy: "中建第三建设",
          progress: "审批中",
          lcb: "2025年",
          step: "2025年",
          status: "审批中"
        },
        {
          name: "改建回迁1",
          qy: "中建第三建设",
          progress: "审批中",
          lcb: "2025年",
          step: "2025年",
          status: "审批中"
        }
      ],
      protitleList: [
        "项目名称",
        "项目所属企业",
        "项目审批进度",
        "项目承诺里程碑",
        "项目阶段",
        "最新状态"
      ],
      buildNo: [
        {
          value: 101,
          status: "zz"
        },
        {
          value: 102,
          status: "zz"
        },
        {
          value: 103,
          status: "zz"
        },
        {
          value: 201,
          status: "zz"
        },
        {
          value: 202,
          status: "zz"
        },
        {
          value: 203,
          status: "zz"
        },
        {
          value: 101,
          status: "zz"
        },
        {
          value: 102,
          status: "zz"
        },
        {
          value: 103,
          status: "cz"
        },
        {
          value: 201,
          status: "zz"
        },
        {
          value: 202,
          status: "kz"
        },
        {
          value: 203,
          status: "zz"
        },

        {
          value: 101,
          status: "zz"
        },
        {
          value: 102,
          status: "zz"
        },
        {
          value: 103,
          status: "cz"
        },
        {
          value: 201,
          status: "cz"
        },
        {
          value: 202,
          status: "zz"
        },
        {
          value: 203,
          status: "zz"
        },
        {
          value: 101,
          status: "zz"
        },
        {
          value: 102,
          status: "cz"
        },
        {
          value: 103,
          status: "zz"
        },
        {
          value: 201,
          status: "kz"
        },
        {
          value: 202,
          status: "kz"
        },
        {
          value: 203,
          status: "zz"
        },

        {
          value: 101,
          status: "kz"
        },
        {
          value: 102,
          status: "zz"
        },
        {
          value: 103,
          status: "zz"
        },
        {
          value: 201,
          status: "zz"
        },
        {
          value: 202,
          status: "cz"
        },
        {
          value: 203,
          status: "zz"
        },
        {
          value: 101,
          status: "zz"
        },
        {
          value: 102,
          status: "cz"
        },
        {
          value: 103,
          status: "zz"
        },
        {
          value: 201,
          status: "zz"
        },
        {
          value: 202,
          status: "zz"
        },
        {
          value: 203,
          status: "zz"
        }
      ],
      peiData: [
        { name: "规上工业总产值", y: 28, h: 60, account: 12355923, rate: 15 },
        {
          name: "社会消费品零售总额",
          y: 20,
          h: 5,
          account: 12355923,
          rate: 9.2
        },
        { name: "实际利用外资", y: 10, h: 20, account: 12355923, rate: 0.11 },
        { name: "固定资产投资", y: 19, h: 30, account: 12355923, rate: -0.33 },
        { name: "地方税收收入", y: 6, h: 50, account: 12355923, rate: 0.23 }
      ],
      projectData: [
        { name: "申报评价阶段项目总数", y: 12, h: 60 },
        { name: "施工验收阶段项目总数", y: 12, h: 5 },
        { name: "施工许可阶段项目总数", y: 12, h: 20 },
        { name: "国土规划阶段项目总数", y: 12, h: 30 }
      ],
      statusChart: null,
      lineCharts: null,
      currentindex: 14,
      isShow: true,
      dialogVisible: false,
      companyDetail: [
        {
          label: "英文名",
          value: "China Energy Conservation and Environmental Protection Grou"
        },
        {
          label: "电话",
          value: "010-83052888"
        },
        {
          label: "投资人",
          value: "国务院国有资产监督管理委员会"
        },
        {
          label: "联系电话",
          value: "010-83052888"
        },
        {
          label: "区域",
          value: "北京市 大兴区"
        },
        {
          label: "投资人类型",
          value: "法人股东"
        },
        {
          label: "邮箱",
          value: "weijx@cecep.cn"
        },
        {
          label: "法定代表人名称",
          value: "宋鑫"
        },
        {
          label: "人员规模",
          value: "100-199人"
        },
        {
          label: "行业门类描述",
          value: "科学研究和技术服务业"
        },
        {
          label: "工商注册号",
          value: "100000000010315"
        },
        {
          label: "参保人数",
          value: "191"
        },
        {
          label: "行业大类描述",
          value: "研究和试验发展"
        },
        {
          label: "成立日期",
          value: "1989-06-22 00:00:00"
        },
        {
          label: "持股比例",
          value: "100%"
        },
        {
          label: "省份",
          value: "北京市"
        },
        {
          label: "登记状态",
          value: "存续（在营、开业、在册）"
        },
        {
          label: "认缴出资额",
          value: "810000"
        },
        {
          label: "城市",
          value: "北京市"
        },
        {
          label: "更新日期",
          value: "2023-04-19 22:06:51"
        },
        {
          label: "认缴出资时间",
          value: "1989-06-21"
        },
        {
          label: "区域",
          value: "大兴区"
        },
        {
          label: "注册资本",
          value: "¥ 810000 万元"
        },
        {
          label: "最终受益股份",
          value: "100%"
        },
        {
          label: "类型",
          value: "实际控制人"
        },
        {
          label: "企业类型",
          value: "有限责任公司（国有独资）"
        },
        {
          label: "名称",
          value: "宋鑫"
        },
        {
          label: "类型说明",
          value: "大股东"
        },
        {
          label: "注册地址",
          value: "北京市大兴区宏业东路1号院25号楼"
        },
        {
          label: "职位",
          value: "董事长"
        },
        {
          label: "企业联系电话",
          value: "weijx@cecep.cn"
        },
        {
          label: "注册地址",
          value: "北京市大兴区宏业东路1号院25号楼"
        },
        {
          label: "注册号",
          value: "110108027756907"
        },
        {
          label: "企业通讯地址",
          value: "北京市海淀区西直门北大街42号节能大厦"
        },
        {
          label: "营业期限始",
          value: "2017-12-05 00:00:00"
        },
        {
          label: "名称",
          value: "中国节能环保集团有限公司绿色供应链管理服务分公司"
        },
        {
          label: "曾用名",
          value: "中国节能环保集团公司"
        },
        {
          label: "核准日期",
          value: "2022-11-10 00:00:00"
        },
        {
          label: "登记机关",
          value: "北京市西城区市场监督管理局"
        },
        {
          label: "变更日期",
          value: "2017-12-05"
        }
      ],
      swiperList: [
        { img: require("../../assets/images/large/b1.png"), title: "图1" },
        { img: require("../../assets/images/large/b2.png"), title: "图2" },
        { img: require("../../assets/images/large/b3.png"), title: "图3" }
      ],
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 0,
        centeredSlides: true,
        loop: true, //循环
        observer: true,
        observeParents: true,
        initialSlide: 1,
        // 页数指示器
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        // 左右导航按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        // 自动滚动
        autoplay: {
          delay: 2500,
          disableOnInteraction: false //人为交互 不会让自动滚动失效
        }

        // on: {
        //   slideChange: () => {
        //     this.selectSwiper = this.$refs.mySwiper.swiper.realIndex;
        //     // console.log("轮播图滚动事件 --->", this.$refs.mySwiper.swiper);
        //     // console.log("轮播图滚动事件 --->",this.$refs.mySwiper.swiper.realIndex)
        //   }
        // }
      }
    };
  },

  created() {
    this.getLine();
    this.chartqyBar = this.$eChartFn.cyBar();
    this.barOptions = this.$eChartFn.getBar();
    this.chartOpt1 = this.$eChartFn.liquidBar();
    this.sxbarOptions = this.$eChartFn.rightPie();
    // this.getNowTime()
  },
  mounted() {
    this.initChart();
    this.initChartRight();
    const that = this;
    window.onresize = function() {
      that.initChart(), that.initChartRight();
    };
    this.lineCharts = this.$refs.lineCharts.chart;
    this.lineqyBar = this.$refs.lineqyBar.chart;
    this.refsxbar = this.$refs.refsxbar.chart;
    this.setIntervals(this.chartqyBar, this.lineqyBar);
    this.setIntervals(this.chartOpt2, this.lineCharts);
    this.setIntervals(this.sxbarOptions, this.refsxbar);
  },
  destroyed() {
    window.removeEventListener("resize", this.initOption);
  },

  methods: {
    //获取当前时间
    getNowTime() {
      var date = new Date();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      //获取当前年月日 时分秒
      this.nowdate =
        this.year +
        "/" +
        this.addZero(this.month) +
        "/" +
        this.addZero(this.date);
      this.time =
        this.addZero(hour) +
        ":" +
        this.addZero(minute) +
        ":" +
        this.addZero(second);

      // 获取农历
      this.getLunarDay = getLunar(this.year, this.month, this.date);
      this.lunarYear =
        this.getLunarDay.lunarYear + "农历" + this.getLunarDay.dateStr;
      // console.log(this.nowdate);
      // console.log(this.time, "time");
      // console.log(this.lunarYear, "day");
    },
    //小于10的拼接上0字符串
    addZero(s) {
      return s < 10 ? "0" + s : s;
    },
    initChart() {
      // 修改3d饼图绘制过程
      const each = HighCharts.each;
      const round = Math.round;
      const cos = Math.cos;
      const sin = Math.sin;
      const deg2rad = Math.deg2rad;
      // console.log();
      HighCharts.wrap(
        HighCharts.seriesTypes.pie.prototype,
        "translate",
        function(proceed) {
          proceed.apply(this, [].slice.call(arguments, 1));
          // Do not do this if the chart is not 3D
          // if (!this.chart.is3d()) {
          //   return
          // }
          const series = this;
          const chart = series.chart;
          const options = chart.options;
          const seriesOptions = series.options;
          const depth = seriesOptions.depth || 0;
          const options3d = options.chart.options3d;
          const alpha = options3d.alpha;
          const beta = options3d.beta;
          var z = seriesOptions.stacking
            ? (seriesOptions.stack || 0) * depth
            : series._i * depth;
          z += depth / 2;
          if (seriesOptions.grouping !== false) {
            z = 0;
          }
          each(series.data, function(point) {
            const shapeArgs = point.shapeArgs;
            var angle;
            point.shapeType = "arc3d";
            var ran = point.options.h;
            shapeArgs.z = z;
            shapeArgs.depth = depth * 0.75 + ran;
            shapeArgs.alpha = alpha;
            shapeArgs.beta = beta;
            shapeArgs.center = series.center;
            shapeArgs.ran = ran;
            angle = (shapeArgs.end + shapeArgs.start) / 2;
            point.slicedTranslation = {
              translateX: round(
                cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
              ),
              translateY: round(
                sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
              )
            };
          });
        }
      );
      (function(H) {
        H.wrap(HighCharts.SVGRenderer.prototype, "arc3dPath", function(
          proceed
        ) {
          // Run original proceed method
          const ret = proceed.apply(this, [].slice.call(arguments, 1));
          ret.zTop = (ret.zOut + 0.5) / 100;
          return ret;
        });
      })(HighCharts);
      // 生成不同高度的3d饼图
      const highEcharts = this.$refs.container;
      HighCharts.chart(highEcharts, {
        chart: {
          type: "pie",
          animation: false,
          backgroundColor: "rgba(0,0,0,0)",

          events: {
            load: function() {
              const each = HighCharts.each;
              const points = this.series[0].points;
              // console.log(points, "points");
              each(points, function(p, i) {
                p.graphic.attr({
                  translateY: -p.shapeArgs.ran
                });
                p.graphic.side1.attr({
                  translateY: -p.shapeArgs.ran
                });
                p.graphic.side2.attr({
                  translateY: -p.shapeArgs.ran
                });
              });
            }
          },
          options3d: {
            enabled: true,
            alpha: 65
          }
        },
        title: {
          show: "false",
          text: null
        },
        subtitle: {
          text: null
        },
        credits: {
          enabled: false
        },
        legend: {
          // 【图例】位置样式
          backgroundColor: "rgba(0,0,0,0)",
          shadow: false,
          layout: "vertical",
          align: "right", // 水平方向位置
          verticalAlign: "top", // 垂直方向位置
          x: 0, // 距离x轴的距离
          y: fontChart(1), // 距离Y轴的距离
          symbolPadding: fontChart(0.1),
          symbolHeight: fontChart(0.14),
          itemStyle: {
            lineHeight: fontChart(0.16),
            fontSize: fontChart(0.16),
            color: "#fff"
          },
          labelFormatter: function() {
            /*
             *  格式化函数可用的变量：this， 可以用 console.log(this) 来查看包含的详细信息
             *  this 代表当前数据列对象，所以默认的实现是 return this.name
             */
            return this.name + this.h + "%";
          }
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            depth: fontChart(0.35),
            innerSize: fontChart(1.8),
            dataLabels: {
              enabled: false
            },
            // 显示图例
            showInLegend: false
          }
        },
        series: [
          {
            type: "pie",
            name: "占比",
            // h 是高度  y是占的圆环长度
            colorByPoint: true,
            colors: [
              {
                // 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
                linearGradient: {
                  x1: 0,
                  y1: 1,
                  x2: 1,
                  y2: 0
                },
                stops: [
                  [0, "#19596d"], //
                  [1, "#2ea1b2"]
                ]
              },

              {
                // 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
                linearGradient: {
                  x1: 0,
                  y1: 1,
                  x2: 1,
                  y2: 0
                },
                stops: [
                  [0, "#ee7529"], //
                  [1, "#f5a86c"]
                ]
              },
              {
                // 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
                linearGradient: {
                  x1: 0,
                  y1: 1,
                  x2: 1,
                  y2: 0
                },
                stops: [
                  [0, "#f5c055"], //
                  [1, "#967b3d"]
                ]
              },
              {
                // 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
                linearGradient: {
                  x1: 0,
                  y1: 1,
                  x2: 1,
                  y2: 0
                },
                stops: [
                  [0, "#79BFFF"], //
                  [1, "#86CBF0"]
                ]
              },
              {
                // 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
                linearGradient: {
                  x1: 0,
                  y1: 1,
                  x2: 1,
                  y2: 0
                },
                stops: [
                  [0, "#2d7bb5"], //
                  [1, "#1a5784"]
                ]
              }
            ],
            data: this.peiData
          }
        ]
      });
    },
    initChartRight() {
      // 修改3d饼图绘制过程
      const each = HighCharts.each;
      const round = Math.round;
      const cos = Math.cos;
      const sin = Math.sin;
      const deg2rad = Math.deg2rad;
      // console.log();
      HighCharts.wrap(
        HighCharts.seriesTypes.pie.prototype,
        "translate",
        function(proceed) {
          proceed.apply(this, [].slice.call(arguments, 1));
          // Do not do this if the chart is not 3D
          // if (!this.chart.is3d()) {
          //   return
          // }
          const series = this;
          const chart = series.chart;
          const options = chart.options;
          const seriesOptions = series.options;
          const depth = seriesOptions.depth || 0;
          const options3d = options.chart.options3d;
          const alpha = options3d.alpha;
          const beta = options3d.beta;
          var z = seriesOptions.stacking
            ? (seriesOptions.stack || 0) * depth
            : series._i * depth;
          z += depth / 2;
          if (seriesOptions.grouping !== false) {
            z = 0;
          }
          each(series.data, function(point) {
            const shapeArgs = point.shapeArgs;
            var angle;
            point.shapeType = "arc3d";
            var ran = point.options.h;
            shapeArgs.z = z;
            shapeArgs.depth = depth * 0.75 + ran;
            shapeArgs.alpha = alpha;
            shapeArgs.beta = beta;
            shapeArgs.center = series.center;
            shapeArgs.ran = ran;
            angle = (shapeArgs.end + shapeArgs.start) / 2;
            point.slicedTranslation = {
              translateX: round(
                cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
              ),
              translateY: round(
                sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
              )
            };
          });
        }
      );
      (function(H) {
        H.wrap(HighCharts.SVGRenderer.prototype, "arc3dPath", function(
          proceed
        ) {
          // Run original proceed method
          const ret = proceed.apply(this, [].slice.call(arguments, 1));
          ret.zTop = (ret.zOut + 0.5) / 100;
          return ret;
        });
      })(HighCharts);
      // 生成不同高度的3d饼图
      const highEcharts = this.$refs.container1;
      HighCharts.chart(highEcharts, {
        chart: {
          type: "pie",
          animation: false,
          backgroundColor: "rgba(0,0,0,0)",

          events: {
            load: function() {
              const each = HighCharts.each;
              const points = this.series[0].points;
              // console.log(points, "points");
              each(points, function(p, i) {
                p.graphic.attr({
                  translateY: -p.shapeArgs.ran
                });
                p.graphic.side1.attr({
                  translateY: -p.shapeArgs.ran
                });
                p.graphic.side2.attr({
                  translateY: -p.shapeArgs.ran
                });
              });
            }
          },
          options3d: {
            enabled: true,
            alpha: 65
          }
        },
        title: {
          show: "false",
          text: null
        },
        subtitle: {
          text: null
        },
        credits: {
          enabled: false
        },
        legend: {
          // 【图例】位置样式
          backgroundColor: "rgba(0,0,0,0)",
          shadow: false,
          layout: "vertical",
          align: "right", // 水平方向位置
          verticalAlign: "top", // 垂直方向位置
          x: 0, // 距离x轴的距离
          y: fontChart(1), // 距离Y轴的距离
          symbolPadding: fontChart(0.1),
          symbolHeight: fontChart(0.14),
          itemStyle: {
            lineHeight: fontChart(0.16),
            fontSize: fontChart(0.16),
            color: "#fff"
          },
          labelFormatter: function() {
            /*
             *  格式化函数可用的变量：this， 可以用 console.log(this) 来查看包含的详细信息
             *  this 代表当前数据列对象，所以默认的实现是 return this.name
             */
            return this.name + this.h + "个";
          }
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            depth: fontChart(0.35),
            innerSize: fontChart(1.8),
            dataLabels: {
              enabled: false
            },
            // 显示图例
            showInLegend: false
          }
        },
        series: [
          {
            type: "pie",
            name: "占比",
            // h 是高度  y是占的圆环长度
            colorByPoint: true,
            colors: [
              {
                // 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
                linearGradient: {
                  x1: 0,
                  y1: 1,
                  x2: 1,
                  y2: 0
                },
                stops: [
                  [0, "#19596d"], //
                  [1, "#2ea1b2"]
                ]
              },
              {
                // 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
                linearGradient: {
                  x1: 0,
                  y1: 1,
                  x2: 1,
                  y2: 0
                },
                stops: [
                  [0, "#f5c055"], //
                  [1, "#967b3d"]
                ]
              },
              {
                // 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
                linearGradient: {
                  x1: 0,
                  y1: 1,
                  x2: 1,
                  y2: 0
                },
                stops: [
                  [0, "#79BFFF"], //
                  [1, "#86CBF0"]
                ]
              },
              {
                // 注意！！！如果是柱状图请使用color，如果是面积图请使用fillColor
                linearGradient: {
                  x1: 0,
                  y1: 1,
                  x2: 1,
                  y2: 0
                },
                stops: [
                  [0, "#2d7bb5"], //
                  [1, "#1a5784"]
                ]
              }
            ],
            data: this.projectData
          }
        ]
      });
    },
    currentStyle(ele, index) {
      const colorMap = {
        cz: "#23d587",
        kz: "#bcd2db",
        zz: "#3fbaef"
      };
      const { status } = ele;
      return {
        color: colorMap[status],
        backgroundImage:
          this.currentindex == index ? "url(" + coverImgUrl + ")" : "",
        backgroundSize: "100% 100%"
      };
    },
    setInterChartShow(refName, data) {
      // console.log("thsi.$refs", this.$refs[refName]);
      const nameArr = data[0].list.map(it => it.name);
      let len = 0;
      setInterval(() => {
        if (len === nameArr.length) {
          len = 0;
        }
        this.$ref[refName].chart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: len
        });
        len++;
      }, 2000);
    },
    changeaTb(index) {
      this.activeTab = index;
    },
    setIntervals(option, charts) {
      if (option) {
        // console.log(option, "option");
        let current = -1;
        let dataLen1 = option.series[0].data.length;
        setInterval(() => {
          // 取消之前高亮的图形
          charts.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: current
          });
          current = (current + 1) % dataLen1;
          // 高亮当前图形
          charts.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: current
          });
          // 显示 tooltip
          charts.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: current
          });
        }, 2000);
      }
    },
    changeActive(index) {
      this.currentindex = index;
    },
    getLine() {
      let dataArr = [
        {
          name: "主导产业二总数",
          list: [
            {
              name: "1月",
              value: 20
            },
            {
              name: "2月",
              value: 10
            },
            {
              name: "3月",
              value: 20
            },
            {
              name: "4月",
              value: 15
            },
            {
              name: "5月",
              value: 10
            },
            {
              name: "6月",
              value: 20
            },
            {
              name: "7月",
              value: 10
            },
            {
              name: "8月",
              value: 20
            },
            {
              name: "9月",
              value: 15
            },
            {
              name: "10月",
              value: 10
            },
            {
              name: "11月",
              value: 30
            },
            {
              name: "12月",
              value: 17
            }
          ]
        },
        {
          name: "主打产业一总数",
          list: [
            {
              name: "1月",
              value: 20
            },
            {
              name: "2月",
              value: 10
            },
            {
              name: "3月",
              value: 20
            },
            {
              name: "4月",
              value: 15
            },
            {
              name: "5月",
              value: 10
            },
            {
              name: "6月",
              value: 20
            },
            {
              name: "7月",
              value: 10
            },
            {
              name: "8月",
              value: 20
            },
            {
              name: "9月",
              value: 15
            },
            {
              name: "10月",
              value: 10
            },
            {
              name: "11月",
              value: 30
            },
            {
              name: "12月",
              value: 30
            }
          ]
        }
      ];
      // x轴
      let nameArr = dataArr[0].list.map(it => it.name);
      // 颜色
      let colors = ["#C8C83A", "#3ACC9C"];
      let option = {
        color: colors,
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(1, 13, 19, 0.5)",
          borderWidth: 0,
          axisPointer: {
            lineStyle: {
              color: "rgba(11, 208, 241, 1)",
              type: "slider"
            }
          },
          textStyle: {
            color: "rgba(212, 232, 254, 1)",
            fontSize: 12
          },
          extraCssText: "z-index:2"
        },
        grid: {
          left: "20%",
          top: "15%",
          bottom: "10%",
          right: "0",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: nameArr,
            axisLabel: {
              textStyle: {
                fontSize: "12",
                color: "#B5C5D4"
              },
              interval: 0
            },
            axisTick: {
              show: false
            },
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "rgba(108, 166, 219, 0.5)"
              }
            }
          }
        ],
        yAxis: [
          {
            nameTextStyle: {
              color: "rgba(212, 232, 254, 1)",
              fontSize: 12
            },

            type: "value",
            min: 0, // 坐标轴刻度最小值。
            max: 80, // 坐标轴刻度最大值。
            splitNumber: 10, // 坐标轴的分割段数，是一个预估值，实际显示会根据数据稍作调整。
            splitLine: {
              lineStyle: {
                color: "rgba(108, 166, 219, 0.5)",
                type: "dashed"
              }
            }, //设置横线样式
            axisLine: {
              show: false,
              lineStyle: {
                color: "#233653"
              }
            },
            axisLabel: {
              textStyle: {
                fontSize: "12",
                color: "#B5C5D4"
              }
            }
          }
        ],
        series: [
          {
            name: dataArr[0].name,
            type: "bar",
            stack: "total",
            data: dataArr[0].list.map(it => it.value),
            barWidth: 16,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(0, 159, 161, 0.40)"
            },
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#3ACC9C"
                },
                {
                  offset: 1,
                  color: "#3ACC9C"
                }
              ])
            }
          },
          {
            name: dataArr[1].name,
            type: "bar",
            stack: "total",
            data: dataArr[1].list.map(it => it.value),
            barWidth: 16
          }
        ]
      };
      this.chartOpt2 = option;
    },

    detail() {
      console.log("点击我");
      this.dialogVisible = true;
    }
  }
};
</script>

<style scoped lang="scss">
// .data-dialog1 {
//   width: 21.5rem;
//   height: 16.8rem;
//   border: 1px solid red;
// }
.building {
  width: 100%;
  height: 6rem;
  // border: 2px solid red;
  // cursor: pointer;
  // z-index: 2000;
  // background-color: red;
  // background-color: transparent;
  // background-color: rgba(209, 14, 14, 0.5);
  // background-color: rgba(225, 225, 225, 0.1);
  // background: url("../../assets/images/large/building2.png") no-repeat center center;
  // background-size: 100% 100%;
}

.building img {
  width: 100%;
  height: 100%;
  cursor: pointer;
  pointer-events: auto;

}

.location {
  z-index: 2000;
  // background: transparent;
  // background-color: rgba(225, 225, 225, 0.001);
}

.swiper {
  width: 60%;
  height: 4.5rem;
  // border: 1px solid red;
  // display: none;
  margin: 0.4rem auto;
}

.banner img {
  height: 4.5rem;
  width: 100%;
}

.dialog {
  height: 26.4rem;
  padding-left: 2.8rem;
  padding-right: 0.8rem;
  padding-top: 0.86rem;
  position: relative;
  .dialog-title {
    text-align: center;
    font-size: 0.8rem;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #a0f9ff;
    letter-spacing: 0.35rem;
    padding-right: 1.2rem;
    // margin-top: 1.1rem;
    text-shadow: 0px 5px 8px rgba(1, 32, 34, 0.3);
  }
}

.swiper-slide {
  transition: 300ms;
  transform: scale(0.8);
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1.2);
}

.dialog-content {
  color: white;
  // height: 23px;
  font-size: 0.5rem;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: #b7c1d4;
  line-height: 1.25rem;
}

::v-deep .el-dialog__header {
  display: none;
}

.close {
  position: absolute;
  right: -0.3rem;
  top: -0.3rem;
  cursor: pointer;
  width: 1.5rem;
  height: 1.5rem;
}

.close img {
  width: 1.5rem;
  height: 1.5rem;
}

::v-deep .el-dialog {
  background: none;
  /* border: 1px solid blue; */
}
::v-deep .el-dialog__header {
  padding: 0px;
}
::v-deep .el-dialog__body {
  padding: 0;
  background: transparent url("../../assets/images/large/tc2.png") no-repeat
    center center;
  // background: red;
  background-size: 100% 100%;
}

.close-img:hover {
  animation: mymove 500ms linear infinite;
}

@keyframes mymove {
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes mymove {
  /* Safari and Chrome */
  100% {
    transform: rotate(360deg);
    //  transform: scale(1.2);
  }
}

::v-deep .dialog-fade-leave-active .el-dialog {
  animation-duration: 0.3s;
  animation-name: anim-close;
}
@keyframes anim-close {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale3d(0.5, 0.5, 1);
  }
}
</style>