refactor: 优化代码格式和结构

src/views/home/index.vue

@@ -6,385 +6,396 @@
   >
     <div class="page" :class="{ 'fullscreen-active': isFullscreen }">
       <div class="top_box">
-      <div class="title">
-        <span class="title_text">生产管控</span>
-      </div>
-      <div class="top_row">
-        <el-row :span="24">
-          <el-col :span="9">
-            <div class="col_box col_left">
-              <div class="left_name"></div>
-              <div class="right_box lessee_select">
-                <img
-                  class="img"
-                  src="../../assets/imgs/side/top-box_left.png"
-                  alt=""
-                />
-                <div class="content">
-                  <el-select
-                    v-model="dateType"
-                    @change="dateTypeChange"
-                    clearable
-                    placeholder=" "
-                  >
-                    <el-option label="单日" :value="1" />
-                    <el-option label="本月" :value="2" />
-                    <el-option label="本年度" :value="3" />
-                  </el-select>
+        <div class="title">
+          <span class="title_text">生产管控</span>
+        </div>
+        <div class="top_row">
+          <el-row :span="24">
+            <el-col :span="9">
+              <div class="col_box col_left">
+                <div class="left_name"></div>
+                <div class="right_box lessee_select">
+                  <img
+                    class="img"
+                    src="../../assets/imgs/side/top-box_left.png"
+                    alt=""
+                  />
+                  <div class="content">
+                    <el-select
+                      v-model="dateType"
+                      @change="dateTypeChange"
+                      clearable
+                      placeholder=" "
+                    >
+                      <el-option label="单日" :value="1" />
+                      <el-option label="本月" :value="2" />
+                      <el-option label="本年度" :value="3" />
+                    </el-select>
+                  </div>
                 </div>
               </div>
-            </div>
-          </el-col>
-          <el-col :span="6">
-            <div class="col_box"></div>
-          </el-col>
-          <el-col :span="9">
-            <div class="col_box col_right">
-              <div class="lessee_select right_box">
-                <img
-                  class="img"
-                  src="../../assets/imgs/side/top-box_right.png"
-                  alt=""
-                />
-                <div class="content">
-                  <el-select
-                    v-model="stationId"
-                    @change="dateTypeChange"
-                    clearable
-                    placeholder=" "
-                  >
-                    <el-option
-                      :label="item.name"
-                      :value="item.id"
-                      v-for="item in productLineList"
-                      :key="item.id"
-                    />
-                  </el-select>
+            </el-col>
+            <el-col :span="6">
+              <div class="col_box"></div>
+            </el-col>
+            <el-col :span="9">
+              <div class="col_box col_right">
+                <div class="lessee_select right_box">
+                  <img
+                    class="img"
+                    src="../../assets/imgs/side/top-box_right.png"
+                    alt=""
+                  />
+                  <div class="content">
+                    <el-select
+                      v-model="stationId"
+                      @change="dateTypeChange"
+                      clearable
+                      placeholder=" "
+                    >
+                      <el-option
+                        :label="item.name"
+                        :value="item.id"
+                        v-for="item in productLineList"
+                        :key="item.id"
+                      />
+                    </el-select>
+                  </div>
                 </div>
-              </div>
 
-              <div class="fullscreen-btn" @click="toggleFullscreen">
-                <i :class="isFullscreen ? 'el-icon-close' : 'el-icon-full-screen'"></i>
+                <div class="fullscreen-btn" @click="toggleFullscreen">
+                  <i
+                    :class="
+                      isFullscreen ? 'el-icon-close' : 'el-icon-full-screen'
+                    "
+                  ></i>
+                </div>
               </div>
-            </div>
-          </el-col>
-        </el-row>
+            </el-col>
+          </el-row>
+        </div>
       </div>
-    </div>
-    <div class="page_content">
-      <div class="left_box">
-        <div class="comprehensive" style="margin-top: 0">
-          <div class="header">
-            <img src="../../assets/imgs/side/box_icon.png" alt="" />
-            <div class="header_text">综合统计</div>
-          </div>
+      <div class="page_content">
+        <div class="left_box">
+          <div class="comprehensive" style="margin-top: 0">
+            <div class="header">
+              <img src="../../assets/imgs/side/box_icon.png" alt="" />
+              <div class="header_text">综合统计</div>
+            </div>
 
-          <div class="content_box stats_content">
-            <div class="stats_box">
-              <div class="stats_icon">
-                <span class="num">{{ statistics.productLineCount }}</span>
+            <div class="content_box stats_content">
+              <div class="stats_box">
+                <div class="stats_icon">
+                  <span class="num">{{ statistics.productLineCount }}</span>
+                </div>
+                <div class="stats_text">场站总数</div>
               </div>
-              <div class="stats_text">场站总数</div>
-            </div>
-            <div class="stats_box">
-              <div class="stats_icon">
-                <span class="num">{{ statistics.totalGasInjection || 0 }}</span>
-                <!-- <span class="text">人</span> -->
+              <div class="stats_box">
+                <div class="stats_icon">
+                  <span class="num">{{
+                    statistics.totalGasInjection || 0
+                  }}</span>
+                  <!-- <span class="text">人</span> -->
+                </div>
+                <div class="stats_text">注气总量</div>
               </div>
-              <div class="stats_text">注气总量</div>
-            </div>
-            <div class="stats_box">
-              <div class="stats_icon">
-                <span class="num">{{ statistics.totalWater || 0 }}</span>
-                <!-- <span class="text">个</span> -->
+              <div class="stats_box">
+                <div class="stats_icon">
+                  <span class="num">{{ statistics.totalWater || 0 }}</span>
+                  <!-- <span class="text">个</span> -->
+                </div>
+                <div class="stats_text">用水量</div>
               </div>
-              <div class="stats_text">用水量</div>
-            </div>
-            <div class="stats_box">
-              <div class="stats_icon">
-                <span class="num">{{ statistics.totalElectricity || 0 }}</span>
+              <div class="stats_box">
+                <div class="stats_icon">
+                  <span class="num">{{
+                    statistics.totalElectricity || 0
+                  }}</span>
+                </div>
+                <div class="stats_text">用电量</div>
               </div>
-              <div class="stats_text">用电量</div>
-            </div>
-            <div class="stats_box">
-              <div class="stats_icon">
-                <span class="num">{{ statistics.totalCoal || 0 }}</span>
-                <!-- <span class="text">人</span> -->
+              <div class="stats_box">
+                <div class="stats_icon">
+                  <span class="num">{{ statistics.totalCoal || 0 }}</span>
+                  <!-- <span class="text">人</span> -->
+                </div>
+                <div class="stats_text">用煤量</div>
               </div>
-              <div class="stats_text">用煤量</div>
-            </div>
-            <div class="stats_box">
-              <div class="stats_icon">
-                <span class="num">{{ statistics.totalCoalGas || 0 }}</span>
-                <!-- <span class="text">个</span> -->
+              <div class="stats_box">
+                <div class="stats_icon">
+                  <span class="num">{{ statistics.totalCoalGas || 0 }}</span>
+                  <!-- <span class="text">个</span> -->
+                </div>
+                <div class="stats_text">煤灰量</div>
               </div>
-              <div class="stats_text">煤灰量</div>
             </div>
           </div>
-        </div>
-        <div class="work_order">
-          <div
-            class="header"
-            @click="$refs.DrawerRef.open('/page-eam/ledgerAssets/equipment')"
-          >
-            <img src="../../assets/imgs/side/box_icon.png" alt="" />
-            <div class="header_text">设备列表</div>
-          </div>
-          <div class="content_box" ref="deviceTableRef">
-            <el-table
-              v-if="true"
-              :data="deviceList"
-              style="width: 100%"
-              :header-cell-style="rowClass"
-              :max-height="deviceMaxHeight"
-              :show-overflow-tooltip="true"
+          <div class="work_order">
+            <div
+              class="header"
+              @click="$refs.DrawerRef.open('/page-eam/ledgerAssets/equipment')"
             >
-              <el-table-column
-                prop="index"
-                type="index"
-                label="序号"
-                width="60"
-                align="center"
-              />
-              <el-table-column
-                prop="ownershipGroupName"
-                label="权属部门"
-                min-width="120"
-                align="center"
-              />
-              <el-table-column
-                prop="name"
-                label="设备名称"
-                min-width="120"
-                align="center"
-              />
-
-              <el-table-column
-                prop="status"
-                label="状态"
-                width="120"
-                align="center"
+              <img src="../../assets/imgs/side/box_icon.png" alt="" />
+              <div class="header_text">设备列表</div>
+            </div>
+            <div class="content_box" ref="deviceTableRef">
+              <el-table
+                v-if="true"
+                :data="deviceList"
+                style="width: 100%"
+                :header-cell-style="rowClass"
+                :max-height="deviceMaxHeight"
+                :show-overflow-tooltip="true"
               >
-                <template slot-scope="scope">
-                  {{
-                    businessStatus.find((item) => item.code == scope.row.status)
-                      ?.label
-                  }}
-                </template>
-              </el-table-column>
-            </el-table>
+                <el-table-column
+                  prop="index"
+                  type="index"
+                  label="序号"
+                  width="60"
+                  align="center"
+                />
+                <el-table-column
+                  prop="ownershipGroupName"
+                  label="权属部门"
+                  min-width="120"
+                  align="center"
+                />
+                <el-table-column
+                  prop="name"
+                  label="设备名称"
+                  min-width="120"
+                  align="center"
+                />
+
+                <el-table-column
+                  prop="status"
+                  label="状态"
+                  width="120"
+                  align="center"
+                >
+                  <template slot-scope="scope">
+                    {{
+                      businessStatus.find(
+                        (item) => item.code == scope.row.status
+                      )?.label
+                    }}
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
           </div>
-        </div>
-        <div class="running_state">
-          <div class="header">
-            <img src="../../assets/imgs/side/box_icon.png" alt="" />
-            <div class="header_text">在岗人数-按班组</div>
+          <div class="running_state">
+            <div class="header">
+              <img src="../../assets/imgs/side/box_icon.png" alt="" />
+              <div class="header_text">在岗人数-按班组</div>
+            </div>
+            <div class="content_box">
+              <v-chart ref="barRef" style="height: 100%" :option="barOption"
+            /></div>
           </div>
-          <div class="content_box">
-            <v-chart ref="barRef" style="height: 100%" :option="barOption"
-          /></div>
-        </div>
-      </div>
-      <div class="center_box">
-        <div class="map_box" ref="mapBoxRef">
-          <MapDemo :style="{ height: this.mapHeight + 'px' }"></MapDemo>
         </div>
-        <div class="lessee_box">
-          <div class="header">
-            <img src="../../assets/imgs/side/box_icon.png" alt="" />
-            <div class="header_text">场站列表</div>
+        <div class="center_box">
+          <div class="map_box" ref="mapBoxRef">
+            <MapDemo :style="{ height: this.mapHeight + 'px' }"></MapDemo>
           </div>
-          <div class="content_box" ref="stationTableRef">
-            <el-table
-              v-if="true"
-              :data="stationList"
-              style="width: 100%"
-              :header-cell-style="rowClass"
-              :max-height="stationMaxHeight"
-              :show-overflow-tooltip="true"
-            >
-              <el-table-column
-                prop="date"
-                label="序号"
-                type="index"
-                width="60"
-                align="center"
-              />
-              <el-table-column
-                prop="name"
-                label="场站名称"
-                min-width="120"
-                align="center"
-              />
-              <el-table-column
-                prop="water"
-                label="用水量"
-                width="150"
-                align="center"
-              />
-              <el-table-column
-                prop="electricity"
-                label="用电量"
-                width="150"
-                align="center"
-              />
-              <el-table-column
-                prop="coal"
-                label="用煤量"
-                width="150"
-                align="center"
-              />
-              <el-table-column
-                prop="gasInjection"
-                label="注气量"
-                width="150"
-                align="center"
-              />
-              <el-table-column
-                prop="coalGas"
-                label="煤灰量"
-                width="150"
-                align="center"
-              />
-            </el-table>
+          <div class="lessee_box">
+            <div class="header">
+              <img src="../../assets/imgs/side/box_icon.png" alt="" />
+              <div class="header_text">场站列表</div>
+            </div>
+            <div class="content_box" ref="stationTableRef">
+              <el-table
+                v-if="true"
+                :data="stationList"
+                style="width: 100%"
+                :header-cell-style="rowClass"
+                :max-height="stationMaxHeight"
+                :show-overflow-tooltip="true"
+              >
+                <el-table-column
+                  prop="date"
+                  label="序号"
+                  type="index"
+                  width="60"
+                  align="center"
+                />
+                <el-table-column
+                  prop="name"
+                  label="场站名称"
+                  min-width="120"
+                  align="center"
+                />
+                <el-table-column
+                  prop="water"
+                  label="用水量"
+                  width="150"
+                  align="center"
+                />
+                <el-table-column
+                  prop="electricity"
+                  label="用电量"
+                  width="150"
+                  align="center"
+                />
+                <el-table-column
+                  prop="coal"
+                  label="用煤量"
+                  width="150"
+                  align="center"
+                />
+                <el-table-column
+                  prop="gasInjection"
+                  label="注气量"
+                  width="150"
+                  align="center"
+                />
+                <el-table-column
+                  prop="coalGas"
+                  label="煤灰量"
+                  width="150"
+                  align="center"
+                />
+              </el-table>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="right_box">
-        <div class="work_order" style="margin-top: 0">
-          <div
-            class="header"
-            @click="$refs.DrawerRef.open('/page-eam/warning/warningMessage')"
-          >
-            <img src="../../assets/imgs/side/box_icon.png" alt="" />
-            <div class="header_text">告警列表</div>
-          </div>
-          <div class="content_box" ref="alarmListRef">
-            <el-table
-              v-if="true"
-              :data="alarmList"
-              style="width: 100%"
-              :header-cell-style="rowClass"
-              :max-height="alarmMaxHeight"
-              :show-overflow-tooltip="true"
+        <div class="right_box">
+          <div class="work_order" style="margin-top: 0">
+            <div
+              class="header"
+              @click="$refs.DrawerRef.open('/page-eam/warning/warningMessage')"
             >
-              <el-table-column
-                prop="date"
-                label="序号"
-                type="index"
-                width="60"
-                align="center"
-              />
-              <el-table-column
-                prop="name"
-                label="设备名称"
-                min-width="150"
-                align="center"
-              />
-              <el-table-column
-                prop="ruleName"
-                label="告警内容"
-                min-width="150"
-              />
-              <el-table-column
-                prop="alertLevel"
-                label="告警级别"
-                width="100"
-                align="center"
-              />
-            </el-table>
-          </div>
-        </div>
-        <div class="comprehensive">
-          <div class="header">
-            <img src="../../assets/imgs/side/box_icon.png" alt="" />
-            <div class="header_text">预警统计</div>
-          </div>
-          <div class="content_box warning_stats_box">
-            <div class="warning_stats_left">
-              <div class="title_top">
-                <div class="text">预警处理</div>
-                <img
-                  class="img"
-                  src="../../assets/imgs/side/arrows.png"
-                  alt=""
-                />
-              </div>
-              <div class="warning_line">
-                <div class="warning_box warning_bgc">
-                  <div class="num" style="color: #ffc938">{{
-                    statistics.toDoToday || 0
-                  }}</div>
-                  <div class="text">今日待处理</div>
-                </div>
-                <div class="warning_box">
-                  <div class="num">{{ statistics.pendingCumulative || 0 }}</div>
-                  <div class="text">累计待处理</div>
-                </div>
-                <div class="warning_box">
-                  <div class="num">{{
-                    statistics.cumulativelyProcessed || 0
-                  }}</div>
-                  <div class="text">累计已处理</div>
-                </div>
-                <div class="warning_box">
-                  <div class="num">{{
-                    statistics.warningHandlingTotal || 0
-                  }}</div>
-                  <div class="text">累计总数</div>
-                </div>
-              </div>
+              <img src="../../assets/imgs/side/box_icon.png" alt="" />
+              <div class="header_text">告警列表</div>
             </div>
-            <div class="warning_stats_right">
-              <div class="title_top">
-                <div class="text">预警巡检</div>
-                <img
-                  class="img"
-                  src="../../assets/imgs/side/arrows.png"
-                  alt=""
+            <div class="content_box" ref="alarmListRef">
+              <el-table
+                v-if="true"
+                :data="alarmList"
+                style="width: 100%"
+                :header-cell-style="rowClass"
+                :max-height="alarmMaxHeight"
+                :show-overflow-tooltip="true"
+              >
+                <el-table-column
+                  prop="date"
+                  label="序号"
+                  type="index"
+                  width="60"
+                  align="center"
                 />
