<template>
  <div class="systemPopup" id="systemPopup">
    <svg-icon icon-class="system" :class-name="['systemItem']"></svg-icon>
    <div class="move_pop" id="move_pop">
      <span>{{ $t("headerTitles.systemTitle") }}</span>
      <span class="close" @click.capture="onClose">✖</span>
    </div>
    <div class="set_detail">
      <el-tabs :tab-position="tabPosition" v-model="activeName">
        <!-- 授权信息 -->
        <el-tab-pane :label="$t('headerTitles.auth')">
          <div class="auth_info custom_scroll_bar content_h">
            <div>
              <span>{{ $t("headerTitles.auths.authCode") }}</span>
              <span @click="copy" style="cursor: pointer;" title="点击可复制">{{
                authInfo.license_code
                }}</span>
            </div>
            <div>
              <span>{{ $t("headerTitles.auths.authTime") }}</span>
              <span v-if="authInfo.message === '永久授权' ||
                authInfo.message === '临时授权'
              ">
                <template v-if="authInfo.start_at != '无'">
                  {{ authInfo.start_at }}-
                </template>
                {{ authInfo.end_at }}</span>
              <span v-else>{{ authInfo.message }}</span>
            </div>
            <div>
              <span>{{ $t("headerTitles.auths.authType") }}</span>
              <span>{{
                authInfo.auth_type == "" ? "暂无授权" : authInfo.auth_type
                }}</span>
            </div>

            <el-upload class="upload-demo" :headers="headers" :action="uploadUrl()" :show-file-list="false"
              accept=".lic" :on-success="onSuccess">
              <el-button size="small" type="primary">{{
                $t("headerTitles.auths.upload")
                }}</el-button>
            </el-upload>
            <!--<button class="btn" @click="onFileSubmit">{{ $t('headerTitles.confirm') }}</button>-->
          </div>
        </el-tab-pane>
        <!--<el-tab-pane :label="$t('headerTitles.Service')">
                  <div class="content_h serviceSet">
                    <div class="service_info">
                      <span @click="onService(1)" :style="'background:'+((select_id===1)?'rgba(0,255,255,0.93)':'')">{{
                          $t('headerTitles.service.offline')
                        }}</span>
                      <span @click="onService(2)" :style="'background:'+((select_id===2)?'rgba(0,255,255,0.93)':'')">{{
                          $t('headerTitles.service.official')
                        }}</span>
                      <span @click="onService(3)" :style="'background:'+((select_id===3)?'rgba(0,255,255,0.93)':'')">{{
                          $t('headerTitles.service.customize')
                        }}</span>
                    </div>
                    <setAgreement :disabled="disabled"></setAgreement>
                    <button class="btn serviceSetBtn" @click="onServiceSubmit">{{ $t('headerTitles.confirm') }}</button>
                  </div>
                </el-tab-pane>-->
        <!-- 系统设置 -->
        <el-tab-pane :label="$t('headerTitles.Theme')">
          <div class="content_h systemSettings">
            <div class="cc1">
              <div>
                <div class="detailSkin ">
                  <span>{{
                    $t("headerTitles.systemSetting.setLanguage")
                    }}：</span>
                  <el-select v-model="systemSetting.language" @change="sysChange" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div>
                <div class="detailSkin ">
                  <span>{{ $t("headerTitles.systemSetting.theme") }}：</span>
                  <!--                <span class="spanColor" :style="'background:'+''"></span>-->
                  <!--              </div>
                                <div class="">-->
                  <el-select v-model="systemSetting.skinInfo" @change="sysChange" placeholder="请选择">
                    <el-option v-for="item in skinList" :key="item.id" :label="$t('headerTitles.systemSetting.skinList.' + item.id)
                      " :value="item.id">
                    </el-option>
                  </el-select>
                </div>
              </div>

              <!-- 搜索方式 -->
              <div>
                <div class="detailSkin ">
                  <span>{{ $t("headerTitles.searchWay.title") }}：</span>
                  <el-select v-model="searchWay" @change="searchWayChange" placeholder="请选择">
                    <el-option v-for="(item, index) in wayList" :key="index" :label="$t('headerTitles.searchWay.searchWayList.' + item.value)
                      " :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <!-- 并发量控制 -->
              <div>
                <div class="detailSkin ">
                  <span>{{ $t("headerTitles.ConcurrencyControl") }}：</span>
                  <el-select v-model="concurrentcode" @change="concurrentWorkloadChange" placeholder="请选择">
                    <el-option v-for="(item, index) in concurrentWorkloadList" :key="index" :label="item.value"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <!-- 坐标系 -->
              <div>
                <div class="detailSkin ">
                  <span>{{ $t("headerTitles.systemSetting.coordinateSystem") }}：</span>
                  <el-select v-model="systemSetting.coordinate" @change="sysChange" placeholder="请选择">
                    <el-option v-for="item in name_map" :key="item.epsg" :label="item.name" :value="item.epsg">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <!-- <div>
                <span>{{ $t("headerTitles.systemSetting.coordinateSystem") }}</span> 
                <el-select size="small" v-model="value" placeholder="请选择">
                  <el-option v-for="item in name_map" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </div> -->
              <div style="display:flex;">
                <el-button size="mini" type="primary" @click="setView">{{ $t("headerTitles.systemSetting.defaultView")
                  }}</el-button>
                <el-button size="mini" type="primary" @click="setData">{{ $t("headerTitles.systemSetting.defaultData")
                  }}</el-button>
                <el-button size="mini" type="primary" @click="management">{{ $t("headerTitles.systemSetting.management")
                  }}</el-button>
              </div>
            </div>
            <div class="cc">
              <div class="center">
                <!-- 罗盘 -->
                <span>{{ $t("headerTitles.systemSetting.showCompass") }}</span>
                <el-switch @change="sysChange" v-model="systemSetting.showCompass" active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </div>
              <div class="center">
                <!-- 比例尺 -->
                <span>{{ $t("headerTitles.systemSetting.showDistanceLegend") }}</span>
                <el-switch @change="sysChange" v-model="systemSetting.showDistanceLegend" active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </div>
              <div class="center">
                <span>{{ $t("headerTitles.systemSetting.showToolBar") }}</span>

                <el-switch @change="sysChange" v-model="systemSetting.showToolBar" active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </div>
              <div class="center">
                <span>{{ $t("headerTitles.systemSetting.showFPS") }}</span>

                <el-switch @change="sysChange" v-model="systemSetting.showFps" active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </div>
              <!-- 图幅 -->
              <div class="center">
                <span>{{ $t("headerTitles.systemSetting.sheetIndexStatusSwitch") }}</span>
                <el-switch style="margin-left: -17px;" @change="sysChange"
                  v-model="systemSetting.sheetIndexStatusSwitch" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </div>
              <div class="center">
                <!-- 点遮挡 -->
                <span>{{ $t("headerTitles.systemSetting.occlusion") }}</span>
                <el-switch style="margin-left: -17px;" @change="sysChange" v-model="systemSetting.occlusion"
                  active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </div>
            </div>
            <div class="cc">
              <div class="center">
                <!-- 鹰眼图 -->
                <span>{{ $t("headerTitles.systemSetting.showMapX") }}</span>
                <el-switch @change="sysChange" v-model="systemSetting.showMapX" active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </div>
              <div class="center">
                <!-- 经纬网 -->
                <span>{{ $t("headerTitles.systemSetting.showLatitudeLongitudeNetwork") }}</span>
                <el-switch @change="sysChange" v-model="systemSetting.showLatitudeLongitudeNetwork"
                  active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </div>
              <div class="center">
                <!-- 方里网 -->
                <span>{{ $t("headerTitles.systemSetting.showFangliNet") }}</span>
                <el-switch @change="sysChange" v-model="systemSetting.showFangliNet" active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </div>

            </div>

            <!-- <button class="btn" style="margin-top: 40px " @click="onThemeSubmit">{{
                            $t('headerTitles.confirm')
                          }}
                        </button>-->
          </div>
        </el-tab-pane>
        <!-- 卫星状态 -->
        <!--        <el-tab-pane :label="$t('headerTitles.Satellite')">
          <div class="auth_info custom_scroll_bar content_h">
            <div>
              <span>{{ $t("headerTitles.auths.authCode") }}</span>
              <span @click="copy" style="cursor: pointer;" title="点击可复制">{{
                authInfo.license_code
              }}</span>
            </div>
            <div>
              <span>{{ $t("headerTitles.auths.authTime") }}</span>
              <span v-if="authInfo.message === '永久授权' || authInfo.message === '临时授权'">
                <template v-if="authInfo.start_at != '无'">
                  {{ authInfo.start_at }}-
                </template>
                {{ authInfo.end_at }}</span>
              <span v-else>{{ authInfo.message }}</span>
            </div>
            <div>
              <span>{{ $t("headerTitles.auths.authType") }}</span>
              <span>{{ authInfo.auth_type }}</span>
            </div>

            <el-upload class="upload-demo" :action="uploadUrl()" :show-file-list="false" accept=".lic"
              :on-success="onSuccess">
              <el-button size="small" type="primary">{{
                $t("headerTitles.auths.upload")
              }}</el-button>
            </el-upload>
            &lt;!&ndash;            <button class="btn" @click="onFileSubmit">{{ $t('headerTitles.confirm') }}</button>&ndash;&gt;
          </div>
        </el-tab-pane>-->
        <!-- 工程信息 -->
        <el-tab-pane :label="$t('headerTitles.Engineering')" v-if="isStandAlone">
          <div class="content_h Engineering_info">
            <div></div>
            <div>
              <el-button @click="importLuWang" size="mini" type="primary" class="btn_public">
                {{ $t("headerTitles.Engineerings.import") }}
              </el-button>
            </div>
            <div>
              <el-button @click="importpoi" size="mini" type="primary" class="btn_public">{{
                $t("headerTitles.Engineerings.importPOI") }}
              </el-button>
            </div>
            <div>
              <el-button @click="importProjectApi(0)" size="mini" type="primary" class="btn_public">
                {{ $t("headerTitles.Engineerings.consolidated") }}
              </el-button>
            </div>
            <!-- <div>
              <el-button @click="importProjectApi(1)" size="mini" type="primary" class="btn_public">
                {{ $t("headerTitles.Engineerings.importProject") }}
              </el-button>
            </div> -->
            <div>
              <el-button @click="derive" size="mini" type="primary" class="btn_public">
                {{ $t("headerTitles.Engineerings.derive") }}
              </el-button>
            </div>
          </div>
        </el-tab-pane>

        <!-- 设备管理 -->
        <el-tab-pane :label="$t('headerTitles.equipment.title')">
          <equipment />
        </el-tab-pane>
        <!-- 无人机配置 -->
        <el-tab-pane v-if="false" :label="$t('headerTitles.air.title')">
          <Air />
        </el-tab-pane>
        <!-- 模型管理 -->
        <el-tab-pane :label="$t('headerTitles.model.title')">
          <div class="modelBtn custom_scroll_bar" v-if="isStandAlone">
            <el-button @click="createLib('model')" type="warning" size="small">{{
              $t("headerTitles.model.createModelLibrary") }}
            </el-button>
            <el-button @click="selectLib('model')" type="primary" size="small">{{
              $t("headerTitles.model.selectModelLibrary") }}
            </el-button>
            <el-button @click="addModelType" :disabled="importModelEnable()" type="success" size="small">
              {{ $t("headerTitles.model.addModelType") }}
            </el-button>
            <el-tooltip class="item" effect="dark" content="选中了类型为其上级，未选中则为根目录" placement="right">
              <i class="el-icon-question" style="color: #b6e4ff" title="7"></i>
            </el-tooltip>
            <el-button @click="addModel" :disabled="importModelEnable()" type="success" size="small">
              {{ $t("headerTitles.model.importModel") }}
            </el-button>
            <el-button style="margin-left: 10px" @click="editModelTypes()" type="warning" size="small">{{
              $t("headerTitles.model.editModel") }}
            </el-button>
            <el-button @click="delModelTypes()" type="warning" size="small">{{
              $t("headerTitles.model.deleteModel") }}
            </el-button>
          </div>
          <div class="modelList">
            <div class="modelType ">
              <template v-if="modelLoading">
                <div class="parentBox">
                  <div class="containerBox">
                    <div class="canvasBox">
                      <div class="spinnerSexBox p1"></div>
                      <div class="spinnerSexBox p2"></div>
                      <div class="spinnerSexBox p3"></div>
                      <div class="spinnerSexBox p4"></div>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div style="font-size: 16px;margin-left: 4px;margin-top: 4px">
                  类型列表：
                </div>
                <div class="typeBox custom_scroll_bar">
                  <template v-if="modelTypeList.length > 0">
                    <template v-for="item in modelTypeList">
                      <div :class="[
                        selectedModelType == item.type_id
                          ? 'selectedModelTypeCss'
                          : '',
                        'typeItem',
                      ]" @click="selectModel(item)">
                        <div class="label" :title="item.type_name">
                          {{ item.type_name }}
                        </div>
                      </div>
                    </template>
                  </template>
                  <template v-else>
                    无模型类型，<br />请先添加模型类型
                  </template>
                </div>
              </template>
            </div>

            <el-table border :data="modelTableData" style="width: 100%" :row-class-name="tableRowClassName">
              <el-table-column type="index" label="序号" width="35" align="center">
              </el-table-column>
              <el-table-column prop="model_name" label="名称" :width="calcsWidth({ label: '名称' })" align="center">
              </el-table-column>
              <el-table-column label="缩略图" width="110" align="center">
                <template slot-scope="scope">
                  <el-image style="width: 40px; height: 40px" :src="scope.row.poster_url + '?' + Math.random()"
                    :preview-src-list="[scope.row.poster_url]">
                  </el-image>
                </template>
              </el-table-column>

              <el-table-column prop="type" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button @click="preview(scope.row)" type="warning" size="mini">
                    {{ $t("headerTitles.model.preview") }}
                  </el-button>
                  <el-button @click="updatePoster1(scope.row)" type="warning" size="mini">
                    {{ $t("headerTitles.model.updatePoster") }}
                  </el-button>
                  <el-button @click="delModel(scope.row.model_id)" type="danger" size="mini">
                    {{ $t("headerTitles.model.deleteModel") }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="modelLibPath ">
            <template v-if="modelTableData.length > 0">
              <span class="oneLine" :title="modelLibPath">
                模型库地址：{{ modelLibPath }}
              </span>
            </template>
          </div>
        </el-tab-pane>
        <!-- 三维军标 -->
        <el-tab-pane v-if="false" label="三维军标">
          <div class="modelBtn custom_scroll_bar" v-if="isStandAlone">
            <el-button @click="createLib('model')" type="warning" size="small">{{
              $t("headerTitles.model.createModelLibrary") }}
            </el-button>
            <el-button @click="selectLib('model')" type="primary" size="small">{{
              $t("headerTitles.model.selectModelLibrary") }}
            </el-button>
            <el-button @click="addModelType" :disabled="importModelEnable()" type="success" size="small">
              {{ $t("headerTitles.model.addModelType") }}
            </el-button>
            <el-tooltip class="item" effect="dark" content="选中了类型为其上级，未选中则为根目录" placement="right">
              <i class="el-icon-question" style="color: #b6e4ff" title="7"></i>
            </el-tooltip>
            <el-button @click="addModel" :disabled="importModelEnable()" type="success" size="small">
              {{ $t("headerTitles.model.importModel") }}
            </el-button>
            <el-button style="margin-left: 10px" @click="editModelTypes()" type="warning" size="small">{{
              $t("headerTitles.model.editModel") }}
            </el-button>
            <el-button @click="delModelTypes()" type="warning" size="small">{{
              $t("headerTitles.model.deleteModel") }}
            </el-button>
          </div>
          <div class="modelList">
            <div class="modelType ">
              <template v-if="modelLoading">
                <div class="parentBox">
                  <div class="containerBox">
                    <div class="canvasBox">
                      <div class="spinnerSexBox p1"></div>
                      <div class="spinnerSexBox p2"></div>
                      <div class="spinnerSexBox p3"></div>
                      <div class="spinnerSexBox p4"></div>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div style="font-size: 16px;margin-left: 4px;margin-top: 4px">
                  类型列表：
                </div>
                <div class="typeBox custom_scroll_bar">
                  <template v-if="modelTypeList.length > 0">
                    <template v-for="item in modelTypeList">
                      <div :class="[
                        selectedModelType == item.type_id
                          ? 'selectedModelTypeCss'
                          : '',
                        'typeItem',
                      ]" @click="selectModel(item)">
                        <div class="label" :title="item.type_name">
                          {{ item.type_name }}
                        </div>
                      </div>
                    </template>
                  </template>
                  <template v-else>
                    无模型类型，<br />请先添加模型类型
                  </template>
                </div>
              </template>
            </div>

            <el-table border :data="modelTableData" style="width: 100%" :row-class-name="tableRowClassName">
              <el-table-column type="index" label="序号" width="35" align="center">
              </el-table-column>
              <el-table-column prop="model_name" label="名称" :width="calcsWidth({ label: '名称' })" align="center">
              </el-table-column>

              <el-table-column label="缩略图" width="110" align="center">
                <template slot-scope="scope">
                  <el-image style="width: 40px; height: 40px" :src="scope.row.poster_url + '?' + Math.random()"
                    :preview-src-list="[scope.row.poster_url]">
                  </el-image>
                </template>
              </el-table-column>

              <el-table-column prop="type" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button @click="preview(scope.row)" type="warning" size="mini">
                    {{ $t("headerTitles.model.preview") }}
                  </el-button>
                  <el-button @click="updatePoster1(scope.row)" type="warning" size="mini">
                    {{ $t("headerTitles.model.updatePoster") }}
                  </el-button>
                  <el-button @click="delModel(scope.row.model_id)" type="danger" size="mini">
                    {{ $t("headerTitles.model.deleteModel") }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="modelLibPath ">
            <template v-if="modelTableData.length > 0">
              <span class="oneLine" :title="modelLibPath">
                模型库地址：{{ modelLibPath }}
              </span>
            </template>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane :label="$t('headerTitles.graphLabel.title')">
                  <div class="modelBtn">
                    <el-button @click="createModel" type="warning" size="small">{{
                        $t('headerTitles.model.createModelLibrary')
                      }}
                    </el-button>
                    <el-button @click="selectModel" type="primary" size="small">{{
                        $t('headerTitles.model.selectModelLibrary')
                      }}
                    </el-button>
                    <el-button @click="addModel" :disabled="importModelEnable()" type="success" size="small">
                      {{ $t('headerTitles.model.importModel') }}
                    </el-button>
                    <el-button @click="addModelType" :disabled="importModelEnable()" type="success" size="small">
                      {{ $t('headerTitles.model.addModelType') }}
                    </el-button>
                  </div>
                  <div class="modelList">
                    <div class="modelType ">
                      <div style="font-size: 16px;margin-left: 4px;margin-top: 4px">类型列表：</div>
                      <div class="typeBox custom_scroll_bar">
                        <template v-if="modelTypeList.length">
                          <template v-for="item in modelTypeList">
                            <div :class="[selectedModelType==item.type_id?'selectedModelTypeCss':'','typeItem']"
                                 @click="selectedModelType=item.type_id">
                              <div class="label" :title="item.type_name">{{ item.type_name }}</div>
                              <div class="btns">
                                <i class="el-icon-edit" style="color: #409eff" @click="editModelTypes(item)"></i>
                                <i class="el-icon-delete" style="color:#f00;" @click="delModelTypes(item)"></i>
                              </div>

                            </div>
                          </template>
                        </template>
                        <template v-else>
                          无模型类型，<br>请先添加模型类型
                        </template>

                      </div>
                    </div>

                    <el-table
                        border
                        :data="modelTableData"
                        style="width: 100%"

                        :row-class-name="tableRowClassName">
                      <el-table-column
                          type="index"
                          label="序号"
                          width="35"
                          align="center"
                      >
                      </el-table-column>
                      <el-table-column
                          prop="model_name"
                          label="名称"
                          :width="calcsWidth({label:'名称'})"
                          align="center"
                      >
                      </el-table-column>
                      &lt;!&ndash;              <el-table-column
                                        prop="model_type"
                                        label="类型"
                                        width="60"
                                        align="center"
                                    >
                                    </el-table-column>&ndash;&gt;
                      <el-table-column

                          label="缩略图"
                          width="110"
                          align="center">
                        <template slot-scope="scope">
                          &lt;!&ndash;                  :title="scope.row.poster_url"&ndash;&gt;
                          &lt;!&ndash;                  <img :src="scope.row.poster_url">&ndash;&gt;
                          <el-image
                              style="width: 40px; height: 40px"
                              :src="scope.row.poster_url"
                              :preview-src-list="[scope.row.poster_url]">
                          </el-image>
                        </template>
                      </el-table-column>

                      <el-table-column
                          prop="type"
                          label="操作"
                          align="center"
                      >
                        <template slot-scope="scope">
                          <el-button @click="updatePoster(scope.row)" type="warning" size="mini">
                            {{ $t('headerTitles.model.updatePoster') }}
                          </el-button>
                          <el-button type="primary" size="mini">{{ $t('headerTitles.model.updateModel') }}</el-button>
                          <el-button @click="delModel(scope.row.model_id)" type="danger" size="mini">
                            {{ $t('headerTitles.model.deleteModel') }}
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <div class="modelLibPath ">

                    &lt;!&ndash;            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    style="align-self: center;"
                                    :current-page="modelListPage"
                                    :page-sizes="[5,10,20,30]"
                                    :page-size="modelListPageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="modelTotal">
                                </el-pagination>&ndash;&gt;
                    &lt;!&ndash;            </div>&ndash;&gt;
                    <span class="oneLine" :title="modelLibPath">
                            模型库地址：{{ modelLibPath }}
                            </span>
                </el-tab-pane> -->
        <!-- 军标管理  -->
        <!-- v-if="false" 标准版本  -->
        <el-tab-pane :label="$t('headerTitles.graphLabel.title')">
          <div class="modelBtn custom_scroll_bar" v-if="isStandAlone">
            <el-button @click="createLib('graphLabel')" type="warning" size="small">{{
              $t("headerTitles.graphLabel.createGraphLabelLibrary") }}
            </el-button>
            <el-button @click="selectLib('junbiao')" type="primary" size="small">{{
              $t("headerTitles.graphLabel.selectGraphLabelLibrary") }}
            </el-button>
            <el-button @click="addGraphLabelType" :disabled="importGraphLabelEnable()" type="success" size="small">
              {{ $t("headerTitles.graphLabel.addGraphLabelType") }}
            </el-button>
            <el-tooltip class="item" effect="dark" content="选中了类型为其上级，未选中则为根目录" placement="right">
              <i class="el-icon-question" style="color: #b6e4ff" title="7"></i>
            </el-tooltip>
            <el-button @click="addGraphLabel" :disabled="importGraphLabelEnable()" type="success" size="small">
              {{ $t("headerTitles.graphLabel.importGraphLabel") }}
            </el-button>
            <el-button style="margin-left: 10px" @click="editGraphLabelTypes" type="warning" size="small">{{
              $t("headerTitles.graphLabel.edit") }}
            </el-button>
            <el-button @click="delGraphLabelTypes" type="warning" size="small">{{ $t("headerTitles.graphLabel.delete")
              }}
            </el-button>
          </div>

          <div class="graphList">
            <div class="modelType " style="position: relative;">
              <template v-if="junbiaoLoading">
                <div class="parentBox">
                  <div class="containerBox">
                    <div class="canvasBox">
                      <div class="spinnerSexBox p1"></div>
                      <div class="spinnerSexBox p2"></div>
                      <div class="spinnerSexBox p3"></div>
                      <div class="spinnerSexBox p4"></div>
                    </div>
                  </div>
                </div>
              </template>
              <template v-else>
                <div style="font-size: 16px;margin-left: 4px;margin-top: 4px">
                  类型列表：
                </div>
                <div class="typeBox custom_scroll_bar">
                  <template v-if="graphLabelTypeList.length > 0">
                    <!--                  <template v-for="item in graphLabelTypeList">
                                        <div :class="[selectedGraphLabelType==item.type_id?'selectedModelTypeCss':'','typeItem']"
                                             @click="selectedGraphLabelType=item.type_id">
                                          <div class="label" :title="item.type_name">{{ item.type_name }}</div>
                                          <div class="btns">
                                            <i class="el-icon-edit" style="color: #409eff" @click="editGraphLabelTypes(item)"></i>
                                            <i class="el-icon-delete" style="color:#f00;" @click="delGraphLabelTypes(item)"></i>
                                          </div>

                                        </div>
                                      </template>-->
                    <el-tree :data="graphLabelTypeList" :props="graphLabelProps" :expand-on-click-node="false"
                      ref="myTree" node-key="type_id" highlight-current accordion @node-click="graphLabelClick">
                      <!--                    <span class="custom-tree-node" slot-scope="{ node, data }">
                                              <span>{{ node.label }}</span>
                                              <span style="    position: absolute;right: 5px;">
                                                <i class="el-icon-edit" style="color: #409eff" @click="() =>editGraphLabelTypes(data)"></i>
                                                <i class="el-icon-delete" style="color:#f00;" @click="() =>delGraphLabelTypes(data)"></i>
                                              </span>
                                          </span>-->
                    </el-tree>
                  </template>
                  <template v-else>
                    无军标类型，<br />请先添加军标类型
                  </template>
                </div>
              </template>
            </div>

            <el-table border :data="graphTableData" style="width: 100%" @row-click="rowClick" @row-dblclick="dblClick"
              :row-class-name="tableRowClassName">
              <template v-if="junbiaoLoading">
                <div class="canvasBox">
                  <div class="spinnerSexBox p1"></div>
                  <div class="spinnerSexBox p2"></div>
                  <div class="spinnerSexBox p3"></div>
                  <div class="spinnerSexBox p4"></div>
                </div>
              </template>
              <template v-else>
                <el-table-column type="index" label="序号" width="35" align="center">
                </el-table-column>
                <el-table-column prop="name" label="名称" align="center">
                </el-table-column>
                <!--              <el-table-column
                                  prop="model_type"
                                  label="类型"
                                  width="60"
                                  align="center"
                              >
                              </el-table-column>-->
                <el-table-column label="缩略图" width="110" align="center">
                  <template slot-scope="scope">
                    <!--                  :title="scope.row.poster_url"-->
                    <!--                  <img :src="scope.row.poster_url">-->
                    <el-image style="width: 40px; height: 40px" :src="scope.row.url"
                      :preview-src-list="[scope.row.url]">
                    </el-image>
                  </template>
                </el-table-column>

                <el-table-column prop="type" label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="editGraphLabel(scope.row)">{{
                      $t("headerTitles.graphLabel.edit") }}</el-button>
                    <el-button @click="delGraphLabel(scope.row.jun_biao_id)" type="danger" size="mini">
                      {{ $t("headerTitles.graphLabel.delete") }}
                    </el-button>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
          <div class="modelLibPath ">
            <template v-if="graphTableData.length > 0">
              <span class="oneLine" :title="graphLabelLibPath">
                军标库地址：{{ graphLabelLibPath }}
              </span>
            </template>
          </div>
        </el-tab-pane>
        <!-- 物理沙盘 -->
        <el-tab-pane v-if="false" :label="$t('headerTitles.udp')">
          <div class="udp_auth">
            <div>
              <span class="fankuai"></span>
              <span style="display: inline-block;margin-left: 5px;">UDP</span>
            </div>
            <div style="margin-bottom: 10px;">
              <span style="color:#fff"> 允许连接： </span>
              <el-switch @change="change_sandTable_udp_client_status" v-model="sandTable_udp_client_status"></el-switch>
            </div>
            <div>
              <div class="input_box">
                <div class="flex">
                  <div class="title">{{ $t("headerTitles.localIP") }}：</div>
                  <span>
                    <el-input v-model="native.host" disabled></el-input>
                  </span>
                </div>

                <div>
                  <div class="flex">
                    <div class="title">{{ $t("headerTitles.localPort") }}：</div>
                    <span>
                      <el-input v-model="native.port"></el-input>
                    </span>
                  </div>

                  <div>
                    <el-button size="mini" type="primary" @click="submitPort">保存</el-button>
                  </div>
                </div>
              </div>
              <div class="input_box">
                <div class="flex">
                  <div class="title">{{ $t("headerTitles.remoteIP") }}：</div>
                  <span>
                    <el-input placeholder="请输入内容" v-model="client.host"></el-input>
                  </span>
                </div>

                <div>
                  <div class="flex">
                    <div class="title">{{ $t("headerTitles.remotePort") }}：</div>
                    <span>
                      <el-input placeholder="请输入内容" v-model="client.port"></el-input>
                    </span>
                  </div>

                  <div>
                    <el-button size="mini" type="primary" @click="submitClient">保存</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <!-- 版本信息 -->
        <el-tab-pane :label="$t('headerTitles.Version')">
          <div class="auth_info content_h">
            <div>
              <span>{{ $t("headerTitles.versions.version_code") }}</span>
              <span>{{ version }}</span>
            </div>
            <!-- <div>
              <span>{{ $t("headerTitles.versions.version_update") }}</span>
            </div> -->
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--创建用户弹出框-->
    <el-dialog title="创建用户" :modal="false" @close="close" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="ruleForm" :model="form" :inline="true">
        <el-form-item prop="nick_name" label="昵称" :label-width="formLabelWidth">
          <el-input v-model="form.nick_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="username" label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="password2" label="确认密码" :label-width="formLabelWidth">
          <el-input v-model="form.password2" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item class="depart_name" label="部门名称" :label-width="formLabelWidth">
          <el-input v-model="node.depart_name" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <!--        <el-form-item prop="depart_id" label="部门" :label-width="formLabelWidth">
                  <el-input v-model="form.depart_id" autocomplete="off"></el-input>
                </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="resetForm('ruleForm')">重 置</el-button>
        <el-button v-throttle="5000" size="mini" type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { setMove } from "./js/moveDiv";
import utilTools from "./js/utilTools";
import setAgreement from "./components/setAgreementInfo/setAgreement.vue";
import { mapGetters } from "vuex";
import { calcWidth } from "@/utils";
import { validateCommonText } from "@/utils/validate";
import equipment from "../../PLTraffic/components/manager/equipment/equipment";
import Air from "./components/air/index.vue"
// import {baseURL} from "../../../utils/request";

export default {
  name: "systemPopup",
  mixins: [utilTools],
  components: { setAgreement, equipment, Air },
  computed: {
    ...mapGetters(["system", "modelLibPath", "graphLabelLibPath"]),
  },
  data() {
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      upUserData: {},
      selectedModel: null,
      // baseURL: baseURL,
      dialogRoleFormVisible: false,
      isStandAlone: window.isStandAlone,
      rulesRole: {
        role_name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 1, message: "长度大于 1 个字符", trigger: "blur" },
        ],
      },
      formRole: {
        ID: 1,
        role_name: "",
      },

      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 5, message: "长度大于 5 个字符", trigger: "blur" },
          { validator: validateCommonText, trigger: "blur" },
        ],
        nick_name: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { min: 5, message: "长度大于 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "长度大于 6 个字符", trigger: "blur" },
        ],
        password2: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
        depart_id: [
          { required: true, message: "请输入部门", trigger: "blur" },
          { min: 6, message: "长度大于 6 个字符", trigger: "blur" },
        ],
      },
      dialogFormVisible: false,
      form: {
        username: "",
        nick_name: "",
        depart_id: "",
        password: "",
        password2: "",
      },

      formLabelWidth: "120px",

      version: "1.2.0",
      activeName: "",
      tabPosition: "left",
      tabList: [],
      authInfo: {
        //授权信息
        device_serial: "", //授权码
        start_at: "", //授权时间
        end_at: "", //授权时间
        auth_type: "无", //授权时间
      },
      // 海康数据
      hikangInfo1: "",
      hikangInfo2: "",
      optionList: [
        { id: 1, label: "选择1" },
        { id: 2, label: "选择2" },
        { id: 3, label: "选择3" },
      ],
      hikang_checked: false,
      // ******
      // 主题颜色
      systemSetting: {
        showFangliNet: false, // 方里网
        showLatitudeLongitudeNetwork: false, //经纬网
        showToolBar: false, //信息栏
        showCompass: false, //罗盘
        showMapX: false, //鹰眼图
        occlusion: false, //点遮挡
        showDistanceLegend: true, //比例尺
        showFps: false, //比例尺
        skinInfo: "yingguangse", //主题色
        language: "", //语言
        coordinate: "EPSG:4326", //坐标系
        sheetIndexStatusSwitch: false //标准图幅
      },

      skinList: [
        { id: "yingguangse", label: "荧光色" },
        { id: "gonganlan", label: "科技蓝" },
        { id: "hong", label: "烈日红" },
      ],

      options: [
        { id: "zh", label: "中文简体" },
        { id: "en", label: "English" },
        { id: "tw", label: "中文繁體" },
      ],
      // *****
      select_id: 1, //选中服务接入
      disabled: true, //默认禁用状体
      Engineering: 1, //工程
      roleTableData: [],
      roleListPage: 1,
      roleListPageSize: 5,
      roleTotal: 0,

      userTableData: [
        /*  {
            username: "admin",
            nick_name: "管理员",
            enable: 0,
          }*/
      ],
      userListPage: 1,
      userListPageSize: 5,
      userTotal: 0,

      departData: [], //部门
      defaultProps: {
        children: "children",
        label: "depart_name",
      },
      node: "",

      modelTableData: [],
      modelListPage: 1,
      modelListPageSize: 5,
      modelTotal: 0,
      graphTableData: [],
      graphListPage: 1,
      graphListPageSize: 5,
      graphTotal: 0,
      name_map: [],
      concurrentWorkloadList: [
        {
          value: 10,
        },
        {
          value: 30,
        },
        {
          value: 50,
        },
        {
          value: 100,
        },
      ],
      concurrentcode: null,
      wayList: [
        {
          value: "poi",
          label: "poi搜索",
        },
        {
          value: "net",
          label: "在线搜索",
        },
      ],
      searchWay: "poi",
    };
  },
  mounted() {
    this.searchWay = localStorage.getItem("searchWay") || "poi";
    //用户修改角色后，重新请求用户列表
    this.$recvChanel("getUserList", (props) => {
      this.getUserList(this.node.depart_id);
    });
    // 移动系统设置弹框
    setMove("move_pop", "systemPopup");
    this.systemSetting = JSON.parse(localStorage.getItem("systemSetting"));
    console.log('this.systemSetting', this.systemSetting);
    // this.systemSetting.skinInfo = this.system.skin
    if (this.systemSetting.sheetIndexStatusSwitch) {
      this.$changeComponentShow(".tufuSelect", true);
    } else {
      this.$changeComponentShow(".tufuSelect", false);
    }
    $(".serviceSet").bind("keydown", function (e) {
      // 兼容FF和IE和Opera
      let theEvent = e || window.event;
      let code = theEvent.keyCode || theEvent.which || theEvent.charCode;
      if (code == 13) {
        //回车执行查询
        $(".serviceSetBtn").click();
      }
    });
    $(".set_detail .el-tabs__nav").addClass("custom_scroll_bar");
    let tool = new YJ.Tools(window.Earth1);
    this.name_map = Array.from(tool.name_map.values());

    this.concurrentcode = localStorage.getItem("concurrentcode") || 30;
  },
  watch: {
    activeName: () => {
      this.selectedModel = null;
    },
  },
  methods: {
    searchWayChange(val) {
      localStorage.setItem("searchWay", val);
      this.$message.success("操作成功");
    },
    // 并发量
    concurrentWorkloadChange(val) {
      YJ.Global.setMaximumRequestsPerServer(val);
      localStorage.setItem("concurrentcode", val);
      this.$message.success("操作成功");
    },

    importModelEnable() {
      return ["", null, "null"].includes(this.modelLibPath);
    },
    importGraphLabelEnable() {
      return ["", null, "null"].includes(this.graphLabelLibPath);
    },
    onClose() {
      //关闭弹框
      this.$parent.showSystem = false;
    },
    calcsWidth(row) {
      return calcWidth(row);
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>

<style lang="scss">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

/*.label {
  color: #409eff !important;
}*/
.graphList {
  .el-tree-node.is-current {
    &>.el-tree-node__content {
      background-color: rgba(230, 242, 255, 0.93) !important;
    }
  }
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-table .el-table__body-wrapper {
  overflow-y: scroll;
  height: 220px;
}

* {
  user-select: none;
}

.systemPopup {
  //width: 845px;
  //height: 480px;
  width: 945px;
  height: 440px;
  //width: 35vw;
  //height: 40vh;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .move_pop {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    //background: #22b7e5;
    display: grid;
    place-items: center;

    >span {
      color: #fff;
      font-weight: bold;
      font-size: 20px;
      letter-spacing: 2px;
    }

    .close {
      position: absolute;
      right: -15px;
      top: -15px;
      color: #fff;
      width: 40px;
      height: 40px;
      font-size: 20px;
      border: 2px solid #0ff;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #0acefb;
      cursor: default;
    }
  }

  .set_detail {
    margin-top: 85px;
    padding-right: 10px;
    box-sizing: border-box;
    height: 360px;

    .el-tabs__item {
      color: #fff !important;
      font-size: 16px;
      font-family: 黑体;
      font-weight: 600;
    }

    .el-tabs__item:hover,
    .el-tabs__item.is-active {
      color: #0ff !important;
    }

    .el-tabs__header {
      height: 310px !important;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .el-tabs__nav-next,
    .el-tabs__nav-prev {
      color: #fff;
    }

    .content_h {
      >span {
        cursor: pointer;
      }
    }

    .serviceSet {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
    }

    .btn_public {
      /* outline: none;
       background: #0ff;
       font-size: 16px;
       color: #fff;
       border: none;
       padding: 10px 20px;
       border-radius: 10px;
       cursor: pointer;*/
    }

    .btn {
      width: 120px;
      margin: 0px 100px;
      padding: 5px 10px;
      border-radius: 5px;
      outline: none;
      border: 1px solid #0ff;
      background: #0acefb;
      font-size: 18px;
      color: #fff;
      font-weight: bolder;
      cursor: pointer;
    }

    .btn:active {
      transform: scale(0.9);
      transition-duration: 0.5s;
    }

    .auth_info {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding-left: 60px;
      height: 17vw;
      overflow-y: auto;
      //justify-content: space-evenly;

      .el-button--primary {
        color: #fff !important;
        font-size: 16px;
        background: #0ff !important;
        font-weight: bolder;
      }

      >div {
        margin: 20px 0 0;
        width: 100%;

        >span {
          font-size: 16px;
          color: #fff;
        }

        &>span:first-child {
          //width: 90px;
          color: #0ff;
          font-size: 18px;
          font-weight: bolder;
          display: inline-block;
        }

        &>span:nth-child(2) {
          display: inline-block;
          padding: 2px 10px;
          border-radius: 5px;
          border: 2px solid #0ff;
          background: rgba(0, 255, 255, 0.4);
        }
      }
    }

    .service_info {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;

      >span {
        padding: 4px 10px;
        height: 30px;
        background: rgba(0, 255, 255, 0.4);
        border-radius: 5px;
        border: 2px solid #0ff;
        width: 120px;
        display: grid;
        place-items: center;
        margin: 0 5px;
        font-size: 18px;
        font-weight: bolder;
        cursor: pointer;
      }
    }

    .theme_info {
      .detailSkin {
        display: flex;
        align-items: center;

        .spanColor {
          background: #0ff;
          display: inline-block;
          width: 30px;
          height: 30px;
          border-radius: 5px;
          border: none !important;
        }

        >span {
          width: 90px;
          color: #0ff;
          font-size: 18px;
          font-weight: bolder;
          display: inline-block;
        }
      }

      .select_skin {
        margin: 10px 0 0 90px;
      }

      width: 100%;
      display: flex;
      flex-direction: row;
      padding-left: 60px;
      height: 17vw;
      overflow-y: auto;
      justify-content: space-evenly;

      .el-button--primary {
        color: #fff !important;
        font-size: 16px;
        background: #0ff !important;
        font-weight: bolder;
      }
    }

    .systemSettings {
      width: 100%;
      display: flex;
      height: 17vw;
      overflow-y: auto;
      justify-content: space-evenly;

      .cc1 {
        width: 40%;

        >div {
          margin: 10px 0 0;

          .detailSkin {
            display: flex;
            align-items: center;
            justify-content: space-around;

            >span {
              font-size: 16px;
              color: #fff;
            }

            &>span:first-child {
              //width: 90px;
              color: #0ff;
              font-size: 18px;
              font-weight: bolder;
              display: inline-block;
              width: 108px;
              text-align: right;
            }

            &>span:nth-child(2) {
              display: inline-block;
              padding: 2px 10px;
              border-radius: 5px;
              border: 2px solid #0ff;
              background: rgba(0, 255, 255, 0.4);
            }
          }
        }
      }

      .cc {
        width: 30%;

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

        }

        >div {
          margin: 20px 0 0;

          >span {
            font-size: 16px;
            color: #fff;
          }

          &>span:first-child {
            //width: 90px;
            color: #0ff;
            font-size: 18px;
            font-weight: bolder;
            display: inline-block;
            text-align: right;
          }

          &>span:nth-child(2) {
            display: inline-block;
            padding: 2px 10px;
            border-radius: 5px;
            border: 2px solid #0ff;
            background: rgba(0, 255, 255, 0.4);
          }
        }
      }
    }

    .udp_auth {
      width: 100%;
      height: 17vw;
      padding: 0 20px;

      >div:first-child {
        height: 20%;
        width: 100%;
        color: #0ff;
        font-size: 24px;
        font-weight: bolder;
        display: inline-block;
        display: flex;
        align-items: center;
      }

      >div:last-child {
        height: 80%;
        width: 100%;
        display: flex;
        flex-direction: column;

        .input_box {
          display: flex;
          justify-content: space-around;
          margin-bottom: 30px;

          >div {
            width: 40%;
            display: flex;
            align-items: center;
            padding: 8px;
          }

          >div:last-child {
            width: 50%;
            display: flex;
            justify-content: space-between;
          }

          .title {
            color: #fff;
          }

          span {
            // margin-right: 10px;
            color: #0ff;
            font-size: 18px;
            font-weight: bolder;
            display: inline-block;
          }
        }
      }
    }

    .Engineering_info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      //align-items: center;

      &>div {
        font-size: 18px;
        color: #0ff;
        font-weight: bolder;
        margin-bottom: 5px;

        >span {
          margin-right: 10px;
        }

        .el-radio__label {
          color: #fff !important;
          font-size: 16px !important;
        }
      }

      >button {
        margin-top: 20px;
      }
    }

    .hiKang_info {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 75%;

      .el-select {
        width: 110px !important;
      }

      .el-checkbox {
        color: #fff !important;
      }

      .el-checkbox__label {
        font-size: 18px !important;
      }
    }

    .modelBtn {
      padding-bottom: 2px;
      display: flex;
      align-items: center;
      overflow-x: auto;
      width: 93%;
    }

    .userList {
      height: 100%;
      display: flex;

      .depart {
        padding: 5px;
        width: 150px;
        background: #fff;

        .treeBox {
          height: 235px;
          overflow-y: auto;
        }
      }
    }

    .el-tree-node__label {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .modelLibPath {
      height: 50px;
      //
      color: #fff;
      //line-height: 50px;
      display: flex;
      flex-direction: column;

      &>span {
        padding-left: 90px;
        font-size: 14px;
      }
    }
  }

  .modelList,
  .graphList {
    display: flex;

    .modelType {
      background: #fff;
      width: 150px;

      .typeBox {
        margin-top: 5px;
        height: 250px;
        overflow-y: auto;

        .typeItem {
          padding: 3px 0 3px 10px;
          color: #0c0d0e;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .label {
            width: 70%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .btns {
            cursor: pointer;
          }
        }
      }

      .selectedModelTypeCss {
        background: rgba(230, 242, 255, 0.93);

        .label {
          color: #409eff !important;
        }
      }
    }
  }

  .parentBox {
    height: 100%;
    //background: rgb(31, 31, 31);
    display: flex;
    flex-direction: column;
    justify-content: center;

    .containerBox {
      display: flex;
      height: 150px;
      width: 150px;

      .canvasBox {
        align-items: center;
        background: #eeeeee;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        /* margin: 1em;
         width: 10em;
         height: 10em;*/
        width: 95%;
        height: 95%;
        margin: 0 auto;

        // 第一种
        .spinnerOneBox {
          align-items: center;
          border: 0.3em solid transparent;
          border-top: 0.3em solid #4db6ac;
          border-right: 0.3em solid #4db6ac;
          border-radius: 100%;
          display: flex;
          justify-content: center;
        }

        .spinnerMaxBox {
          animation: spinnerOne 3s linear infinite;
          height: 3em;
          width: 3em;

          .spinnerMidBox {
            animation: spinnerOne 5s linear infinite;
            height: 2.4em;
            width: 2.4em;

            .spinnerMinBox {
              animation: spinnerOne 5s linear infinite;
              height: 1.8em;
              width: 1.8em;
            }
          }
        }
      }

      // 第六种
      .spinnerSexBox {
        background: #4db6ac;
        border-radius: 50%;
        height: 1em;
        margin: 0.1em;
        width: 1em;
      }

      .p1 {
        animation: fall 1s linear 0.3s infinite;
      }

      .p2 {
        animation: fall 1s linear 0.2s infinite;
      }

      .p3 {
        animation: fall 1s linear 0.1s infinite;
      }

      .p4 {
        animation: fall 1s linear infinite;
      }

      @keyframes fall {
        0% {
          transform: translateY(-15px);
        }

        25%,
        75% {
          transform: translateY(0);
        }

        100% {
          transform: translateY(-15px);
        }
      }
    }
  }

  .flex {
    display: flex;
    align-items: center;
  }
}
</style>
