fix : 修复首页数据展示

This commit is contained in:
2024-09-21 23:51:33 +08:00
parent 7b155f649d
commit 349f514bcb
3 changed files with 141 additions and 93 deletions

View File

@@ -15,7 +15,7 @@
</el-col>
<el-col :span="6">
<el-form-item label="创建时间">
<span>{{ formData.createTime }}</span>
<span>{{ formData.articleTime }}</span>
</el-form-item>
</el-col>
<el-col :span="6">

View File

@@ -43,13 +43,13 @@
<el-empty image-size="88" description="暂无待办数据~"/>
</div>
<div v-for="item in todoList" class="todo-border">
<!-- <div class="status-style"-->
<!-- :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">-->
<!-- {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}-->
<!-- </div>-->
<!-- <div class="status-style">-->
<!-- {{item.targetState}}-->
<!-- </div>-->
<!-- <div class="status-style"-->
<!-- :style="{'background-color': item.status == 0 ? '#F55815' : item.status == 1 ? '#20BDA1' : '#4C52EA'}">-->
<!-- {{ item.status == 0 ? '加急' : item.status == 1 ? '正常' : '逾期' }}-->
<!-- </div>-->
<!-- <div class="status-style">-->
<!-- {{item.targetState}}-->
<!-- </div>-->
<div v-if="item.targetState !== null|| item.targetState !== undefined" style="margin-bottom: 14px">
<Tag dictType="todo_type" :value="item.targetState"/>
</div>
@@ -147,7 +147,7 @@
</div>
</div>
<div class="notice-block">
<div v-for="(item,index) in noticeList" class="notice">
<div v-for="(item,index) in noticeList" class="notice" @click="handleGoToArticleDetail(item)">
<span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.articleTitle }}
</div>
</div>
@@ -202,9 +202,11 @@
<div>
<div class="total-money">总资金{{ toThousands(totalMoney) }}</div>
<div v-for="(item,index) in moneyData" class="legend">
<div class="money-dot" :style="{'background-color': colorList[index]}"></div>
<div class="company-name">{{ item.companyName }}</div>
<div>{{ toThousands(item.money) }}</div>
<div style="display: flex;align-items: center">
<div class="money-dot" :style="{'background-color': moneyColorList[index]}"></div>
<div class="company-name">{{ item.name }}</div>
</div>
<div>{{ toThousands(item.value) }}</div>
</div>
</div>
</div>
@@ -215,7 +217,7 @@
<el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
<el-card shadow="never" class="todo-bg">
<el-tabs v-model="docActiveTab" editable @tab-add="goToArticleList">
<template #add-icon >
<template #add-icon>
更多
<el-icon color="#1F63E6" size="18">
<ArrowRight/>
@@ -224,10 +226,10 @@
</template>
<el-tab-pane label="规章制度" name="first">
<div class="notice-block rules-block">
<div v-for="(item,index) in rulesList" class="notice">
<!-- <div>-->
<!-- <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}-->
<!-- </div>-->
<div v-for="(item,index) in rulesList" class="notice" @click="handleGoToArticleDetail(item)">
<!-- <div>-->
<!-- <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}-->
<!-- </div>-->
<div :style="{'color': item.isRead ? '#1F63E6' : 'rgba(0,0,0,0.5)'}">
<span>{{ item.articleTitle }}</span>
<span class="dot" v-if="item.isRead"></span>
@@ -241,10 +243,10 @@
<div v-if="helpDocList&&helpDocList.length==0">
<el-empty image-size="135" description="暂无帮助文档~"/>
</div>
<div v-for="(item,index) in helpDocList" class="notice">
<!-- <div>-->
<!-- <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}-->
<!-- </div>-->
<div v-for="(item,index) in helpDocList" class="notice" @click="handleGoToArticleDetail(item)">
<!-- <div>-->
<!-- <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>{{ item.title }}-->
<!-- </div>-->
<div>
{{ item.articleTitle }}
</div>
@@ -254,8 +256,8 @@
</el-tab-pane>
<el-tab-pane label="常见问题" name="third">
<div class="notice-block rules-block">
<div v-for="(item,index) in problemList" class="notice">
<!-- <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>-->
<div v-for="(item,index) in problemList" class="notice" @click="handleGoToArticleDetail(item)">
<!-- <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>-->
<div>
{{ item.articleTitle }}
</div>
@@ -398,7 +400,8 @@ const data = reactive({
fundPieCharts: null,
moneyPieCharts: null,
})
const colorList = ref(['#5c60ca', '#a159da', '#4bd566'])
const moneyColorList = ref(['#5c60ca', '#a159da', '#5cdcd3', '#4bd566', '#a965ff', '#3BA272', '#ef6567', '#9A60B4', '#f9c956',])
const fundPieOption = ref({
tooltip: {
trigger: 'item'
@@ -448,12 +451,12 @@ const fundPieOption = ref({
radius: [65, 90],
center: ['50%', '50%'],
top: '10%',
left:'8',
left: '8',
label: {
show: true,
formatter: '{b}\n{d}%'
// formatter: params => {
// console.log(params)
// console.log(params)
// },
},
itemStyle: {
@@ -480,15 +483,15 @@ const fundPieOption = ref({
}
},
data: [
{value: 75, name: '专项资金',label:{color:'#6201FF'}},
{value: 20, name: '非专项资金',label:{color:'#1AA4AD'}, selected: true},
{value: 75, name: '专项资金', label: {color: '#6201FF'}},
{value: 20, name: '非专项资金', label: {color: '#1AA4AD'}, selected: true},
],
},
{
name: '',
type: 'pie',
top: '10%',
left:'8',
left: '8',
clockWise: false,
hoverAnimation: false,
radius: ['70%', '70%'],//边框大小
@@ -516,10 +519,10 @@ const fundPieOption = ref({
})
const moneyPieOption = ref({
tooltip: {
show:false,
show: false,
trigger: 'item'
},
color: colorList,
// color: moneyColorList.value,
series: [
{
type: 'pie',
@@ -535,99 +538,123 @@ const moneyPieOption = ref({
},
},
itemStyle: {
borderWidth: 10,//设置边框粗细
borderColor: '#fff'
normal: {
borderWidth: 10,//设置边框粗细
borderColor: '#fff',
color: function (colors) {
const colorList = moneyColorList.value;
return colorList[colors.dataIndex];
}
},
},
data: [
{value: 30000, name: '智汇未来科技公司',},
{value: 10000, name: '云航信息技术公司'},
{value: 5000, name: '融智投资管理公司'},
{value: 5000, name: '智汇未来科技公司',},
{value: 3000, name: '云航信息技术公司'},
{value: 12345, name: '融智投资管理公司'},
],
},
]
})
onMounted(() => {
onMounted(async () => {
// getTodoList()
// getResearchChart()
init()
await getResearchChart()
noticeList.value = await getArticleList(0)
rulesList.value = await getArticleList(1)
helpDocList.value = await getArticleList(2)
problemList.value = await getArticleList(3)
await initFundCharts()
})
const goToArticleList=()=>{
const handleGoToArticleDetail = (row) => {
router.push({
name: 'Article/detail',
query: {
id: row.articleId
}
})
}
const goToArticleList = () => {
router.push({
name: 'Manage',
})
}
const goToResearchFund=()=>{
const goToResearchFund = () => {
router.push({
name: 'Dev'
})
}
const goToSpecialFund=()=>{
const goToSpecialFund = () => {
router.push({
name: 'Fund'
})
}
const refreshTodoOrDoneList=()=>{
const refreshTodoOrDoneList = () => {
// getTodoList()
}
const init =async () => {
noticeList.value =await getArticleList(0)
rulesList.value =await getArticleList(1)
helpDocList.value =await getArticleList(2)
problemList.value =await getArticleList(3)
const initFundCharts = () => {
data.fundPieCharts = echarts.init(document.getElementById('fundPie')).setOption(fundPieOption.value)
}
const initMoneyCharts = () => {
data.moneyPieCharts = echarts.init(document.getElementById('moneyPie')).setOption(moneyPieOption.value)
}
const getTodoList=()=>{
const getTodoList = () => {
getHomeInfo().then(res => {
if (res.code === 1000) {
// todoList.value=res.data.rows
// todoNum.value=res.data.total
}else{
} else {
ElNotification({
title: '提示',
message: res.msg,
type: 'error'
type: 'error'
})
}
})
}
const getResearchChart=()=>{
const getResearchChart = () => {
getResearchFundChart().then(res => {
if (res.code === 1000) {
console.info("🚀 ~method:res -----", res.data,res.data.rdCompanyList)
if(moneyPieOption.value.series&&moneyPieOption.value.series?.length>0){
moneyPieOption.value.series[0].data=res.data.rdCompanyList
console.info("🚀 ~method:res -----", res.data, res.data.rdCompanyList)
totalMoney.value = res.data.totalAmount
moneyData.value = res.data.rdCompanyList
if (moneyPieOption.value.series && moneyPieOption.value.series?.length > 0) {
moneyPieOption.value.series[0].data = res.data.rdCompanyList
initMoneyCharts()
}
init()
}else{
} else {
ElNotification({
title: '提示',
message: res.msg,
type: 'error'
type: 'error'
})
}
})
}
const getArticleList=async (articleType)=>{
let {data,code,msg}=await getArticle({articleType:articleType})
if (code === 1000) {
return data.rows
// todoList.value=res.data.rows
// todoNum.value=res.data.total
}else{
ElNotification({
title: '提示',
message: msg,
type: 'error'
})
}
const getArticleList = async (articleType) => {
let {data, code, msg} = await getArticle({articleType: articleType})
if (code === 1000) {
return data.rows
// todoList.value=res.data.rows
// todoNum.value=res.data.total
} else {
ElNotification({
title: '提示',
message: msg,
type: 'error'
})
}
}
window.addEventListener('resize', () => {
console.info("🚀 ~method:resize -----")
data.fundPieCharts = null
data.moneyPieCharts = null
init()
initFundCharts()
initMoneyCharts()
})
const clickGotoListPage = (item) => {
@@ -748,31 +775,34 @@ const handleView = (row) => {
@media only screen and (max-width: 1500px) {
.statistics {
.block {
width: 300px!important;
width: 300px !important;
}
}
}
@media only screen and (max-width: 1420px) {
.statistics {
.block {
width: 280px!important;
width: 280px !important;
}
}
}
@media only screen and (max-width: 1344px) {
.statistics {
.block {
width: 260px!important;
width: 260px !important;
}
}
}
@media only screen and (max-width: 1270px) {
.statistics {
.block {
width: 240px!important;
width: 240px !important;
}
}
}
@@ -789,14 +819,15 @@ const handleView = (row) => {
}
.statistics {
.block {
width: 320px!important;
width: 320px !important;
}
}
}
@media only screen and (max-width: 1120px) {
.statistics {
.block {
width: 290px!important;
width: 290px !important;
}
}
}
@@ -844,6 +875,7 @@ const handleView = (row) => {
.legend {
margin-top: 14px;
display: flex;
flex-wrap: wrap;
align-items: center;
> div:last-child {
@@ -859,7 +891,7 @@ const handleView = (row) => {
letter-spacing: 1px;
margin-left: 10px;
margin-right: 30px;
white-space: nowrap;
//white-space: nowrap;
}
.money-dot {
@@ -910,17 +942,19 @@ const handleView = (row) => {
height: 2px !important;
background-color: #1476E3 !important;
}
:deep(.el-tabs__new-tab ) {
width: auto !important;
border: none !important;
color: #1476E3;
font-size: 14px;
line-height: 51px!important;
height: 51px!important;
line-height: 51px !important;
height: 51px !important;
margin: 0 0 0 -93px !important;
z-index: 99;
position: relative;
&:hover{
&:hover {
text-decoration: underline;
}
}
@@ -947,6 +981,7 @@ const handleView = (row) => {
.el-tabs__item.is-active {
color: #1F63E6;
}
//#1476E3
}
}
@@ -998,15 +1033,22 @@ const handleView = (row) => {
.top-left {
//flex: 0.8;
.notice-title{
margin-top: 10px;margin-left: 14px;color: #000000;letter-spacing: 1px;font-size: 16px;
>span{
.notice-title {
margin-top: 10px;
margin-left: 14px;
color: #000000;
letter-spacing: 1px;
font-size: 16px;
> span {
color: #F40E0E;
>span{
> span {
font-weight: bold;
}
}
}
.todo-bg {
margin-top: 10px;
@@ -1086,7 +1128,8 @@ const handleView = (row) => {
.time {
width: 80px;
margin-left: 23px;
&:last-child{
&:last-child {
white-space: nowrap;
}
}
@@ -1195,9 +1238,10 @@ const handleView = (row) => {
.rules-block {
height: 343px !important;
margin-top: 0!important;
margin-top: 0 !important;
.notice {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
@@ -1205,7 +1249,7 @@ const handleView = (row) => {
line-height: 47px !important;
color: rgba(0, 0, 0, 0.5) !important;
>div:first-child {
> div:first-child {
position: relative;
text-overflow: ellipsis;
white-space: nowrap;
@@ -1270,6 +1314,7 @@ const handleView = (row) => {
}
.notice {
cursor: pointer;
//min-width: 300px;
height: 75px;
line-height: 75px;

View File

@@ -16,7 +16,7 @@
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="研发资金金额(元)" prop="rdAmount" >
<el-input
v-model="formData.rdAmount"
@@ -27,7 +27,7 @@
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="6">
<el-form-item label="研发资金日期" prop="rdDate">
<el-date-picker
v-model="formData.rdDate"
@@ -39,8 +39,8 @@
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8" >
<el-form-item label="备注" prop="remarks">
<el-col :span="6" >
<el-form-item label="备注" prop="remarks" style="margin-left: -70px">
<el-input v-model="formData.remarks" placeholder="请输入备注" clearable></el-input>
</el-form-item>
</el-col>
@@ -297,4 +297,7 @@ onMounted(async () => {
}
}
}
:deep(.el-date-editor--month) {
width: 100%;
}
</style>