Merge pull request 'fix : 修复首页数据展示' (#788) from de into master

Reviewed-on: http://git.feashow.cn/clay/mosr-web/pulls/788
This commit is contained in:
2024-09-21 15:51:57 +00:00
3 changed files with 141 additions and 93 deletions

View File

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

View File

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

View File

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