fini-ui/src/views/login/index.vue

<template>
    <div class="login2">
        <div class="box w">
            <el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
                style="background-color: #1C3F56;" :with-header="false">
                <Drawer />
            </el-drawer>
            <div class="left">
                <div class="header">
                    <div class="menu">
                        <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
                    </div>
                    <!-- <input class="search" /> -->
                    <el-autocomplete v-model="state" :fetch-suggestions="querySearch" :trigger-on-focus="false" clearable
                        class="inline-input w-50" @select="handleSelect" @keyup.enter="handleSelect">
                        <template #prefix>
                            <img class="imgSearch123" src="@/assets/1x/1x/source2.png" alt="找不到图片" @click="handleSelect">
                        </template>
                    </el-autocomplete>

                    <div class="dropdown">
                        <img src="@/assets/1x/source4.png" class="first " @click="handleShowCup">
                    </div>
                    <div class="dropdown1">

                        <img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
                        <Lang class="alert" ref="lang" />
                        <Select ref="selectR" />
                        <!-- <SearchCup ref="SearchCupDom" class="searchCup" /> -->
                    </div>

                </div>
                <div class="bigger">
                    <Main v-for="(item, index) in logos" :data="item" :key="index"></Main>
                </div>

            </div>
            <div class="right">
                <div class="right-top">
                    <img src="@/assets/1x/1x/source1.png" />
                    <h3 class="top-title">{{ $t(i18n.global.t('home.IPOcalendar')) }}</h3>
                </div>
                <div class="right-bottom">

                    <el-calendar ref="calendar" v-model="dayValue">
                        <template #header="{ date }">

                            <el-button size="small" @click="selectDate('prev-month')">
                                <img src="@/assets/1x/source11.png">
                            </el-button>

                            <!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
                            <span class="month">{{ showMounth(date) }}</span>

                            <el-button size="small" @click="selectDate('next-month')">
                                <img src="@/assets/1x/source12.png">
                            </el-button>

                        </template>
                        <!-- <template #date-cell="{ data }">

                    </template> -->
                    </el-calendar>
                </div>
                <div class="right-bottom1">
                    <Event v-if="Eventdata.length" :data="Eventdata" />
                    <div v-else class="right-bottom-title1">No event</div>

                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: 'Xlogin',
};
</script>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import Lang from "./components/Lang.vue";
import Main from './components/Main.vue';
import { getHomeIpo, getIpo } from '@/api/reqIpo/ipo'
import moment from "moment"
import { useRouter } from 'vue-router';
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import Event from './components/Event.vue';
import { getEventData, getSearchListing } from "@/api/reqIpo/ipo";
import { getDataFromId } from "@/api/mock/home"
import { ElMessage } from 'element-plus'
import SearchCup from "./components/SearchCup.vue";
import Drawer from "./modelComponents/Drawer.vue";
import Select from "./components/Select.vue";
const selectR = ref();
const dayValue = ref(new Date())
const drawer = ref(false)
const handleDrawer = (done: () => void) => {
    done();
}
const openDrawer = () => {
    drawer.value = true;
}
const { proxy } = (getCurrentInstance() as any)
const handleSelect = () => {
    //  console.log('@@@', state.value)
    getSearchIpoList(state.value)
}
const router = useRouter()
watch(dayValue, async (ne, ol) => {
    const day = moment(ne).format("YYYY-MM-DD")
    const result = await getEventData(day);
    console.log(result);
    setEventdata((result as any).data)
})
const Eventdata = ref([
    // {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2370
    // },
    // {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2370
    // }, {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2372
    // },
    // {
    //     listPlatform1:"主板",
    //     name: "力高健康生活有限公司",
    //     logo:"-",
    //     number: 2373
    // },
    // {
    //     listPlatform1:"主板",
    //     name: "力高健康生活有限公司",
    //     logo:"-",
    //     number: 2374
    // },
    // {
    //     listPlatform1:"主板",
    //     name: "力高健康生活有限公司",
    //     logo:"-",
    //     number: 2375
    // },
    // {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2378
    // },
    // {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2374
    // },
    // {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2378
    // },
    // {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2380
    // }, {
    //     listPlatform1:"主板",
    //     logo:"-",
    //     name: "力高健康生活有限公司",
    //     number: 2381
    // }
])
const setEventdata = (EventD: any) => {
    Eventdata.value = EventD.map((item: any) => {
        const { stkCode, listPlatform, companyEngFull, companyChiFull } = item;
        return {
            logo: '-',
            listPlatform1: listPlatform,
            name: companyEngFull + ";" + companyChiFull,
            number: stkCode
        }

    })
}
const getHomeIpoList = async () => {
    async function demo() {
        return new Promise(async (resolve, reject) => {

            const res = await getHomeIpo(1)
            // const res = await getDataFromId('home');
            // const data = (res as any).map((item: any) => {
            const data = (res as any).data.map((item: any) => {
                let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate } = item;
                return {
                    logolinks: logoLink,
                    title: companyEngFull + ";" + companyChiFull,
                    status: status,
                    number: stkCode,
                    HKD: priceFinal.toFixed(3) ? priceFinal.toFixed(3) : priceMinMax(),
                    time: listingDate ? listingDate : pricingDate,
                    ipoID: ipoID,
                    price: priceFinal,
                    listingDate: listingDate
                }
                function priceMinMax() {
                    if (priceMin && priceMax) {
                        return `${priceMin.toFixed(3)} - ${priceMax.toFixed(3)}`
                    } else if (priceMin) {
                        return `${priceMin.toFixed(3)} - `
                    } else if (priceMax) {
                        return ` -${priceMax.toFixed(3)}`
                    } else {
                        return " - "
                    }
                }
            })
            resolve(data)
        }
        )
    }
    const result = await demo();
    (result as objType[]).sort((a: any, b: any) => {
        const preTime = new Date(a.time).getTime();
        const nextTime = new Date(b.time).getTime();
        if (preTime == nextTime) {
            return Number(a.number) - Number(b.number);
        } else {
            return preTime - nextTime;
        }
    })
    logos.value = result as objType[]
}
onMounted(async () => {
    getHomeIpoList();
    var day = moment(Date.now()).format("YYYY-MM-DD")
    const result = await getEventData(day);
    setEventdata((result as any).data)
})
const getSearchIpoList = async (keyword: string) => {
    async function demo() {
        return new Promise(async (resolve, reject) => {
            try {
                const res = await getSearchListing(keyword)
                if (!(res as any).data.length) {
                    ElMessage.warning('No relevant search data')
                    throw ("222")
                }
                const data = (res as any).data.map((item: any) => {
                    let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate } = item;
                    return {
                        logolinks: logoLink,
                        title: companyEngFull + ";" + companyChiFull,
                        status: status,
                        number: stkCode,
                        HKD: priceFinal ? priceFinal.toFixed(3) : priceMinMax(),
                        time: listingDate ? listingDate : pricingDate,
                        ipoID: ipoID,
                        price: priceFinal,
                        listingDate: listingDate
                    }
                    function priceMinMax() {
                        if (priceMin && priceMax) {
                            return `${priceMin.toFixed(3)} - ${priceMax.toFixed(3)}`
                        } else if (priceMin) {
                            return `${priceMin.toFixed(3)} - `
                        } else if (priceMax) {
                            return ` -${priceMax.toFixed(3)}`
                        } else {
                            return " - "
                        }
                    }
                })
                resolve(data)
            } catch (error) {
                reject()
            }

        }
        )
    }
    const result = await demo();
    (result as objType[]).sort((a: any, b: any) => {
        const preTime = new Date(a.number).getTime();
        const nextTime = new Date(b.number).getTime();
        if (preTime == nextTime) {
            return Number(a.number) - Number(b.number);
        } else {
            return preTime - nextTime;
        }
    })

    logos.value = result as objType[]

}
//测试功能----------------------------------------------------------
onMounted(async () => {
    // const result=await getDataFromId("home");
    // console.log('@@',result);
    // 测试event
    // const result = await getDataFromId(101);
    // setEventdata(result);
})
interface objType {
    title: string,
    number: string,
    HKD: string,
    price: string,
    time: string,
    trading: string

}
const logos = ref<objType[]>([
    {
        title: "bestCompany",
        number: "09985",
        HKD: "HKD 148.000",
        price: "final offer Price",
        time: "2023-03-31 09:00",
        trading: "Commencement of trading date"
    },
    {
        title: "bestCompany",
        number: "09985",
        HKD: "HKD 30.000-40.000",
        price: "offer Price Range",
        time: "2022-12-01 12:00:00",
        trading: "Expected Price Determination Date"
    },
    {
        title: "bestCompany",
        number: "09985",
        HKD: "HKD 30.000-40.000",
        price: "offer Price Range",
        time: "2022-12-01 12:00:00",
        trading: "Expected Price Determination Date"
    },
    {
        title: "bestCompany",
        number: "09985",
        HKD: "HKD 30.000-40.000",
        price: "offer Price Range",
        time: "2022-12-01 12:00:00",
        trading: "Expected Price Determination Date"
    },
    {
        title: "bestCompany",
        number: "09985",
        HKD: "HKD 30.000-40.000",
        price: "offer Price Range",
        time: "2022-12-01 12:00:00",
        trading: "Expected Price Determination Date"
    }
])