-              </div>
-              <div class="warning_line">
-                <div class="warning_box warning_bgc">
-                  <div class="num" style="color: #ffc938">{{
-                    statistics.inspectionDueToday || 0
-                  }}</div>
-                  <div class="text">今日待巡检</div>
+                <el-table-column
+                  prop="name"
+                  label="设备名称"
+                  min-width="150"
+                  align="center"
+                />
+                <el-table-column
+                  prop="ruleName"
+                  label="告警内容"
+                  min-width="150"
+                />
+                <el-table-column
+                  prop="alertLevel"
+                  label="告警级别"
+                  width="100"
+                  align="center"
+                />
+              </el-table>
+            </div>
+          </div>
+          <div class="comprehensive">
+            <div class="header">
+              <img src="../../assets/imgs/side/box_icon.png" alt="" />
+              <div class="header_text">预警统计</div>
+            </div>
+            <div class="content_box warning_stats_box">
+              <div class="warning_stats_left">
+                <div class="title_top">
+                  <div class="text">预警处理</div>
+                  <img
+                    class="img"
+                    src="../../assets/imgs/side/arrows.png"
+                    alt=""
+                  />
                 </div>
-                <div class="warning_box">
-                  <div class="num">{{
-                    statistics.accumulatedPending || 0
-                  }}</div>
-                  <div class="text">累计待完成</div>
+                <div class="warning_line">
+                  <div class="warning_box warning_bgc">
+                    <div class="num" style="color: #ffc938">{{
+                      statistics.toDoToday || 0
+                    }}</div>
+                    <div class="text">今日待处理</div>
+                  </div>
+                  <div class="warning_box">
+                    <div class="num">{{
+                      statistics.pendingCumulative || 0
+                    }}</div>
+                    <div class="text">累计待处理</div>
+                  </div>
+                  <div class="warning_box">
+                    <div class="num">{{
+                      statistics.cumulativelyProcessed || 0
+                    }}</div>
+                    <div class="text">累计已处理</div>
+                  </div>
+                  <div class="warning_box">
+                    <div class="num">{{
+                      statistics.warningHandlingTotal || 0
+                    }}</div>
+                    <div class="text">累计总数</div>
+                  </div>
                 </div>
-                <div class="warning_box">
-                  <div class="num">{{
-                    statistics.cumulativelyCompleted || 0
-                  }}</div>
-                  <div class="text">累计已完成</div>
+              </div>
+              <div class="warning_stats_right">
+                <div class="title_top">
+                  <div class="text">预警巡检</div>
+                  <img
+                    class="img"
+                    src="../../assets/imgs/side/arrows.png"
+                    alt=""
+                  />
                 </div>
-                <div class="warning_box">
-                  <div class="num">{{
-                    statistics.warningPatrolTotal || 0
-                  }}</div>
-                  <div class="text">累计总数</div>
+                <div class="warning_line">
+                  <div class="warning_box warning_bgc">
+                    <div class="num" style="color: #ffc938">{{
+                      statistics.inspectionDueToday || 0
+                    }}</div>
+                    <div class="text">今日待巡检</div>
+                  </div>
+                  <div class="warning_box">
+                    <div class="num">{{
+                      statistics.accumulatedPending || 0
+                    }}</div>
+                    <div class="text">累计待完成</div>
+                  </div>
+                  <div class="warning_box">
+                    <div class="num">{{
+                      statistics.cumulativelyCompleted || 0
+                    }}</div>
+                    <div class="text">累计已完成</div>
+                  </div>
+                  <div class="warning_box">
+                    <div class="num">{{
+                      statistics.warningPatrolTotal || 0
+                    }}</div>
+                    <div class="text">累计总数</div>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-        <div class="running_state">
-          <div class="header">
-            <img src="../../assets/imgs/side/box_icon.png" alt="" />
-            <div class="header_text">视屏监控</div>
-          </div>
-          <div class="content_box monitoring_box">
-            <div class="site_box"> </div>
+          <div class="running_state">
+            <div class="header">
+              <img src="../../assets/imgs/side/box_icon.png" alt="" />
+              <div class="header_text">视屏监控</div>
+            </div>
+            <div class="content_box monitoring_box">
+              <div class="site_box"> </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <Drawer ref="DrawerRef"></Drawer>
+      <Drawer ref="DrawerRef"></Drawer>
     </div>
   </vue-fullscreen>
 </template>
