柱状图

package-lock.json

@@ -12039,8 +12039,7 @@
         "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/views/dashBoard/Header/index.vue

@@ -9,12 +9,18 @@
                 <div class="menu">
                     <img src="@/assets/1x/1x/source5.png" alt="menu" class="menuicon" @click="openDrawer">
                 </div>
-            <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
+             <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
             </div>
             
             <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="right">
             <li class="time">{{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ props.time }}</li>
@@ -35,11 +41,28 @@ export default {
 <script lang="ts" setup>
 import { ref } from 'vue'
 import i18n from '@/locales'
-import { getCurrentInstance } from 'vue'
+import { getCurrentInstance,onMounted,onUnmounted} from 'vue'
 import Drawer from '@/views/login/modelComponents/Drawer.vue'
+import Lang from "@/views/login/components/Lang.vue";
+import { conforms } from 'lodash';
 const { proxy } = (getCurrentInstance() as any)
 const value = ref(true)
 const drawer = ref(false)
+const lang = ref()
+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
+})
 const props = defineProps({
     time: [String, Number]
 })
@@ -55,6 +78,30 @@ const openDrawer = () => {
 </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;
+
+            &:hover {
+                transform: scale(1.2);
+            }
+        }
+    }
+    .lang{
+        position: absolute;
+        top:50px;
+        left: -50px;
+    }
+ 
 .headerWrap {
     display: flex;
     justify-content: space-between;
@@ -71,6 +118,7 @@ const openDrawer = () => {
     }
     .left {
         display: flex;
+        position: relative;
         @media screen and (max-width: 768px){
             justify-content: space-between;
             width: 100vw;

src/views/dashBoard/index.vue

@@ -4,10 +4,7 @@
       <div class="leftbox">
         <Item :data="data" />
         <Nav />
-        <div class="langWrap">
+     
-          <img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
-          <Lang  ref="lang" />
-        </div>
       </div>
       <div class="rightbox">
         <Header :time="datatime" />
@@ -83,14 +80,23 @@
               <div class="pulic">
                 <div class="public-left">
                   <p class="yuan1"></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">{{ InitialAllocationPublic }}</span>
+                  </p>
                 </div>
+              
                 <p class="yuan-title3">{{ initialpublic?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
               </div>
               <div class="pulic1">
                 <div class="public-left1">
                   <p class="yuan2"></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">{{ InitialAllocationInstitutional }}</span>
+                  </p>
                 </div>
                 <p class="yuan-title2">{{ initialinstituational?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
               </div>
@@ -153,7 +159,8 @@ import moment from 'moment';
 import i18n from '@/locales'
 import { ipoStore } from "@/stores/ipo"
 import { getCurrentInstance,onUnmounted} from 'vue'
-import Lang from "@/views/login/components/Lang.vue";
+
+import {getDataFromId} from "@/api/mock/home";
 const { proxy } = (getCurrentInstance() as any)
 // console.log('getCurrentInstance()中的proxy:', proxy)
 const store = ipoStore()
@@ -161,11 +168,11 @@ const main = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
 const main1 = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value
 const main2 = ref();
 const route = useRoute()
-const lang = ref()
+
 var daysAndDom = [];
 onMounted(
   () => {
-    init()
+
     const obj = JSON.parse(localStorage.getItem('itemData') as string);
       // obj.logolinks="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png";
     data.value=obj;
@@ -201,43 +208,74 @@ const LineData = reactive({
   lines: [] as lineObje[],
   ids: [] as any
 })
+const PublicOfferX=ref<string[]>([])
+const PublicOfferY=ref<string[]>([])
+const InitialAllocationPublic=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 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();
+})
 const getdatatime = async () => {
   const res = await getHomeIpo(1)
   const time = (res as any).data[0].dateTime
   datatime.value = moment(time).format('YYYY-MM-DD HH:mm')
 }
 const getreferencedata = async () => {
+  //---mock测试接口
+  // const result1=await getDataFromId('bar');
+  // const res=result1[0];
+  //---mock测试接口结束
+
   const ipoID = localStorage.getItem('ipoID')
-  console.log(ipoID);
+  const result = await getIpo(ipoID as string)
-  const res = await getIpo(ipoID as string)
+  const res=(result as any).data[0];
-  console.log(res);
+  // console.log(res);
-  const { bookOpenDate, bookCloseDate, allotmentDate,siInputDate,listingDate } = (res as any).data[0];
+  const { bookOpenDate, bookCloseDate, allotmentDate,siInputDate,listingDate } = res;
+
+  
   startDate.value = bookOpenDate;
   endDate.value = bookCloseDate
-  console.log('$$', allotmentDate, allotmentDate)
+  // console.log('$$', allotmentDate, allotmentDate)
-  console.log('$$', startDate.value, endDate.value)
+  // console.log('$$', startDate.value, endDate.value)
   calendarAddData(allotmentDate, allotmentDate, '#9bc3f1')
   calendarAddData(startDate.value, endDate.value, '#65FABF')
   calendarAddData(siInputDate, siInputDate, '#bd99dc')
-  console.log(siInputDate);
+  // console.log(siInputDate);
   
   calendarAddData(listingDate, listingDate, '#38b126')
   calendarAddLine()
-  initialpublic.value = (res as any).data[0].poSharesInitial
+  initialpublic.value = res.poSharesInitial
-  ApplicationQuantity.value = (res as any).data[0].poApplicationQuantity
+  ApplicationQuantity.value = res.poApplicationQuantity
-  subscriptionRatio.value = (res as any).data[0].poOversubscriptionRatio
+  subscriptionRatio.value = res.poOversubscriptionRatio
-  initialinstituational.value = (res as any).data[0].ioSharesInitial
+  initialinstituational.value = res.ioSharesInitial
   // console.log('initialinstituational', (res as any).data[0].poSharesInitial);
-  code44.value = (res as any).data[0].poSharesFinal
+  code44.value = res.poSharesFinal
-  finalinstitutional.value = (res as any).data[0].ioOfferSharesFinal
+  finalinstitutional.value = res.ioOfferSharesFinal
   code66.value = Number(initialinstituational.value) + Number(initialpublic.value)
-  finalpublic.value = (res as any).data[0].poSharesFinal
+  finalpublic.value = res.poSharesFinal
   code99.value = Number(finalpublic.value) + Number(finalinstitutional.value)
-  quantity.value = (res as any).data[0].overallIpoShares
+  quantity.value = res.overallIpoShares
-  ratio.value = (res as any).data[0].poOversubscriptionRatio
+  ratio.value = res.poOversubscriptionRatio
   init1()
   init2()
 }
+
 //传入时间
 function calendarAddData(startDate: string, endDate: string, color: string) {
   function toNumberTime(str: string) {
@@ -296,17 +334,17 @@ function calendarAddLine() {
   Arr.forEach((item: any) => {
     if (item.length) {
       // console.log(item[0].dom.children[1], item.length)
-      console.log(item[0].dom, '%%')
+      // 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，单独设置样式
-      item[0].dom.children[1].style.marginLeft = "11px"
+      console.log('item',item)
-      item[0].dom.children[1].style.width = "42px"
+      // item[0].dom.children[1].style.marginLeft = "11px"
-      item[0].dom.children[1].style.borderRadius = "10px";
+      // item[0].dom.children[1].style.width = "42px"
+      // item[0].dom.children[1].style.borderRadius = "10px";
     }
   })
 
@@ -325,12 +363,13 @@ function init() {
     },
     tooltip: {},
     xAxis: {
-      data: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'],
+      // data: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue'],
+      data:PublicOfferX.value
     },
     yAxis: [
       {
         type: 'value',
-        max: 9,
+        max: 1000000,
         min: 0,
         splitNumber: 9,
         boundaryGap: [0.2, 0.2],
@@ -354,7 +393,8 @@ function init() {
       {
         name: 'Ratio(x)',
         type: 'bar',
-        data: [5, 20, 36, 10, 10, 20],
+        // data: [5, 20, 36, 10, 10, 20],
+        data:PublicOfferY.value,
         barWidth: '40%',
         itemStyle: {
           color: '#f6caae'
@@ -525,19 +565,8 @@ const showMounth = (date: any) => {
   // }
   return date
 }
-const handleShowLang=(e:any)=>{
+
-  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>
@@ -563,25 +592,7 @@ onUnmounted(() => {
     @media screen and (max-width: 768px){
       display: none;
     }
-    .langWrap{
+    
-      position: absolute;
-      bottom: -490px;
-      left: 30px;
-      display: flex;
-      align-items: end;
-      .second {
-      
-            width: 32px;
-            height: 36px;
-            margin-top: 25px;
-            margin-left: 5px;
-            margin-right: 10px;
-
-            &:hover {
-                transform: scale(1.2);
-            }
-        }
-    }
     
   }
 
@@ -597,6 +608,16 @@ onUnmounted(() => {
       // height: 100vh;
       display: flex;
       flex-wrap: wrap;
+      .persent{ 
+        color:#9FA0BF;
+        font-weight: 400;
+        font-size: 16px;
+        font-family: 'Calibri';
+        // margin-left: 14px;
+      }
+      .desmidle{
+        margin: 0 10px 0 10px;
+      }
       @media screen and (max-width: 768px){
         flex-direction: column;
       }
@@ -621,7 +642,8 @@ onUnmounted(() => {
       .public-left {
         display: flex;
         margin-top: 10px;
-        width: 80px;
+        // width:80px;
+        min-width: 80px;
         justify-content: space-between;
         color: #647c8b;
       }
@@ -629,7 +651,7 @@ onUnmounted(() => {
       .public-left1 {
         display: flex;
         margin-top: 10px;
-        width: 120px;
+        min-width: 120px;
         justify-content: space-between;
         color: #647c8b;
       }

src/views/dashBoard/nav/index.vue

@@ -9,6 +9,8 @@
             <img src="@/assets/1x/source5.png" />
 
             <span>{{ $t(i18n.global.t('dashboard.Dashboard')) }}</span>
+     
+          
         </li>
         <li @click="handleIpo">
             <img src="@/assets/1x/source2.png" />
@@ -28,9 +30,10 @@ export default {
 <script lang="ts" setup>
 import router from '@/router';
 import i18n from '@/locales'
-import { getCurrentInstance } from 'vue'
+import { getCurrentInstance ,ref,} from 'vue'
 const { proxy } = (getCurrentInstance() as any)
 
+
 // import { onMounted } from 'vue';
 // import { useRoute } from 'vue-router'
 // const route = useRoute()
@@ -56,7 +59,10 @@ const handDashBoard = () => {
 
 <style lang="scss" scoped>
 .navWrap {
+
     width: 270px;
+    position: relative;
+    
 
     li {
         width: 100%;

src/views/login/index.vue

@@ -819,7 +819,8 @@ const showMounth = (date: any) => {
 }
 
 :deep(.el-calendar-table td.is-selected .el-calendar-day) {
-    background-color: #e36466;
+    // background-color: #e36466;
+    border: 5px solid #e36466;
 }
 
 :deep(.el-calendar-table td.is-selected .el-calendar-day span) {