系统总览页面

web/src/components/Home/Map.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="map">
+    <div>
+      <div class="icon1" @click="showModal()"></div>
+      <div class="icon"></div>
+    </div>
+    <div ref="mapContent"></div>
+    <a-modal
+      class="modal"
+      ref="modal"
+      v-model:open="showCtrModal"
+      :destroy-on-close="true"
+      :get-container="() => $refs.mapContent"
+      :closable="false"
+      :footer="null"
+      :title="testVal.name"
+      :mask="true"
+    >
+      <div class="modal-content">
+        <div class="home-modal">
+          <Modal></Modal>
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+<script>
+import { getReq, postReq } from '@/request/api'
+import Modal from '@/components/Home/Modal.vue'
+export default {
+  name: 'Map',
+  components: { Modal },
+
+  data() {
+    return {
+      showCtrModal: false,
+      testVal: {
+        name: '场站211',
+        id: '124563'
+      }
+    }
+  },
+  mounted() {},
+  methods: {
+    async showModal(currentVal) {
+      console.log(currentVal, 'cccccccccccccccccccccc')
+      this.showCtrModal = true
+      try {
+        const query = {}
+        const res = await postReq(query, '')
+        if (res.code == 200) {
+          this.modalInfo = res.data.records
+        } else {
+          throw res
+        }
+      } catch (err) {
+        console.log(err, 'eeeeeeeeeeeeeeeerr')
+      }
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.map {
+  width: 100%;
+  height: 100%;
+  .icon1 {
+    width: 32px;
+    height: 80px;
+    background: url('../../assets/home/homeIcon1.png');
+    background-size: contain;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+  .icon {
+    width: 32px;
+    height: 80px;
+    background: url('../../assets/home/homeIcon.png');
+    background-size: contain;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+
+  :deep(.ant-modal-root .ant-modal-mask) {
+    background-color: #000 !important;
+  }
+  :deep(.modal.ant-modal) {
+    width: 68% !important;
+    height: 80% !important;
+    min-width: 1200px !important;
+    border: none;
+    padding: 20px;
+    background-image: url('../../assets/home/modal-bg.png');
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    & > div {
+      height: 100%;
+    }
+    .ant-modal-content {
+      height: 100%;
+      width: 96%;
+      margin: auto;
+      box-shadow: none;
+      background: transparent;
+
+      .ant-modal-body {
+        height: calc(100% - 45px);
+        color: #fff;
+        // padding: 10px;
+        div > span {
+          //   margin-right: 10px;
+        }
+      }
+      .ant-modal-header {
+        height: 45px;
+        position: absolute;
+        top: -45px;
+        text-align: center;
+        width: 96%;
+        background: transparent;
+        div {
+          font-size: 32px;
+
+          color: #fff;
+        }
+      }
+    }
+  }
+  .modal-content {
+    height: calc(100% - 45px);
+
+    min-height: 700px;
+  }
+  .home-modal {
+    height: 100%;
+  }
+}
+</style>