1584 lines
39 KiB
Vue
1584 lines
39 KiB
Vue
<template>
|
||
<div class="home-bg" v-if="AuthStore.roles.length">
|
||
<el-row gutter="10">
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="17" :xl="17">
|
||
<div class="top-left" id="topLeft">
|
||
<el-card shadow="never">
|
||
<div class="notice-title">{{getTimePeriod()}}，提醒您<span>有<span>{{ taskTabList[0].num }}</span>个项目待立项</span></div>
|
||
<el-row class="statistics">
|
||
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(item,index) in taskTabList" :key="index">
|
||
<div class="block" :style="{'background-image':'url('+getImgUrl(item.icon)+')'}"
|
||
@click="clickGotoListPage(item)">
|
||
<div class="block-right">
|
||
<span>{{ item.num }}<span>个</span></span>
|
||
<span>{{ item.title }}</span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
<el-card shadow="never" class="todo-bg" @tab-add="refreshTodoOrDoneList(activeName)">
|
||
<el-tabs v-model="activeName" editable>
|
||
<template #add-icon>
|
||
<div @click="refreshTodoOrDoneList" style="margin-left: -50px">
|
||
刷新一下
|
||
<div style="width: 31px"></div>
|
||
</div>
|
||
</template>
|
||
<el-tab-pane :label="'待办（'+(todoList?.length||0) +'）'" name="first">
|
||
<div class="todo-top">
|
||
<div class="bell">
|
||
<el-icon size="20" color="#F55815">
|
||
<BellFilled/>
|
||
</el-icon>
|
||
<span>您有{{ todoList?.length || 0 }}条待办需要处理</span>
|
||
</div>
|
||
<div class="todo-more" @click="handleTodoList(1)">
|
||
<span>查看更多</span>
|
||
<el-icon color="#1F63E6" size="18">
|
||
<ArrowRight/>
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
<div class="todo-content">
|
||
<div v-if="todoList&&todoList.length==0" style="width: 100%">
|
||
<el-empty image-size="88" description="暂无待办数据~"/>
|
||
</div>
|
||
<div v-for="item in todoList" class="todo-border">
|
||
<div v-if="item.targetState !== null|| item.targetState !== undefined" style="margin-bottom: 10px">
|
||
<Tag dictType="todo_type" :value="item.targetState"/>
|
||
</div>
|
||
<div v-else></div>
|
||
<div class="target-name">{{ item.targetState == '00' ? '征集名称' : '项目名称' }}：{{
|
||
item.targetName
|
||
}}
|
||
</div>
|
||
<div class="black-text">发起人：{{ item.initiatorName }}</div>
|
||
<div class="black-text">当前节点：{{ item.taskName }}</div>
|
||
<div class="gray-time">
|
||
<div>
|
||
<div class="title">
|
||
<svg-icon name="home-time" :class-name="'home-time'"/>
|
||
<span>提交时间：</span>
|
||
</div>
|
||
<div class="time"> {{ item.submitTime }}</div>
|
||
<!-- <div class="time">时间要求 {{ item.totalTime }}天</div>-->
|
||
</div>
|
||
<div class="view" @click="handleView(item)">查看</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane :label="'已办（' + (doneList?.length||0) + '）'" name="second">
|
||
<div class="todo-top">
|
||
<div class="bell">
|
||
<el-icon size="20" color="#F55815">
|
||
<BellFilled/>
|
||
</el-icon>
|
||
<span>您有{{ todoList.length }}条待办需要处理</span>
|
||
</div>
|
||
<div class="todo-more" @click="handleTodoList(2)">
|
||
<span>查看更多</span>
|
||
<el-icon color="#1F63E6" size="18">
|
||
<ArrowRight/>
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
<div class="todo-content">
|
||
<div v-if="doneList&&doneList.length==0" style="width: 100%">
|
||
<el-empty image-size="88" description="暂无已办数据~"/>
|
||
</div>
|
||
<div v-for="item in doneList" class="todo-border">
|
||
<div v-if="item.targetState !== null|| item.targetState !== undefined" style="margin-bottom: 14px">
|
||
<Tag dictType="todo_type" :value="item.targetState"/>
|
||
</div>
|
||
<div v-else></div>
|
||
<div class="target-name">{{ item.targetState == '00' ? '征集名称' : '项目名称' }}：{{
|
||
item.targetName
|
||
}}
|
||
</div>
|
||
<div class="black-text">发起人：{{ item.initiatorName }}</div>
|
||
<!-- <div class="black-text">当前节点：{{ item.taskName }}</div>-->
|
||
<div class="gray-time">
|
||
<div>
|
||
<div class="title">
|
||
<svg-icon name="home-time" :class-name="'home-time'"/>
|
||
<span>提交时间：</span>
|
||
</div>
|
||
<div class="time"> {{ item.submitTime }}</div>
|
||
<!-- <div class="time">时间要求 {{ item.totalTime }}天</div>-->
|
||
</div>
|
||
<div class="view" @click="handleView(item)">查看</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-card>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="24" :lg="7" :xl="7">
|
||
<div class="right">
|
||
<div class="right-top ">
|
||
<div class="title-block">
|
||
<div class="title">
|
||
<div class="tag"></div>
|
||
<span>通知公告</span>
|
||
</div>
|
||
<div class="more" @click="goToArticleList('0')">
|
||
<span>更多</span>
|
||
<el-icon color="#1F63E6" size="18">
|
||
<ArrowRight/>
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
<div class="notice-block">
|
||
<div v-if="noticeList&¬iceList.length==0">
|
||
<el-empty image-size="135" description="暂无通知公告~"/>
|
||
</div>
|
||
<div v-for="(item,index) in noticeList" class="notice" @click="handleGoToArticleDetail(item)">
|
||
<span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>
|
||
{{ item.articleTitle }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row gutter="10" style="margin-top: 10px">
|
||
<el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
|
||
<div class="right bottom">
|
||
<div class="right-top ">
|
||
<div class="title-block">
|
||
<div class="title">
|
||
<div class="tag"></div>
|
||
<span>专项资金项目</span>
|
||
</div>
|
||
<div class="more" @click="goToSpecialFund">
|
||
<span>更多</span>
|
||
<el-icon color="#1F63E6" size="18">
|
||
<ArrowRight/>
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="container">
|
||
<div id="fundPie" ref="fundPie"></div>
|
||
</div>
|
||
</div>
|
||
<div class="fund-pie">专项资金项目统计图</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
|
||
<div class="right bottom">
|
||
<div class="right-top " style="position:relative;">
|
||
<div class="title-block">
|
||
<div class="title">
|
||
<div class="tag"></div>
|
||
<span>研发投入资金</span>
|
||
</div>
|
||
<div class="more" @click="goToResearchFund">
|
||
<span>更多</span>
|
||
<el-icon color="#1F63E6" size="18">
|
||
<ArrowRight/>
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
<div style="position:absolute;top: 65px;right: 20px;z-index: 99">
|
||
<el-date-picker
|
||
v-model="researchFundYear"
|
||
type="year"
|
||
placeholder="年份"
|
||
style="width: 80px"
|
||
value-format="YYYY"
|
||
size="small"
|
||
@change="changeResearchFundDataByYear"
|
||
/>
|
||
</div>
|
||
<div v-if="moneyData&&moneyData.length==0" style="margin-top: 30px">
|
||
<el-empty image-size="135" description="暂无研发投入资金信息~"/>
|
||
</div>
|
||
<div class="money-block" v-else>
|
||
<div class="money-container">
|
||
<div id="moneyPie" ref="moneyPie"></div>
|
||
</div>
|
||
<div class="legend-block">
|
||
<div class="total-money">总资金：{{ toThousands(totalMoney) }}</div>
|
||
<div v-for="(item,index) in moneyData" class="legend">
|
||
<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>
|
||
<div class="fund-pie" v-if="totalMoney" style="text-align: left;margin-left: 70px;margin-top: 10px">
|
||
研发投入资金统计图
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<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('',docActiveTab)">
|
||
<template #add-icon>
|
||
<div style="white-space: nowrap;display: flex;align-items: center">
|
||
更多
|
||
<el-icon color="#1F63E6" size="18">
|
||
<ArrowRight/>
|
||
</el-icon>
|
||
</div>
|
||
<div style="width: 15px"></div>
|
||
</template>
|
||
<el-tab-pane label="规章制度" name="first">
|
||
<div class="notice-block rules-block">
|
||
<div v-if="rulesList&&rulesList.length==0">
|
||
<el-empty image-size="135" description="暂无规章制度~"/>
|
||
</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>
|
||
</div>
|
||
<div> {{ item.articleTime }}</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="帮助文档" name="second">
|
||
<div class="notice-block rules-block">
|
||
<div v-if="helpDocList&&helpDocList.length==0">
|
||
<el-empty image-size="135" description="暂无帮助文档~"/>
|
||
</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>
|
||
<div> {{ item.articleTime }}</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="常见问题" name="third">
|
||
<div class="notice-block rules-block">
|
||
<div v-if="problemList&&problemList.length==0">
|
||
<el-empty image-size="135" description="暂无常见问题~"/>
|
||
</div>
|
||
<div v-for="(item,index) in problemList" class="notice" @click="handleGoToArticleDetail(item)">
|
||
<!-- <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>-->
|
||
<div>
|
||
{{ item.articleTitle }}
|
||
</div>
|
||
|
||
<div> {{ item.articleTime }}</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div v-else style="display: flex; justify-content: center; align-items: center; height: 100%;">
|
||
您没有任何角色， 请联系管理员！
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="jsx">
|
||
import 'element-plus/theme-chalk/display.css'
|
||
import {useAuthStore} from '@/stores/userstore.js'
|
||
import * as echarts from 'echarts'
|
||
import {toThousands} from "@/utils/changePrice.js";
|
||
import {ElNotification} from "element-plus";
|
||
import {getHomeTaskInfo, getDoneTaskInfo, getHomeStatistics, getSpecialFundChart} from "@/api/home";
|
||
import {getResearchFundChart} from "@/api/research-fund";
|
||
import {getArticle} from "@/api/article";
|
||
|
||
const AuthStore = useAuthStore()
|
||
const router = useRouter()
|
||
const researchFundYear = ref(new Date().getFullYear() + '')
|
||
const activeName = ref('first')
|
||
const docActiveTab = ref('first')
|
||
const totalMoney = ref('45000')
|
||
const moneyData = ref([
|
||
{
|
||
companyName: '智汇未来科技公司',
|
||
money: '30000',
|
||
},
|
||
{
|
||
companyName: '云航信息技术公司',
|
||
money: '10000',
|
||
},
|
||
{
|
||
companyName: '融智投资管理公司',
|
||
money: '5000',
|
||
},
|
||
])
|
||
const taskTabList = ref([
|
||
{
|
||
title: '待立项',
|
||
color: '#CEE8FA',
|
||
textColor: '#0043C5',
|
||
icon: 'home1.png',
|
||
num: 0,
|
||
type: 'pending'
|
||
},
|
||
{
|
||
title: '已立项',
|
||
color: '#DCCEFA',
|
||
textColor: '#8600C5',
|
||
icon: 'home2.png',
|
||
num: 0,
|
||
type: 'approved'
|
||
},
|
||
{
|
||
title: '实施中',
|
||
color: '#FAE6CE',
|
||
textColor: '#F47D0E',
|
||
icon: 'home3.png',
|
||
num: 0,
|
||
type: 'carryout'
|
||
},
|
||
{
|
||
title: '已验收',
|
||
color: '#CEFAD8',
|
||
textColor: '#01A089',
|
||
icon: 'home4.png',
|
||
num: 0,
|
||
type: 'check'
|
||
}
|
||
])
|
||
const todoList = ref([])
|
||
const noticeList = ref([])
|
||
const rulesList = ref([])
|
||
const helpDocList = ref([])
|
||
const problemList = ref([])
|
||
const doneList = ref([])
|
||
const reportNum = ref(0)
|
||
|
||
const data = reactive({
|
||
fundPieCharts: null,
|
||
moneyPieCharts: null,
|
||
})
|
||
|
||
const moneyColorList = ref(['#5c60ca', '#a159da', '#5cdcd3', '#4bd566', '#a965ff', '#3BA272', '#ef6567', '#9A60B4', '#f9c956',])
|
||
const fundPieOption = ref({
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
top: 'top',
|
||
orient: 'vertical',
|
||
left: '0',
|
||
bottom: '20',
|
||
align: 'left',
|
||
icon: 'circle',
|
||
textStyle: {
|
||
color: 'rgba(0,0,0,0.6)',
|
||
fontSize: '12px'
|
||
},
|
||
},
|
||
graphic: { //图形中间图片
|
||
elements: [{
|
||
type: 'image',
|
||
style: {
|
||
image: "people.png",//你的图片地址
|
||
width: 70,
|
||
height: 70
|
||
},
|
||
left: 'center',
|
||
right: 'center',
|
||
top: '42%'
|
||
}]
|
||
},
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: [65, 90],
|
||
center: ['50%', '50%'],
|
||
top: '10%',
|
||
left: '8',
|
||
label: {
|
||
show: true,
|
||
formatter: '{b}\n{d}%'
|
||
// formatter: params => {
|
||
// console.log(params)
|
||
// },
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 8,//设置边框粗细
|
||
borderColor: '#fff',
|
||
color: function (params) {
|
||
const colorList = [
|
||
['#6101ff', '#a965ff'],
|
||
['#5cdcd3', '#5cdcd3'],
|
||
];
|
||
const index = params.dataIndex;
|
||
return new echarts.graphic.LinearGradient(0, 0, 1, 1,
|
||
[{
|
||
offset: 0,
|
||
color: colorList[index][0]
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorList[index][1]
|
||
}
|
||
]);
|
||
}
|
||
}
|
||
},
|
||
data: [
|
||
{value: 75, name: '专项资金', label: {color: '#6201FF'}},
|
||
{value: 20, name: '非专项资金', label: {color: '#1AA4AD'}, selected: true},
|
||
],
|
||
},
|
||
{
|
||
name: '',
|
||
type: 'pie',
|
||
top: '10%',
|
||
left: '8',
|
||
clockWise: false,
|
||
hoverAnimation: false,
|
||
radius: ['70%', '70%'],//边框大小
|
||
center: ['50%', '50%'],//边框位置
|
||
tooltip: {
|
||
show: false
|
||
},
|
||
label: {
|
||
show: false
|
||
},
|
||
emphasis: {
|
||
show: false
|
||
},
|
||
data: [{
|
||
value: 0,
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 1,//设置边框粗细
|
||
borderColor: 'rgba(0,0,0,0.1)'//边框颜色
|
||
}
|
||
}
|
||
}]
|
||
}
|
||
]
|
||
})
|
||
const moneyPieOption = ref({
|
||
tooltip: {
|
||
show: false,
|
||
trigger: 'item'
|
||
},
|
||
// color: moneyColorList.value,
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: [0, 90],
|
||
center: ['50%', '50%'],
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: 'inner',
|
||
formatter: function (data) {
|
||
return toThousands(data.value)
|
||
}
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 8,//设置边框粗细
|
||
borderColor: '#fff',
|
||
color: function (colors) {
|
||
const colorList = moneyColorList.value;
|
||
|
||
return colorList[colors.dataIndex];
|
||
}
|
||
},
|
||
|
||
},
|
||
data: [
|
||
{value: 5000, name: '智汇未来科技公司',},
|
||
{value: 3000, name: '云航信息技术公司'},
|
||
{value: 12345, name: '融智投资管理公司'},
|
||
],
|
||
},
|
||
]
|
||
})
|
||
|
||
onMounted(async () => {
|
||
getTaskStatistics()
|
||
getTodoList()
|
||
getDoneList()
|
||
await getFundChart()
|
||
await getResearchChart()
|
||
noticeList.value = await getArticleList(0)
|
||
rulesList.value = await getArticleList(1)
|
||
helpDocList.value = await getArticleList(2)
|
||
problemList.value = await getArticleList(3)
|
||
})
|
||
const getTimePeriod=()=>{
|
||
// 获取当前日期和时间
|
||
const now = new Date();
|
||
// 获取当前小时数
|
||
const hour = now.getHours();
|
||
|
||
// 根据小时数判断时间段
|
||
if (hour >= 6 && hour <= 8) {
|
||
return "早晨";
|
||
} else if (hour >= 8 && hour < 11) {
|
||
return "上午好";
|
||
} else if (hour >= 11 && hour <= 13) {
|
||
return "中午好";
|
||
} else if (hour >= 14 && hour < 18) {
|
||
return "下午好";
|
||
} else if (hour >= 18 && hour <= 22) {
|
||
return "晚上好";
|
||
} else if (hour >= 23 || hour <= 1) {
|
||
return "午夜好";
|
||
} else if (hour > 1&& hour <= 5) {
|
||
return "夜深了";
|
||
}
|
||
}
|
||
const handleTodoList = (type) => {
|
||
if (type == 1) {
|
||
router.push({
|
||
path: '/todolist',
|
||
})
|
||
} else if (type == 2){
|
||
router.push({
|
||
path: '/donelist',
|
||
})
|
||
}
|
||
}
|
||
const handleGoToArticleDetail = (row) => {
|
||
router.push({
|
||
name: 'Article/detail',
|
||
query: {
|
||
id: row.articleId
|
||
}
|
||
})
|
||
}
|
||
const goToArticleList = (type,otherHelpType) => {
|
||
let queryType=''
|
||
if(type){
|
||
queryType=type
|
||
}else{
|
||
console.info("🚀 ~method:'otherHelpType' -----", otherHelpType)
|
||
if(otherHelpType=='first'){
|
||
queryType= '1'
|
||
}else if(otherHelpType=='second'){
|
||
queryType= '2'
|
||
}else if(otherHelpType=='third'){
|
||
queryType= '3'
|
||
}
|
||
}
|
||
router.push({
|
||
name: 'Manage',
|
||
query:{
|
||
type: queryType
|
||
}
|
||
})
|
||
}
|
||
const goToResearchFund = () => {
|
||
router.push({
|
||
name: 'Dev'
|
||
})
|
||
}
|
||
const goToSpecialFund = () => {
|
||
router.push({
|
||
name: 'Fund'
|
||
})
|
||
}
|
||
const refreshTodoOrDoneList = (name) => {
|
||
getTodoList()
|
||
getDoneList()
|
||
}
|
||
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 getTaskStatistics = () => {
|
||
getHomeStatistics().then(res => {
|
||
if (res.code === 1000) {
|
||
taskTabList.value[0].num = res.data.stayInitiation || 0
|
||
taskTabList.value[1].num = res.data.approvedProject || 0
|
||
taskTabList.value[2].num = res.data.implementation || 0
|
||
taskTabList.value[3].num = res.data.acceptanceCheck || 0
|
||
} else {
|
||
ElNotification({
|
||
title: '提示',
|
||
message: res.msg,
|
||
type: 'error'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
const getTodoList = () => {
|
||
getHomeTaskInfo().then(res => {
|
||
if (res.code === 1000) {
|
||
todoList.value = res.data.rows
|
||
// todoNum.value=res.data.total
|
||
} else {
|
||
ElNotification({
|
||
title: '提示',
|
||
message: res.msg,
|
||
type: 'error'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
const getDoneList = () => {
|
||
getDoneTaskInfo().then(res => {
|
||
if (res.code === 1000) {
|
||
doneList.value = res.data.rows
|
||
// todoNum.value=res.data.total
|
||
} else {
|
||
ElNotification({
|
||
title: '提示',
|
||
message: res.msg,
|
||
type: 'error'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
const changeResearchFundDataByYear = (year) => {
|
||
if (year) {
|
||
getResearchChart(year)
|
||
}
|
||
}
|
||
const getFundChart = () => {
|
||
getSpecialFundChart().then(res => {
|
||
if (res.code === 1000) {
|
||
if (res.data?.length == 0) return;
|
||
if (fundPieOption.value.series && fundPieOption.value.series?.length > 0) {
|
||
fundPieOption.value.series[0].data[0].value = res.data[0].value
|
||
fundPieOption.value.series[0].data[0].name = res.data[0].name
|
||
fundPieOption.value.series[0].data[1].value = res.data[1].value
|
||
fundPieOption.value.series[0].data[1].name = res.data[1].name
|
||
nextTick(() => {
|
||
initFundCharts()
|
||
})
|
||
}
|
||
} else {
|
||
ElNotification({
|
||
title: '提示',
|
||
message: res.msg,
|
||
type: 'error'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
const getResearchChart = (year) => {
|
||
getResearchFundChart(year).then(res => {
|
||
if (res.code === 1000) {
|
||
totalMoney.value = res.data.totalAmount
|
||
moneyData.value = res.data.rdCompanyList
|
||
if (res.data.rdCompanyList?.length == 0) return;
|
||
|
||
if (moneyPieOption.value.series && moneyPieOption.value.series?.length > 0) {
|
||
moneyPieOption.value.series[0].data = res.data.rdCompanyList
|
||
nextTick(() => {
|
||
initMoneyCharts()
|
||
})
|
||
}
|
||
} else {
|
||
ElNotification({
|
||
title: '提示',
|
||
message: res.msg,
|
||
type: 'error'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
const getArticleList = async (articleType) => {
|
||
let {data, code, msg} = await getArticle({articleType: articleType})
|
||
if (code === 1000) {
|
||
return data.rows
|
||
} else {
|
||
ElNotification({
|
||
title: '提示',
|
||
message: msg,
|
||
type: 'error'
|
||
})
|
||
}
|
||
}
|
||
window.addEventListener('resize', () => {
|
||
console.info("🚀 ~method:resize -----")
|
||
data.fundPieCharts = null
|
||
data.moneyPieCharts = null
|
||
initFundCharts()
|
||
initMoneyCharts()
|
||
})
|
||
|
||
const clickGotoListPage = (item) => {
|
||
if (item.type === 'pending') {
|
||
router.push({
|
||
name: 'Initiation',
|
||
query: {
|
||
state: 0
|
||
}
|
||
})
|
||
} else if (item.type === 'approved') {
|
||
router.push({
|
||
name: 'Initiation',
|
||
query: {
|
||
state: 4
|
||
}
|
||
})
|
||
} else if (item.type === 'carryout') {
|
||
router.push({
|
||
name: 'Implementation',
|
||
query: {
|
||
state: 0
|
||
}
|
||
})
|
||
} else if (item.type === 'check') {
|
||
router.push({
|
||
name: 'Implementation',
|
||
query: {
|
||
state: 4
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
const getImgUrl = (name) => {
|
||
return new URL('/' + name, import.meta.url).href
|
||
}
|
||
|
||
const handleDetail = (row) => {
|
||
router.push({
|
||
name: 'Requirement/detail',
|
||
query: {
|
||
id: row.requirementId
|
||
}
|
||
})
|
||
}
|
||
const handleReport = (row) => {
|
||
router.push({
|
||
name: 'Summary/add',
|
||
query: {
|
||
id: row.requirementId
|
||
}
|
||
})
|
||
}
|
||
const getReportNumTotal = (val) => {
|
||
reportNum.value = val
|
||
}
|
||
const handleView = (row) => {
|
||
if (row.targetState == '00' && row.targetId) {
|
||
router.push({
|
||
name: 'Requirement/detail',
|
||
query: {
|
||
id: row.targetId,
|
||
source: 'home'
|
||
}
|
||
})
|
||
}
|
||
// else if (row.targetState == '10' && row.targetId) {
|
||
// router.push({
|
||
// name: 'Summary/detail',
|
||
// query: {
|
||
// projectId: row.targetId,
|
||
// state: row.state,
|
||
// source: 'home'
|
||
// }
|
||
// })
|
||
// }
|
||
else if (row.targetState == '10'||row.targetState == '20' || row.targetState == '40' || row.targetState == '50') {
|
||
router.push({
|
||
name: 'Implementation/detail',
|
||
query: {
|
||
projectId: row.targetId,
|
||
state: row.state,
|
||
step: row.targetState,
|
||
source: 'home'
|
||
}
|
||
})
|
||
} else if (row.targetState == '70' && row.targetId) {
|
||
router.push({
|
||
name: 'Fund/detail',
|
||
query: {
|
||
id: row.targetId,
|
||
state: row.state,
|
||
source: 'home'
|
||
}
|
||
})
|
||
} else if (row.targetState == '80' && row.targetId) {
|
||
router.push({
|
||
name: 'Share/detail',
|
||
query: {
|
||
id: row.targetId,
|
||
state: row.state,
|
||
source: 'home'
|
||
}
|
||
})
|
||
} else if (row.targetState == '90' && row.targetId) {
|
||
router.push({
|
||
name: 'Phase/detail',
|
||
query: {
|
||
projectId: row.targetId,
|
||
source: 'home'
|
||
}
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@media (min-width: 1200px) and (max-width: 1918px) {
|
||
//.right-top {
|
||
// height: 684px !important;
|
||
//}
|
||
//.home-bg .notice-block {
|
||
// height: 624px !important;
|
||
//}
|
||
//.todo-bg {
|
||
// margin-top: 10px;
|
||
//}
|
||
.block {
|
||
width: 300px !important;
|
||
}
|
||
}
|
||
|
||
@media only screen and (max-width: 1800px) {
|
||
.statistics {
|
||
.block {
|
||
width: 280px !important;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
@media only screen and (max-width: 1720px) {
|
||
.statistics {
|
||
.block {
|
||
width: 260px !important;
|
||
//height: 140px!important;
|
||
}
|
||
}
|
||
//.right-top {
|
||
// height: 670px !important;
|
||
//}
|
||
//.home-bg .notice-block {
|
||
// height: 624px !important;
|
||
//}
|
||
}
|
||
|
||
@media only screen and (max-width: 1620px) {
|
||
.statistics {
|
||
.block {
|
||
width: 240px !important;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
@media only screen and (max-width: 1500px) {
|
||
.statistics {
|
||
.block {
|
||
width: 220px !important;
|
||
//height: 120px!important;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
//@media only screen and (max-width: 1420px) {
|
||
// .statistics {
|
||
// .block {
|
||
// width: 280px !important;
|
||
// }
|
||
// }
|
||
//
|
||
//}
|
||
|
||
//@media only screen and (max-width: 1344px) {
|
||
// .statistics {
|
||
// .block {
|
||
// width: 260px !important;
|
||
// }
|
||
// }
|
||
//
|
||
//}
|
||
//
|
||
//@media only screen and (max-width: 1270px) {
|
||
// .statistics {
|
||
// .block {
|
||
// width: 240px !important;
|
||
// }
|
||
// }
|
||
//
|
||
//}
|
||
|
||
@media only screen and (max-width: 1200px) {
|
||
.right {
|
||
margin-top: 10px;
|
||
}
|
||
:deep(.el-table) {
|
||
height: 300px !important;
|
||
}
|
||
.todo-bg {
|
||
margin-top: 10px;
|
||
}
|
||
.statistics {
|
||
.block {
|
||
width: 350px !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
@media only screen and (max-width: 1000px) {
|
||
.right {
|
||
margin-top: 10px;
|
||
}
|
||
:deep(.el-table) {
|
||
height: 300px !important;
|
||
}
|
||
.todo-bg {
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
@media only screen and (max-width: 888px) {
|
||
.statistics {
|
||
.block {
|
||
width: 320px !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media only screen and (max-width: 820px) {
|
||
.statistics {
|
||
.block {
|
||
width: 300px !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media only screen and (max-width: 767px) {
|
||
.right {
|
||
margin-top: 10px;
|
||
}
|
||
:deep(.el-table) {
|
||
height: 300px !important;
|
||
}
|
||
.todo-bg {
|
||
margin-top: 10px;
|
||
}
|
||
.statistics {
|
||
.block {
|
||
width: 350px !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
* {
|
||
font-family: Source Sans Pro, Source Sans Pro;
|
||
}
|
||
|
||
.money-block {
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
padding-top: 49px;
|
||
padding-right: 10px;
|
||
|
||
.total-money {
|
||
height: 25px;
|
||
font-weight: 400;
|
||
font-size: 15px;
|
||
color: #000000;
|
||
line-height: 18px;
|
||
}
|
||
|
||
.legend-block {
|
||
height: 240px;
|
||
overflow-y: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
|
||
// 滚动条轨道
|
||
&::-webkit-scrollbar-track {
|
||
background: rgb(239, 239, 239);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
// 小滑块
|
||
&::-webkit-scrollbar-thumb {
|
||
background: rgba(80, 81, 82, 0.29);
|
||
border-radius: 10px;
|
||
}
|
||
}
|
||
|
||
.legend {
|
||
margin-top: 14px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
> div:last-child {
|
||
font-weight: 400;
|
||
font-size: 15px;
|
||
color: #000000;
|
||
letter-spacing: 1px;
|
||
margin-left: 28px;
|
||
}
|
||
|
||
.company-name {
|
||
font-size: 12px;
|
||
color: rgba(0, 0, 0, 0.6);
|
||
letter-spacing: 1px;
|
||
margin-left: 10px;
|
||
//margin-right: 30px;
|
||
//white-space: nowrap;
|
||
}
|
||
|
||
.money-dot {
|
||
width: 16px;
|
||
height: 16px;
|
||
flex-shrink: 0;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.money-container {
|
||
//height: calc((100vh / 2) - 200px);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
//margin-top: 49px;
|
||
width: 250px;
|
||
|
||
> div {
|
||
height: 250px;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.container {
|
||
//height: calc((100vh / 2) - 200px);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
|
||
> div {
|
||
height: 300px;
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
:deep(.el-card__body) {
|
||
padding: 0 5px !important;
|
||
}
|
||
|
||
:deep(.el-tabs__nav-wrap:after) {
|
||
background-color: #D9D9D9 !important;
|
||
height: 2px !important;
|
||
}
|
||
|
||
:deep(.el-tabs__active-bar) {
|
||
height: 2px !important;
|
||
background-color: #1476E3 !important;
|
||
}
|
||
|
||
:deep(.el-tabs__new-tab ) {
|
||
width: 67px !important;
|
||
border: none !important;
|
||
color: #1476E3;
|
||
font-size: 14px;
|
||
line-height: 51px !important;
|
||
height: 51px !important;
|
||
margin: 0 0 0 -93px !important;
|
||
z-index: 99;
|
||
position: relative;
|
||
|
||
&:hover {
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
:deep(.el-card) {
|
||
border-radius: 10px !important;
|
||
}
|
||
|
||
:deep(.is-icon-close) {
|
||
display: none;
|
||
}
|
||
|
||
:deep(.el-tabs__nav-scroll) {
|
||
.el-tabs__nav {
|
||
.el-tabs__item {
|
||
flex: 1;
|
||
font-size: 16px;
|
||
width: 120px;
|
||
//font-weight: 600;
|
||
height: 51px;
|
||
color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.el-tabs__item.is-active {
|
||
color: #1F63E6;
|
||
}
|
||
|
||
//#1476E3
|
||
}
|
||
}
|
||
|
||
|
||
.home-bg {
|
||
height: calc(100vh - 130px);
|
||
max-height: calc(100vh - 96px);
|
||
background-color: #EFEFEF;
|
||
position: absolute;
|
||
left: 18px;
|
||
right: 0;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
|
||
.todo-more {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #1476E3;
|
||
cursor: pointer;
|
||
margin-right: 10px;
|
||
line-height: 20px;
|
||
|
||
&:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
> span {
|
||
margin-left: 10px;
|
||
margin-right: 3px;
|
||
}
|
||
}
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
// 滚动条轨道
|
||
&::-webkit-scrollbar-track {
|
||
background: rgb(239, 239, 239);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
// 小滑块
|
||
&::-webkit-scrollbar-thumb {
|
||
background: rgba(80, 81, 82, 0.29);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.top-left {
|
||
//flex: 0.8;
|
||
.notice-title {
|
||
margin-top: 10px;
|
||
margin-left: 14px;
|
||
color: #000000;
|
||
letter-spacing: 1px;
|
||
font-size: 16px;
|
||
|
||
> span {
|
||
color: #F40E0E;
|
||
|
||
> span {
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.todo-bg {
|
||
margin-top: 10px;
|
||
|
||
.todo-content {
|
||
height: 216px;
|
||
overflow-x: auto;
|
||
margin: 0 12px 0 19px;
|
||
//padding: 0 0 10px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
|
||
// 滚动条轨道
|
||
&::-webkit-scrollbar-track {
|
||
background: rgb(239, 239, 239);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
// 小滑块
|
||
&::-webkit-scrollbar-thumb {
|
||
background: rgba(80, 81, 82, 0.29);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.todo-border {
|
||
padding: 13px;
|
||
width: 170px;
|
||
//height: 185px;
|
||
background: rgba(73, 171, 239, 0.05);
|
||
border-radius: 8px 8px 8px 8px;
|
||
border: 1px solid #D0D0E3;
|
||
margin-right: 28px;
|
||
font-size: 14px;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
&:hover {
|
||
border: 1px solid #F55815;
|
||
}
|
||
|
||
.gray-time {
|
||
display: flex;
|
||
flex-direction: column;
|
||
//align-items: flex-end;
|
||
font-weight: 400;
|
||
color: rgba(0, 0, 0, 0.5);
|
||
letter-spacing: 1px;
|
||
font-size: 12px;
|
||
|
||
.view {
|
||
//float: right;
|
||
color: #1F63E6;
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
text-align: right;
|
||
|
||
&:hover {
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
> div:first-child {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.title {
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
.time {
|
||
width: 80px;
|
||
margin-left: 23px;
|
||
|
||
//&:last-child {
|
||
// white-space: nowrap;
|
||
//}
|
||
}
|
||
}
|
||
|
||
.black-text {
|
||
white-space: nowrap;
|
||
color: #000000;
|
||
margin-bottom: 7px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.target-name {
|
||
width: 140px;
|
||
color: #000000;
|
||
margin-bottom: 7px;
|
||
font-size: 12px;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
-webkit-line-clamp: 1;
|
||
}
|
||
|
||
.process-type {
|
||
white-space: nowrap;
|
||
margin-top: 13px;
|
||
margin-bottom: 7px;
|
||
color: #1F63E6;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.status-style {
|
||
padding: 0 8px;
|
||
display: inline-block;
|
||
height: 23px;
|
||
border-radius: 3px 3px 3px 3px;
|
||
font-size: 12px;
|
||
color: #FFFFFF;
|
||
line-height: 23px;
|
||
letter-spacing: 1px;
|
||
text-align: center;
|
||
background-color: #2a99ff;
|
||
margin-bottom: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.todo-top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
margin-bottom: 12px;
|
||
margin-left: 20px;
|
||
|
||
|
||
.bell {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #F55815;
|
||
font-size: 15px;
|
||
|
||
> span {
|
||
margin-left: 10px;
|
||
letter-spacing: 1px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.statistics {
|
||
.block {
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 324px;
|
||
height: 170px;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
|
||
.block-right {
|
||
margin-left: 15%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 13px;
|
||
|
||
> span:first-child {
|
||
white-space: nowrap;
|
||
font-size: 36px;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
|
||
> span {
|
||
margin-left: 10px;
|
||
font-size: 13px;
|
||
}
|
||
}
|
||
|
||
> span:last-child {
|
||
white-space: nowrap;
|
||
color: #fff;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
|
||
.right-top {
|
||
height: 410px !important;
|
||
}
|
||
}
|
||
|
||
.rules-block {
|
||
height: 343px !important;
|
||
margin-top: 0 !important;
|
||
|
||
.notice {
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 47px !important;
|
||
line-height: 47px !important;
|
||
color: rgba(0, 0, 0, 0.5) !important;
|
||
|
||
> div:first-child {
|
||
position: relative;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
|
||
&:hover {
|
||
color: #1476E3;
|
||
background: #F6FBFE;
|
||
}
|
||
|
||
> span:first-child {
|
||
//width: 80% !important;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.dot {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 14px;
|
||
display: inline-block;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 25px;
|
||
background: #DD3B3B;
|
||
//margin-left: -6px;
|
||
//margin-bottom: 5px;
|
||
//margin-right: 4px;
|
||
}
|
||
|
||
}
|
||
|
||
div:last-child {
|
||
margin-left: 20px;
|
||
font-weight: 400;
|
||
letter-spacing: 1px;
|
||
color: rgba(0, 0, 0, 0.5)
|
||
}
|
||
}
|
||
}
|
||
|
||
.notice-block {
|
||
height: 452px;
|
||
//height: 100%;
|
||
overflow-y: auto;
|
||
//margin-top: 10px;
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
|
||
// 滚动条轨道
|
||
&::-webkit-scrollbar-track {
|
||
background: rgb(239, 239, 239);
|
||
border-radius: 2px;
|
||
}
|
||
|
||
// 小滑块
|
||
&::-webkit-scrollbar-thumb {
|
||
background: rgba(80, 81, 82, 0.29);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.notice {
|
||
cursor: pointer;
|
||
//min-width: 300px;
|
||
height: 75px;
|
||
line-height: 75px;
|
||
padding: 0 15px;
|
||
font-size: 12px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
|
||
> span:first-child {
|
||
margin-right: 10px;
|
||
margin-left: 10px;
|
||
color: #1476E3;
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
}
|
||
|
||
&:hover {
|
||
color: #1476E3;
|
||
background: #F6FBFE;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
//height: 100%;
|
||
//height: calc(100vh - 130px);
|
||
display: flex;
|
||
//flex: 0.5;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.right-top {
|
||
//height: 100%;
|
||
height: 528px;
|
||
//flex: 0.7;
|
||
overflow: hidden;
|
||
border-radius: 10px;
|
||
background-color: #ffffff;
|
||
|
||
.fund-pie {
|
||
width: 100%;
|
||
height: 25px;
|
||
font-size: 12px;
|
||
color: rgba(0, 0, 0, 0.5);
|
||
text-align: center;
|
||
//margin-top: 15px;
|
||
}
|
||
|
||
.title-block {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 15px;
|
||
border-bottom: 2px solid #D9D9D9;
|
||
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.tag {
|
||
width: 7px;
|
||
height: 18px;
|
||
background: linear-gradient(#1476E3 0%, #99C9FF 100%);
|
||
margin-right: 5px;
|
||
border-radius: 2px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
> span {
|
||
white-space: nowrap;
|
||
color: #000000;
|
||
//font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.more {
|
||
display: flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
color: #1476E3;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
|
||
line-height: 20px;
|
||
|
||
&:hover {
|
||
text-decoration: underline;
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|