<template> <Dialog title="卡片佈局" width="1220px"> <div class="box"> <div> <template v-for="(item ,index) in list" :key="index"> <div v-if="index < list.length / 2" :class="{active : 1==1}" @drop="drop($event, index)" @dragover="dragOver" draggable="true" @dragstart="dragStart($event, index)"> <img :src="getIcon(item.Name)"> <p>{{ item.Name }}</p> <div> <img src="./../../../assets/images/echart/[email protected]"> </div> </div> </template> </div> <div> <template v-for="(item ,index) in list" :key="index"> <div v-if="index >= list.length / 2" :class="{active : 1==1}" @drop="drop($event, index)" @dragover="dragOver" draggable="true" @dragstart="dragStart($event, index)"> <img :src="getIcon(item.Name)"> <p>{{ item.Name }}</p> <div> <img src="./../../../assets/images/echart/[email protected]"> </div> </div> </template> </div> </div> </Dialog> </template>
<script lang="ts"> import { defineComponent, ref } from 'vue'; import Dialog from "./dialog.vue"; import { GetShowedCardsList } from "./../../../api/charts/index.ts" import icon_ss from "./../../../assets/images/echart/[email protected]" import icon_jsxl from "./../../../assets/images/echart/[email protected]" import icon_jsjl from "./../../../assets/images/echart/[email protected]" import icon_jsxb from "./../../../assets/images/echart/[email protected]" import icon_jszc from "./../../../assets/images/echart/[email protected]" import icon_jsnl from "./../../../assets/images/echart/[email protected]" import icon_js from "./../../../assets/images/echart/[email protected]" import icon_xsnj from "./../../../assets/images/echart/[email protected]" import cc from "./../../../assets/images/echart/c [email protected]" import icon_zyxs from "./../../../assets/images/echart/[email protected]" import { log } from 'console'; export default defineComponent({ components: { Dialog }, setup() { let startIndex = ""; const dragStart = (event, index) => { startIndex = index; event.dataTransfer.setData("index", index); } const dragOver = (event) => { event.preventDefault(); } const drop = (event, index) => { const tem = list.value[startIndex]; console.log(tem) if((startIndex < list.value.length / 2 && index >= list.value.length / 2) || (index < list.value.length / 2 && startIndex >= list.value.length / 2)) { console.log("@2222222222222222222") list.value[startIndex] = list.value[index] list.value[index] = tem; }else{ list.value.splice(startIndex, 1) if(startIndex < index) { if(event.offsetY < 52) { console.log("上面") list.value.splice((index - 1 < 0 ? 0 : index - 1), 0 ,tem) }else{ console.log("下面") list.value.splice(index, 0 ,tem) } }else{ if(event.offsetY < 52) { console.log("上面") list.value.splice(index, 0 ,tem) }else{ console.log("下面") list.value.splice(index + 1, 0 ,tem) } } } } const data = { id: 1 } const list = ref([]); GetShowedCardsList(data).then(res => { if(res.success) { list.value = res.result; } }) const getIcon = (name) => { let str = ""; switch(name) { case "師生數量" : str = icon_ss; break; case "教師學歷分佈情況" : str = icon_jsxl break; case "教師教齡分佈情況" : str = icon_jsjl break; case "教師性別分佈情況" : str = icon_jsxb break; case "教師教齡分佈（年級）" : str = icon_jsnl break; case "教師職稱分佈（年級）" : str = icon_jszc break; case "教師職稱分佈" : str = icon_js break; case "師生應用活躍情況" : str = icon_ss break; case "學生年級應用分佈" : str = icon_xsnj break; case "作業-已採集題目數" : str = cc break; case "作業-已採集學生數" : str = icon_zyxs break; } return str; } return { dragStart, dragOver, drop, getIcon, list }; }, }); </script> <style lang="scss" scoped> .box { max-height: 70vh; overflow: auto; padding-top: 24px; padding-left: 24px; >div { width: 574px; margin-right: 24px; box-sizing: border-box; float: left; >div { height: 104px; padding: 0 32px; display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 20px; cursor: pointer; >img:nth-of-type(1) { width: 62px; height:62px; } p { margin-left: 23px; font-size: 20px; font-weight: 600; color: #FFFFFF; flex: 1; } >div { width: 40px; height: 40px; img:nth-of-type(1) { width: 40px; height: 40px; } } } >div:nth-of-type(2n) { margin-right: 0; } >div:after { width: 100%; height: 100%; position: absolute; background: url("./../../../assets/images/echart/[email protected]"); background-size: 100% 100%; left: 0; top: 0; content: ""; opacity: .8; } .active:after { background: url("./../../../assets/images/echart/[email protected]"); background-size: 100% 100%; opacity: 1; } } >div:nth-of-type(2) { margin-right: 0; } } </style>