1

package-lock.json

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

src/api/reqIpo/ipo.ts

@@ -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}`);
 };

src/locales/en.ts

@@ -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',

src/locales/zh-cn.ts

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

src/locales/zh-ct.ts

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

src/views/IPO/components/IpoHeader.vue

@@ -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){
@@ -79,7 +123,7 @@ const openDrawer = () => {
               transform: translateX(-60rem);
             }
         }
-
+        
         .search {
             margin-top: 5px;
             background-color: #fff;

src/views/dashBoard/Header/index.vue

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

src/views/dashBoard/index.vue

@@ -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 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;
+//   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)
+      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，单独设置样式
-      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,
       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: 'bar',
+        type: 'line',
-        // data: [5, 20, 36, 10, 10, 20],
+        data: PublicOfferZ1.value,
-        data:PublicOfferY.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 {

src/views/login/components/Event.vue

@@ -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={

src/views/login/index.vue

@@ -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;