新增图片图钉组件

longyvfengyun

2023-06-17 c43dfdf57aa64c81ff54476371e8e782a34415bf

新增图片图钉组件

 src/components/FlexLayout.vue

@@ -89,8 +89,6 @@

.flex-layout-body {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #052272;
}
.flex-layout-body.no-bg {

 src/components/MapPin.vue

New file
@@ -0,0 +1,104 @@
<script setup>
import {computed, onMounted} from "vue";

    const props = defineProps({
        name: {
            type: String,
            default: ""
        },
        cWidth: {
            type: Number,
            default: 100
        },
        cHeight: {
            type: Number,
            default: 100,
        },
        dWidth: {
            type: Number,
            default: 100
        },
        dHeight: {
            type: Number,
            default: 100
        },
        x: {
            type: Number,
            default: 0
        },
        y: {
            type: Number,
            default: 0
        }
    });

    const posStyle = computed(()=>{
        return {
            left: props.x*props.cWidth/props.dWidth+'px',
            top: props.y*props.cHeight/props.dHeight+'px'
        }
    });

    onMounted(()=>{
        console.log(posStyle);
    });
</script>

<template>
    <div class="map-pin" :style="posStyle">
        <el-tooltip placement="top">
            <template #content>
                {{name}}
            </template>
            <div class="map-pin-content">
                    <div class="pin"></div>
                    <div class="pulse"></div>
            </div>
        </el-tooltip>
    </div>
</template>

<style lang="less" scoped>
@size: 24px;
.map-pin {
    position: absolute;
    cursor: pointer;
    .map-pin-content {
        position: relative;
        top: -@size - @size*0.1;
        left: -@size*0.5;
        .pin {
            width: @size;
            height: @size;
            border-radius: 50% 50% 50% 0;
            background-color: @font-color-high-light;
            transform: rotate(-45deg);
            &:hover {
                background-color: @font-color-primary;
            }
            &:active {
                background-color: @font-color-warning;
            }
            &:after {
                content: '';
                position: absolute;
                width: @size*0.5;
                height: @size*0.5;
                margin: @size*0.25 0 0 @size*0.25;
                background: #646767;
                border-radius: 50%;
            }
        }
        .pulse {
            position: absolute;
            background: rgba(0, 254, 255, 0.3);
            border-radius: 50%;
            height: @size*0.8;
            width: @size*0.8;
            margin-left: @size*0.1;
            margin-top: -@size*0.2;
            transform: rotateX(55deg);
        }
    }
}
</style>

 src/views/home/index.vue

@@ -1,8 +1,11 @@
<script setup>
import FlexLayout from "@/components/FlexLayout.vue";
import CardBox from "@/components/CardBox.vue";
import {ref} from "vue";
import {onMounted, onUnmounted, ref, watch} from "vue";
import MapPin from "@/components/MapPin.vue";
import slideMenu from "@/views/mainLayout/js/slideMenu";

const {isCollapse} = slideMenu();
const homeInfo = ref([]);
for(let i=1; i<10; i++) {
    homeInfo.value.push({
@@ -12,11 +15,55 @@
        diffPre: 1
    });
}

const homeContentDom = ref(null);
const cWidth = ref(0);
const cHeight = ref(0);
const dWidth = ref(1279);
const dHeight = ref(649);

const setContainerSize = ()=>{
    cWidth.value = homeContentDom.value.offsetWidth;
    cHeight.value = homeContentDom.value.offsetHeight;
}

watch(isCollapse, ()=>{
    setTimeout(()=>{
        setContainerSize();
    }, 500);
});

onMounted(()=>{
    setContainerSize();
    // 监听windows窗口的缩放,绑定resize事件
    window.addEventListener("resize", setContainerSize);
});


onUnmounted(()=>{
    // 销毁resize事件
    window.removeEventListener("resize", setContainerSize);
});
</script>

<template>
    <flex-layout>
        <div class="home-content">
        <div class="home-content" ref="homeContentDom">
            <map-pin
                name="培养间"
                :c-width="cWidth" :c-height="cHeight"
                :d-width="dWidth" :d-height="dHeight"
                :x="0" :y="0"></map-pin>
            <map-pin
                name="培养间"
                :c-width="cWidth" :c-height="cHeight"
                :d-width="dWidth" :d-height="dHeight"
                :x="555" :y="385"></map-pin>
            <map-pin
                name="测序间"
                :c-width="cWidth" :c-height="cHeight"
                :d-width="dWidth" :d-height="dHeight"
                :x="765" :y="450"></map-pin>
            <div class="card-box-list">
                <div
                    class="card-box-item"

 src/views/mainLayout/components/PageHeader.vue

@@ -1,16 +1,14 @@
<script setup>
import {computed, ref} from "vue";
import FlexLayout from "@/components/FlexLayout.vue";
import {Expand, ArrowDown, ArrowUp, Avatar, Fold} from "@element-plus/icons-vue";
import usePageMenuStore from "@/store/usePageMenuStore";
import userDropdown from "@/views/mainLayout/js/userDropdown";
import slideMenu from "@/views/mainLayout/js/slideMenu";
import usePageMenuStore from "@/store/usePageMenuStore";

const {isCollapse} = slideMenu();
const {isVisible, visibleChange, commandClick} = userDropdown();

const pageMenuStore = usePageMenuStore();
const isCollapse = computed(()=>{
    return pageMenuStore.isCollapse;
});
const changeMenuState = ()=>{
    pageMenuStore.changeCollapse(!isCollapse.value);
}
@@ -19,18 +17,16 @@
<template>
    <div class="header-wrapper">
        <flex-layout no-bg direction="row">
            <template #header>
                <div class="header-left-wrapper">
                    <span class="menu-state-icon" @click="changeMenuState">
                        <el-icon size="20">
                            <Fold v-if="!isCollapse" />
                            <Expand v-else/>
                        </el-icon>
                    </span>
                    <span>安琪酵母（西藏）益生菌信息采集中心智能实验室</span>
                    <span class="sys-version">V1.21</span>
                </div>
            </template>
            <div class="header-left-wrapper">
                <span class="menu-state-icon" @click="changeMenuState">
                    <el-icon size="20">
                        <Fold v-if="!isCollapse" />
                        <Expand v-else/>
                    </el-icon>
                </span>
                <span class="sys-name">安琪酵母（西藏）益生菌信息采集中心智能实验室</span>
                <span class="sys-version">V1.21</span>
            </div>
            <template #footer>
                <div class="page-header-right">
                    <div class="hdw-avatar">
@@ -81,6 +77,11 @@
            padding: 4px 8px;
            cursor: pointer;
        }
        &.sys-name {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        &.sys-version {
            padding-top: 8px;
            font-size: 16px;
@@ -102,6 +103,7 @@
.hdw-avatar-wrapper {
    cursor: pointer;
    color: @font-color-primary;
    white-space: nowrap;
}
.hdw-avatar-wrapper:focus-visible {
    outline: none;

 src/views/mainLayout/components/SlideMenu.vue

@@ -1,19 +1,13 @@
<script setup>
import {computed, ref, watchEffect} from "vue";
import usePageMenuStore from "@/store/usePageMenuStore";
import {ref, watchEffect} from "vue";
import FlexLayout from "@/components/FlexLayout.vue";
import slideMenu from "@/views/mainLayout/js/slideMenu";
import {useRoute} from "vue-router";

const {isCollapse, menuActive, menuData} = slideMenu();
const route = useRoute();

const pageMenuStore = usePageMenuStore();

const isCollapse = computed(()=>{
    return pageMenuStore.isCollapse;
});

const isOpen = ref(!isCollapse.value);
const menuActive = ref(route.path);
const menuData = ref([]);
menuActive.value = route.path;
menuData.value = [
    {
        title: "首页",
@@ -61,10 +55,6 @@
    },
];

const handleOpen = ()=>{

};

watchEffect(()=>{
    if(isCollapse.value) {
        isOpen.value = false;
@@ -97,8 +87,7 @@
                :default-active="menuActive"
                :unique-opened="true"
                class="el-menu-vertical"
                :collapse="isCollapse"
                @open="handleOpen">
                :collapse="isCollapse">
                <template v-for="menu in menuData" :key="menu.path">
                    <el-sub-menu :index="menu.path" v-if="menu.children">
                        <template #title>

 src/views/mainLayout/js/slideMenu.js

New file
@@ -0,0 +1,15 @@
import usePageMenuStore from "@/store/usePageMenuStore";
import {computed, ref} from "vue";

const slideMenu = ()=>{
  const menuActive = ref("");
  const menuData = ref([]);
  const pageMenuStore = usePageMenuStore();
  const isCollapse = computed(()=>{
    return pageMenuStore.isCollapse;
  });

  return {isCollapse, menuActive, menuData};
}

export default slideMenu;

 src/views/mainLayout/js/userDropdown.js

@@ -16,7 +16,6 @@
        passwordChange();
        break;
      default:
        this.$layer.msg("该功能暂未开放！");
        break;
    }
  }