const jsonData = {
    "code": null,
    "msg": null,
    "data": {
        "exception": null,
        "nextCursor": "11",
        "exceptionStr": "[]",
        "dataStr": "[IPOList.DataIn(ipoID=1234, stkCode=9988, isin=KYG017191142, status=25), IPOList.DataIn(ipoID=1235, stkCode=9633, isin=CNE100004272, status=30), IPOList.DataIn(ipoID=1236, stkCode=9618, isin=KYG8208B1014, status=45), IPOList.DataIn(ipoID=1237, stkCode=6618, isin=KYG5074A1004, status=60), IPOList.DataIn(ipoID=1238, stkCode=1024, isin=KYG532631028, status=70)]",
        "code": "0",
        "totalSize": 5,
        "data": null,
        "id": 1635457757501956097,
        "message": "",
        "timestamp": null
    }
}
// console.log(jsonData);
// console.log(jsonData.data.dataStr.);

interface LinkItem {
    value: string
    link: string
}

const state = ref('')//搜索框数据
const links = ref<LinkItem[]>([])
//搜索框组件自带js
const querySearch = (queryString: string, cb: (arg0: { value: string; link: string; }[]) => void) => {
    // console.log('search', queryString, value, link, cb)
    const results = queryString
        ? links.value.filter(createFilter(queryString))
        : links.value
    // call callback function to return suggestion objects
    const result11 = cb(results)
}
const createFilter = (queryString: string) => {
    return (restaurant: { value: string; }) => {
        return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
    }
}
//测试12313123
//搜索提示框信息
const loadAll = () => {
    return [
        { value: '北京', link: 'https://github.com/babel/babel' },
        { value: '淮北', link: 'https://github.com/babel/babel' },
    ]
}


