FINI/fini-ui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

iopProject

Browse Source
This commit is contained in:
zhuzhuxia233
2023-04-12 14:40:19 +08:00
commit 54bc2204dc
133 changed files with 35706 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/login/index.vue
+882
View File
@@ -0,0 +1,882 @@
<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" />
<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";
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, companyEngShort, companyChiShort, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate } = item;
return {
logolinks: logoLink,
title: companyEngShort + ";" + companyChiShort,
status: status,
number: stkCode,
HKD: priceFinal ? priceFinal : priceMinMax(),
time: listingDate ? listingDate : pricingDate,
ipoID: ipoID,
price: priceFinal,
listingDate: listingDate
}
function priceMinMax() {
if (priceMin && priceMax) {
return `${priceMin}-${priceMax}`
} else if (priceMin) {
return `${priceMin}-`
} else if (priceMax) {
return ` -${priceMax}`
} 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, companyEngShort, companyChiShort, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate } = item;
return {
logolinks: logoLink,
title: companyEngShort + ";" + companyChiShort,
status: status,
number: stkCode,
HKD: priceFinal ? priceFinal : priceMinMax(),
time: listingDate ? listingDate : pricingDate,
ipoID: ipoID,
price: priceFinal,
listingDate: listingDate
}
function priceMinMax() {
if (priceMin && priceMax) {
return `${priceMin}-${priceMax}`
} else if (priceMin) {
return `${priceMin}-`
} else if (priceMax) {
return ` -${priceMax}`
} 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()
SearchCupDom.value.showLang = false;
lang.value.showLang = !lang.value.showLang
}
const handleShowCup = (e: any) => {
e.stopPropagation()
lang.value.showLang = false;
SearchCupDom.value.showLang = !SearchCupDom.value.showLang
}
//路由传参
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 (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"
// }
.login2{
background-image: url("@/assets/1x/beijingtu.png");
background-repeat: no-repeat;
background-size: cover;
}
.box {
display: flex;
justify-content: space-between;
// background-image: url("@/assets/1x/beijingtu.png");
background-repeat: no-repeat;
background-size: cover;
position: relative;
//height: 100%;
// font-family: "Calibri";
// width: 100%;
// background-color: gray;
}
.left {
width: 70%;
// height: 100vh;
// float: left;
// background-color: red;
@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;
}
}
.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-button--small) {
border: none
}
:deep(.el-calendar__body) {
background-color: #e8ebee;
}
: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;
}
: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-selected .el-calendar-day) {
background-color: #e36466;
}
:deep(.el-calendar-table td.is-selected .el-calendar-day span) {
color: black;
}
:deep(.el-calendar-table td.is-today .el-calendar-day) {
color: black;
background-color: #e36466;
}
:deep(.is-selected) {
color: red;
}
</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: 50rem;
width: 61vw;
height: 30rem;
border-radius: 25rem;
font-size: 16rem;
border: none;
outline: none;
}
.el-input__inner {
margin: -35rem;
padding: 0;
}
.imgSearch123 {
width: 15rem;
height: 15rem;
transform: translateX(-7rem);
}
}
</style>