update

2023-12-11 18:34:15 +08:00
parent e449d5687b
commit 35f21a4342
11 changed files with 380 additions and 52 deletions
@@ -2,29 +2,109 @@
    <div class="center-map">
        <div class="china-map-box">
            <div class="form-container">
+                <button @click="test">点击</button>
                <slot name="rightForm"></slot>
            </div>
-            <div style="flex: 1; overflow: hidden; margin: 0 0 10px">
+            <div style="flex: 1; overflow: hidden; margin: 0 0 10px; height: 100%">
                <div id="mapContainer" class="mapContainer"></div>
            </div>
            <div v-show="false" id="container"></div>
            <div v-show="false" id="panel"></div>
+            <div class="footer-data" v-show="true">
+                <div class="empty-png"></div>
+                <div class="col-item" v-for="item in footerList">
+                    <div class="col-text">{{ item?.name }}</div>
+                    <div class="col-value">{{ item?.value }}</div>
+                </div>
+            </div>
+            <div class="footer-dialog-con" v-show="false" :class="show ? 'slide-top' : 'slide-bottom'">
+                <FooterDialog></FooterDialog>
+            </div>
        </div>
    </div>
 </template>
 <script lang="ts" setup>
-    import { onMounted, ref } from 'vue';
+    import { onMounted, ref, watch } from 'vue';
    import { message } from 'ant-design-vue';
    import { Map } from '/@/assets/mapUtils/map';
+    import FooterDialog from '/@/components/secondaryScreen/secondMap/components/footerDialog.vue';
+    import { useFooterTable } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
+    import { footerApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
+    import { getToday } from '/@/utils/utils.ts';
+
+    const show = ref(false);
+
+    function test() {
+        show.value = !show.value;
+    }
+
+    const props = defineProps({
+        orgCode: String,
+        type: String,
+    });

    async function getMapData(type, params = {}) {}

+    const markerList = [
+        {
+            lon: 109.42,
+            lat: 33.9,
+            type: '6',
+            name: '第一采油厂',
+        },
+        {
+            lon: 106.59,
+            lat: 34.93,
+            type: '6',
+            name: '第二采油厂',
+        },
+        {
+            lon: 109.42,
+            lat: 31.9,
+            type: '6',
+            name: '第三采油厂',
+        },
+    ];
    onMounted(() => {
-        initMap();
+        init();
+        getFooterTable();
    });

-    function initMap() {
+    function init() {
        Map.initMap({ el: 'mapContainer' });
+        Map.createOverlay(
+            markerList,
+            {
+                content: function (val) {
+                    return `<div style="color: red;
+                                width: 21px;
+                                height: 44px;
+                                position: absolute;
+                                left: -20px;
+                                top: -20px;" title="${val.name}">
+                            </div>`;
+                },
+            },
+            (val) => {
+                console.log('info', val);
+            }
+        );
+    }
+
+    const { footerList, setFooterList } = useFooterTable();
+    watch(props, () => {
+        getFooterTable();
+    });
+
+    async function getFooterTable() {
+        const params = {
+            orgCode: 'A01A01' || props.orgCode,
+            // dataDate: getToday(),
+        };
+        const { code, result } = await footerApi(params);
+        if (code == 200) {
+            setFooterList(result.records[0]);
+        }
    }
 </script>
 <style lang="less" scoped>
@@ -44,16 +124,88 @@

        .form-container {
            position: absolute;
-            //right: 9px;
            right: 0;
            top: 17px;
            z-index: 1;
        }

        .mapContainer {
-            flex: 1;
-            height: calc(100% + 22px);
+            height: 100%;
            margin: 10px 0;
        }
+
+        .footer-data {
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            display: flex;
+            z-index: 999;
+
+            .empty-png {
+                position: absolute;
+                top: -16px;
+                left: 0;
+                width: 100%;
+                height: 16px;
+                background: url('../../../assets/images/bg.png') no-repeat;
+                background-position-y: -500px;
+            }
+
+            .col-item {
+                flex: 1;
+                color: #ffffff;
+                text-align: center;
+
+                .col-text {
+                    height: 40px;
+                    line-height: 40px;
+                    background: rgba(35, 132, 221);
+                }
+
+                .col-value {
+                    height: 40px;
+                    line-height: 40px;
+                    background-color: #00152b;
+                }
+            }
+        }
+
+        --moveUp: 50px;
+        --moveDown: -50px;
+
+        .footer-dialog-con {
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: var(--moveDown);
+            z-index: 999;
+        }
+
+        .slide-top {
+            animation: slide-top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+        }
+
+        @keyframes slide-top {
+            0% {
+                transform: translateY(0);
+            }
+            100% {
+                transform: translateY(var(--moveDown));
+            }
+        }
+
+        .slide-bottom {
+            animation: slide-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+        }
+
+        @keyframes slide-bottom {
+            0% {
+                transform: translateY(var(--moveDown));
+            }
+            100% {
+                transform: translateY(var(--moveUp));
+            }
+        }
    }
-</style>
+</style>