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

1

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