柱状图

This commit is contained in:
zhuzhuxia233 2023-04-12 23:41:18 +08:00
parent 54bc2204dc
commit f213f3e72f
6 changed files with 4259 additions and 77 deletions

4106
mock/home/databar.json Normal file

File diff suppressed because it is too large Load Diff

3
package-lock.json generated
View File

@ -12039,8 +12039,7 @@
"mana-syringe": "^0.2.2", "mana-syringe": "^0.2.2",
"moment": "^2.29.1", "moment": "^2.29.1",
"rc-field-form": "^1.22.0", "rc-field-form": "^1.22.0",
"react-color": "2.17.1", "react-color": "2.17.1"
"reflect-metadata": "^0.1.13"
}, },
"dependencies": { "dependencies": {
"react-color": { "react-color": {

View File

@ -15,6 +15,12 @@
<div class="search" @click="handlesearch"> <div class="search" @click="handlesearch">
<img src="@/assets/1x/1x/source2.png" alt="找不到图片"> <img src="@/assets/1x/1x/source2.png" alt="找不到图片">
</div> </div>
<div class="langWrap">
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
<Lang ref="lang" class="lang"/>
</div>
</div> </div>
<div class="right"> <div class="right">
<li class="time">{{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ props.time }}</li> <li class="time">{{ $t(i18n.global.t('dashboard.LastUpadated')) }}: {{ props.time }}</li>
@ -35,11 +41,28 @@ export default {
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
import i18n from '@/locales' import i18n from '@/locales'
import { getCurrentInstance } from 'vue' import { getCurrentInstance,onMounted,onUnmounted} from 'vue'
import Drawer from '@/views/login/modelComponents/Drawer.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 { proxy } = (getCurrentInstance() as any)
const value = ref(true) const value = ref(true)
const drawer = ref(false) 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({ const props = defineProps({
time: [String, Number] time: [String, Number]
}) })
@ -55,6 +78,30 @@ const openDrawer = () => {
</script> </script>
<style lang="scss" scoped> <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 { .headerWrap {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -71,6 +118,7 @@ const openDrawer = () => {
} }
.left { .left {
display: flex; display: flex;
position: relative;
@media screen and (max-width: 768px){ @media screen and (max-width: 768px){
justify-content: space-between; justify-content: space-between;
width: 100vw; width: 100vw;

View File

@ -4,10 +4,7 @@
<div class="leftbox"> <div class="leftbox">
<Item :data="data" /> <Item :data="data" />
<Nav /> <Nav />
<div class="langWrap">
<img src="@/assets/1x/source1.png" @click="handleShowLang" class="second">
<Lang ref="lang" />
</div>
</div> </div>
<div class="rightbox"> <div class="rightbox">
<Header :time="datatime" /> <Header :time="datatime" />
@ -83,14 +80,23 @@
<div class="pulic"> <div class="pulic">
<div class="public-left"> <div class="public-left">
<p class="yuan1"></p> <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> </div>
<p class="yuan-title3">{{ initialpublic?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p> <p class="yuan-title3">{{ initialpublic?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
</div> </div>
<div class="pulic1"> <div class="pulic1">
<div class="public-left1"> <div class="public-left1">
<p class="yuan2"></p> <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> </div>
<p class="yuan-title2">{{ initialinstituational?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p> <p class="yuan-title2">{{ initialinstituational?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') }}</p>
</div> </div>
@ -153,7 +159,8 @@ import moment from 'moment';
import i18n from '@/locales' import i18n from '@/locales'
import { ipoStore } from "@/stores/ipo" import { ipoStore } from "@/stores/ipo"
import { getCurrentInstance,onUnmounted} from 'vue' import { getCurrentInstance,onUnmounted} from 'vue'
import Lang from "@/views/login/components/Lang.vue";
import {getDataFromId} from "@/api/mock/home";
const { proxy } = (getCurrentInstance() as any) const { proxy } = (getCurrentInstance() as any)
// console.log('getCurrentInstance()proxy:', proxy) // console.log('getCurrentInstance()proxy:', proxy)
const store = ipoStore() const store = ipoStore()
@ -161,11 +168,11 @@ const main = ref() // 使用ref创建虚拟DOM引用使用时用main.value
const main1 = ref(); // 使refDOM使main.value const main1 = ref(); // 使refDOM使main.value
const main2 = ref(); const main2 = ref();
const route = useRoute() const route = useRoute()
const lang = ref()
var daysAndDom = []; var daysAndDom = [];
onMounted( onMounted(
() => { () => {
init()
const obj = JSON.parse(localStorage.getItem('itemData') as string); 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"; // obj.logolinks="https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png";
data.value=obj; data.value=obj;
@ -201,43 +208,74 @@ const LineData = reactive({
lines: [] as lineObje[], lines: [] as lineObje[],
ids: [] as any 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 getdatatime = async () => {
const res = await getHomeIpo(1) const res = await getHomeIpo(1)
const time = (res as any).data[0].dateTime const time = (res as any).data[0].dateTime
datatime.value = moment(time).format('YYYY-MM-DD HH:mm') datatime.value = moment(time).format('YYYY-MM-DD HH:mm')
} }
const getreferencedata = async () => { const getreferencedata = async () => {
//---mock
// const result1=await getDataFromId('bar');
// const res=result1[0];
//---mock
const ipoID = localStorage.getItem('ipoID') 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; startDate.value = bookOpenDate;
endDate.value = bookCloseDate 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(allotmentDate, allotmentDate, '#9bc3f1')
calendarAddData(startDate.value, endDate.value, '#65FABF') calendarAddData(startDate.value, endDate.value, '#65FABF')
calendarAddData(siInputDate, siInputDate, '#bd99dc') calendarAddData(siInputDate, siInputDate, '#bd99dc')
console.log(siInputDate); // console.log(siInputDate);
calendarAddData(listingDate, listingDate, '#38b126') calendarAddData(listingDate, listingDate, '#38b126')
calendarAddLine() 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); // 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) 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) 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() init1()
init2() init2()
} }
// //
function calendarAddData(startDate: string, endDate: string, color: string) { function calendarAddData(startDate: string, endDate: string, color: string) {
function toNumberTime(str: string) { function toNumberTime(str: string) {
@ -296,17 +334,17 @@ function calendarAddLine() {
Arr.forEach((item: any) => { Arr.forEach((item: any) => {
if (item.length) { if (item.length) {
// console.log(item[0].dom.children[1], 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 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: {}, tooltip: {},
xAxis: { 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: [ yAxis: [
{ {
type: 'value', type: 'value',
max: 9, max: 1000000,
min: 0, min: 0,
splitNumber: 9, splitNumber: 9,
boundaryGap: [0.2, 0.2], boundaryGap: [0.2, 0.2],
@ -354,7 +393,8 @@ function init() {
{ {
name: 'Ratio(x)', name: 'Ratio(x)',
type: 'bar', type: 'bar',
data: [5, 20, 36, 10, 10, 20], // data: [5, 20, 36, 10, 10, 20],
data:PublicOfferY.value,
barWidth: '40%', barWidth: '40%',
itemStyle: { itemStyle: {
color: '#f6caae' color: '#f6caae'
@ -525,19 +565,8 @@ const showMounth = (date: any) => {
// } // }
return date 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> </script>
@ -563,25 +592,7 @@ onUnmounted(() => {
@media screen and (max-width: 768px){ @media screen and (max-width: 768px){
display: none; 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; // height: 100vh;
display: flex; display: flex;
flex-wrap: wrap; 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){ @media screen and (max-width: 768px){
flex-direction: column; flex-direction: column;
} }
@ -621,7 +642,8 @@ onUnmounted(() => {
.public-left { .public-left {
display: flex; display: flex;
margin-top: 10px; margin-top: 10px;
width: 80px; // width:80px;
min-width: 80px;
justify-content: space-between; justify-content: space-between;
color: #647c8b; color: #647c8b;
} }
@ -629,7 +651,7 @@ onUnmounted(() => {
.public-left1 { .public-left1 {
display: flex; display: flex;
margin-top: 10px; margin-top: 10px;
width: 120px; min-width: 120px;
justify-content: space-between; justify-content: space-between;
color: #647c8b; color: #647c8b;
} }

View File

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

View File

@ -819,7 +819,8 @@ const showMounth = (date: any) => {
} }
:deep(.el-calendar-table td.is-selected .el-calendar-day) { :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) { :deep(.el-calendar-table td.is-selected .el-calendar-day span) {