const handleIconClick = (ev: Event) => {
    // console.log(ev)

}

onMounted(() => {
    links.value = loadAll()

})//自动搜索框自带js结束

const calendar = ref()
const selectDate = (val: string) => {
    console.log(val)
    calendar.value.selectDate(val)
}//日历自带js结束

//通过ref获取子组件实例，语言转换功能js
const lang = ref()
const SearchCupDom = ref()
const handleShowLang = (e: any) => {
    e.stopPropagation()
    selectR.value.showSelect = false
    lang.value.showLang = !lang.value.showLang
}
const handleShowCup = (e: any) => {
    e.stopPropagation()
    lang.value.showLang = false;
    console.log(111)
    selectR.value.showSelect = !selectR.value.showSelect
}
//路由传参
const handleclick = (item: any) => {
    localStorage.setItem('ipoID', item.number)
    localStorage.setItem('itemData', JSON.stringify(item))
    router.push({
        name: 'Xdashboard',
        params: { data: JSON.stringify(item) }
    },
    )

}


onMounted(() => {
    document.documentElement.onclick = function () {

        // if (SearchCupDom.value.showLang) {
        //     SearchCupDom.value.showLang = false
        // }
        if (selectR.value.showSelect) {
            selectR.value.showSelect = false
        }
        if (lang.value.showLang) {
            lang.value.showLang = false
        }
    }
})
onUnmounted(() => {
    document.documentElement.onclick = null
})

const showMounth = (date: any) => {
    const arr = date.split(" ")
    if (arr.length == 3) {
        return arr[2]
    } else if (arr.length == 4) {
        return arr[2] + " " + arr[3]
    }
}

