FINI
/
FINI_UI
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip
View File

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": {

2
src/api/reqIpo/ipo.ts
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}`);
};

7
src/locales/en.ts
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',

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

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

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

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

46
src/views/IPO/components/IpoHeader.vue
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){

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

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

167
src/views/dashBoard/index.vue
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')
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')
})
PublicOfferY.value=graph.map((item:any)=>{
return item.poApplicationQuantity;
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)',
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: [5, 20, 36, 10, 10, 20],
data:PublicOfferY.value,
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 {

16
src/views/login/components/Event.vue
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={

10
src/views/login/index.vue
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;