This commit is contained in:
zzy 2023-04-13 18:03:12 +08:00
parent f213f3e72f
commit e81baabd55
11 changed files with 181 additions and 88 deletions

BIN
dist.zip

Binary file not shown.

3
package-lock.json generated
View File

@ -12039,7 +12039,8 @@
"mana-syringe": "^0.2.2", "mana-syringe": "^0.2.2",
"moment": "^2.29.1", "moment": "^2.29.1",
"rc-field-form": "^1.22.0", "rc-field-form": "^1.22.0",
"react-color": "2.17.1" "react-color": "2.17.1",
"reflect-metadata": "^0.1.13"
}, },
"dependencies": { "dependencies": {
"react-color": { "react-color": {

View File

@ -16,7 +16,7 @@ enum Api {
export const getIpo = (ipoID:string) => { export const getIpo = (ipoID:string) => {
return request.get<any, null>(Api.addReferenceUrl+`?ipoID=${ipoID}`); return request.get<any, null>(Api.addReferenceUrl+`?ipoID=${ipoID}`);
}; };
//获取ipo首页数据 //listv1
export const getHomeIpo = (size:number) => { export const getHomeIpo = (size:number) => {
return request.get<any, null>(Api.addhomelist1+`?size=${size}`); return request.get<any, null>(Api.addhomelist1+`?size=${size}`);
}; };

View File

@ -18,7 +18,8 @@ export default {
Cancelled:'Cancelled', Cancelled:'Cancelled',
Mainboard:'Main board', Mainboard:'Main board',
GEM:'GEM', GEM:'GEM',
new:'New' new:'New',
}, },
dashboard:{ dashboard:{
Home:'Home', Home:'Home',
@ -41,7 +42,9 @@ export default {
Institutional:'Institutional', Institutional:'Institutional',
TotalOfferShares:'Total Offer Shares', TotalOfferShares:'Total Offer Shares',
FinalAllocation:'Final Allocation', FinalAllocation:'Final Allocation',
Listingdate:'Listing date' Listingdate:'Listing date',
QuantityMillion:'Quantity (Million)',
Ratio:'Ratio'
}, },
ipo:{ ipo:{
report:'Report', report:'Report',

View File

@ -41,7 +41,9 @@ export default {
Institutional:'机构', Institutional:'机构',
TotalOfferShares:'总发售股份', TotalOfferShares:'总发售股份',
FinalAllocation:'最后配额分配', FinalAllocation:'最后配额分配',
Listingdate:'上市日期' Listingdate:'上市日期',
QuantityMillion:'数量(百万)',
Ratio:'比率'
}, },
ipo:{ ipo:{
report:'报告', report:'报告',

View File

@ -41,7 +41,9 @@ export default {
Institutional:'機構', Institutional:'機構',
TotalOfferShares:'總發售股份', TotalOfferShares:'總發售股份',
FinalAllocation:'最後配額分配', FinalAllocation:'最後配額分配',
Listingdate:'上市日期' Listingdate:'上市日期',
QuantityMillion:'數量(百萬)',
Ratio:'比率'
}, },
ipo:{ ipo:{
report:'報告', report:'報告',

View File

@ -15,6 +15,10 @@
<div class="search" @click="handlesearch"> <div class="search" @click="handlesearch">
<img src="@/assets/1x/1x/source2.png" alt="找不到图片"> <img src="@/assets/1x/1x/source2.png" alt="找不到图片">
</div> </div>
<div class="langWrap">
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
<Lang ref="lang" class="lang"/>
</div>
</div> </div>
<!-- <div class="downLoad"> <!-- <div class="downLoad">
<div class="report">{{ $t(i18n.global.t('ipo.report')) }}</div> <div class="report">{{ $t(i18n.global.t('ipo.report')) }}</div>
@ -31,9 +35,11 @@ export default {
<script lang="ts" setup> <script lang="ts" setup>
import i18n from '@/locales' import i18n from '@/locales'
import { getCurrentInstance } from 'vue' import { getCurrentInstance ,onMounted,onUnmounted} from 'vue'
import Drawer from '@/views/login/modelComponents/Drawer.vue' import Drawer from '@/views/login/modelComponents/Drawer.vue'
import { ref } from 'vue' import { ref } from 'vue'
import Lang from "@/views/login/components/Lang.vue";
const lang = ref()
const drawer = ref(false) const drawer = ref(false)
const { proxy } = (getCurrentInstance() as any) const { proxy } = (getCurrentInstance() as any)
const handlesearch = ()=>{ const handlesearch = ()=>{
@ -45,9 +51,46 @@ const handleDrawer = (done: () => void) => {
const openDrawer = () => { const openDrawer = () => {
drawer.value = true; drawer.value = true;
} }
const handleShowLang=(e:any)=>{
console.log(1111)
e.stopPropagation()
lang.value.showLang = !lang.value.showLang
}
onMounted(() => {
document.documentElement.onclick = function () {
if (!lang.value.showLang) return
lang.value.showLang = false
}
})
onUnmounted(() => {
document.documentElement.onclick = null
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.langWrap{
// position: absolute;
// // top:-20px;
// left: 260px;
// display: flex;
// align-items: end;
position: relative;
margin-left: 15px;
.second {
width: 32px;
height: 36px;
margin-top: 4px;
&:hover {
transform: scale(1.2);
}
}
}
.lang{
position: absolute;
top:50px;
left: -50px;
}
.headerWrap { .headerWrap {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -63,6 +106,7 @@ const openDrawer = () => {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: fit-content; width: fit-content;
position: relative;
.menu{ .menu{
display: none; display: none;
@media screen and (max-width: 768px){ @media screen and (max-width: 768px){

View File

@ -90,7 +90,7 @@ const openDrawer = () => {
width: 32px; width: 32px;
height: 36px; height: 36px;
margin-top: 4px;
&:hover { &:hover {
transform: scale(1.2); transform: scale(1.2);
} }

View File

@ -103,6 +103,7 @@
<div class="pulic2"> <div class="pulic2">
<div class="public-left2"> <div class="public-left2">
<p class="yuan-title">{{ $t(i18n.global.t('dashboard.TotalOfferShares')) }}</p> <p class="yuan-title">{{ $t(i18n.global.t('dashboard.TotalOfferShares')) }}</p>
</div> </div>
<p class="yuan-title1">{{ code66?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p> <p class="yuan-title1">{{ code66?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
</div> </div>
@ -115,14 +116,22 @@
<div class="pulic"> <div class="pulic">
<div class="public-left"> <div class="public-left">
<p class="yuan8"></p> <p class="yuan8"></p>
<p class="yuan-title">{{ $t(i18n.global.t('dashboard.Public')) }}</p> <p class="yuan-title">
<span class="desmidle">{{ $t(i18n.global.t('dashboard.Public')) }}</span>
<span class="persent">{{ FinalAllocationPublic }}</span>
</p>
</div> </div>
<p class="yuan-title3-1">{{ finalpublic?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p> <p class="yuan-title3-1">{{ finalpublic?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
</div> </div>
<div class="pulic1"> <div class="pulic1">
<div class="public-left1"> <div class="public-left1">
<p class="yuan9"></p> <p class="yuan9"></p>
<p class="yuan-title">{{ $t(i18n.global.t('dashboard.Institutional')) }}</p> <p class="yuan-title">
<span class="desmidle">{{ $t(i18n.global.t('dashboard.Institutional')) }}</span>
<span class="persent">{{ FinalAllocationInstitutional }}</span>
</p>
</div> </div>
<p class="yuan-title2-1">{{ finalinstitutional?.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p> <p class="yuan-title2-1">{{ finalinstitutional?.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
</div> </div>
@ -181,7 +190,7 @@ onMounted(
}, },
) )
const ApplicationQuantity = ref('') const ApplicationQuantity = ref('')
const subscriptionRatio = ref('') const subscriptionRatio = ref()
const code33 = ref('') const code33 = ref('')
const initialinstituational = ref('') const initialinstituational = ref('')
const code44 = ref('') const code44 = ref('')
@ -208,28 +217,55 @@ const LineData = reactive({
lines: [] as lineObje[], lines: [] as lineObje[],
ids: [] as any ids: [] as any
}) })
const PublicOfferX1=ref<string[]>([])
const PublicOfferY1=ref<string[]>([])
const PublicOfferZ1=ref<string[]>([])
const PublicOfferX=ref<string[]>([]) const PublicOfferX=ref<string[]>([])
const PublicOfferY=ref<string[]>([]) const PublicOfferY=ref<string[]>([])
const InitialAllocationPublic=ref('') const InitialAllocationPublic=ref('')
const FinalAllocationPublic=ref('')
const InitialAllocationInstitutional=ref('') const InitialAllocationInstitutional=ref('')
const setBarRight=async ()=>{ const FinalAllocationInstitutional = ref('')
const result= await getDataFromId('bar') // const setBarRight=async ()=>{
const ipoID='00314'; // const result= await getDataFromId('bar')
const index=result.findIndex((item:any)=>item.ipoID==ipoID); // const ipoID='00314';
const graph=result[index].graph; // const index=result.findIndex((item:any)=>item.ipoID==ipoID);
PublicOfferX.value=graph.map((item:any)=>{ // const graph=result[index].graph;
return moment(item.dateTime).format('MM-DD') // PublicOfferX.value=graph.map((item:any)=>{
// return moment(item.dateTime).format('MM-DD')
// })
// PublicOfferY.value=graph.map((item:any)=>{
// return item.poApplicationQuantity;
// });
// const amount=Number(initialpublic.value)+Number(initialinstituational.value);
// InitialAllocationPublic.value=Math.round(Number(initialpublic.value) / amount * 10000) / 100 + "%";
// InitialAllocationInstitutional.value=Math.round(Number(initialinstituational.value) / amount * 10000) / 100 + "%";
// init();
// }
const setBar = async()=>{
const ipoID = localStorage.getItem('ipoID')
const result = await getIpo(ipoID as string)
PublicOfferX1.value = (result as any).data[0].graph.map((item:any)=>{
return moment(item.dateTime).format('MM/DD')
}) })
PublicOfferY.value=graph.map((item:any)=>{ PublicOfferY1.value=(result as any).data[0].graph.map((item:any)=>{
return item.poApplicationQuantity; return item.poApplicationQuantity/1000000;
}); });
PublicOfferZ1.value = (result as any).data[0].graph.map((item:any)=>{
return (item.poApplicationQuantity)/item.poSharesInitial;
});
const amount=Number(initialpublic.value)+Number(initialinstituational.value); const amount=Number(initialpublic.value)+Number(initialinstituational.value);
InitialAllocationPublic.value=Math.round(Number(initialpublic.value) / amount * 10000) / 100 + "%"; InitialAllocationPublic.value=Math.round(Number(initialpublic.value) / amount * 10000) / 100 + "%";
InitialAllocationInstitutional.value=Math.round(Number(initialinstituational.value) / amount * 10000) / 100 + "%"; InitialAllocationInstitutional.value=Math.round(Number(initialinstituational.value) / amount * 10000) / 100 + "%";
init(); init();
} }
onMounted(()=>{ onMounted(()=>{
setBarRight(); //setBarRight();//bar
setBar()//
}) })
const getdatatime = async () => { const getdatatime = async () => {
const res = await getHomeIpo(1) const res = await getHomeIpo(1)
@ -256,13 +292,12 @@ const getreferencedata = async () => {
calendarAddData(allotmentDate, allotmentDate, '#9bc3f1') calendarAddData(allotmentDate, allotmentDate, '#9bc3f1')
calendarAddData(startDate.value, endDate.value, '#65FABF') calendarAddData(startDate.value, endDate.value, '#65FABF')
calendarAddData(siInputDate, siInputDate, '#bd99dc') calendarAddData(siInputDate, siInputDate, '#bd99dc')
// console.log(siInputDate);
calendarAddData(listingDate, listingDate, '#38b126') calendarAddData(listingDate, listingDate, '#38b126')
calendarAddLine() calendarAddLine()
initialpublic.value = res.poSharesInitial initialpublic.value = res.poSharesInitial
ApplicationQuantity.value = res.poApplicationQuantity ApplicationQuantity.value = res.poApplicationQuantity
subscriptionRatio.value = res.poOversubscriptionRatio subscriptionRatio.value= res.poApplicationQuantity/res.poSharesInitial
subscriptionRatio.value = subscriptionRatio.value.toFixed(1)
initialinstituational.value = res.ioSharesInitial initialinstituational.value = res.ioSharesInitial
// console.log('initialinstituational', (res as any).data[0].poSharesInitial); // console.log('initialinstituational', (res as any).data[0].poSharesInitial);
code44.value = res.poSharesFinal code44.value = res.poSharesFinal
@ -270,8 +305,9 @@ const getreferencedata = async () => {
code66.value = Number(initialinstituational.value) + Number(initialpublic.value) code66.value = Number(initialinstituational.value) + Number(initialpublic.value)
finalpublic.value = res.poSharesFinal finalpublic.value = res.poSharesFinal
code99.value = Number(finalpublic.value) + Number(finalinstitutional.value) code99.value = Number(finalpublic.value) + Number(finalinstitutional.value)
FinalAllocationPublic.value=Math.round(Number(finalpublic.value) / code99.value * 10000) / 100 + "%";
FinalAllocationInstitutional.value=Math.round(Number(finalinstitutional.value) / code99.value * 10000) / 100 + "%";
quantity.value = res.overallIpoShares quantity.value = res.overallIpoShares
ratio.value = res.poOversubscriptionRatio
init1() init1()
init2() init2()
} }
@ -333,18 +369,18 @@ function calendarAddLine() {
console.log('Arr', Arr)//dom:div.el-calendar-day console.log('Arr', Arr)//dom:div.el-calendar-day
Arr.forEach((item: any) => { Arr.forEach((item: any) => {
if (item.length) { if (item.length) {
// console.log(item[0].dom.children[1], item.length) console.log(item[0].dom.children[1], item.length)
// item[0].dom.children[1].style.marginLeft = "23px"// item[0].dom.children[1].style.marginLeft = "23px"//
// item[0].dom.children[1].style.width = "42px" item[0].dom.children[1].style.width = "42px"
// item[0].dom.children[1].style.borderRadius = "10px 0px 0px 10px"; item[0].dom.children[1].style.borderRadius = "10px 0px 0px 10px";
// item[item.length - 1].dom.children[1].style.width = "42px"// item[item.length - 1].dom.children[1].style.width = "42px"//
// item[item.length - 1].dom.children[1].style.borderRadius = "0px 20px 20px 0px"; item[item.length - 1].dom.children[1].style.borderRadius = "0px 20px 20px 0px";
} }
if (item.length == 1) {//1 if (item.length == 1) {//1
console.log('item',item) // console.log('item',item)
// item[0].dom.children[1].style.marginLeft = "11px" item[0].dom.children[1].style.marginLeft = "11px"
// item[0].dom.children[1].style.width = "42px" item[0].dom.children[1].style.width = "42px"
// item[0].dom.children[1].style.borderRadius = "10px"; item[0].dom.children[1].style.borderRadius = "10px";
} }
}) })
@ -361,19 +397,24 @@ function init() {
x2: 60, x2: 60,
y2: 200 y2: 200
}, },
tooltip: {}, tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: { xAxis: {
// data: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'], // data: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'],
data:PublicOfferX.value data:PublicOfferX1.value
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
max: 1000000, max: 9,
min: 0, min: 0,
splitNumber: 9, splitNumber: 9,
boundaryGap: [0.2, 0.2], boundaryGap: [0.2, 0.2],
name: 'Quantity (Million)', name: proxy.$t('dashboard.QuantityMillion'),
lineStyle: { lineStyle: {
width: 1, width: 1,
type: 'solid', type: 'solid',
@ -381,41 +422,48 @@ function init() {
}, },
{ {
type: 'value', type: 'value',
name: 'Ratio(x)', name: proxy.$t('dashboard.Ratio'),
min: 0, min: 0,
max: 1.8, max: 1.8,
splitNumber: 9 splitNumber: 9,
alignTicks: true,
} }
], ],
series: [ series: [
{ {
name: 'Ratio(x)', name: proxy.$t('dashboard.Ratio'),
type: 'line',
data: PublicOfferZ1.value,
// data:PublicOfferY.value,
// markLine:{
// symbol:['none','none'],
// label:{
// show:false
// },
// itemStyle:{
// normal:{
// lineStyle:{
// type:'solid',
// color:'#ee3238'
// }
// }
// },
// data:[{
// yAxis:9
// }]
// }
},
{
name:proxy.$t('dashboard.QuantityMillion'),
type:'bar', type:'bar',
// data: [5, 20, 36, 10, 10, 20], data:PublicOfferY1.value,
data:PublicOfferY.value,
barWidth: '40%', barWidth: '40%',
itemStyle: { itemStyle: {
color: '#f6caae' color: '#f6caae'
}, },
markLine:{
symbol:['none','none'],
label:{
show:false
},
itemStyle:{
normal:{
lineStyle:{
type:'solid',
color:'#ee3238'
}
}
},
data:[{
yAxis:9
}]
}
} }
] ]
}; };
@ -706,6 +754,9 @@ const showMounth = (date: any) => {
color: #5c6063; color: #5c6063;
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
display: flex;
flex-direction: row-reverse;
// background-color: #20b109;
} }
.yuan-title3-1 { .yuan-title3-1 {
margin-left: 52px; margin-left: 52px;
@ -714,10 +765,13 @@ const showMounth = (date: any) => {
font-weight: 400; font-weight: 400;
} }
.yuan-title2 { .yuan-title2 {
margin-left: 45px; margin-left: 31px;
color: #5c6063; color: #5c6063;
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
display: flex;
flex-direction: row-reverse;
// background-color: #20b109;
} }
.yuan-title2-1 { .yuan-title2-1 {
margin-left: 53px; margin-left: 53px;
@ -726,10 +780,13 @@ const showMounth = (date: any) => {
font-weight: 400; font-weight: 400;
} }
.yuan-title1 { .yuan-title1 {
margin-left: 15px; margin-left: 55px;
color: #516c7e; color: #516c7e;
font-weight: bold; font-weight: bold;
font-size: 25px; font-size: 25px;
display: flex;
flex-direction: row-reverse;
// background-color: #20b109;
} }
.yuan2 { .yuan2 {

View File

@ -52,22 +52,6 @@ interface obj {
} }
const store = ipoStore(); const store = ipoStore();
const data = defineProps<{ data: obj[] }>() const data = defineProps<{ data: obj[] }>()
// var obj = {
// 1: proxy.$t('home.Mainboard'),
// 2: proxy.$t('home.GEM')
// }
// data.data.forEach(function(item){
// if (isValidKey(item.listPlatform1, obj)) {
// item.listPlatform1 = obj[item.listPlatform1]
// }
// })
// function isValidKey(
// key: string | number | symbol,
// object: object
// ): key is keyof typeof object {
// return key in object;
// }
const platformTo=(listPlatform1:string)=>{ const platformTo=(listPlatform1:string)=>{
var str="" var str=""
var obj={ var obj={

View File

@ -817,7 +817,10 @@ const showMounth = (date: any) => {
:deep(.el-calendar-table td.is-selected) { :deep(.el-calendar-table td.is-selected) {
background-color: #e8ebee; background-color: #e8ebee;
} }
:deep(.el-calendar-table td.is-today .el-calendar-day) {
color: black ;
background-color: #e36466;
}
:deep(.el-calendar-table td.is-selected .el-calendar-day) { :deep(.el-calendar-table td.is-selected .el-calendar-day) {
// background-color: #e36466; // background-color: #e36466;
border: 5px solid #e36466; border: 5px solid #e36466;
@ -827,10 +830,7 @@ const showMounth = (date: any) => {
color: black; color: black;
} }
:deep(.el-calendar-table td.is-today .el-calendar-day) {
color: black;
background-color: #e36466;
}
:deep(.is-selected) { :deep(.is-selected) {
color: red; color: red;