</script>
<style lang="scss" scoped>
// @import '../../styles';
// .el-calendar{
//     font-family: "Calibri"
// }
// @media screen and (max-width: 768px){
//     .left{
//         width: 100vw;

// * {
//     margin: 0;
//     padding: 0;
// }
//     }
//     .header{
//         height: 60rem;
//     }
//     .menuicon{
//         display: block;
//                 margin-left: 5rem;
//                 width: 25rem;
//                 height: 20rem;
//     }
// }
.login2 {
    background-image: url("@/assets/1x/beijingtu.png");
    background-repeat: no-repeat;
    background-size: cover;

}

.box {
    display: flex;
    justify-content: space-between;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.left {

    width: 70%;
    // @media screen and (max-width: 768px) {
    //     width: 100vw;

    //     * {
    //         margin: 0;
    //         padding: 0;
    //     }
    // }

    .header {
        display: flex;
        align-items: center;
        // padding-left: 35px;
        height: 80px;

        // @media screen and (max-width: 768px) {
        //     height: 60rem;
        //     //    background-color: red;
        // }

        .menuicon {
            display: none;

            // @media screen and (max-width: 768px) {
            //     display: block;
            //     margin-left: 5rem;
            //     width: 25rem;
            //     height: 20rem;
            // }
        }

        // .menu {
        //     @media screen and (max-width: 768px) {
        //         img {
        //             width: 25rem;
        //             height: 20rem;

        //         }

        //     }
        // }

        // .inline-input w-50 {
        //     width: 200px;
        //     height: 50px;

        //     @media screen and (max-width: 768px) {
        //         display: none;

        //         :deep(.imgSearch123) {
        //             width: 10rem;
        //             height: 10rem;
        //         }
        //     }


        // }

        .my-autocomplete li {
            line-height: normal;
            padding: 7px;
        }

        .my-autocomplete li .name {
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .my-autocomplete li .addr {
            font-size: 12px;
            color: #b4b4b4;
        }

        .my-autocomplete li .highlighted .addr {
            color: #ddd;
        }

        // .example-showcase .el-dropdown-link {
        //     cursor: pointer;
        //     color: var(--el-color-primary);
        //     display: flex;
        //     align-items: center;
        // }
        .dropdown {
            position: relative;

            .dropdown-menu {
                width: 80px;
                height: 700px;
                position: absolute;
                background-color: #ffffff;
                border: 1px solid black;
                z-index: 1;
                max-height: 200px;

            }

        }

        .dropdown1 {
            position: relative;


            // @media screen and (max-width: 768px) {
            //     display: none;
            // }

            .alert {
                position: absolute;
                top: 70px;
                left: -60px;
            }

            .searchCup {
                position: absolute;
                top: 70px;
                left: -50px;
            }
        }

        .first {
            width: 32px;
            height: 35px;
            margin-top: 25px;
            margin-left: 25px;

            &:hover {
                transform: scale(1.2);
            }

            // @media screen and (max-width: 768px) {
            //     width: 24rem;
            //     height: 28rem;
            //     margin-top: 6rem;
            //     margin-left: 10rem;
            // }
        }

        .second {
            width: 32px;
            height: 36px;
            margin-top: 25px;
            margin-left: 5px;
            margin-right: 10px;

            &:hover {
                transform: scale(1.2);
            }
        }
    }
}

.bigger {
    // margin-top: 40px;
    display: flex;
    flex-wrap: wrap;

    // margin-left: 120px;
    // width: 1250px;
    // background-color: pink;
    @media screen and (max-width: 768px) {
        width: 100vw;
        justify-content: center;
    }

}

.right {
    @media screen and (max-width: 768px) {
        display: none;
    }

    box-sizing: border-box;
    // width: 900px;
    // height: 100vh;
    height: 100%;
    padding-bottom: 80px;
    background-color: #1f4055;
    padding-left: 40px;
    padding-right: 40px;
    z-index: 1;
    // float: right;

    .right-top {
        display: flex;
        // margin-left: 40px;
        margin-top: 20px;

        .top-title {
            text-align: center;
            display: inline-block;
            font-size: 38px;
            color: #ffffff;
            margin-left: 10px;
        }
    }

    .right-bottom {
        width: 420px;
        background-color: #ffffff;
        height: 400px;
        margin-top: 40px;
        // margin-left: 20px;

        .month {
            font-size: 28px;
            color: #000000;
            font-weight: bold;
        }

    }

    .right-bottom1 {
        width: 420px;
        background-color: #ffffff;
        height: 500px;
        margin-top: 150px;
        // margin-left: 20px;
        // text-align: center;
        // line-height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;

        .right-bottom-title1 {

            color: #1f4055;
            font-size: 20px;
            align-items: center;
        }

        li {
            color: #000000
        }
    }

}
:deep(.el-calendar-table){
    width: 420px;
    transform: translateX(-20px);
    margin-top: 20px;
}
:deep(.el-button--small) {
    border: none
}

:deep(.el-calendar__body) {
    background-color: #e8ebee;
    height: 385px;
}

:deep(.el-calendar) {
    width: 420px;
    font-family: "Calibri"
}

:deep(.el-input) {
    width: 750px;

    @media screen and (max-width: 768px) {
        width: fit-content;
        height: fit-content;
        // background-color: red;
        margin-left: 10rem;
        padding: 0;

        // display: flex;
    }

}

// :deep(.header .el-input__wrapper) {
//     @media screen and (max-width: 768px) {
//         // margin-left: 13vw;
//         // height: 5vh;
//         // background-color: #000000;
//     }

// }

:deep(.el-calendar-table td) {
    border: none;
    text-align: center;
    font-weight: 800;
}
:deep(.el-calendar-table thead th ){
    padding:2px;
    font-weight: 550px;
}
:deep(.el-calendar .el-calendar-table .el-calendar-day) {
    padding: 0px;
    text-align: center;
    line-height: 33px;
    font: 13px 'Poppins-Regular';
    background-color: rgb(255, 255, 255);
    height: 33px;
    border: none;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    // font-family: "Calibri"
}

:deep(.el-calendar-table thead) {
    margin-top: 20px;
    font-size: 16px;
    font-weight: bold;
    background-color: rgb(255, 255, 255);
    border: none;
    font-family: "Calibri"
}

:deep(.el-calendar-table td.is-selected) {
    background-color: #e8ebee;
}

:deep(.el-calendar-table td.is-today .el-calendar-day) {
    color: black;
    background-color: #e36466;
}

:deep(.el-calendar-table td.is-selected .el-calendar-day) {
    // background-color: #e36466;
    border: 5px solid #e36466;
}

:deep(.el-calendar-table td.is-selected .el-calendar-day span) {
    color: black;
}



:deep(.is-selected) {
    color: red;
}
@media screen and (max-width: 768px){
    .left{
        width: 100vw;

* {
    margin: 0;
    padding: 0;
}
.header{
        height: 60px;
        .menuicon{
                display: block ;
                margin-left: 5px;
                width: 25px;
                height: 20px;
    }
    .menu{
        
                img {
                    width: 25px;
                    height: 20px;

                }

            
    }
    .dropdown1{
        display: none;
    }
    .first{
                width: 24px;
                height: 28px;
                margin-top: 6px;
                margin-left: 10px;
    }
    }
    
    }
    // :deep(.el-drawer__body){
    //     background-color: red;
    //     width: 80vw;
    // }
    // :deep(.el-overlay){
    //     background-color: green;
    // }
    
}
</style>
<style>
.header .el-input__wrapper {
    margin-top: 20px;
    margin-left: 20px;
    padding-left: 50px;
    width: 50vw;
    height: 50px;
    border-radius: 25px;
    font-size: 25px;
    border: none;
    outline: none;

}

.el-input__prefix-inner {
    transform: translateX(-35px);
}

@media screen and (max-width: 768px) {
    .header .el-input__wrapper {
        margin-top: 0;
        margin-left: 0;
        padding-left: 50px;
        width: 61vw;
        height: 30px;
        border-radius: 25px;
        font-size: 16px;
        border: none;
        outline: none;

    }


    .el-input__inner {
        margin: -35px;
        padding: 0;
    }

    .imgSearch123 {
        width: 15px;
        height: 15px;
        transform: translateX(-7px);
    }
}
</style>