@@ -462,6 +473,11 @@
         productLineList: []
       };
     },
+    created() {
+      setTimeout(() => {
+        this.$refs.barRef.resize();
+      }, 300);
+    },
     watch: {
       isFullscreen() {
         setTimeout(() => {
@@ -503,7 +519,7 @@
           legend: { show: false },
           grid: {
             left: 100,
-            right: 55,
+            right: 55
             // bottom: '13%' //也可设置left和right设置距离来控制图表的大小
           },
           color: ['#1890ff'],
@@ -564,11 +580,11 @@
       },
       initResizeObservers() {
         this.disconnectObservers();
-        
+
         const createObserver = (refName, callback) => {
           const el = this.$refs[refName];
           if (!el) return null;
-          
+
           const observer = new ResizeObserver((entries) => {
             for (const entry of entries) {
               callback(entry.contentRect.height);
@@ -581,11 +597,11 @@
         this.deviceObserver = createObserver('deviceTableRef', (height) => {
           this.deviceMaxHeight = height - 10;
         });
-        
+
         this.stationObserver = createObserver('stationTableRef', (height) => {
           this.stationMaxHeight = height - 10;
         });
-        
+
         this.alarmObserver = createObserver('alarmListRef', (height) => {
           this.alarmMaxHeight = height - 10;
         });
@@ -593,7 +609,7 @@
       getMaxHeigth() {
         this.$nextTick(() => {
           this.initResizeObservers();
-          
+
           const mapEl = this.$refs.mapBoxRef;
           if (mapEl) {
             this.mapHeight = mapEl.clientHeight - 30;
@@ -826,7 +842,7 @@
       height: 100%;
       .comprehensive {
         .header {
-          height:14%;
+          height: 14%;
         }
         width: 100%;
         height: 27%;
@@ -1037,7 +1053,7 @@
         background-size: 100% 100%;
         min-height: 300px;
         .header {
-          height:15%;
+          height: 15%;
           display: flex;
           align-items: center;
           img {

src/views/home/map.vue

@@ -30,96 +30,103 @@
         ]
       };
     },
-    mounted() {
-      window._AMapSecurityConfig = {
-        securityJsCode: 'd60df9c6f47866f10b465156ca098ca4'
-      };
-      AMapLoader.load({
-        key: '66b29845a1829ca42a1945bdb5893c87', //申请好的 Web 端开发者 Key，首次调用 load 时必填
-        version: '2.0', //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
-        plugins: ['AMap.Scale'] //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
-      })
-        .then((AMap) => {
-          
-          var map = new AMap.Map('container', {
-            pitch: 0, //地图俯仰角度，有效范围 0 度- 83 度
-            viewMode: '3D', //地图模式
-            rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
-            pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
-            zoom: 4, //初始化地图层级
-            rotation: 0, //初始地图顺时针旋转的角度
-            zooms: [2, 20], //地图显示的缩放级别范围
-            center: [112.889159, 28.213475] //初始地图中心经纬度
-          }); //"container"为 <div> 容器的 id
-          // 开启卫星图模式
-          let layers = new AMap.TileLayer.Satellite({ map: map });
-          layers && layers.show();
-          // 开启地图旋转和缩放组件
-          AMap.plugin(['AMap.ControlBar', 'AMap.ToolBar'], function () {
-            //异步加载插件
-            var controlBar = new AMap.ControlBar({
-              //控制地图旋转插件
-              position: {
-                right: '10px',
-                top: '10px'
-              }
-            });
-            map.addControl(controlBar);
-            var toolBar = new AMap.ToolBar({
-              //地图缩放插件
-              position: {
-                right: '40px',
-                top: '110px'
-              }
+    methods: {
+      mapInit() {
+        window._AMapSecurityConfig = {
+          securityJsCode: 'd60df9c6f47866f10b465156ca098ca4'
+        };
+        AMapLoader.load({
+          key: '66b29845a1829ca42a1945bdb5893c87', //申请好的 Web 端开发者 Key，首次调用 load 时必填
+          version: '2.0', //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
+          plugins: ['AMap.Scale'] //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
+        })
+          .then((AMap) => {
+            var map = new AMap.Map('container', {
+              pitch: 0, //地图俯仰角度，有效范围 0 度- 83 度
+              viewMode: '3D', //地图模式
+              rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
+              pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
+              zoom: 4, //初始化地图层级
+              rotation: 0, //初始地图顺时针旋转的角度
+              zooms: [2, 20], //地图显示的缩放级别范围
+              center: [112.889159, 28.213475] //初始地图中心经纬度
+            }); //"container"为 <div> 容器的 id
+            // 开启卫星图模式
+            let layers = new AMap.TileLayer.Satellite({ map: map });
+            layers && layers.show();
+            // 开启地图旋转和缩放组件
+            AMap.plugin(['AMap.ControlBar', 'AMap.ToolBar'], function () {
+              //异步加载插件
+              var controlBar = new AMap.ControlBar({
+                //控制地图旋转插件
+                position: {
+                  right: '10px',
+                  top: '10px'
+                }
+              });
+              map.addControl(controlBar);
+              var toolBar = new AMap.ToolBar({
+                //地图缩放插件
+                position: {
+                  right: '40px',
+                  top: '110px'
+                }
+              });
+              map.addControl(toolBar);
             });
-            map.addControl(toolBar);
-          });
 
-          this.markers.forEach((item) => {
-            const marker = new AMap.Marker({
-              position: item.position,
-              title: item.name
-            });
+            this.markers.forEach((item) => {
+              const marker = new AMap.Marker({
+                position: item.position,
+                title: item.name
+              });
 
-            map.add(marker);
+              map.add(marker);
 
-            const infoWindow = new AMap.InfoWindow({
-              content: `<div style="padding: 5px;">${item.name}</div>`,
-              offset: new AMap.Pixel(0, -30)
-            });
+              const infoWindow = new AMap.InfoWindow({
+                content: `<div style="padding: 5px;">${item.name}</div>`,
+                offset: new AMap.Pixel(0, -30)
+              });
 
-            marker.on('mouseover', () => {
-              infoWindow.open(map, marker.getPosition());
-            });
+              marker.on('mouseover', () => {
+                infoWindow.open(map, marker.getPosition());
+              });
 
-            marker.on('click', () => {
-              // console.log(map, marker.getPosition());
+              marker.on('click', () => {
+                // console.log(map, marker.getPosition());
+                //   router.push({ path: item.url });
+              });
 
-            //   router.push({ path: item.url });
+              marker.on('mouseout', () => {
+                infoWindow.close();
+              });
             });
 
-            marker.on('mouseout', () => {
-              infoWindow.close();
+            var disProvince = new AMap.DistrictLayer.Country({
+              zIndex: 10,
+              code: '100000', //地址码
+              depth: 1,
+              styles: {
+                fill: 'rgba(255,255,255,0)', //设置背景颜色
+                'province-stroke': '#2cf6f7', //边界线颜色
+                'nation-stroke': '#2cf6f7',
+                'stroke-width': 2
+                // 'city-stroke': 'red', //当depth>0时，设置市级边界线
+              }
             });
+            disProvince.setMap(map);
+          })
+          .catch((e) => {
+            console.log(e, 'dasdasd');
           });
-
-          var disProvince = new AMap.DistrictLayer.Country({
-            zIndex: 10,
-            code: '100000', //地址码
-            depth: 1,
-            styles: {
-              fill: 'rgba(255,255,255,0)', //设置背景颜色
-              'province-stroke': '#2cf6f7', //边界线颜色
-              'nation-stroke': '#2cf6f7',
-              'stroke-width': 2
-              // 'city-stroke': 'red', //当depth>0时，设置市级边界线
-            }
-          });
-          disProvince.setMap(map);
-        })
-        .catch((e) => {
-          console.log(e,'dasdasd');
+      }
+    },
+    mounted() {
+      setTimeout(() => {
+        this.$nextTick(() => {
+          this.mapInit();
         });
+      }, 300);
     }
   };
 </script>