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",
"moment": "^2.29.1",
"rc-field-form": "^1.22.0",
"react-color": "2.17.1"
"react-color": "2.17.1",
"reflect-metadata": "^0.1.13"
},
"dependencies": {
"react-color": {

View File

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

View File

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

View File

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

View File

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

View File

@ -15,6 +15,10 @@
<div class="search" @click="handlesearch">
<img src="@/assets/1x/1x/source2.png" alt="找不到图片">
</div>
<div class="langWrap">
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
<Lang ref="lang" class="lang"/>
</div>
</div>
<!-- <div class="downLoad">
<div class="report">{{ $t(i18n.global.t('ipo.report')) }}</div>
@ -31,9 +35,11 @@ export default {
<script lang="ts" setup>
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import { getCurrentInstance ,onMounted,onUnmounted} from 'vue'
import Drawer from '@/views/login/modelComponents/Drawer.vue'
import { ref } from 'vue'
import Lang from "@/views/login/components/Lang.vue";
const lang = ref()
const drawer = ref(false)
const { proxy } = (getCurrentInstance() as any)
const handlesearch = ()=>{
@ -45,9 +51,46 @@ const handleDrawer = (done: () => void) => {
const openDrawer = () => {
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>
<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 {
display: flex;
justify-content: space-between;
@ -63,6 +106,7 @@ const openDrawer = () => {
display: flex;
justify-content: space-between;
width: fit-content;
position: relative;
.menu{
display: none;
@media screen and (max-width: 768px){

View File

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

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 {

View File

@ -52,22 +52,6 @@ interface obj {
}
const store = ipoStore();
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)=>{
var str=""
var obj={

View File

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