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

修复bug

This commit is contained in:
zzy 2023-06-16 16:02:24 +08:00
parent 3da81b7b90
commit b3112e27f9
33 changed files with 2616 additions and 860 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -5,4 +5,3 @@
fini项目
test

6
index.html
View File

@ -13,6 +13,12 @@
<script type="module" src="/src/main.ts"></script>
</body>
<style>
html{
touch-action:none;
touch-action:pan-y;
}
</style>
</html>

100
package-lock.json generated
View File

@ -13,7 +13,7 @@
"@element-plus/icons-vue": "^2.1.0",
"amfe-flexible": "^2.2.1",
"axios": "^0.27.2",
"echarts": "^5.4.1",
"echarts": "^5.4.2",
"element-plus": "^2.3.0",
"js-cookie": "^3.0.1",
"moment": "^2.29.4",
@ -25,6 +25,7 @@
"pinia": "^2.0.33",
"postcss-px2rem": "^0.3.0",
"vue": "^3.2.36",
"vue-echarts": "^6.5.5",
"vue-i18n": "^9.2.2",
"vue-lazyload": "^3.0.0-rc.2",
"vue-router": "^4.0.15"
@ -4174,12 +4175,12 @@
}
},
"node_modules/echarts": {
"version": "5.4.1",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz",
"integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
"version": "5.4.2",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz",
"integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
"dependencies": {
"tslib": "2.3.0",
"zrender": "5.4.1"
"zrender": "5.4.3"
}
},
"node_modules/echarts/node_modules/tslib": {
@ -9213,6 +9214,11 @@
"node": ">=0.10.0"
}
},
"node_modules/resize-detector": {
"version": "0.3.0",
"resolved": "https://registry.npmmirror.com/resize-detector/-/resize-detector-0.3.0.tgz",
"integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
},
"node_modules/resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@ -10537,6 +10543,48 @@
"@vue/shared": "3.2.37"
}
},
"node_modules/vue-echarts": {
"version": "6.5.5",
"resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.5.5.tgz",
"integrity": "sha512-KJD1MSyoMQ33q8M4hM45OYeSC+t7LzesIXQOrkRSXv4xhOi0iN+6yEjQuIuqRB9zZGCT2J4bK3eQ+1ttdz4Uag==",
"hasInstallScript": true,
"dependencies": {
"resize-detector": "^0.3.0",
"vue-demi": "^0.13.2"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.5",
"echarts": "^5.4.1",
"vue": "^2.6.12 || ^3.1.1"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/vue-echarts/node_modules/vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
"vue-demi-switch": "bin/vue-demi-switch.js"
},
"engines": {
"node": ">=12"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^3.0.0-0 || ^2.6.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
}
},
"node_modules/vue-eslint-parser": {
"version": "8.3.0",
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@ -10877,9 +10925,9 @@
}
},
"node_modules/zrender": {
"version": "5.4.1",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz",
"integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
"version": "5.4.3",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz",
"integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
"dependencies": {
"tslib": "2.3.0"
}
@ -14471,12 +14519,12 @@
}
},
"echarts": {
"version": "5.4.1",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz",
"integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
"version": "5.4.2",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.2.tgz",
"integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
"requires": {
"tslib": "2.3.0",
"zrender": "5.4.1"
"zrender": "5.4.3"
},
"dependencies": {
"tslib": {
@ -18321,6 +18369,11 @@
"resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
"integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
},
"resize-detector": {
"version": "0.3.0",
"resolved": "https://registry.npmmirror.com/resize-detector/-/resize-detector-0.3.0.tgz",
"integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
},
"resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@ -19375,6 +19428,23 @@
"@vue/shared": "3.2.37"
}
},
"vue-echarts": {
"version": "6.5.5",
"resolved": "https://registry.npmmirror.com/vue-echarts/-/vue-echarts-6.5.5.tgz",
"integrity": "sha512-KJD1MSyoMQ33q8M4hM45OYeSC+t7LzesIXQOrkRSXv4xhOi0iN+6yEjQuIuqRB9zZGCT2J4bK3eQ+1ttdz4Uag==",
"requires": {
"resize-detector": "^0.3.0",
"vue-demi": "^0.13.2"
},
"dependencies": {
"vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"requires": {}
}
}
},
"vue-eslint-parser": {
"version": "8.3.0",
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
@ -19635,9 +19705,9 @@
"integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w=="
},
"zrender": {
"version": "5.4.1",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz",
"integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
"version": "5.4.3",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.3.tgz",
"integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
"requires": {
"tslib": "2.3.0"
},

3
package.json
View File

@ -15,7 +15,7 @@
"@element-plus/icons-vue": "^2.1.0",
"amfe-flexible": "^2.2.1",
"axios": "^0.27.2",
"echarts": "^5.4.1",
"echarts": "^5.4.2",
"element-plus": "^2.3.0",
"js-cookie": "^3.0.1",
"moment": "^2.29.4",
@ -27,6 +27,7 @@
"pinia": "^2.0.33",
"postcss-px2rem": "^0.3.0",
"vue": "^3.2.36",
"vue-echarts": "^6.5.5",
"vue-i18n": "^9.2.2",
"vue-lazyload": "^3.0.0-rc.2",
"vue-router": "^4.0.15"

116
src/App.vue
View File

@ -1,26 +1,43 @@
<template >
<el-config-provider :locale="store.localeLang">
<div class="login">
<router-view v-if="showRouter"/>
<el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
style="background-color: #1C3F56;" :with-header="false">
<Drawer :drawer="drawer" />
</el-drawer>
<!-- <router-view v-if="showRouter" /> -->
<router-view v-slot="{ Component }">
<keep-alive :exclude="route11">
<component :is="Component" />
</keep-alive>
</router-view>
</div>
</el-config-provider>
</template>
<script lang="ts" setup>
import { defineComponent, ref, onBeforeMount, onMounted, watch ,provide} from 'vue'
import { defineComponent, ref, onBeforeMount, onMounted, watch, provide } from 'vue'
import { ElConfigProvider } from 'element-plus'
import Drawer from "./views/login/modelComponents/Drawer.vue";
import { ipoStore } from "@/stores/ipo"
import router from './router'
import { getCurrentInstance} from 'vue'
import { getCurrentInstance } from 'vue'
const drawer = ref(false)
const drawer1 = ref(false)
const { proxy } = (getCurrentInstance() as any)
const showRouter=ref(true)
const reflashRouter=()=>{
showRouter.value=false;
setTimeout(()=>{
showRouter.value=true
},1)
const showRouter = ref(true)
const route11 = ref(["", "XIPO", "Xdashboard"])
const reflashRouter = () => {
showRouter.value = false;
setTimeout(() => {
showRouter.value = true
}, 1)
}
provide('reflashRouter',reflashRouter);
const handleOnDrwaer = (bool: boolean) => {
drawer.value = bool
}
provide('reflashRouter', reflashRouter);
provide('handleOnDrwaer', handleOnDrwaer);
function isMobileFn() {
return 768 >= document.documentElement.clientWidth;//判断当前浏览器窗口的宽度是否小于等于768像素，如果是返回true
}
@ -30,7 +47,7 @@ const store = ipoStore();
onBeforeMount(() => {
setFontSize()
})
onMounted(()=>{
onMounted(() => {
const langHref = window.location.href.split("home")[1]
if (langHref == '?lang=en') {
proxy.$i18n.locale = 'en'
@ -52,50 +69,65 @@ const setFontSize = () => {
var font = document.documentElement.clientWidth / 375;
document.documentElement.style.fontSize = font + "px";
}
const handleDrawer = (done: () => void) => {
done();
}
</script>
<style lang="scss" >
// @import url(./vars.scss);
// $bg-color: red;
@media (max-width: 767px) {
.login {
width: 100vw;
height: fit-content;
background-color: blue;
}
}
// @media (max-width: 767px) {
// .login {
// width: 100vw;
// height: fit-content;
// background-color: blue;
// }
// }
@media (min-width: 768px) {
.login {
width: 100vw;
height: 100vh;
// background-color: blue;
}
}
// @media (min-width: 768px) {
// .login {
// width: 100vw;
// height: 100vh;
// // background-color: blue;
// }
// }
@media (min-width: 992px) {
.login {
height: 100%;
width: 100%;
// background-color: pink;
}
}
// @media (min-width: 992px) {
// .login {
// height: 100%;
// width: 100%;
// // background-color: pink;
// }
// }
@media (min-width: 1200px) {
.login {
height: 1100px;
width: 100%;
// background-color: pink;
}
}
// @media (min-width: 1200px) {
// .login {
// height: 1100px;
// width: 100%;
// // background-color: pink;
// }
// }
.login {
background-image: url("@/assets/1x/beijingtu.png");
background-repeat: no-repeat;
background-size: cover;
// height: 100%;
width: 100%;
height: 100%;
width: 1900px;
height: 1300px;
//overflow: hidden;
// position: fixed;
// width: 100%;
// height: 2000px;
// background-size:100% 100%;
@media screen and (max-width: 768px) {
max-width: 100vw;
overflow: auto;
overflow-x: hidden;
height: 100%;
}
}
</style>

13
src/api/reqIpo/ipo.ts
View File

@ -11,7 +11,7 @@ enum Api {
EventData="/api/ipos/listingData",
TypeofList="/api/ipo/refdata/typeOfListing",
searchUrl="/api/ipo/refdata/search",
selectUrl="/api/ipo/refdata/filter",
selectUrl="/api/ipo/refdata/searchAndFilter",
findAllListingDate="/api/ipo/refdata/findAllListingDate"
}
//获取ipo详情页的数据
@ -35,9 +35,11 @@ export const getTypeofListing = (ipoID:string) => {
return request.get<any, null>(Api.TypeofList+`?ipoID=${ipoID}`);
};
//获取首页的搜索数据
export const getSearchListing = (keyword:string) => {
return request.get<any, null>(Api.searchUrl+`?keyword=${keyword}`);
};
export const getSearchListing = (keyWord:string) => {
// return request.post<any, null>(Api.selectUrl+`?keyWord=${keyWord}`);
return request.post<any, null>(Api.selectUrl,{keyWord});
}
export const getDate = () => {
return request.get<any, null>(Api.findAllListingDate);
};
@ -83,3 +85,6 @@ export const getSelectList = (body:selectObj) => {
// var obj=JSON.stringify({status})
return request.post<any, null>(Api.selectUrl,body);
};
// export const getSearchListing =(keyword:string)=>{
// return request.post<any, null>(Api.selectUrl,keyword);
// }

BIN
src/assets/1x/backgroud4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
src/assets/1x/background1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 224 KiB

BIN
src/assets/1x/background2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

BIN
src/assets/1x/background3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

5
src/locales/en.ts
View File

@ -39,7 +39,8 @@ export default {
ChineseYuan:'Chinese Yuan',
UnitedStatesDollar:'United States Dollar',
noevent:'No event',
Norelevantselectdata:'No relevant select data'
Norelevantselectdata:'No relevant select data',
nodata:'No Data',
},
dashboard:{
Home:'Home',
@ -56,7 +57,7 @@ export default {
ApplicationQuantity:'Application Quantity (Shares)',
InitialShares:'Initial Shares',
FinalShares:'Final Shares',
LastUpadated:'Last Upadated',
LastUpadated:'Last Updated',
InitialAllocation:'Initial Allocation',
Public:'Public',
Institutional:'Institutional',

3
src/locales/zh-cn.ts
View File

@ -36,7 +36,8 @@ export default {
ChineseYuan:'人民币',
UnitedStatesDollar:'美元',
noevent:'无事件',
Norelevantselectdata:'无相关选择数据'
Norelevantselectdata:'无相关选择数据',
nodata:'无数据',
},
dashboard:{
Home:'主页',

3
src/locales/zh-ct.ts
View File

@ -36,7 +36,8 @@ export default {
ChineseYuan:'人民幣',
UnitedStatesDollar:'美元',
noevent:'無事件',
Norelevantselectdata:'無相關選擇數據'
Norelevantselectdata:'無相關選擇數據',
nodata:'無數據',
},
dashboard:{
Home:'主頁',

10
src/router/routes.ts
View File

@ -64,16 +64,6 @@ export const staticRoutes: Array<RouteRecordRaw> = [
name: "XIPO",
component: () => import("@/views/IPO/index.vue")
},
{
path: "/searchdash",
name: "Xsearchdash",
component: () => import("@/views/searchdash/index.vue")
},
{
path: "/searchipo",
name: "Xsearchipo",
component: () => import("@/views/searchipo/index.vue")
},
{
path: "/IPOcalendar",
name: "Xsearchipo",

53
src/stores/ipo.ts
View File

@ -3,12 +3,23 @@ import { defineStore } from 'pinia'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import zhTw from 'element-plus/dist/locale/zh-tw.mjs'
import request from "@/utils/request";
enum Api {
selectUrl="/api/ipo/refdata/searchAndFilter",
}
export const ipoStore = defineStore({
id: 'app',
state: () => ({
//1代表英文 2代表繁体中文 3代表简体中文
locale:1,
homeDay:new Date(),
mobileActiveShow:1,
mainExpand:-1,
filterObj:{}, //把过滤条件放在这里
keyWord:"",
selectedArr:{},
ipoIds:[] as any
}),
getters: {
localeLang(state) {
@ -19,6 +30,44 @@ export const ipoStore = defineStore({
//更改语言的方法
setLocale(data: number) {
this.locale = data
},
setHomeDay(day:string|Date){
this.homeDay=day as Date;
},
setMobileActiveShow(num:number){
this.mobileActiveShow=num;
},
setMainExpand(num:number){
this.mainExpand=num;
},
setFilterObje(obj:any){
this.filterObj=obj;
},
// reqSearchList(keyworld:string){
// }
setSelectedArr(data:any){
this.selectedArr=data;
},
setKeyWord(keyWord:string){
this.keyWord=keyWord;
},
getSearchSelectList(){
const keyWord=this.keyWord;
const selectedArr=this.selectedArr;
return request.post<any, null>(Api.selectUrl,{keyWord,...selectedArr});
},
setIpoIds(ipoId:string|number){
const arr=this.$state.ipoIds;
const hasId= arr.some((i:any)=>i==ipoId);
const index=arr.findIndex((i:any)=>i==ipoId);
hasId&&arr.splice(index,1)
!hasId&&arr.push(ipoId)
},
isExpand(ipoId:string|number){
return this.$state.ipoIds.some((i:any)=>i==ipoId);
}
}
},
})

4
src/views/IPO/components/IpoContent.vue
View File

@ -60,9 +60,9 @@
</el-table>
</div>
<div class="Modeltable" v-if="item.table">
<el-table :data="item.table.lists" stripe style="width: 100%;">
<el-table :data="item.table.lists" stripe style="width: 100%; ">
<el-table-column v-for="(title, index) in item.table.title" :prop="title.content"
:label="title.header" :width="320 * (title.width / 100)" :align="title.align" :key="index" />
:label="title.header" :width="322 * (title.width / 100)" :align="title.align" :key="index" />
</el-table>
</div>

32
src/views/IPO/components/IpoHeader.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="headerWrap">
<el-drawer v-model="drawer" size="80%" direction="ltr" :show-close="false" :before-close="handleDrawer"
style="background-color: #1C3F56;" :with-header="false">
style="background-color: #1C3F56;" :with-header="false" title="">
<Drawer :drawer="drawer" @childfn="fn" />
</el-drawer>
<div class="hleft">
@ -11,7 +11,7 @@
</div>
<div class="right" >
<div class="search" @click="handlesearch">
<img src="@/assets/1x/1x/source2.png" alt="找不到图片">
<img src="@/assets/1x/source10.png" alt="找不到图片">
</div>
<div class="langWrap">
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
@ -61,6 +61,13 @@ onMounted(() => {
lang.value.showLang = false
}
})
//const data1 =ref()
// onMounted(() => {
// const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
// data1.value = obj
// console.log(data1.value);
// })
function fn(data: any) {
drawer.value = data
}
@ -78,6 +85,7 @@ onUnmounted(() => {
.right{
display: flex;
margin-left: 10px;
margin-top: 5px;
align-items: center;
@media screen and (max-width: 768px) {
margin-right: 8vw;
@ -94,15 +102,15 @@ onUnmounted(() => {
margin-left: 15px;
@media screen and (max-width: 768px) {
// display: none;
display: flex;
display: none;
// display: flex;
}
.second {
width: 25px;
height: 30px;
// margin-top: 4px;
margin-top: 4px;
&:hover {
transform: scale(1.2);
@ -165,18 +173,19 @@ onUnmounted(() => {
font-weight: bolder;
@media screen and (max-width: 768px) {
font-size: 20px;
font-size: 24px;
margin-left: 10px;
padding-top: 4px;
//transform: translateX(-60px);
// display: inline;
}
}
.search {
background-color: #fff;
width: 30px;
height: 30px;
border-radius: 50%;
//background-color: #fff;
// width: 30px;
// height: 30px;
// border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
@ -187,6 +196,9 @@ onUnmounted(() => {
img {
width: 25px;
height: 30px;
@media screen and (max-width: 768px) {
margin-top: -10px;
}
}
}

22
src/views/IPO/components/IpoNav.vue
View File

@ -1,6 +1,8 @@
<template>
<div class="item">
<a @click="scrollto(index)" v-for="(item, index) in list" :key="index">{{ item }}</a>
<a @click="scrollto(index)" v-for="(item, index) in list " :class="ipoNavActive == index ? 'active' : ''"
:key="index">{{
item }}</a>
</div>
</template>
@ -11,16 +13,21 @@ export default {
</script>
<script lang="ts" setup>
import { ref, defineProps ,computed} from "vue"
import { ref, defineProps, computed, defineExpose } from "vue"
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
const { proxy } = (getCurrentInstance() as any)
const props = defineProps<{ scroll: Function }>()
const ipoNavActive = ref(0)
const scrollto = (index: number) => {
const ref11 = "i" + index + "TOP"
console.log(ref11)
// console.log(ref11)
ipoNavActive.value = index
props.scroll(ref11)
}
defineExpose({
ipoNavActive
})
const list = computed(() => ([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.TypeofListing.TypeofListing'), proxy.$t('ipo.Offering.Offering'), proxy.$t('ipo.advisers.Adviser'), proxy.$t('ipo.Timetable.Timetable'), proxy.$t('ipo.Documents.Documents'), proxy.$t('ipo.TransactionCosts.TransactionCosts')]))
</script>
@ -31,7 +38,7 @@ const list = computed(() => ([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.
@media screen and (max-width: 768px) {
margin-top: 0px;
width: 100vw;
// width: 100vw;
overflow-x: scroll;
margin-left: 15px;
}
@ -48,9 +55,14 @@ const list = computed(() => ([proxy.$t('ipo.CompanyInformation'), proxy.$t('ipo.
white-space: nowrap;
&:hover {
// background-color: #1C3F56;
// color: #fff;
cursor: pointer;
}
&.active {
background-color: #1C3F56;
color: #fff;
cursor: pointer;
}
}
}

705
src/views/IPO/index.vue
View File

@ -7,18 +7,23 @@
</div>
<div class="rightbox">
<IpoHeader />
<IpoNav :scroll="scrollTo" />
<div class="content" ref="content">
<IpoContent ref="i0" :info="information" :title="$t('ipo.CompanyInformation')" />
<IpoContent ref="i1" :info="TypeOfListing" :title="$t('ipo.TypeofListing.TypeofListing')" />
<IpoContent ref="i2" :info="Offerings" :title="$t('ipo.Offering.Offering')" />
<IpoContent ref="i3" :info="Advisers" :title="$t('ipo.advisers.Adviser')" />
<IpoContent ref="i4" :info="Timetable" :title="$t('ipo.Timetable.Timetable')" />
<IpoContent ref="i5" :info="Documents" :title="$t('ipo.Documents.Documents')" />
<IpoContent ref="i6" :info="Transaction" :title="$t('ipo.TransactionCosts.TransactionCosts')" />
<IpoNav ref="ipoNav" :scroll="scrollTo" v-if="data != null" />
<div class="content" ref="content" @scroll="contentScroll" v-if="data != null">
<IpoContent ref="i0" :info="information11" :title="$t('ipo.CompanyInformation')" />
<IpoContent ref="i1" :info="TypeOfListing11" :title="$t('ipo.TypeofListing.TypeofListing')" />
<IpoContent ref="i2" :info="Offerings11" :title="$t('ipo.Offering.Offering')" />
<IpoContent ref="i3" :info="Advisers11" :title="$t('ipo.advisers.Adviser')" />
<IpoContent ref="i4" :info="Timetable11" :title="$t('ipo.Timetable.Timetable')" />
<IpoContent ref="i5" :info="Documents11" :title="$t('ipo.Documents.Documents')" />
<IpoContent ref="i6" :info="Transaction11" :title="$t('ipo.TransactionCosts.TransactionCosts')" />
</div>
<div v-else style="display: flex;align-items: center;width: 100vw;height: 90vh;justify-content: center;">
<div style="color:#1f4055 ;font-weight: bold;font-size: 25px;">{{ $t(i18n.global.t('home.nodata')) }}</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
@ -32,7 +37,7 @@ import Nav from '@/views/dashBoard/nav/index.vue'
import IpoHeader from "./components/IpoHeader.vue"
import IpoNav from "./components/IpoNav.vue"
import IpoContent from "./components/IpoContent.vue"
import { ref, onMounted, onUpdated } from "vue";
import { ref, onMounted, onUpdated, computed } from "vue";
import type { TabsPaneContext } from 'element-plus'
import { ipoStore } from "@/stores/ipo"
import { useRoute } from 'vue-router'
@ -41,7 +46,565 @@ import { getDataFromId } from "@/api/mock/home"
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import moment from 'moment';
const MockRes = ref<any>('')
const information11 = computed(() => {
const { companyEngFull, companyEngShort, companyChiFull, companyChiShort, stkCode, isin, hkAddress, placeOfCorp } = MockRes.value;
const placeOfincorporation = ref('')
var obj = {
1: proxy.$t('ipo.Bermuda'),
2: proxy.$t('ipo.CaymanIslands'),
3: proxy.$t('ipo.HongKongChina'),
4: proxy.$t('ipo.PeoplesRepublicofChina'),
5: proxy.$t('ipo.Australia'),
6: proxy.$t('ipo.BritishVirginIslands'),
7: proxy.$t('ipo.CanadaAlberta'),
8: proxy.$t('ipo.CanadaBritishColumbia'),
9: proxy.$t('ipo.CanadaOntario'),
10: proxy.$t('ipo.England'),
11: proxy.$t('ipo.Israel'),
12: proxy.$t('ipo.Italy'),
13: proxy.$t('ipo.Japan'),
14: proxy.$t('ipo.Jersey'),
15: proxy.$t('ipo.Luxembourg'),
16: proxy.$t('ipo.Singapore'),
17: proxy.$t('ipo.USDelaware'),
99: proxy.$t('ipo.Others'),
}
if (isValidKey(placeOfCorp, obj)) {
placeOfincorporation.value = obj[placeOfCorp]
}
function isValidKey(
key: string | number | symbol,
object: object
): key is keyof typeof object {
return key in object;
}
const arr = [has_data(companyEngFull), has_data(companyEngShort), has_data(companyChiFull), has_data(companyChiShort), has_data(stkCode), has_data(isin), placeOfincorporation, hkAddress];
arr[7].__proto__ = Array.prototype
let infos = arr[7].map((obj: any) => {
return obj.line
})
return [
{
name: proxy.$t('ipo.CompanyNameEnglishFull'),
info: arr[0]
},
{
name: proxy.$t('ipo.CompanyNameEnglishShort'),
info: arr[1]
},
{
name: proxy.$t('ipo.CompanyNameChineseFull'),
info: arr[2]
},
{
name: proxy.$t('ipo.CompanyNameChineseShort'),
info: arr[3]
},
{
name: proxy.$t('ipo.STockCode'),
info: arr[4]
},
{
name: proxy.$t('ipo.ISIN'),
info: arr[5]
},
{
name: proxy.$t('ipo.PlaceofIncorporation'),
info: arr[6]
},
{
name: proxy.$t('ipo.PrincipalPlaceofBussineseeinHongKong'),
infos: infos
}
]
})
const TypeOfListing11 = computed(() => {
let { offerType, listSecurities, nomValue, nomCur, listPlatform, } = MockRes.value;
var obj3 = {
1: "HKD",
2: "CNY",
3: "USD",
4: "AED",
5: "ATS",
6: "AUD",
7: "BDT",
8: "BEC",
9: "BEL",
10: "BHD",
11: "BND",
12: "BRC",
13: "BRL",
14: "BUK",
15: "CAD",
16: "CHF",
17: "CYP",
18: "DEM",
19: "DKK",
20: "ECU",
21: "ESP",
22: "EUR",
23: "FIM",
24: "FJD",
25: "FRF",
26: "GBP",
27: "GGP",
28: "IDR",
29: "IEP",
30: "IMP",
31: "INR",
32: "ITL",
33: "JPY",
34: "KES",
35: "KRW",
36: "KWD",
37: "LBP",
38: "LKR",
39: "MOP",
40: "MUR",
41: "MYR",
42: "NGN",
43: "NIS",
44: "NLG",
45: "NOK",
46: "NZD",
47: "OMR",
48: "PHP",
49: "PKR",
50: "PTE",
51: "QAR",
52: "RUB",
53: "SAR",
54: "SCR",
99: "Others"
}
var obj2 = {
1: proxy.$t('home.Mainboard'),
2: proxy.$t('home.GEM')
}
var obj1 = {
1: proxy.$t('ipo.TypeofListing.Ordinaryshares'),
2: proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
3: proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'),
4: proxy.$t('ipo.TypeofListing.Preferenceshares'),
5: proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
6: proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
7: proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
8: proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
99: proxy.$t('ipo.TypeofListing.Other'),
}
var obj = {
1: proxy.$t('ipo.TypeofListing.Globalofferplacingandpublicoffer'),
2: proxy.$t('ipo.TypeofListing.Byplacingonly'),
3: proxy.$t('ipo.TypeofListing.Bypublicofferonly'),
4: proxy.$t('ipo.TypeofListing.Byintroduction'),
5: proxy.$t('ipo.TypeofListing.TransferfromGEM'),
}
if (isValidKey(offerType, obj)) {
offerType = obj[offerType]
}
if (isValidKey(listSecurities, obj1)) {
listSecurities = obj1[listSecurities]
}
if (isValidKey(listPlatform, obj2)) {
listPlatform = obj2[listPlatform]
}
if (isValidKey(nomCur, obj3)) {
nomCur = obj3[nomCur]
}
function isValidKey(
key: string | number | symbol,
object: object
): key is keyof typeof object {
return key in object;
}
const arr = [
{ info: offerType },
{ info: listSecurities },
{ info: has_data(nomValue), info2: nomCur as any },
{ info: listPlatform },
{ info: has_data(listSecurities) },]
return [
{
name: proxy.$t('ipo.TypeofListing.OfferingType'),
info: arr[0].info
},
{
name: proxy.$t('ipo.TypeofListing.SecuritiestobeListed'),
info: arr[1].info
},
{
name: proxy.$t('ipo.TypeofListing.NominalValueperShare'),
info: arr[2].info,
name2: proxy.$t('ipo.TypeofListing.NominalCurrency'),
info2: arr[2].info2
},
{
name: proxy.$t('ipo.TypeofListing.ListingPlatform'),
info: arr[3].info
},
{
name: proxy.$t('ipo.TypeofListing.ListingType'),
info: arr[4].info
},]
})
const Offerings11 = computed(() => {
const { tradeCurrency, downwardPriceFlex, priceMin, priceMax, priceFinal, boardLot, poReallocationCap, ioOfferSharesFinal, ipoShares, overallPoShares, overallIoShares, poSharesFinal, clawback, overallotOption, denomTable, upsizeOption } = MockRes.value;
var dataObj = [
{ info: has_data(tradeCurrency) },
{ info: keepTwoDecimalStr(downwardPriceFlex) },
{ info: has_data(priceMin?.toFixed(3)) + "-" + has_data(priceMax?.toFixed(3)), info2: has_data(priceFinal?.toFixed(3)) },
{ info: has_data(boardLot) },
{ info: keepTwoDecimalStr(poReallocationCap) },
{ info: "-", info2s: [has_data(ipoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))], table: clawback },
{ info: has_data(overallPoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), info2: has_data(overallIoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), },
{ info: has_data(upsizeOption?.toFixed(2), "%") },
{ table: denomTable }
]
const arr = Offerings.value.map((item, index) => {
const name = item.name;
const info = dataObj[index].info;
var filterObj = { name, info } as any;
if (dataObj[index].info2 || dataObj[index].info2s) {
filterObj.info2 = dataObj[index].info2
filterObj.name2 = item.name2;
}
if (dataObj[index]?.info2s) {
filterObj.info2s = dataObj[index].info2s
}
if (dataObj[index].table) {
filterObj.table = { title: item.table?.title, lists: [] }
filterObj.table.lists = dataObj[index].table.map((element: any) => {
if (index == 8) {
//加逗号的函数
function formatNumber(num: number | string) {
return num.toString().replace(/\d+/, function (n: string) {
return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
})
}
const { shares: number, value: persent } = element;
// console.log('ttttttttttttttttttt',persent);
let per = Number(persent)
return { number: formatNumber(number), persent: per && formatNumber(per.toFixed(2)) }
} else {
const { threshold: number, allocation: persent } = element;
return { number, persent: keepTwoDecimalStr(persent) }
}
})
}
return filterObj
})
return [
{
name: proxy.$t('ipo.Offering.TradingCurrency'),
info: arr[0].info
},
{
name: proxy.$t('ipo.Offering.DownwardPriceFlexibility'),
info: arr[1].info
},
{
name: proxy.$t('ipo.Offering.OfferPriceRange'),
info: arr[2].info,
name2: proxy.$t('home.finalofferprice'),
info2: arr[2].info2
},
{
name: proxy.$t('ipo.Offering.TradingBoardLot'),
info: arr[3].info
},
{
name: proxy.$t('ipo.Offering.PublicOfferReallocationCap'),
info: arr[4].info
},
{
// name: proxy.$t('ipo.Offering.NumberofSharesHeldbyExistingShareholders'),
// info: "100,000", 暂时不暂时的字段----
name: "",
info: "",
name2: proxy.$t('ipo.Offering.NumberofOfferShares'),
info2: arr[5].info,
info2s: arr[5].info2s,
table: {
title: [{ header: proxy.$t('ipo.Offering.InititalandClawbackThrehold'), content: "number", width: isMobel() ? 33 : 50, align: "right" },
{ header: proxy.$t('ipo.Offering.PublicOfferAllocation'), content: "persent", width: isMobel() ? 38 : 50, align: "right" }],
lists: arr[5].table.lists,
}
},
{
name: proxy.$t('ipo.Offering.NumberofPublicOfferShares'),
info: arr[6].info,
name2: proxy.$t('ipo.Offering.NumberofInsitutionalOfferShares'),
info2: arr[6].info2,
},
{
name: proxy.$t('ipo.Offering.OfferSizeAdjustmentOption'),
info: arr[7].info,
},
// {暂时不暂时的字段--------
// name: proxy.$t('ipo.Offering.OverallotmentOptionInclusiveofOfferSizeAdjustmentOption'),
// info: "inclusive"
// },
// {暂时不暂时的字段-------------
// name: proxy.$t('ipo.Offering.OverallotmentOption'),
// info: "5.00%"
// },
{
name: proxy.$t('ipo.Offering.DenominationTable'),
table: {
title: [{ header: proxy.$t('ipo.Offering.ApplicationQuantity'), content: "number", width: isMobel() ? 35 : 50, align: "right" },
{ header: proxy.$t('ipo.Offering.MaximumPayableonApplication'), content: "persent", width: 50, align: "right" }],
lists: arr[8].table.lists,
}
}
]
})
const Advisers11 = computed(() => {
let { designatedSponsor, sponsors, legalSponsor, legalIssuer, underwriters, advisers, overallCoordinators, distributors, hkSharereg } = MockRes.value;
const arr = [
{ info: has_data(designatedSponsor) },
{ infos: filter(sponsors) },
{ infos: filter(legalSponsor) },
{ info: has_data(legalIssuer) },
{ infos: filter(underwriters) },
{ infos: filter(advisers) },
{ infos: filter(overallCoordinators) },
{ infos: filter(distributors) },
{ info: has_data(hkSharereg) }
]
function filter(arr: any) {
if (arr) {
return arr.map((item: any) => item.member)
} else {
return "-";
}
}
const arrData = Advisers.value.map((item: any, index: number) => {
if (arr[index].info) {
return { ...item, info: arr[index].info }
} else {
if (arr[index].infos?.length - 1 > 0) {
let info2Top = -(arr[index].infos?.length * 22) + "px";
return { ...item, infos: arr[index].infos, info2Top }
} else {
return { ...item, infos: arr[index].infos }
}
}
})
// console.log('arrData', arrData)
return [
{
name: proxy.$t('ipo.advisers.DesignatedSponsor'),
info: arrData[0].info
// info2: "IBD-TEAM01"
},
{
name: proxy.$t('ipo.advisers.Sponsor'),
info: arrData[1].info,
infos: arrData[1].infos,
},
{
name: proxy.$t('ipo.advisers.HKLegalAdviserforSponsor'),
infos: arrData[2].infos,
info2Top: arrData[2].info2Top
},
{
name: proxy.$t('ipo.advisers.HKLegalAdviser'),
info: arrData[3].info
// info2: "LEG_TEAM05"
},
{
name: proxy.$t('ipo.advisers.Underwriter'),
info: arrData[4].info,
infos: arrData[4].infos,
},
{
name: proxy.$t('ipo.advisers.Adviser'),
info: arrData[5].info,
infos: arrData[5].infos
},
{
name: proxy.$t('ipo.advisers.OverallCoordinator'),
infos: arrData[6].infos,
// info2: "PLA_SYN_TEAM03",
info2Top: arrData[6].info2Top,
},
{
name: proxy.$t('ipo.advisers.Distributor'),
infos: arrData[7].infos,
info2Top: arrData[7].info2Top,
// info2: "PLA_SYN_TEAM04"
},
{
name: proxy.$t('ipo.advisers.HKShareRegistrar'),
info: arrData[8].info,
},
]
})
const Timetable11 = computed(() => {
const { listingDate, bookOpenDate, bookCloseDate, pricingDate, allotmentDate, siInputDate, placingSharesDeliveryDate } = MockRes.value;
const arr = [
{
info: timeTo(listingDate)[0], info2: timeTo(listingDate)[1],
table: {
lists: [{
number: timeTo(bookOpenDate)[0],
persent: timeTo(bookOpenDate)[1]
}, {
number: timeTo(bookCloseDate)[0],
persent: timeTo(bookCloseDate)[1]
}, {
number: timeTo(pricingDate)[0],
persent: timeTo(pricingDate)[1]
}, {
number: timeTo(allotmentDate)[0],
persent: timeTo(allotmentDate)[1]
}, {
number: timeTo(siInputDate)[0],
persent: timeTo(siInputDate)[1]
}, {
number: timeTo(placingSharesDeliveryDate)[0],
persent: timeTo(placingSharesDeliveryDate)[1]
}]
}
}
]
const arrData = Timetable.value.map(item => {
const isMobel = 768 >= document.documentElement.clientWidth;
item.table.lists = item.table.lists.map((item, index) => {
const { number, persent } = arr[0].table.lists[index]
return { ...item, number, persent }
})
if (isMobel) {
item.table.title = item.table.title.filter((element: any) => element.header)
item.table.title = item.table.title.map((element: any, index: number) => {
if (index == 0) {
element.width = 55;
}
return element
})
}
return { ...item, info: arr[0].info, info2: arr[0].info2 }
})
function timeTo(time: string | null | undefined) {
if (time) {
return [moment(time).format("YYYY-MM-DD"), toEmpty(moment(time).format("HH:mm"))]
} else {
return ["-", "-"]
}
function toEmpty(time: string) {
//如果时间戳转换出来是00:00 就返回空
if (time == "00:00") {
return ""
} else {
return time
}
}
}
const lists = arrData[0].table.lists;
return [
{
name: proxy.$t('ipo.Timetable.CommencementofTradingDate'),
info: arrData[0].info,
name2: proxy.$t('ipo.Timetable.Time'),
info2: arrData[0].info2,
table: {
title: [
{ header: " ", content: "des", width: isMobel() ? 50 : 43, align: "left" },
{ width: isMobel() ? 1 : 12 }, //通过加一段空结构来调整表头的位置
{ header: proxy.$t('ipo.Timetable.Date'), content: "number", width: isMobel() ? 30 : 20, align: "left" },
{ header: proxy.$t('ipo.Timetable.Time'), content: "persent", width: isMobel() ? 22 : 20, align: "left" }],
lists: [
{
des: proxy.$t('ipo.Timetable.DealPublicOfferStartDate'),
number: lists[0].number,
persent: lists[0].persent
},
{
des: proxy.$t('ipo.Timetable.PublicOfferEndDate'),
number: lists[1].number,
persent: lists[1].persent,
},
{
des: proxy.$t('ipo.Timetable.ExpectedPriceDeterminationDate'),
number: lists[2].number,
persent: lists[2].persent,
},
{
des: proxy.$t('ipo.Timetable.AllotmentAnnouncementSharePostingCertificateDispatchDate'),
number: lists[3].number,
persent: lists[3].persent,
},
{
des: proxy.$t('ipo.Timetable.SettlementInstructionsInputDate'),
number: lists[4].number,
persent: lists[4].persent,
},
{
des: proxy.$t('ipo.Timetable.PredepositPlacingSharesDeliveryDate'),
number: lists[5].number,
persent: lists[5].persent,
}
]
}
}
]
})
const Documents11 = computed(() => {
return [
{
name: proxy.$t('ipo.Documents.ListingDocumentEnglish'),
info: Documents.value[0].info,
name2: proxy.$t('ipo.Documents.ListingDocumentChinese'),
info2: Documents.value[0].info2,
href: Documents.value[0].href,
href2: Documents.value[0].href2
},
]
})
const Transaction11 = computed(() => {
const { brokerage, sfcLevy, sehkTradingFee, afrcTransactionLevy } = MockRes.value;
//console.log('@@11123', afrcTransactionLevy)
const arr = [
{ info: has_data(brokerage?.toFixed(5), "%"), info2: has_data(sfcLevy?.toFixed(5), "%") },
{ info: has_data(sehkTradingFee?.toFixed(5), "%"), info2: has_data(afrcTransactionLevy?.toFixed(5), "%") },
]
const arrData = Transaction.value.map((item, index) => {
// if(arr[index].info == undefined){return ('-' as any)}
// if(arr[index].info2 == null){return '-'}
if (arr[index].info2) {
return { ...item, info: arr[index].info, info2: arr[index].info2 }
} else {
return { ...item, info: arr[index].info }
}
})
return [
{
name: proxy.$t('ipo.TransactionCosts.Brokerage'),
info: arrData[0].info,
name2: proxy.$t('ipo.TransactionCosts.SFCTransactionLevy'),
info2: arrData[0].info2
},
{
name: proxy.$t('ipo.TransactionCosts.SrockExchangeTradingFee'),
info: arrData[1].info,
name2: proxy.$t('ipo.TransactionCosts.AFRCTransactionLevy'),
info2: arrData[1].info2
},
]
})
const store = ipoStore();
const { proxy } = (getCurrentInstance() as any)
const activeName = ref('first')
@ -52,6 +615,8 @@ const i3 = ref()
const i4 = ref()
const i5 = ref()
const i6 = ref()
const ipoNav = ref()
const isClickScroll = ref(false)
const route = useRoute()
const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab, event)
@ -312,6 +877,7 @@ const Timetable = ref([
persent: '',
}
]
}
}
@ -342,36 +908,53 @@ const Transaction = ref([
])
const content = ref()
onMounted(
() => {
data.value = JSON.parse(localStorage.getItem('itemData') as string)
store.setMobileActiveShow(3);//设置移动端弹窗高亮
// data.value = JSON.parse(localStorage.getItem('itemData') as string)
const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
data.value = obj
console.log(data.value);
getreferencedata()
setDownLoad()
// text();
}
)
// async function text() {
// const res = await getDataFromId(1);
// setInformation((res as any)[0])
// setTypeofListing((res as any)[0])
// setOfferings((res as any)[0])
// setAdvisers((res as any)[0])
// setTransaction((res as any)[0])
// setTimeTable((res as any)[0])
// }
async function text() {
const res = await getDataFromId(1);
MockRes.value = (res as any)[0]
// setInformation((res as any)[0])
// setTypeofListing((res as any)[0])
// setOfferings((res as any)[0])
setAdvisers((res as any)[0])
setTransaction((res as any)[0])
setTimeTable((res as any)[0])
}
const getreferencedata = async () => {
const ipoID = localStorage.getItem('ipoID')
//const ipoID = localStorage.getItem('ipoID')
const ipoID = sessionStorage.getItem('ipoID')
const res = await getIpo(ipoID as string)
setInformation((res as any).data[0])
setTypeofListing((res as any).data[0])
setOfferings((res as any).data[0])
setAdvisers((res as any).data[0])
setTransaction((res as any).data[0])
setTimeTable((res as any).data[0])
MockRes.value = (res as any).data[0]
// setInformation((res as any).data[0])
// setTypeofListing((res as any).data[0])
// setOfferings((res as any).data[0])
// setAdvisers((res as any).data[0])
// setTransaction((res as any).data[0])
// setTimeTable((res as any).data[0])
}
function isMobel() {
return 768 >= document.documentElement.clientWidth;
}
// const setInformation1 = computed((mockRes: any)=>{
// console.log(mockRes);
// })
function setInformation(mockRes: any) {
const { companyEngFull, companyEngShort, companyChiFull, companyChiShort, stkCode, isin, hkAddress, placeOfCorp } = mockRes;
const placeOfincorporation = ref('')
var obj = {
@ -416,6 +999,8 @@ function setInformation(mockRes: any) {
return { ...item, infos }
}
})
//console.log(information.value);
}
function setOfferings(mockRes: any) {
const { tradeCurrency, downwardPriceFlex, priceMin, priceMax, priceFinal, boardLot, poReallocationCap, ioOfferSharesFinal, ipoShares, overallPoShares, overallIoShares, poSharesFinal, clawback, overallotOption, denomTable, upsizeOption } = mockRes;
@ -453,8 +1038,8 @@ function setOfferings(mockRes: any) {
}
const { shares: number, value: persent } = element;
// console.log('ttttttttttttttttttt',persent);
let per=Number(persent)
return { number:formatNumber(number) , persent:per&&formatNumber(per.toFixed(2)) }
let per = Number(persent)
return { number: formatNumber(number), persent: per && formatNumber(per.toFixed(2)) }
} else {
const { threshold: number, allocation: persent } = element;
@ -733,6 +1318,7 @@ function has_data(str: string | null | undefined, str2: string = "") {
}
//滑动到指定列表
function scrollTo(stron: string) {
isClickScroll.value = true;
var obj = {
i0TOP: i0.value.$el.offsetTop,
i1TOP: i1.value.$el.offsetTop,
@ -746,6 +1332,10 @@ function scrollTo(stron: string) {
// 滑动
content.value.scrollTop = obj[stron] - obj.i0TOP;
}
setTimeout(() => {
isClickScroll.value = false;
})
// 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
function isValidKey(
key: string | number | symbol,
@ -754,9 +1344,38 @@ function scrollTo(stron: string) {
return key in object;
}
}
function contentScroll(e: any) {
if (isClickScroll.value) return
var obj = {
i0TOP: i0.value.$el.offsetTop + 50,
i1TOP: i1.value.$el.offsetTop,
i2TOP: i2.value.$el.offsetTop,
i3TOP: i3.value.$el.offsetTop,
i4TOP: i4.value.$el.offsetTop,
i5TOP: i5.value.$el.offsetTop,
i6TOP: i6.value.$el.offsetTop
}
if (obj.i6TOP - obj.i0TOP < content.value.scrollTop) {
ipoNav.value.ipoNavActive = 6
} else if (obj.i5TOP - obj.i0TOP < content.value.scrollTop) {
ipoNav.value.ipoNavActive = 5
} else if (obj.i4TOP - obj.i0TOP < content.value.scrollTop) {
ipoNav.value.ipoNavActive = 4
} else if (obj.i3TOP - obj.i0TOP < content.value.scrollTop) {
ipoNav.value.ipoNavActive = 3
} else if (obj.i2TOP - obj.i0TOP < content.value.scrollTop) {
ipoNav.value.ipoNavActive = 2
} else if (obj.i1TOP - obj.i0TOP < content.value.scrollTop) {
ipoNav.value.ipoNavActive = 1
} else {
ipoNav.value.ipoNavActive = 0
}
}
async function setDownLoad() {
const ipoID = localStorage.getItem('ipoID');
//const ipoID = localStorage.getItem('ipoID');
const ipoID = sessionStorage.getItem('ipoID');
const res = await getIpo(ipoID as string)
const enHref = `${(res as any).data[0].pdfLink.eLink}`;
const chinaHref = `${(res as any).data[0].pdfLink.cLink}`;
@ -779,13 +1398,31 @@ async function setDownLoad() {
</script>
<style lang="scss" scoped>
.login2 {
// background-image: url("@/assets/1x/beijingtu.png");
// background-repeat: no-repeat;
// background-size: cover;
// height: 100vh;
// font-family: "Calibri";
// width: 1900px;
//width: 1900px;
// font-family: "Calibri";
// @media screen and (max-width: 768px) {
// position: fixed;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// }
@media screen and (max-width: 768px) {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("@/assets/1x/beijingtu.png");
background-repeat: no-repeat;
background-size: cover;
width: 1700px;
// font-family: "Calibri";
@media screen and (max-width: 768px){
width: auto;
}
}

137
src/views/IpoCalendar/index.vue
View File

@ -1,4 +1,5 @@
<template>
<div class="right">
<div class="right-top">
<img src="@/assets/1x/source13.png" class="icon1" @click="backRouter" />
@ -11,23 +12,28 @@
<template #header="{ date }">
<el-button size="small" @click="selectDate('prev-month')">
<img src="@/assets/1x/source11.png">
<img src="@/assets/1x/source14.png">
</el-button>
<!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
<span class="month">{{ showMounth(date) }}</span>
<span class="month">{{ date }}</span>
<el-button size="small" @click="selectDate('next-month')">
<img src="@/assets/1x/source12.png">
<img src="@/assets/1x/source15.png">
</el-button>
</template>
<template #dateCell="{data}">
<template #dateCell="{ data }">
<p style="margin:0px" >
{{ data.day.split('-').slice(2).join() }}
<p style="margin:0px">
{{ data.day.split('-').slice(2).join() * 1 }}
<div v-for="(i, index) in dayTime" :key="index">
<div v-if="data.day==i" class="yuan"></div>
<div v-if="i.split('-').slice(2).join() * 1<=9">
<div v-if="data.day == i" class="yuan1"></div>
</div>
<div v-else>
<div v-if="data.day == i" class="yuan"></div>
</div>
</div>
</p>
</template>
@ -35,10 +41,11 @@
</div>
<div class="right-bottom1">
<Event v-if="Eventdata.length" :data="Eventdata" />
<div v-else class="right-bottom-title1">No event</div>
<div v-else class="right-bottom-title1">{{ $t(i18n.global.t('home.noevent')) }}</div>
</div>
</div>
</div>
</template>
<script lang="ts">
@ -53,12 +60,15 @@ import moment from "moment"
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import Event from '@/views/login/components/Event.vue';
import { getEventData, getSearchListing,getDate } from "@/api/reqIpo/ipo";
import { getEventData, getSearchListing, getDate } from "@/api/reqIpo/ipo";
import { getDataFromId } from "@/api/mock/home"
const { proxy } = (getCurrentInstance() as any)
const dayValue = ref(new Date())
const calendar = ref()
const Eventdata = ref([])
const emit = defineEmits(['close'])
//const Eventdata = ref([])
const selectDate = (val: string) => {
calendar.value.selectDate(val)
}
@ -68,7 +78,7 @@ watch(dayValue, async (ne, ol) => {
setEventdata((result as any).data)
})
const dayTime = ref()
const getcalendar = async ()=>{
const getcalendar = async () => {
const res = await getDate()
dayTime.value = (res as any).data
console.log(dayTime.value);
@ -87,6 +97,72 @@ onMounted(async () => {
setEventdata((result as any).data)
getcalendar()
})
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: "力高健康生活有限公司111111111111111111111111111",
// number: 2380
// }, {
// listPlatform1:"主板",
// logo:"-",
// name: "力高健康生活有限公司1111111111111111111111111111",
// number: 2381
// }
])
const setEventdata = (EventD: any) => {
Eventdata.value = EventD.map((item: any) => {
const { stkCode, listPlatform, companyEngFull, companyChiFull } = item;
@ -101,12 +177,20 @@ const setEventdata = (EventD: any) => {
}
const backRouter = () => {
proxy.$router.go(-1)
//const drawer2 = false
//emit('close',false)
}
</script>
<style lang="scss" scoped>
@media screen and (max-width: 768px) {
.yuan{
.login{
width: 100vw;
height: fit-content;
}
.yuan {
width: 12px;
height: 12px;
background-color: #f7be39;
@ -115,30 +199,44 @@ const backRouter = () => {
//top: 36px;
transform: translateY(11px);
//transform: translateX(3px);
margin-left: 3px;
margin-left: 2px;
border-radius: 10px;
}
.yuan1{
width: 12px;
height: 12px;
background-color: #f7be39;
position: absolute;
//right: 20px;
//top: 36px;
transform: translateY(11px);
//transform: translateX(3px);
margin-left: -2px;
border-radius: 10px;
}
.right {
width: 100vw;
box-sizing: border-box;
height: 100%;
// height: 100%;
padding-bottom: 80px;
background-color: #1f4055;
z-index: 1;
border: #1f4055 1px solid;
height: 100%;
.right-top {
display: flex;
align-items: center;
// margin-left: 40px;
margin-top: 20px;
transform: translateX(-10px);
height: 25px;
.top-title {
text-align: center;
display: inline-block;
font-size: 25px;
color: #ffffff;
margin-left: 10px;
padding-top: 6px;
}
.icon1 {
@ -182,9 +280,9 @@ const backRouter = () => {
display: flex;
justify-content: center;
align-items: center;
// overflow-y: scroll;
.right-bottom-title1 {
// background-color: red;
color: #1f4055;
font-size: 20px;
align-items: center;
@ -295,6 +393,7 @@ const backRouter = () => {
:deep(.el-calendar-table td.is-selected .el-calendar-day span) {
color: black;
}
:deep(.is-selected) {
color: red;
}

47
src/views/dashBoard/Header/index.vue
View File

@ -7,7 +7,7 @@
</div>
<div class="left-right">
<div class="search" @click="handlesearch">
<img src="@/assets/1x/1x/source2.png" alt="找不到图片">
<img src="@/assets/1x/source10.png" alt="找不到图片">
</div>
<div class="langWrap">
@ -18,7 +18,7 @@
</div>
<div class="right">
<div class="right" v-if="data1!=null">
<li class="time">{{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ props.time }}</li>
<!-- <li class="show">
<span>Show Value</span>
@ -50,11 +50,15 @@ const handleShowLang = (e: any) => {
e.stopPropagation()
lang.value.showLang = !lang.value.showLang
}
const data1 = ref()
onMounted(() => {
document.documentElement.onclick = function () {
if (!lang.value.showLang) return
lang.value.showLang = false
}
const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
// obj.logolinks="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png";
data1.value = obj
})
onUnmounted(() => {
document.documentElement.onclick = null
@ -90,6 +94,13 @@ const drawShow = () => {
//background-color: black;
position: relative;
margin-left: 15px;
@media screen and (max-width: 768px) {
display: none;
// position: fixed;
// top:50px;
// left: 0;
// right: 0;
}
.second {
width: 25px;
@ -130,7 +141,7 @@ const drawShow = () => {
transform: translateY(-20px);
height: 50px;
width: 1000px;
// background-color: red;
//background-color: red;
li{
margin: 0;
padding: 0;
@ -139,7 +150,7 @@ const drawShow = () => {
@media screen and (max-width: 768px) {
flex-direction: column;
position: relative;
.left-1 {
display: flex;
// justify-content: space-between;
@ -148,6 +159,7 @@ const drawShow = () => {
// background-color: red;
span{
margin-left: 10px;
padding-top: 4px;
}
height: 30px;
align-items: center;
@ -179,6 +191,8 @@ const drawShow = () => {
display: block;
// margin-top: 3px;
vertical-align: middle;
width: 25px;
height: 20px;
}
}
@ -190,14 +204,14 @@ const drawShow = () => {
min-width: 200px;
// background-color: red;
@media screen and (max-width: 768px) {
font-size: 20px;
font-size: 24px;
// margin-top: 4px;
}
}
.search {
background-color: #fff;
//background-color: #fff;
width: 30px;
height: 30px;
border-radius: 50%;
@ -211,6 +225,9 @@ const drawShow = () => {
img {
width: 25px;
height: 30px;
@media screen and (max-width: 768px) {
margin-top: -8px;
}
}
}
@ -221,22 +238,26 @@ const drawShow = () => {
min-width: 50px;
//background-color: green;
margin-top: 7px;
//background-color: #2B4A60;
// background-color: #2B4A60;
@media screen and (max-width: 768px) {
// width: 100vw;
width: 90vw;
//color: red;
margin-top: 10px;
transform: translateX(-10px);
width: 250px;
margin-left: 100px;
margin-top: 2vh;
// transform: translateX(-10px);
// width: 250px;
margin-left: 5vw;
// background-color: black;
display: flex;
justify-content: end;
}
.time {
color: #435F70;
@media screen and (max-width: 768px) {
float: right;
// float: right;
font-size: 15px;
//background-color: red;
}
}

164
src/views/dashBoard/Main.vue
View File

@ -6,14 +6,14 @@
<div class="top">
<h4>{{ store.$state.locale == 1 ? props.data.title.split(";")[0] : props.data.title.split(";")[1] }}
</h4>
<el-icon class="icon1" @click="cardDetail">
<el-icon class="icon1" @click="cardDetail" style="margin-top: 4px;">
<ArrowUp v-if="expand" />
<ArrowDown v-else />
</el-icon>
</div>
<h4>{{ props.data.number }}</h4>
<div v-if="expand" class="details">
<h5 v-for="(item, index) in detailsItem" :key="index">
<h5 v-for="(item, index) in detailsItem33" :key="index">
<span>{{ item.name }}</span>
<el-icon class="icon1" v-if="item.icon">
<Check v-if="item.icon == 1" />
@ -22,7 +22,7 @@
</h5>
</div>
<h5 v-else :style="{color:props.data.status == '80'|| props.data.status == '90'?'#FF6666':''}">{{ code22 }}</h5>
<h5 v-else :style="{color:props.data.status == '80'|| props.data.status == '90'?'#FF6666':''}">{{ code33 }}</h5>
<h4 >{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
<h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
$t(i18n.global.t('home.offerpricerange'))
@ -43,14 +43,13 @@ export default {
</script>
<script lang="ts" setup>
import { size } from 'lodash';
import { ref, onMounted, onUpdated,watch } from 'vue'
import { ref, onMounted, computed, watch } from 'vue'
import { ipoStore } from "@/stores/ipo"
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import logo from '@/assets/Snipaste.png'
import { useRouter } from 'vue-router';
import { computed } from '@vue/reactivity';
import Aimage from "@/views/login/components/a-image/index.vue";
import Aimage from "./image1/index.vue";
const { proxy } = (getCurrentInstance() as any)
const store = ipoStore();
const currentDate = ref(new Date())
@ -106,22 +105,87 @@ const props = defineProps({
logolinks: "",
status: 0,
listingDate: "",
ipoID:0,
tradeCurrency:""
ipoID: 0,
tradeCurrency: ""
}
}
}
})
// console.log(props.data.tradeCurrency);
const code22 = ref('')
onMounted(()=>{
onMounted(() => {
setCodefn()
})
watch(props,(newValue:any, oldValue:any)=>{
watch(props, (newValue: any, oldValue: any) => {
setCodefn();
},{deep:true})
function setCodefn(){
}, { deep: true })
const code33 = computed(() => {
return {
25: proxy.$t('home.DealInitiated'),
30: proxy.$t('home.PublicOfferClosed'),
35: proxy.$t('home.ApplicationValidated'),
45: proxy.$t('home.AllotmentConfirmed'),
50: proxy.$t('home.MoneySettlement'),
55: proxy.$t('home.AllocationConfirmed'),
60: proxy.$t('home.placingApproved'),
65: proxy.$t('home.AllotmentResultsApproved'),
70: proxy.$t('home.TradingStarted'),
80: proxy.$t('home.Suspended'),
90: proxy.$t('home.Cancelled'),
}[props.data.status as number]
})
const detailsItem33 = computed(() => {
var tag = true;
const arr = detailsItem.value.map(item => {
if (code22.value == item.name && tag) {
tag = false;
return { ...item, icon: 2 }
} else if (tag) {
return { ...item, icon: 1 }
} else {
return { ...item, icon: 0 }
}
})
return [
{
name: proxy.$t('home.DealInitiated'),
icon: arr[0].icon
},
{
name: proxy.$t('home.PublicOfferClosed'),
icon: arr[1].icon
},
{
name: proxy.$t('home.ApplicationValidated'),
icon: arr[2].icon
},
{
name: proxy.$t('home.AllotmentConfirmed'),
icon: arr[3].icon
}
, {
name: proxy.$t('home.MoneySettlement'),
icon: arr[4].icon
},
{
name: proxy.$t('home.AllocationConfirmed'),
icon: arr[5].icon
}, {
name: proxy.$t('home.placingApproved'),
icon: arr[6].icon
}, {
name: proxy.$t('home.AllotmentResultsApproved'),
icon: arr[7].icon
}, {
name: proxy.$t('home.TradingStarted'),
icon: arr[8].icon
}
]
})
function setCodefn() {
// console.log('修改了data',newValue,oldValue);
var obj = {
25: proxy.$t('home.DealInitiated'),
@ -168,12 +232,18 @@ const cardDetail = (e: any) => {
e.stopPropagation();
expand.value = !expand.value;
}
// const cancelPop = (event:any)=>{
// let tp = document.querySelector(".details")
// if(tp){
// if(!tp.contains(event.target)){
// expand.value = false;
// }
// }
// }
//路由传参
const handleclick = (item: any) => {
localStorage.setItem('ipoID', item.ipoID)
console.log(item);
//console.log(item);
localStorage.setItem('itemData', JSON.stringify(item))
router.push({
name: 'Xdashboard',
@ -204,39 +274,39 @@ const handleclick = (item: any) => {
// width: 270rem;
// height: 360rem;
// }
.imglogo{
background-color: #23445a;
height: 15vh;
line-height: 15vh;
text-align: center;
overflow: hidden;
font-size: 38px;
font-weight: bold;
font-family: "Calibri";
color: #fff;
}
.title {
background-color: #fff;
height: 120px;
line-height: 120px;
font-size: 40px;
color: #fff;
overflow: hidden;
position: relative;
font-family: "Calibri";
// @media screen and (max-width: 768px){
// font-size: 80px;
// .imglogo{
// background-color: #23445a;
// height: 15vh;
// line-height: 15vh;
// text-align: center;
// overflow: hidden;
// font-size: 38px;
// font-weight: bold;
// font-family: "Calibri";
// color: #fff;
// }
// .title {
// background-color: #fff;
// height: 120px;
// line-height: 120px;
// font-size: 40px;
// color: #fff;
// overflow: hidden;
// position: relative;
// font-family: "Calibri";
// // @media screen and (max-width: 768px){
// // font-size: 80px;
// // }
// img {
// max-height: 100%;
// max-width: 100%;
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// }
// }
img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.list {
// height: 150px;

6
src/views/dashBoard/box/index.vue
View File

@ -29,10 +29,10 @@ const props = defineProps({
}
)
const leftWidth = computed(()=>{
return (props.leftNumber/(props.leftNumber+props.rightNumber))*400 + 'px'
return (props.leftNumber/(props.leftNumber+props.rightNumber))*405 + 'px'
})
const rightWidth = computed(()=>{
return (props.rightNumber/(props.leftNumber+props.rightNumber))*400 + 'px'
return (props.rightNumber/(props.leftNumber+props.rightNumber))*405 + 'px'
})
@ -43,7 +43,7 @@ const rightWidth = computed(()=>{
align-items: center;
justify-content: space-between;
height: 28px;
width: 400px;
width: 405px;
@media screen and (max-width: 768px){
width: 80vw;

2
src/views/dashBoard/image1/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<div class="title" v-if="isImage">
<img v-lazy="props.src" />
<img :src="props.src" />
</div>
<div class="title2" v-else>
{{props.number}}

541
src/views/dashBoard/index.vue
View File

@ -10,8 +10,8 @@
<Nav />
</div>
<div class="rightbox">
<Header :time="datatime" :openDrawer="openDrawer" />
<div class="content">
<Header class="headerMoble" :time="datatime" :openDrawer="openDrawer" />
<div class="content" v-if="data != null">
<div class="content-topleft">
<p class="content-title">{{ $t(i18n.global.t('dashboard.Milestones')) }}</p>
<el-calendar ref="calendar" class="calendar">
@ -50,7 +50,8 @@
</div>
<div class="content-topright">
<p class="topright-title">{{ $t(i18n.global.t('dashboard.PublicOffer')) }}</p>
<div ref="main" style="width: 100%; height: 100%"></div>
<!-- <div ref="main" style="width: 100%; height: 100%"></div> -->
<v-chart :option="option" autoresize style="width: 100%; height: 100%" />
<div class="topright-p">
<div class="p-1">
<div>
@ -147,7 +148,7 @@
<div class="content-bottomright">
<p class="bottomleft-title">{{ $t(i18n.global.t('dashboard.FinalAllocation')) }}</p>
<div ref="main2" style="width: 100%; height: 100%"></div>
<div class="bottomleft-bouttom1">
<div class="bottomleft-bouttom2">
<div class="initialallocationleft">
<div class="initialallocationlefttitle">
<div class="title">
@ -163,7 +164,7 @@
</p>
</div>
<div class="public-left2">
<p class="yuan-titlesp" >{{ $t(i18n.global.t('dashboard.TotalOfferShares')) }}</p>
<p class="yuan-titlesp">{{ $t(i18n.global.t('dashboard.TotalOfferShares')) }}</p>
</div>
</div>
@ -211,7 +212,9 @@
</div>
</div>
<div v-else style="display: flex;align-items: center;width: 100vw;height: 90vh;justify-content: center;">
<div style="color:#1f4055 ;font-weight: bold;font-size: 25px;">{{ $t(i18n.global.t('home.nodata')) }}</div>
</div>
</div>
</div>
@ -219,12 +222,12 @@
</template>
<script lang="ts">
export default {
name: "XdashBoard"
name: "Xdashboard"
}
</script>
<script lang="ts" setup>
import Item from './Main.vue';
import { ref, onMounted, reactive} from "vue";
import { ref, onMounted, reactive, computed } from "vue";
import Nav from "./nav/index.vue";
import Header from "./Header/index.vue";
import * as echarts from "echarts";
@ -237,8 +240,23 @@ import { ipoStore } from "@/stores/ipo"
import { getCurrentInstance, onUnmounted } from 'vue'
import Drawer from '@/views/login/modelComponents/Drawer.vue'
import { getDataFromId } from "@/api/mock/home";
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
LegendComponent,
} from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { provide } from 'vue';
use([
CanvasRenderer,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent,
]);
const drawer = ref(false)
const handleDrawer = (done: () => void) => {
done();
@ -258,10 +276,9 @@ const route = useRoute()
var daysAndDom = [];
onMounted(
() => {
const obj = JSON.parse(localStorage.getItem('itemData') as string);
// obj.logolinks="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png";
const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
data.value = obj;
//console.log(data.value);
getreferencedata()
getdatatime()
},
@ -299,6 +316,7 @@ const PublicOfferY1 = ref<any[]>([])
const PublicOfferY1max = ref<number>()
const PublicOfferZ1 = ref<any[]>([])
const PublicOfferZ1max = ref<number>()
const PublicOfferZ1max1 = ref<number>()
const interval = ref()
const PublicOfferX = ref<string[]>([])
const PublicOfferY = ref<string[]>([])
@ -307,7 +325,14 @@ const FinalAllocationPublic = ref('')
const InitialAllocationInstitutional = ref('')
const FinalAllocationInstitutional = ref('')
const setBar = async () => {
const ipoID = localStorage.getItem('ipoID')
// mock数据测试开始
// const result1 = await getDataFromId('bar');
// const result = {
// data: result1
// }
// mock数据测试结束
//const ipoID = localStorage.getItem('ipoID')
const ipoID = sessionStorage.getItem('ipoID')
const result = await getIpo(ipoID as string)
// console.log(ipoID,(result as any).data[0]);
if ((result as any).data[0].graph != null) {
@ -317,7 +342,7 @@ const setBar = async () => {
PublicOfferY1.value = (result as any).data[0].graph.map((item: any) => {
return item.poApplicationQuantity / 1000000;
});
PublicOfferY1max.value = Math.floor(PublicOfferY1.value.slice().sort((a,b)=>a-b)[PublicOfferY1.value.length-1] *2),
PublicOfferY1max.value = Math.floor(PublicOfferY1.value.slice().sort((a, b) => a - b)[PublicOfferY1.value.length - 1] * 2),
PublicOfferZ1.value = (result as any).data[0].graph.map((item: any) => {
const number = (item.poApplicationQuantity) / item.poSharesInitial
console.log(number);
@ -325,13 +350,16 @@ const setBar = async () => {
return number.toFixed(2);
});
PublicOfferZ1max.value = Math.floor(PublicOfferZ1.value.slice().sort((a,b)=>a-b)[PublicOfferZ1.value.length-1] *2)
PublicOfferZ1max.value = Math.floor(PublicOfferZ1.value.slice().sort((a, b) => a - b)[PublicOfferZ1.value.length - 1] * 2)
PublicOfferZ1max1.value = PublicOfferZ1max.value + 1.1
//console.log(PublicOfferZ1max.value);
}
console.log(PublicOfferZ1max.value);
// const amount = Number(initialpublic.value) + Number(initialinstituational.value);
const percent = ref(0)
const percentfix = ref(0)
// const percent = ref(0)
// const percentfix = ref(0)
// percent.value =Number(initialpublic.value) / amount * 100 ;
// InitialAllocationPublic.value = percent.value.toFixed(2) + "%"
// percentfix.value = Number(percent.value.toFixed(2))
@ -342,9 +370,12 @@ const setBar = async () => {
// FinalAllocationPublic.value = Math.round(Number(finalpublic.value) / code99.value * 10000) / 100 + "%";
// FinalAllocationInstitutional.value = Math.round(Number(finalinstitutional.value) / code99.value * 10000) / 100 + "%";
//interval.value = Math.ceil((PublicOfferZ1max.value as number)/9)
init();
//init();
}
onMounted(() => {
store.setMobileActiveShow(2);//设置移动端弹窗高亮
// setBarRight();
setBar()//real
})
@ -359,7 +390,8 @@ const getreferencedata = async () => {
// const res = result1[0];
//---mock测试接口结束
const ipoID = localStorage.getItem('ipoID')
// const ipoID = localStorage.getItem('ipoID')
const ipoID = sessionStorage.getItem('ipoID')
const result = await getIpo(ipoID as string)
const res = (result as any).data[0];
// console.log(res);
@ -374,8 +406,11 @@ const getreferencedata = async () => {
calendarAddData(startDate.value, endDate.value, '#65FABF')
calendarAddData(siInputDate, siInputDate, '#bd99dc')
calendarAddData(listingDate, listingDate, '#38b126')
calendarAddData('2023-5-23', listingDate, 'red')
// calendarAddData('2023-5-23', listingDate, 'yellow')
// calendarAddData('2023-5-23', '2023-5-29', 'red')
// calendarAddData('2023-5-23', '2023-5-23', 'yellow')
// calendarAddData('2023-5-23', '2023-5-24', 'pink')
// calendarAddData('2023-5-23', '2023-5-25', 'blue')
// calendarAddData('2023-5-28', '2023-5-29', 'blue')
calendarAddLine()
initialpublic.value = res.poSharesInitial
ApplicationQuantity.value = res.poApplicationQuantity
@ -395,13 +430,13 @@ const getreferencedata = async () => {
// FinalAllocationInstitutional.value = Math.round(Number(finalinstitutional.value) / code99.value * 10000) / 100 + "%";
const percent = ref(0)
const percentfix = ref(0)
percent.value =Number(initialpublic.value) / code66.value * 100 ;
percent.value = Number(initialpublic.value) / code66.value * 100;
InitialAllocationPublic.value = percent.value.toFixed(2) + "%"
percentfix.value = Number(percent.value.toFixed(2))
InitialAllocationInstitutional.value = (100 - percentfix.value).toFixed(2) + "%"
const percent1 = ref(0)
const percentfix1 = ref(0)
percent1.value =Number(finalpublic.value) / code99.value * 100 ;
percent1.value = Number(finalpublic.value) / code99.value * 100;
FinalAllocationPublic.value = percent1.value.toFixed(2) + "%"
percentfix1.value = Number(percent1.value.toFixed(2))
FinalAllocationInstitutional.value = (100 - percentfix1.value).toFixed(2) + "%"
@ -439,8 +474,9 @@ function calendarAddLine() {
if (LineData.ids.length) {
LineData.ids.forEach((item: any) => {
// item.dom.removeChild(item.id)
var id = item.dom.querySelector("#" + item.id)
item.dom.removeChild(id);
var id = item.parent.querySelector("#" + item.id)
//console.log('rrr', item)
item.parent.removeChild(id);
})
LineData.ids = [];
@ -449,17 +485,21 @@ function calendarAddLine() {
daysAndDom.forEach((item: any) => {
var str = LineData.nowMounth + item.day;
var time1 = new Date(str).getTime()//time1为在startdate到enddate之间的时间
LineData.lines.sort((a, b) => {
return (b.endDate - b.startDate) - (a.endDate - a.startDate)
})
const arrADD = LineData.lines.map((line, index) => {
if (line.startDate <= time1 && time1 <= line.endDate) {
// item.dom.style.borderBottom = `10px solid ${line.color}`;
var span = document.createElement('div')
span.style.width = '65px'
span.style.height = '10px'
span.style.marginBottom = '1px'
span.setAttribute('id', 't' + time1)
LineData.ids.push({ dom: item.dom, id: 't' + time1 })
span.style.backgroundColor = line.color
item.dom.appendChild(span)
Arr[index].push({ dom: item.dom })
LineData.ids.push({ dom: span, parent: item.dom, id: 't' + time1 })
Arr[index].push({ dom: span })
if (768 >= document.documentElement.clientWidth) {
span.style.width = '48px'
span.style.height = '8px'
@ -469,47 +509,42 @@ function calendarAddLine() {
return {}
})
})
console.log('Arr', Arr)//传入的时间的dom:div.el-calendar-day
//console.log('Arr', Arr)//传入的时间的dom:div.el-calendar-day
// Arr.forEach((item: any) => {
// if (item.length) {
// item[0].dom.children[1].style.marginLeft = "30px"//起始时间添加样式
// item[0].dom.children[1].style.width = ""
// item[0].dom.children[1].style.borderRadius = "10px 0px 0px 10px";
// //console.log(Arr,item[0].dom.children[1]);
// if (item.length && (item.length !== 1)) {
// item[0].dom.style.marginLeft = "11px"//起始时间添加样式
// item[0].dom.style.width = ""
// item[0].dom.style.borderRadius = "10px 0px 0px 10px";
// item[item.length - 1].dom.children[1].style.width = "35px"//结束时间添加样式
// item[item.length - 1].dom.children[1].style.borderRadius = "0px 20px 20px 0px";
// item[item.length - 1].dom.style.width = "45px"//结束时间添加样式
// item[item.length - 1].dom.style.borderRadius = "0px 20px 20px 0px";
// if (768 >= document.documentElement.clientWidth) {
// item[0].dom.children[1].style.marginLeft = "23px"//起始时间添加样式
// item[0].dom.children[1].style.width = ""
// item[0].dom.children[1].style.borderRadius = "10px 0px 0px 10px";
// item[item.length - 1].dom.children[1].style.width = "23px"//结束时间添加样式
// item[item.length - 1].dom.children[1].style.borderRadius = "0px 10px 10px 0px";
// item[0].dom.style.marginLeft = "7px"//起始时间添加样式
// item[0].dom.style.width = ""
// item[0].dom.style.borderRadius = "10px 0px 0px 10px";
// item[item.length - 1].dom.style.width = "23px"//结束时间添加样式
// item[item.length - 1].dom.style.borderRadius = "0px 10px 10px 0px";
// }
// }
// if (item.length == 1) {//如果长度为1，单独设置样式
// // console.log('item',item)
// item[0].dom.children[1].style.marginLeft = "11px"
// item[0].dom.children[1].style.width = "42px"
// item[0].dom.children[1].style.borderRadius = "10px";
// if (item.length == 1) {//如果长度为1，单独设置样式0
// item[0].dom.style.marginLeft = "11px"
// item[0].dom.style.width = "42px"
// item[0].dom.style.borderRadius = "10px";
// if (768 >= document.documentElement.clientWidth) {
// item[0].dom.children[1].style.marginLeft = "7px"
// item[0].dom.children[1].style.width = "30px"
// item[0].dom.children[1].style.borderRadius = "10px";
// item[0].dom.style.marginLeft = "7px"
// item[0].dom.style.width = "30px"
// item[0].dom.style.borderRadius = "10px";
// }
// }
// })
}
function init() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(main.value);
// 指定图表的配置项和数据
var option = {
const option = computed(() => {
return {
grid: {
top: 30,
x: 70,
x: 75,
x2: 60,
y2: 200
},
@ -526,11 +561,15 @@ function init() {
yAxis: [
{
type: 'value',
max:PublicOfferY1max.value,
max: PublicOfferY1max.value,
// max:1060,
min: 0,
splitNumber: 9,
boundaryGap: [0.2, 0.2],
name: proxy.$t('dashboard.QuantityMillion'),
name: i18n.global.t('dashboard.QuantityMillion'),
nameTextStyle: {
padding: [0, 0, 0, 20] // 上右下左与原位置距离
},
lineStyle: {
width: 1,
type: 'solid',
@ -543,10 +582,11 @@ function init() {
},
{
type: 'value',
name: proxy.$t('dashboard.Ratio'),
name: i18n.global.t('dashboard.Ratio'),
min: 0,
max: PublicOfferZ1max.value,
// max:20,
max: PublicOfferZ1max1.value,
// max:4.0,
// max: 20,
splitNumber: 9,
alignTicks: true,
scale: true,
@ -558,17 +598,15 @@ function init() {
}
}
],
series: [
{
name: proxy.$t('dashboard.Ratio'),
name: i18n.global.t('dashboard.Ratio'),
type: 'line',
data: PublicOfferZ1.value,
yAxisIndex: 1,
},
{
name: proxy.$t('dashboard.QuantityMillion'),
name: i18n.global.t('dashboard.QuantityMillion'),
type: 'bar',
data: PublicOfferY1.value,
barWidth: '40%',
@ -577,13 +615,101 @@ function init() {
},
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.onresize = () => {
myChart.resize();
}
}
})
// const init = computed(()=>{
// // 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(main.value);
// // 指定图表的配置项和数据
// var option = {
// grid: {
// top: 30,
// x: 75,
// x2: 60,
// y2: 200
// },
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'cross'
// }
// },
// xAxis: {
// // data: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'],
// data: PublicOfferX1.value
// },
// yAxis: [
// {
// type: 'value',
// max: PublicOfferY1max.value,
// min: 0,
// splitNumber: 9,
// boundaryGap: [0.2, 0.2],
// name: i18n.global.t('dashboard.QuantityMillion'),
// nameTextStyle: {
// padding: [0, 0, 0, 49] // 上右下左与原位置距离
// },
// lineStyle: {
// width: 1,
// type: 'solid',
// },
// axisLabel: {
// formatter: function (value: any, index: any) {
// return value.toFixed(1)
// }
// }
// },
// {
// type: 'value',
// name: proxy.$t('dashboard.Ratio'),
// nameTextStyle: {
// padding: [0, 0, 0, 21] // 上右下左与原位置距离
// },
// min: 0,
// max: PublicOfferZ1max.value,
// // max:20,
// splitNumber: 9,
// alignTicks: true,
// scale: true,
// // interval: Math.ceil(20/9),
// axisLabel: {
// formatter: function (value: any, index: any) {
// return value.toFixed(1)
// }
// }
// }
// ],
// series: [
// {
// name: proxy.$t('dashboard.Ratio'),
// type: 'line',
// data: PublicOfferZ1.value,
// yAxisIndex: 1,
// },
// {
// name: i18n.global.t('dashboard.QuantityMillion'),
// type: 'bar',
// data: PublicOfferY1.value,
// barWidth: '40%',
// itemStyle: {
// color: '#f6caae'
// },
// }
// ]
// };
// // 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
// window.onresize = () => {
// myChart.resize();
// }
// })
function init1() {
var myChart1 = echarts.init(main1.value);
const option1 = {
@ -730,61 +856,147 @@ function fn(data: any) {
</script>
<style lang="scss" scoped>
.yuan-titlesp{
.yuan-titlesp {
font-size: 19px;
font-family: "Calibri";
color: #8e9eaa;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
font-size: 17px;
margin-top: 19px;
//margin-top: 11px;
color: #a4b0ba;
}
}
.bottomleft-bouttom1{
// background-color: red;
width: 450px;
.bottomleft-bouttom1 {
//background-color: red;
width: 460px;
height: 95px;
transform: translateY(-150px);
display: flex;
margin-left: 40px;
margin-left: 20px;
margin-top: 10px;
@media screen and (max-width: 768px){
width: 90vw;
justify-content: space-between;
@media screen and (max-width: 768px) {
width: 81vw;
margin-left: 5vw;
margin-top: -2vh;
//background-color: red;
//justify-content: space-between;
}
.initialallocationleft{
width: 230px;
//background-color: #20b109;
height: 95px;
display: flex;
@media screen and (max-width: 768px){
width: 50vw;
}
.initialallocationleftpercent{
.persent{
margin-top: 12px;
@media screen and (max-width: 768px){
margin-top: 14px;
}
}
}
.initialallocationlefttitle{
.initialallocationright {
// background-color: #1f4055;
margin-left: 20px;
@media screen and (max-width: 768px) {
margin-left: 0;
}
}
.initialallocationleft {
width: 230px;
//background-color: #20b109;
height: 95px;
display: flex;
@media screen and (max-width: 768px) {
width: 50vw;
}
.initialallocationleftpercent {
.persent {
margin-top: 12px;
@media screen and (max-width: 768px) {
margin-top: 16px;
}
}
}
.initialallocationlefttitle {
width: 140px;
//background-color: yellow;
height: 95px;
.title{
//background-color: yellow;
height: 95px;
.title {
display: flex;
margin-top: 10px;
// background-color: #1f4055;
@media screen and (max-width: 768px) {
margin-top: 12px;
}
}
}
}
}
}
.bottomleft-bouttom2 {
// background-color: red;
width: 435px;
height: 95px;
transform: translateY(-150px);
display: flex;
margin-left: 20px;
margin-top: 10px;
justify-content: space-between;
@media screen and (max-width: 768px) {
width: 81vw;
margin-left: 5vw;
margin-top: -2vh;
//background-color: red;
//justify-content: space-between;
}
.initialallocationright {
// background-color: #1f4055;
margin-left: 20px;
@media screen and (max-width: 768px) {
margin-left: 0;
}
}
.initialallocationleft {
width: 230px;
//background-color: #20b109;
height: 95px;
display: flex;
@media screen and (max-width: 768px) {
width: 50vw;
}
.initialallocationleftpercent {
.persent {
margin-top: 12px;
@media screen and (max-width: 768px) {
margin-top: 16px;
}
}
}
.initialallocationlefttitle {
width: 140px;
//background-color: yellow;
height: 95px;
.title {
display: flex;
margin-top: 10px;
// background-color: #1f4055;
@media screen and (max-width: 768px) {
margin-top: 12px;
}
}
}
}
}
@ -792,14 +1004,15 @@ height: 95px;
background-image: url("@/assets/1x/beijingtu.png");
background-repeat: no-repeat;
background-size: cover;
height: 1200px;
height: 1300px;
font-family: "Calibri";
width: 1900px;
@media screen and (max-width: 768px) {
height: fit-content;
width: 100vw;
overflow-x: hidden;
@media screen and (max-width: 768px) {
max-width: 100vw;
overflow: auto;
overflow-x: hidden;
height: 100%;
}
}
@ -842,6 +1055,14 @@ height: 95px;
display: flex;
flex-wrap: wrap;
@media screen and (max-width: 768px) {
margin-top: 30px;
height: calc(100vh - 140px);
width: 100vw;
overflow-x: hidden;
overflow-y: scroll;
}
.persent {
color: #9FA0BF;
font-weight: 400;
@ -854,10 +1075,7 @@ height: 95px;
margin: 0 10px 0 10px;
}
@media screen and (max-width: 768px) {
flex-direction: column;
margin-top: 30px;
}
.pulic {
display: flex;
@ -865,7 +1083,8 @@ height: 95px;
justify-content: space-between;
margin-left: 55px;
align-items: flex-end;
//background-color: red;
//background-color: red;
@media screen and (max-width: 768px) {
margin-left: 21px;
}
@ -932,6 +1151,8 @@ height: 95px;
height: 15px;
background-color: #333f50;
border-radius: 50%;
margin-top: 3px;
@media screen and (max-width: 768px) {
margin-top: 3px;
}
@ -942,6 +1163,8 @@ height: 95px;
height: 15px;
background-color: #ed7d31;
border-radius: 50%;
margin-top: 3px;
@media screen and (max-width: 768px) {
margin-top: 3px;
}
@ -952,6 +1175,8 @@ height: 95px;
height: 15px;
background-color: #ffc000;
border-radius: 50%;
margin-top: 3px;
@media screen and (max-width: 768px) {
margin-top: 3px;
}
@ -962,6 +1187,8 @@ height: 95px;
height: 15px;
background-color: #2f5597;
border-radius: 50%;
margin-top: 3px;
@media screen and (max-width: 768px) {
margin-top: 3px;
}
@ -971,7 +1198,8 @@ height: 95px;
font-size: 19px;
font-family: 'Calibri';
color: #8e9eaa;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
font-size: 17px;
margin-top: 3px;
}
@ -984,8 +1212,9 @@ height: 95px;
font-weight: 400;
display: flex;
flex-direction: row-reverse;
// background-color: #20b109;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
margin-left: 28px;
}
}
@ -995,7 +1224,8 @@ height: 95px;
color: #5c6063;
font-size: 18px;
font-weight: 400;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
margin-left: 20px;
}
}
@ -1008,12 +1238,14 @@ height: 95px;
display: flex;
flex-direction: row-reverse;
margin-top: 10px;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
transform: translateX(-40px);
margin-top: 14px;
//margin-left: -200px;
// background-color: pink;
}
}
// background-color: #20b109;
}
@ -1031,10 +1263,11 @@ height: 95px;
font-size: 25px;
display: flex;
flex-direction: row-reverse;
margin-top: 10px;
margin-top: 10px;
// background-color: #20b109;
@media screen and (max-width: 768px) {
font-size: 20px;
font-size: 18px;
transform: translateX(-40px);
}
}
@ -1051,7 +1284,10 @@ margin-top: 10px;
height: 15px;
background-color: #65fabf;
border-radius: 50%;
margin-top: 7px;
// position: relative;
// top:50%;
//transform:translateY(5%);
// margin-top: 7px;
}
.yuan4 {
@ -1066,7 +1302,7 @@ margin-top: 10px;
height: 15px;
background-color: #20b109;
border-radius: 50%;
margin-top: 7px;
// margin-top: 7px;
}
.yuan6 {
@ -1074,7 +1310,7 @@ margin-top: 10px;
height: 15px;
background-color: #98c2f2;
border-radius: 50%;
margin-top: 7px;
// margin-top: 7px;
}
.yuan7 {
@ -1082,12 +1318,15 @@ margin-top: 10px;
height: 15px;
background-color: #bf98de;
border-radius: 50%;
margin-top: 7px;
// margin-top: 7px;
}
.topleft-bottom {
transform: translateY(-10px);
transform: translateY(-15px);
@media screen and (max-width: 768px) {
transform: translateY(-30px);
}
}
.bottomleft-bouttom {
@ -1097,11 +1336,13 @@ margin-top: 10px;
@media screen and (max-width: 768px) {
padding-right: 10px;
// transform: translateY(-10px);
}
}
.topright-p {
transform: translateY(-132%);
@media screen and (max-width: 768px) {
transform: translateY(-135%);
}
@ -1113,7 +1354,7 @@ margin-top: 10px;
font-size: 20px;
color: #415d6f;
justify-content: space-between;
width: 400px;
width: 405px;
@media screen and (max-width: 768px) {
width: 80vw;
@ -1140,7 +1381,7 @@ margin-top: 10px;
margin-top: 15px;
display: flex;
justify-content: space-between;
width: 400px;
width: 405px;
margin-left: 50px;
font-size: 20px;
color: #415d6f;
@ -1171,12 +1412,13 @@ margin-top: 10px;
//margin-right: 38px;
color: #7e929f;
font-size: 18px;
width: 400px;
//background-color: #1f4055;
margin-left: 50px;
display: flex;
justify-content: end;
margin-top: 5px;
width: 405px;
//background-color: #1f4055;
margin-left: 50px;
display: flex;
justify-content: end;
margin-top: 5px;
@media screen and (max-width: 768px) {
transform: translateX(-6vw);
font-size: 15px;
@ -1190,7 +1432,18 @@ margin-top: 5px;
.topleft-bottom1 {
display: flex;
margin-left: 10%;
margin-top: 2%;
margin-top: 10px;
align-items: center;
height: 23px;
@media screen and (max-width: 768px) {
align-items: center;
height: 15px;
width: 300px;
//transform: translateY(-6px);
//margin-right: 4px;
margin-top: 15px;
}
}
.bottomleft-title {
@ -1200,6 +1453,10 @@ margin-top: 5px;
font-weight: bold;
margin-left: 20px;
margin-top: 15px;
@media screen and (max-width: 768px) {
margin-top: 10px;
}
}
.calendar-title {
@ -1215,13 +1472,13 @@ margin-top: 5px;
.content-topleft {
width: 490px;
height: 560px;
height: 640px;
background-color: #fff;
@media screen and (max-width: 768px) {
width: 90vw;
margin-left: 5vw;
height: 500px;
height: fit-content;
}
// background-color: red;
@ -1231,7 +1488,7 @@ margin-top: 5px;
color: #2e4d60;
font-weight: bold;
margin-left: 20px;
margin-top: 15px;
margin-top: 10px;
cursor: default;
@ -1240,7 +1497,7 @@ margin-top: 5px;
.content-topright {
width: 490px;
height: 560px;
height: 640px;
background-color: #fff;
margin-left: 20px;
@ -1345,7 +1602,7 @@ margin-top: 5px;
padding: 12px 20px;
border-bottom: var(--el-calendar-header-border-bottom);
background-color: #1f4055;
width: 410px;
width: 420px;
margin-left: 20px;
font-family: "Calibri";
@ -1375,8 +1632,10 @@ margin-top: 5px;
line-height: 33px;
font: 13px 'Poppins-Regular';
background-color: #fff;
height: 33px;
border: none;
//background-color: red;
min-height: 33px;
height: 57px;
// border: none;
cursor: default;
font-family: "Calibri";
}

17
src/views/login/components/Event.vue
View File

@ -86,14 +86,16 @@ const platformTo=(listPlatform1:string)=>{
border-left: 3px solid #D3DDE4;
border-bottom: 2px solid #D3DDE4;
box-sizing: border-box;
// background-color: #DA8B2B;
.header {
margin-top: 4px;
position: relative;
// background-color: red;
width: 100%;
height: 45px;
// transform: translateY(-40px);
// margin-left: -30px;
// z-index: 1;
.c {
width: 30px;
height: 35px;
@ -151,11 +153,14 @@ const platformTo=(listPlatform1:string)=>{
.content {
margin-left: 22px;
border-left: 3px solid #EEEFF1;
height: 100%;
height: 270px;
padding-left: 25px;
overflow: scroll;
// overflow: scroll;
overflow-y: scroll;
// background-color: red;
@media screen and (max-width: 768px) {
height: 30vh;
}
li {
line-height: 50px;

13
src/views/login/components/Lang.vue
View File

@ -14,22 +14,25 @@ export default {
<script lang="ts" setup>
import { ref, defineExpose ,inject} from 'vue';
import { ref, defineExpose, inject } from 'vue';
import { getCurrentInstance } from 'vue'
import { ipoStore } from "@/stores/ipo"
import { useRouter } from "vue-router";
import router from '@/router';
const store = ipoStore()
const route=useRouter()
const route = useRouter()
const { proxy } = (getCurrentInstance() as any)
const showLang = ref(false)
const reflashRouter=inject('reflashRouter') as Function
const IpoReflash=()=>{
const reflashRouter = inject('reflashRouter') as Function
const IpoReflash = () => {
// if(route.options.history.location=="/IPO"||route.options.history.location=="/home"){
// reflashRouter()
// }
reflashRouter()
// reflashRouter()
// if(route.options.history.location=="/home"){
// reflashRouter()
// }
}
const handleLang1 = () => {

341
src/views/login/components/Main.vue
View File

@ -1,19 +1,18 @@
<template>
<div class="bigbox" @click="handleclick(props.data)">
<Aimage :src="props.data.logolinks" :number="props.data.number"/>
<div class="list">
<Aimage @click="handleclick(props.data)" :src="props.data.logolinks" :number="props.data.number" />
<div class="listexpand" v-if="store.isExpand(props.data.ipoID)" @click="handleclick(props.data)">
<div class="list-content">
<div class="top">
<h4>{{ store.$state.locale == 1 ? props.data.title.split(";")[0] : props.data.title.split(";")[1] }}
</h4>
<el-icon class="icon1" @click="cardDetail">
<ArrowUp v-if="expand" />
<ArrowUp v-if="store.isExpand(props.data.ipoID)" />
<ArrowDown v-else />
</el-icon>
</div>
<h4>{{ props.data.number }}</h4>
<div v-if="expand" class="details">
<h5 v-for="(item, index) in detailsItem" :key="index">
<div v-if="store.isExpand(props.data.ipoID)" class="details">
<h5 v-for="(item, index) in detailsItem33" :key="index">
<span>{{ item.name }}</span>
<el-icon class="icon1" v-if="item.icon">
<Check v-if="item.icon == 1" />
@ -22,8 +21,9 @@
</h5>
</div>
<h5 v-else :style="{color:props.data.status == '80'|| props.data.status == '90'?'#FF6666':''}">{{ code22 }}</h5>
<h4 >{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
<h5 v-else :style="{ color: props.data.status == '80' || props.data.status == '90' ? '#FF6666' : '' }">{{ code22
}}</h5>
<h4>{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
<h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
$t(i18n.global.t('home.offerpricerange'))
}}</h6>
@ -34,6 +34,39 @@
}}</h6>
</div>
</div>
<div class="list" v-else @click="handleclick(props.data)">
<div class="list-content">
<div class="top">
<h4>{{ store.$state.locale == 1 ? props.data.title.split(";")[0] : props.data.title.split(";")[1] }}
</h4>
<el-icon class="icon1" @click="cardDetail" style="margin-top: 4px;">
<ArrowUp v-if="store.isExpand(props.data.ipoID)" />
<ArrowDown v-else />
</el-icon>
</div>
<h4>{{ props.data.number }}</h4>
<div v-if="store.isExpand(props.data.ipoID)" class="details">
<h5 v-for="(item, index) in detailsItem33" :key="index">
<span>{{ item.name }}</span>
<el-icon class="icon1" v-if="item.icon">
<Check v-if="item.icon == 1" />
<img v-if="item.icon == 2" src="@/assets/1x/1x/source9.png" class="icon">
</el-icon>
</h5>
</div>
<h5 v-else :style="{ color: props.data.status == '80' || props.data.status == '90' ? '#FF6666' : '' }">{{ code33
}}</h5>
<h4>{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
<h6>{{ props.data.price ? $t(i18n.global.t('home.finalofferprice')) :
$t(i18n.global.t('home.offerpricerange'))
}}</h6>
<h5>{{ props.data.time }}</h5>
<h6>{{ props.data.listingDate ?
$t(i18n.global.t('home.CommencementofTradeDate')) :
$t(i18n.global.t('home.ExpectedPriceDeterminationDate'))
}}</h6>
</div>
</div>
</template>
<script lang="ts">
@ -43,13 +76,12 @@ export default {
</script>
<script lang="ts" setup>
import { size } from 'lodash';
import { ref, onMounted, onUpdated,watch } from 'vue'
import { ref, onMounted, computed, watch } from 'vue'
import { ipoStore } from "@/stores/ipo"
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import logo from '@/assets/Snipaste.png'
import { useRouter } from 'vue-router';
import { computed } from '@vue/reactivity';
import Aimage from "./a-image/index.vue";
const { proxy } = (getCurrentInstance() as any)
const store = ipoStore();
@ -92,38 +124,94 @@ const detailsItem = ref([
icon: 0
}
])
const props = defineProps({
data: {
type: Object,
default: function () {
return {
HKD: "",
number: 0,
price: "",
time: "",
title: "",
trading: "",
logolinks: "",
status: 0,
listingDate: "",
ipoID:0,
tradeCurrency:""
}
}
}
})
interface dataType {
HKD: string,
number: string,
price: string,
time: string,
title: string,
trading: string,
logolinks: string,
status: string,
listingDate: string,
ipoID: number,
tradeCurrency: string
}
const props = defineProps<{ data: dataType, index: number }>()
// console.log(props.data.tradeCurrency);
const code22 = ref('')
onMounted(()=>{
onMounted(() => {
setCodefn()
})
watch(props,(newValue:any, oldValue:any)=>{
watch(props, (newValue: any, oldValue: any) => {
setCodefn();
},{deep:true})
function setCodefn(){
}, { deep: true })
const code33 = computed(() => {
return {
25: proxy.$t('home.DealInitiated'),
30: proxy.$t('home.PublicOfferClosed'),
35: proxy.$t('home.ApplicationValidated'),
45: proxy.$t('home.AllotmentConfirmed'),
50: proxy.$t('home.MoneySettlement'),
55: proxy.$t('home.AllocationConfirmed'),
60: proxy.$t('home.placingApproved'),
65: proxy.$t('home.AllotmentResultsApproved'),
70: proxy.$t('home.TradingStarted'),
80: proxy.$t('home.Suspended'),
90: proxy.$t('home.Cancelled'),
}[props.data.status as unknown as number]
})
const detailsItem33 = computed(() => {
var tag = true;
const arr = detailsItem.value.map(item => {
if (code22.value == item.name && tag) {
tag = false;
return { ...item, icon: 2 }
} else if (tag) {
return { ...item, icon: 1 }
} else {
return { ...item, icon: 0 }
}
})
return [
{
name: proxy.$t('home.DealInitiated'),
icon: arr[0].icon
},
{
name: proxy.$t('home.PublicOfferClosed'),
icon: arr[1].icon
},
{
name: proxy.$t('home.ApplicationValidated'),
icon: arr[2].icon
},
{
name: proxy.$t('home.AllotmentConfirmed'),
icon: arr[3].icon
}
, {
name: proxy.$t('home.MoneySettlement'),
icon: arr[4].icon
},
{
name: proxy.$t('home.AllocationConfirmed'),
icon: arr[5].icon
}, {
name: proxy.$t('home.placingApproved'),
icon: arr[6].icon
}, {
name: proxy.$t('home.AllotmentResultsApproved'),
icon: arr[7].icon
}, {
name: proxy.$t('home.TradingStarted'),
icon: arr[8].icon
}
]
})
function setCodefn() {
// console.log('修改了data',newValue,oldValue);
var obj = {
25: proxy.$t('home.DealInitiated'),
@ -168,15 +256,39 @@ function setCodefn(){
const cardDetail = (e: any) => {
e.stopPropagation();
expand.value = !expand.value;
store.setIpoIds(props.data.ipoID)
// expand.value = !expand.value;
// if (store.$state.mainExpand == props.index) {
// store.setMainExpand(-1)
// } else {
// store.setMainExpand(props.index)
// }
// let tp = document.querySelector(".icon1")
// if(!(tp as any).contains(e.target)){
// expand.value = false;
// }
}
// const cancelPop = (event:any)=>{
// let tp = document.querySelector(".details")
// if(tp){
// if(!tp.contains(event.target)){
// expand.value = false;
// }
// }
// }
//路由传参
const handleclick = (item: any) => {
localStorage.setItem('ipoID', item.ipoID)
console.log(item);
// localStorage.setItem('ipoID', item.ipoID)
//console.log(item);
// localStorage.setItem('itemData', JSON.stringify(item))
localStorage.setItem('itemData', JSON.stringify(item))
sessionStorage.setItem('ipoID', item.ipoID)
sessionStorage.setItem('itemData', JSON.stringify(item))
router.push({
name: 'Xdashboard',
params: { data: JSON.stringify(item) }
@ -187,6 +299,39 @@ const handleclick = (item: any) => {
</script>
<style lang="scss" scoped>
// .imglogo{
// background-color: #23445a;
// height: 15vh;
// line-height: 15vh;
// text-align: center;
// overflow: hidden;
// font-size: 38px;
// font-weight: bold;
// font-family: "Calibri";
// color: #fff;
// }
// .title {
// background-color: #fff;
// height: 120px;
// line-height: 120px;
// font-size: 40px;
// color: #fff;
// overflow: hidden;
// position: relative;
// font-family: "Calibri";
// // @media screen and (max-width: 768px){
// // font-size: 80px;
// // }
// img {
// max-height: 100%;
// max-width: 100%;
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// }
// }
.bigbox {
width: 270px;
@ -206,47 +351,25 @@ const handleclick = (item: any) => {
// width: 270rem;
// height: 360rem;
// }
.imglogo{
background-color: #23445a;
height: 15vh;
line-height: 15vh;
text-align: center;
overflow: hidden;
font-size: 38px;
font-weight: bold;
font-family: "Calibri";
color: #fff;
}
.title {
background-color: #fff;
height: 120px;
line-height: 120px;
font-size: 40px;
color: #fff;
overflow: hidden;
position: relative;
font-family: "Calibri";
// @media screen and (max-width: 768px){
// font-size: 80px;
// }
img {
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
.list {
.listexpand {
// height: 150px;
width: 100%;
width: 270px;
display: flex;
justify-content: center;
margin-top: 20px;
font-family: "Calibri";
background-color: #e7efec;
overflow: hidden;
border: 1px solid #DDE2E6;
cursor: pointer;
margin-top: 120px;
margin-left: -271px;
border-radius: 0px 0px 20px 20px;
margin-right: 20px;
margin-bottom: 30px;
height: fit-content;
.list-content {
margin-top: 10px;
@ -286,6 +409,7 @@ const handleclick = (item: any) => {
.top {
display: flex;
justify-content: space-between;
margin-top: 40px;
}
.icon {
@ -298,6 +422,75 @@ const handleclick = (item: any) => {
height: 13px;
}
}
}
.list {
// height: 150px;
width: 270px;
display: flex;
justify-content: center;
font-family: "Calibri";
background-color: #e7efec;
overflow: hidden;
border: 1px solid #DDE2E6;
cursor: pointer;
margin-top: 120px;
margin-left: -271px;
border-radius: 0px 0px 20px 20px;
margin-right: 20px;
margin-bottom: 30px;
height: 260px;
.list-content {
margin-top: 10px;
width: 230px;
// height: 100%;
.details {
.icon1 {
margin-left: 3px;
transform: translateY(2.5px);
}
}
h4 {
font-size: 20px;
color: #3b6181;
margin-bottom: 8px;
font-weight: 600;
font-family: "Calibri";
}
h5 {
font-size: 16px;
color: #4b6d8a;
margin-bottom: 8px;
font-weight: 400;
font-family: "Calibri";
}
h6 {
font-size: 12px;
color: #5e7e98;
margin-bottom: 8px;
// font-family: "Calibri";
}
.top {
display: flex;
justify-content: space-between;
margin-top: 40px;
}
.icon {
@media screen and (max-width: 768px) {
width: 11px;
height: 13px;
}
width: 11px;
height: 13px;
}
}
}

186
src/views/login/components/Select.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="selectWrap" v-if="showSelect" @click="preVant">
<div class="selectWrap" @click="preVant">
<div class="box">
<div class="content">
<li>
<div class="word" @click="checkAll(1)">
<div class="word" :class="checkedAll == 1 && 'active'" @click="checkAll(1)">
{{ $t(i18n.global.t('home.title.All')) }}
<div class="check">
<el-icon v-if="checkedAll == 1">
@ -11,7 +11,8 @@
</el-icon>
</div>
</div>
<div class="word" @click="checkAll(2)">{{ $t(i18n.global.t('home.title.None')) }}
<div class="word" :class="checkedAll == 2 && 'active'" @click="checkAll(2)">{{
$t(i18n.global.t('home.title.None')) }}
<div class="check">
<el-icon v-if="checkedAll == 2">
<Check></Check>
@ -22,7 +23,7 @@
</li>
<div class="title">{{ $t(i18n.global.t('home.title.IPOStatus')) }}</div>
<li>
<div class="word" v-for="item in obj.ipoStatus" :key="item.key"
<div class="word" v-for="item in obj.ipoStatus" :key="item.key" :class="item.isSelcted && 'active'"
@click="checkOne(item.key, 'ipoStatus')">
<div class="check">
<el-icon v-if="item.isSelcted">
@ -35,7 +36,7 @@
<div class="title">{{ $t(i18n.global.t('home.title.TradingCurrency')) }}</div>
<li>
<div class="word" v-for="item in obj.tradingCurrency" :key="item.key"
@click="checkOne(item.key, 'tradingCurrency')">
:class="item.isSelcted && 'active'" @click="checkOne(item.key, 'tradingCurrency')">
<div class="check">
<el-icon v-if="item.isSelcted">
<Check />
@ -46,7 +47,7 @@
</li>
<div class="title">{{ $t(i18n.global.t('home.title.OfferingType')) }}</div>
<li>
<div class="word" v-for="item in obj.offeringType" :key="item.key"
<div class="word" v-for="item in obj.offeringType" :key="item.key" :class="item.isSelcted && 'active'"
@click="checkOne(item.key, 'offeringType')">
<div class="check">
<el-icon v-if="item.isSelcted">
@ -59,7 +60,7 @@
<div class="title">{{ $t(i18n.global.t('home.title.SecuritiestobeListed')) }}</div>
<li>
<div class="word" v-for="item in obj.SecuritiestobeListed" :key="item.key"
@click="checkOne(item.key, 'SecuritiestobeListed')">
:class="item.isSelcted && 'active'" @click="checkOne(item.key, 'SecuritiestobeListed')">
<div class="check">
<el-icon v-if="item.isSelcted">
<Check />
@ -68,18 +69,7 @@
<span>{{ item.value }}</span>
</div>
</li>
<!-- <div class="title">{{ $t(i18n.global.t('home.title.ListingPlatform')) }}</div>
<li>
<div class="word" v-for="item in obj.ListingPlatform" :key="item.key"
@click="checkOne(item.key, 'ListingPlatform')">
<div class="check">
<el-icon v-if="item.isSelcted">
<Check />
</el-icon>
</div>
<span>{{ item.value }}</span>
</div>
</li> -->
</div>
<div class="footer">
@ -99,27 +89,95 @@ export default {
</script>
<script lang="ts" setup>
import { ref, defineExpose, reactive ,inject,onMounted} from 'vue';
import { ref, defineExpose, reactive, inject, onMounted } from 'vue';
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import { getSelectList } from "@/api/reqIpo/ipo"
type keyType = 'ipoStatus' | 'tradingCurrency' | 'offeringType' | 'SecuritiestobeListed' | 'ListingPlatform'
type requestType = 'status' | 'trade_currency' | 'offer_type' | 'list_securities' | 'list_platform'
import { ipoStore } from "@/stores/ipo"
import { getDataFromId } from "@/api/mock/home"
const store = ipoStore()
type keyType = 'ipoStatus' | 'tradingCurrency' | 'offeringType' | 'SecuritiestobeListed'
type requestType = 'status' | 'trade_currency' | 'offer_type' | 'list_securities'
const { proxy } = (getCurrentInstance() as any)
const showSelect = ref(false)
const checkedAll = ref(0)
const selectCards=inject('selectCards') as Function
onMounted(()=>{
console.log('select组件挂载');
const selectCards = inject('selectCards') as Function
//const status = inject('status')
onMounted(() => {
//console.log('select组件挂载');
if ((store.$state.selectedArr as any).status) {
console.log('store', store.$state.selectedArr)
const storeData = store.$state.selectedArr as any;
if (storeData.status.length) {
obj.ipoStatus = obj.ipoStatus.map((item: any) => {
const j = storeData.status.some((i: string) => i == item.key)
if (j) {
return { ...item, isSelcted: true }
} else {
return item
}
})
}
if (storeData.trade_currency.length) {
obj.tradingCurrency = obj.tradingCurrency.map((item: any) => {
const j = storeData.trade_currency.some((i: string) => i == item.key)
if (j) {
return { ...item, isSelcted: true }
} else {
return item
}
})
}
if (storeData.offer_type.length) {
obj.offeringType = obj.offeringType.map((item: any) => {
const j = storeData.offer_type.some((i: string) => i == item.key)
if (j) {
return { ...item, isSelcted: true }
} else {
return item
}
})
}
if (storeData.list_securities.length) {
obj.SecuritiestobeListed = obj.SecuritiestobeListed.map((item: any) => {
const j = storeData.list_securities.some((i: string) => i == item.key)
if (j) {
return { ...item, isSelcted: true }
} else {
return item
}
})
}
// if (storeData.list_platform.length) {
// obj.ListingPlatform = obj.ListingPlatform.map((item: any) => {
// const j = storeData.list_platform.some((i: string) => i == item.key)
// if (j) {
// return { ...item, isSelcted: true }
// } else {
// return item
// }
// })
// }
}
})
const porps = defineProps<{ fn: Function }>()
const confirm = async () => {
var keyArry = ['status', 'trade_currency', 'offer_type', 'list_securities', 'list_platform',]
if (checkedAll.value == 2) {
store.setSelectedArr({});
porps.fn()
return
}
var keyArry = ['status', 'trade_currency', 'offer_type', 'list_securities']
var reqeustObj = {
status: [] as string[],
trade_currency: [] as string[],
offer_type: [] as string[],
list_securities: [] as string[],
list_platform: [] as string[],
}
Object.keys(obj).forEach((item: string, index: number) => {
@ -129,15 +187,23 @@ const confirm = async () => {
}
})
})
const result = await getSelectList(reqeustObj)
console.log('result',result);
store.setSelectedArr(reqeustObj);
const result = await store.getSearchSelectList()
// const result = await getSelectList(reqeustObj)
//mock数据测试-----------
// const data = await getDataFromId("Select")
// var result = {
// data
// }
//mock数据测试-----------
selectCards(result);
showSelect.value=false
showSelect.value = false
porps.fn()
}
const Cancel = () => {
showSelect.value = false;
// showSelect.value = false;
porps.fn()
}
const preVant = (e: any) => {
e.stopPropagation();
@ -165,7 +231,7 @@ const obj = reactive({
value: proxy.$t('home.MoneySettlement'),
isSelcted: false
}, {
key: 55,
key: "55",
value: proxy.$t('home.AllocationConfirmed'),
isSelcted: false
}, {
@ -272,15 +338,15 @@ const obj = reactive({
isSelcted: false
}
],
ListingPlatform: [{
key: '1',
value: proxy.$t('home.Mainboard'),
isSelcted: false
}, {
key: '2',
value: proxy.$t('home.GEM'),
isSelcted: false
}],
// ListingPlatform: [{
// key: '1',
// value: proxy.$t('home.Mainboard'),
// isSelcted: false
// }, {
// key: '2',
// value: proxy.$t('home.GEM'),
// isSelcted: false
// }],
// ListingType: [{
// key: '1',
// value: proxy.$t('ipo.TypeofListing.Ordinaryshares'),
@ -349,9 +415,7 @@ function selectAll(all: 1 | 2) {
})
})
}
defineExpose({
showSelect
})
</script>
<style lang="scss" scoped>
@ -365,7 +429,8 @@ defineExpose({
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
width: 90vw;
height: 93vh;
top: 50%;
@ -373,6 +438,7 @@ defineExpose({
transform: translate(-50%, -50%);
overflow-y: scroll;
}
.box {
box-sizing: border-box;
padding: 10px 20px 20px 20px;
@ -388,19 +454,20 @@ defineExpose({
font-size: 18px;
color: #879db2;
margin-top: 10px;
// @media screen and (max-width: 768px){
// @media screen and (max-width: 768px){
// font-size: 12px;
// }
// font-size: 12px;
// }
}
li {
display: flex;
font-size: 18px;
flex-wrap: wrap;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
flex-direction: column;
flex-wrap:nowrap;
flex-wrap: nowrap;
//font-size: 12px;
width: fit-content;
}
@ -417,16 +484,25 @@ defineExpose({
display: flex;
justify-content: space-between;
cursor: pointer;
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
height: fit-content;
width: fit-content;
}
&:hover {
background-color: #0F426F;
border-radius: 5px;
color: #fff;
}
&.active {
background-color: #0F426F;
border-radius: 5px;
color: #fff;
}
.check {
width: 30px;
@ -454,8 +530,9 @@ defineExpose({
background-color: #fff;
color: #557795;
padding: 10px 20px 10px 20px;
@media screen and (max-width: 768px){
margin:0;
@media screen and (max-width: 768px) {
margin: 0;
// font-size: 12px;
}
@ -468,5 +545,4 @@ defineExpose({
}
}
}
</style>

11
src/views/login/components/a-image/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div >
<div class="title" v-if="isImage">
<img v-lazy="props.src" />
</div>
@ -67,6 +67,9 @@ const checkImgExists=(imgurl:string) =>{
overflow: hidden;
position: relative;
font-family: "Calibri";
width: 270px;
border-radius: 20px 20px 0px 0px;
margin-top: 30px;
img {
max-height: 100%;
max-width: 100%;
@ -83,5 +86,11 @@ const checkImgExists=(imgurl:string) =>{
line-height: 120px;
font-size: 40px;
text-align: center;
width: 270px;
border-radius: 20px 20px 0px 0px;
margin-top: 30px;
overflow: hidden;
font-family: "Calibri";
position: relative;
}
</style>

205
src/views/login/index.vue
View File

@ -1,11 +1,10 @@
<template>
<!-- <div class="login3">
</div> -->
<div class="login2">
<Select ref="selectR" />
<Select ref="selectR" v-if="selectVisible" :fn="selectVisibleFn" />
<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 :drawer="drawer" @childfn="fn" />
</el-drawer>
<div class="left">
<div class="header">
<div class="menu">
@ -31,8 +30,9 @@
<!-- <SearchCup ref="SearchCupDom" class="searchCup" /> -->
</div>
</div>
<div class="bigger">
<Main v-for="(item, index) in logos" :data="item" :key="index"></Main>
<Main v-for="(item, index) in logos" :data="item" :index="index" :key="index"></Main>
</div>
</div>
@ -50,7 +50,6 @@
<img src="@/assets/1x/source14.png">
</el-button>
<!-- <span class="month">{{ date.split(' ').slice(-1).join() }}</span> -->
<span class="month">{{ date }}</span>
<el-button size="small" @click="selectDate('next-month')">
@ -58,13 +57,19 @@
</el-button>
</template>
<template #dateCell="{data}">
<p style="margin:0px" >
{{ data.day.split('-').slice(2).join() }}
<template #dateCell="{ data }">
<p style="margin:0px">
{{ data.day.split('-').slice(2).join() * 1 }}
<div v-for="(i, index) in dayTime" :key="index">
<div v-if="data.day==i" class="yuan"></div>
<!-- <div v-if="data.day == i" class="yuan"></div> -->
<div v-if="i.split('-').slice(2).join() * 1 <= 9">
<div v-if="data.day == i" class="yuan1"></div>
</div>
<div v-else>
<div v-if="data.day == i" class="yuan"></div>
</div>
</div>
</p>
</template>
@ -95,24 +100,26 @@ import { useRouter } from 'vue-router';
import i18n from '@/locales'
import { getCurrentInstance, provide } from 'vue'
import Event from './components/Event.vue';
import { getEventData, getSearchListing ,getDate} from "@/api/reqIpo/ipo";
import { getEventData, getSearchListing, getDate } 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";
import { ipoStore } from "@/stores/ipo"
const { proxy } = (getCurrentInstance() as any)
const reflashRouter = inject('reflashRouter') as Function
const handleOnDrwaer = inject('handleOnDrwaer') as Function
const router = useRouter()
const store = ipoStore()
const selectR = ref();
const dayValue = ref(new Date())
const drawer = ref(false)
const dayValue = ref(store.homeDay)
const selectVisible = ref(false)
onMounted(() => {
store.setMobileActiveShow(1);//设置移动端弹窗高亮
window.onhashchange = function () {
const langHref = window.location.href.split("home")[1]
console.log(window.location.href,langHref);
if (langHref == '?lang=en') {
proxy.$i18n.locale = 'en'
@ -130,15 +137,20 @@ onMounted(() => {
};
getcalendar()
})
const selectVisibleFn = () => {
selectVisible.value = false
}
//过滤
const selectCards = async (res: any) => {
async function demo() {
return new Promise(async (resolve, reject) => {
try {
if (!(res as any).data.length) {
ElMessage.warning(proxy.$t('home.Norelevantselectdata'))
throw ("222")
}
const data = (res as any).data.map((item: any) => {
let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate, tradeCurrency } = item;
return {
@ -186,23 +198,26 @@ const selectCards = async (res: any) => {
logos.value = result as objType[]
}
provide('selectCards', selectCards);
const handleDrawer = (done: () => void) => {
done();
}
const openDrawer = () => {
drawer.value = true;
handleOnDrwaer(true)
}
const handleSelect = () => {
// console.log('@@@', state.value)
if (!state.value) return
getSearchIpoList(state.value)
// provide('state',state.value );
}
watch(dayValue, async (ne, ol) => {
const day = moment(ne).format("YYYY-MM-DD")
store.setHomeDay(day)
const result = await getEventData(day);
setEventdata((result as any).data)
// const result = await getDataFromId('event');
// console.log('@@@@', result);
// setEventdata((result as any))
@ -264,12 +279,12 @@ const Eventdata = ref([
// {
// listPlatform1:"主板",
// logo:"-",
// name: "力高健康生活有限公司",
// name: "力高健康生活有限公司11111111111",
// number: 2380
// }, {
// listPlatform1:"主板",
// logo:"-",
// name: "力高健康生活有限公司",
// name: "力高健康生活有限公司111111111111111111111111111111",
// number: 2381
// }
])
@ -286,7 +301,7 @@ const setEventdata = (EventD: any) => {
})
}
const dayTime = ref()
const getcalendar = async ()=>{
const getcalendar = async () => {
const res = await getDate()
dayTime.value = (res as any).data
console.log(dayTime.value);
@ -294,13 +309,12 @@ const getcalendar = async ()=>{
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,tradeCurrency } = item;
let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate, tradeCurrency } = item;
// ? priceFinal.toFixed(3) : priceMinMax()
return {
logolinks: logoLink,
title: companyEngFull + ";" + companyChiFull,
@ -343,21 +357,25 @@ const getHomeIpoList = async () => {
}
onMounted(async () => {
getHomeIpoList();
var day = moment(Date.now()).format("YYYY-MM-DD")
// var day = moment(Date.now()).format("YYYY-MM-DD")
var day = moment(store.homeDay).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)
// const res = await getSearchListing(keyword)
store.setKeyWord(keyword)
const res = await store.getSearchSelectList()
if (!(res as any).data.length) {
ElMessage.warning(proxy.$t('home.Norelevantselectdata'))
throw ("222")
}
const data = (res as any).data.map((item: any) => {
let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate,tradeCurrency } = item;
let { stkCode, dateTime, status, ipoID, companyEngFull, companyChiFull, priceFinal, logoLink, priceMin, priceMax, listingDate, pricingDate, tradeCurrency } = item;
// console.log(companyEngFull,companyChiFull);
return {
logolinks: logoLink,
@ -414,13 +432,17 @@ onMounted(async () => {
// setEventdata(result);
})
interface objType {
title: string,
number: string,
HKD: string,
number: string,
price: string,
time: string,
trading: string
title: string,
trading: string,
logolinks: string,
status: string,
listingDate: string,
ipoID: number,
tradeCurrency: string
}
const logos = ref<objType[]>([
// {
@ -507,14 +529,16 @@ const lang = ref()
const SearchCupDom = ref()
const handleShowLang = (e: any) => {
e.stopPropagation()
selectR.value.showSelect = false
console.log(111)
// selectR.value.showSelect = false
lang.value.showLang = !lang.value.showLang
selectVisible.value = false
}
const handleShowCup = (e: any) => {
e.stopPropagation()
lang.value.showLang = false;
console.log(111)
selectR.value.showSelect = !selectR.value.showSelect
//console.log(111)
selectVisible.value = !selectVisible.value
}
//路由传参
// const handleclick = (item: any) => {
@ -531,18 +555,15 @@ const handleShowCup = (e: any) => {
onMounted(() => {
document.documentElement.onclick = function () {
store.setMainExpand(-1);
selectVisible.value = false
// 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
})
@ -555,13 +576,13 @@ const showMounth = (date: any) => {
return arr[2] + " " + arr[3]
}
}
function fn(data: any) {
drawer.value = data
function fn(data: boolean) {
console.log('22222')
// drawer.value = data
}
</script>
<style lang="scss" scoped>
.yuan{
.yuan {
width: 12px;
height: 12px;
background-color: #f7be39;
@ -573,15 +594,43 @@ function fn(data: any) {
margin-left: 3px;
border-radius: 10px;
}
.yuan1 {
width: 12px;
height: 12px;
background-color: #f7be39;
position: absolute;
border-radius: 10px;
transform: translateY(11px);
margin-left: -2px;
}
// .login3{
// background-image: url("@/assets/1x/beijingtu.png");
// width: 100%;
// height: 1500px;
// background-size: 100% 100%;
// position: fixed;
// }
.login2 {
background-image: url("@/assets/1x/beijingtu.png");
background-repeat: no-repeat;
background-size: cover;
// background-repeat: no-repeat;
// background-size: cover;
// width: 1900px;
position: fixed;
width: 100%;
height: 100%;
background-size: 100% 100%;
font-family: "Calibri";
@media screen and (max-width: 768px) {
width: 100vw;
overflow-x: hidden;
height: 100vh;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: hidden;
}
}
@ -615,11 +664,16 @@ function fn(data: any) {
align-items: center;
// padding-left: 35px;
height: 80px;
// @media screen and (max-width: 768px) {
// height: 60rem;
// // background-color: red;
// }
//position: fixed;
//background-color: red;
@media screen and (max-width: 768px) {
// position: fixed;
// top: 0;
// left: 0;
// width: 100%;
// background-color: #000000;
position: relative;
}
.menuicon {
display: none;
@ -645,6 +699,7 @@ function fn(data: any) {
.my-autocomplete li .highlighted .addr {
color: #ddd;
}
.dropdown {
position: relative;
@ -718,6 +773,8 @@ function fn(data: any) {
// margin-top: 40px;
display: flex;
flex-wrap: wrap;
height: 90vh;
overflow-y: scroll;
// margin-left: 120px;
// width: 1250px;
@ -725,6 +782,16 @@ function fn(data: any) {
@media screen and (max-width: 768px) {
width: 100vw;
justify-content: center;
overflow-y: scroll;
height: 90vh;
// height: calc(100vh-60'px');
// transform: translateY(60px);
// position: absolute;
// right: 0;
// top: 60px;
// bottom: 0;
// overflow-y: scroll;
//background-color: #e36466;
}
}
@ -737,7 +804,7 @@ function fn(data: any) {
box-sizing: border-box;
// width: 900px;
// height: 100vh;
height: 100%;
height: 100vh;
padding-bottom: 80px;
background-color: #1f4055;
padding-left: 40px;
@ -777,8 +844,11 @@ function fn(data: any) {
.right-bottom1 {
width: 420px;
background-color: #ffffff;
height: 500px;
// height: 350px;
height: 350px;
//height: fit-content;
margin-top: 40px;
// position: relative;
// margin-left: 20px;
// text-align: center;
// line-height: 500px;
@ -786,6 +856,7 @@ function fn(data: any) {
justify-content: center;
align-items: center;
.right-bottom-title1 {
color: #1f4055;
@ -897,6 +968,12 @@ function fn(data: any) {
color: red;
}
// ::-webkit-scrollbar {
// width: 0 !important;
// }
// ::-webkit-scrollbar {
// width: 0 !important;height: 0;
// }
@media screen and (max-width: 768px) {
.left {
width: 100vw;
@ -908,7 +985,7 @@ function fn(data: any) {
.header {
height: 60px;
//background-color: red;
.menuicon {
display: block;
margin-left: 5px;
@ -952,6 +1029,12 @@ function fn(data: any) {
}
</style>
<style>
/* ::-webkit-scrollbar {
width: 0 !important;
}
::-webkit-scrollbar {
width: 0 !important;height: 0;
} */
@media (min-width: 992px) {
.header .el-input__wrapper {
margin-top: 20px;

240
src/views/login/modelComponents/Drawer.vue
View File

@ -1,49 +1,53 @@
<template>
<div class="wrapddd">
<div class="imgWrap22222">
<img src="@/assets/1x/1x/source8.png" alt="menu" >
<img src="@/assets/1x/1x/source8.png" alt="menu">
<h4 v-if="data != null && store.$state.mobileActiveShow != 1">{{ store.$state.locale == 1 ?
data.title.split(";")[0] : data.title.split(";")[1] }}
</h4>
</div>
<div class="nav">
<li :class="state == 1 && 'active'" @click="setState(1)" >
<li :class="store.$state.mobileActiveShow == 1 && 'active'" @click="setState(1)">
<img src="@/assets/1x/source10.png" alt="menu">
<span>{{ $t(i18n.global.t('dashboard.Home')) }}</span>
</li>
<li :class="state == 2 && 'active'" @click="setState(2)">
<li :class="store.$state.mobileActiveShow == 2 && 'active'" @click="setState(2)">
<img src="@/assets/1x/source5.png" alt="menu">
<span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
</li>
<li :class="state == 3 && 'active'" class="IPO" @click="setState(3)">
<div class="ipoWrap">
<li :class="store.$state.mobileActiveShow == 3 && 'active'" @click="setState(3)">
<!-- <div class="ipoWrap">
<div>
</div>
</div> -->
<img src="@/assets/1x/source2.png" alt="menu">
<span >{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</span>
</div>
<!-- <div class="arrow" :style="{ transform: state == 3 ? 'rotateZ(90deg)' : 'rotateZ(-90deg)' }">
<img src="@/assets/1x/source11.png" alt="" class="icon">
</div> -->
</div>
<!-- <div class="report" v-if="state == 3">
<span>report</span>
<img src="@/assets/1x/source3.png" alt="">
</div> -->
<span>{{ $t(i18n.global.t('dashboard.IPOReferenceData')) }}</span>
</li>
<li :class="state == 4 && 'active'" @click="setState(4)">
<li :class="store.$state.mobileActiveShow == 4 && 'active'" @click="setState(4)">
<img src="@/assets/1x/source6.png" alt="menu">
<span>{{ $t(i18n.global.t('home.IPOcalendar')) }}</span>
</li>
<li :class="state == 5 && 'active'" @click="setState(5)" class="IPO">
<li :class="store.$state.mobileActiveShow == 5 && 'active'" @click="setState2(5)" class="IPO">
<div class="ipoWrap">
<div>
<div class="icon">
<img src="@/assets/1x/1x/source6.png" alt="menu">
<span>{{ $t(i18n.global.t('home.Languages')) }}</span>
</div>
<div class="arrow" :style="{ transform: state == 5 ? 'rotateZ(90deg)' : 'rotateZ(-90deg)' }">
<img src="@/assets/1x/source11.png" alt="">
<div class="arrow" :style="{
transform: store.$state.mobileActiveShow == 5 && showalanguge ? 'rotateZ(90deg)' : 'rotateZ(-90deg)', marginRight: store.$state.mobileActiveShow == 5 && showalanguge ? '10px' : '28px'
}
">
<img src="@/assets/1x/source14.png" alt="">
</div>
</div>
<div class="lang" v-if="state == 5" >
<div class="lang" v-if="store.$state.mobileActiveShow == 5 && showalanguge">
<li @click="handleLang1">English</li>
<li @click="handleLang2">繁體中文</li>
<li @click="handleLang3">简体中文</li>
@ -52,6 +56,8 @@
</div>
</div>
</template>
<script lang="ts">
@ -61,45 +67,114 @@ export default {
</script>
<script lang="ts" setup>
import { ref } from "vue"
import { getCurrentInstance, onUnmounted,inject } from 'vue'
import { inject } from 'vue'
import { ipoStore } from "@/stores/ipo"
import { useRouter } from "vue-router";
//import calendar from '@/views/IpoCalendar/index.vue'
import { ElMessageBox } from 'element-plus'
import { ref, onMounted, onUnmounted, watch } from 'vue';
import moment from "moment"
import i18n from '@/locales'
const route=useRouter()
const store = ipoStore()
import { getCurrentInstance } from 'vue'
import Event from '@/views/login/components/Event.vue';
import { getEventData, getSearchListing, getDate } from "@/api/reqIpo/ipo";
import { getDataFromId } from "@/api/mock/home"
const { proxy } = (getCurrentInstance() as any)
let emit = defineEmits(['childfn'])
const reflashRouter=inject('reflashRouter') as Function
const IpoReflash=()=>{
if(route.options.history.location=="/IPO"||route.options.history.location=="/home"){
reflashRouter()
const dayValue = ref(new Date())
const calendar = ref()
const handleDrawer = (done: () => void) => {
done();
}
//const Eventdata = ref([])
const selectDate = (val: string) => {
calendar.value.selectDate(val)
}
const dayTime = ref()
const getcalendar = async () => {
const res = await getDate()
dayTime.value = (res as any).data
console.log(dayTime.value);
}
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]
}
}
const props = defineProps({
drawer:Boolean
})
const drawer2 = ref(false)
const radio1 = ref('Option 1')
const handleClose = (done: () => void) => {
done()
}
//const drawer1 = ref(false)
const setState = (number: number) => {
store.setMobileActiveShow(number)
if (number == 1) {
proxy.$router.push("/home")
}
if (number == 2) {
proxy.$router.push("/dashboard")
}
if (number == 3) {
proxy.$router.push("/IPO")
}
if (number == 4) {
proxy.$router.push("/IPOcalendar")
store.setMobileActiveShow(1)
// emit('childfn', !drawer1)
// emit('childfn', !drawer)
// drawer1.value = true
// console.log(drawer1.value);
}
setTimeout(() => {
handleOnDrwaer(false)
})
}
//console.log(drawer1.value);
const dialogVisible = ref(true)
const route = useRouter()
const store = ipoStore()
const showalanguge = ref(false)
//const { proxy } = (getCurrentInstance() as any)
let emit = defineEmits(['childfn'])
//let emit1 = defineEmits(['childfn1'])
const reflashRouter = inject('reflashRouter') as Function
const handleOnDrwaer = inject('handleOnDrwaer') as Function
const props = defineProps({
drawer: Boolean,
drawer1:Boolean
})
const data = ref()
onMounted(
() => {
// data.value = JSON.parse(localStorage.getItem('itemData') as string)
const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
data.value = obj
// console.log(data.value);
// text();
}
)
let drawer = props.drawer
console.log(props);
let drawer1 = props.drawer1
//console.log(props);
const state = ref(1)
// const drawer = ref(true)
const setState = (number: number) => {
state.value = number;
if(number == 1){
proxy.$router.push("/home")
}
if(number == 2){
proxy.$router.push("/dashboard")
}
if(number == 3){
proxy.$router.push("/IPO")
}
if(number == 4){
proxy.$router.push("/IPOcalendar")
}
const setState2 = (number: number) => {
store.setMobileActiveShow(number)
showalanguge.value = !showalanguge.value
}
const handleLang1 = () => {
@ -107,26 +182,26 @@ const handleLang1 = () => {
proxy.$i18n.locale = 'en'
}
store.setLocale(1)
emit('childfn',!drawer)
IpoReflash()
emit('childfn', !drawer)
// IpoReflash()
}
const handleLang2 = () => {
if (proxy.$i18n.locale = 'zhCt') {
proxy.$i18n.locale = 'zhCt'
IpoReflash()
// IpoReflash()
}
store.setLocale(2)
emit('childfn',!drawer)
IpoReflash()
emit('childfn', !drawer)
/// IpoReflash()
}
const handleLang3 = () => {
if (proxy.$i18n.locale = 'zhCn') {
proxy.$i18n.locale = 'zhCn'
}
store.setLocale(3)
emit('childfn',!drawer)
IpoReflash()
emit('childfn', !drawer)
// IpoReflash()
}
</script>
@ -137,14 +212,27 @@ const handleLang3 = () => {
transform: translateX(-20px);
display: flex;
flex-direction: column;
.imgWrap22222 {
margin-top: 20px;
width: 25px;
width: fit-content;
height: 20px;
margin-left: 15px;
display: flex;
justify-content: center;
align-items: center;
// background-color: black;
img {
width: 100%;
height: 100%;
width: 25px;
height: 20px;
}
h4 {
font-size: 18px;
margin-left: 10px;
color: #fff;
font-weight: 400;
}
}
@ -169,6 +257,7 @@ const handleLang3 = () => {
img {
width: 22px;
height: 22px;
// background-color: red;
}
span {
@ -176,6 +265,9 @@ const handleLang3 = () => {
font-size: 20px;
font-weight: 700;
color: #1C3F56;
display: block;
line-height: 50px;
padding-top: 6px;
}
}
@ -208,6 +300,30 @@ const handleLang3 = () => {
align-items: center;
width: 100%;
.icon {
min-height: 50px;
display: flex;
align-items: center;
justify-self: center;
img {
width: 22px;
height: 22px;
}
span {
margin-left: 25px;
font-size: 20px;
font-weight: 700;
color: #1C3F56;
display: block;
line-height: 50px;
padding: 0;
vertical-align: bottom;
}
}
.arrow {
width: 12px;
height: 19px;
@ -223,7 +339,7 @@ const handleLang3 = () => {
span {
display: inline-block;
transform: translateY(-3px);
// transform: translateY(-3px);
}
@ -231,4 +347,10 @@ const handleLang3 = () => {
}
}
</style>
<style>
/* .el-drawer__body{
padding: 0
} */
</style>

2
vite.config.ts
View File

@ -61,7 +61,7 @@ export default defineConfig((mode: ConfigEnv) => {
// 配置代理服务器
proxy: {
"/api": {
target: "http://192.168.2.86:8888",
target: "http://127.0.0.1:8080",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},