柱状图
This commit is contained in:
zhuzhuxia233
parent
54bc2204dc
commit
f213f3e72f
File diff suppressed because it is too large
Load Diff
|
|
@ -12039,8 +12039,7 @@
|
|||
"mana-syringe": "^0.2.2",
|
||||
"moment": "^2.29.1",
|
||||
"rc-field-form": "^1.22.0",
|
||||
"react-color": "2.17.1",
|
||||
"reflect-metadata": "^0.1.13"
|
||||
"react-color": "2.17.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-color": {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 res = await getIpo(ipoID as string)
|
||||
console.log(res);
|
||||
const { bookOpenDate, bookCloseDate, allotmentDate,siInputDate,listingDate } = (res as any).data[0];
|
||||
const result = await getIpo(ipoID as string)
|
||||
const res=(result as any).data[0];
|
||||
// console.log(res);
|
||||
const { bookOpenDate, bookCloseDate, allotmentDate,siInputDate,listingDate } = res;
|
||||
|
||||
|
||||
startDate.value = bookOpenDate;
|
||||
endDate.value = bookCloseDate
|
||||
console.log('$$', allotmentDate, allotmentDate)
|
||||
console.log('$$', startDate.value, endDate.value)
|
||||
// console.log('$$', allotmentDate, allotmentDate)
|
||||
// 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
|
||||
ApplicationQuantity.value = (res as any).data[0].poApplicationQuantity
|
||||
subscriptionRatio.value = (res as any).data[0].poOversubscriptionRatio
|
||||
initialinstituational.value = (res as any).data[0].ioSharesInitial
|
||||
initialpublic.value = res.poSharesInitial
|
||||
ApplicationQuantity.value = res.poApplicationQuantity
|
||||
subscriptionRatio.value = res.poOversubscriptionRatio
|
||||
initialinstituational.value = res.ioSharesInitial
|
||||
// console.log('initialinstituational', (res as any).data[0].poSharesInitial);
|
||||
code44.value = (res as any).data[0].poSharesFinal
|
||||
finalinstitutional.value = (res as any).data[0].ioOfferSharesFinal
|
||||
code44.value = res.poSharesFinal
|
||||
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
|
||||
ratio.value = (res as any).data[0].poOversubscriptionRatio
|
||||
quantity.value = res.overallIpoShares
|
||||
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.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";
|
||||
// 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，单独设置样式
|
||||
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";
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue