<!--
 * @Author: your name
 * @Date: 2022-04-19 09:46:51
 * @LastEditTime: 2023-07-20 09:04:00
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Middle.vue
-->
<template>
  <div class="middle-components all-flex-h">
    <div class="top">
      <img src="@/assets/image-overview/jingkaiqu.png" alt="" />
    </div>
    <div class="bottom" id="bottom-map">
      <CharsBoxE/>
    </div>
  </div>
</template>

<script>
import CharsBoxE from "./CharBoxE";
import { EditorMap } from "@/utils/mapClass/map";
import { mapGetters, mapActions } from "vuex";

export default {
  name: "",
  components: {
    CharsBoxE,
  },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["company", "systemSetting"]),
  },
  mounted() {
    // const path = eval(this.systemSetting.map_center);

    // this.map = new EditorMap(
    //   "bottom-map",
    //   {
    //     center: path,
    //     // mapStyle: "amap://styles/806fa63f07c70b043867bd1f9a600981",
    //     // mapStyle: "amap://styles/4651b4007b4adfcf5015dd154459ab46",
    //     zoom: 9.8,
    //     maskFLag:true,
    //   },
    //   this
    // );
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.middle-components {
  height: 100%;
  > div {
    &.top {
      padding: 15px 0;
      text-align: center;
    }
    &.bottom {
      flex: 1;
      box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
    }
  }
}
</style>