|
@@ -0,0 +1,181 @@
|
|
|
|
+<template>
|
|
|
|
+ <el-row :gutter="20" style="height: 37vh">
|
|
|
|
+ <el-col :span="8" style="height: 100%">
|
|
|
|
+ <el-col :span="24"> {{ $t('符合您需求的成果') }} </el-col>
|
|
|
|
+ <el-col :span="24">
|
|
|
|
+ <custom-table :data="achieveData" :fields="achieveFields" :total="achieveTotal" height="30vh">
|
|
|
|
+ <template #rate="{ row }">
|
|
|
|
+ <el-rate v-model="row.rate" size="large" />
|
|
|
|
+ </template>
|
|
|
|
+ </custom-table>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="8" style="text-align: center">
|
|
|
|
+ <el-col :span="24" style="margin: 5vh 0; font-size: 18px; font-weight: 700"> {{ $t('当前时间') }} </el-col>
|
|
|
|
+ <el-col :span="24" style="font-weight: 500; font-size: 30px; padding-top: 5vh">
|
|
|
|
+ {{ nowTime }}
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="8" style="text-align: center">
|
|
|
|
+ <div style="margin: 16vh 0">
|
|
|
|
+ <el-statistic title="在线用户数" :value="12934" />
|
|
|
|
+ </div>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ <el-row :gutter="20" style="height: 37vh; margin-top: 5vh">
|
|
|
|
+ <el-col :span="8">
|
|
|
|
+ <el-col :span="24"> {{ $t('符合您成果的需求') }} </el-col>
|
|
|
|
+ <el-col :span="24">
|
|
|
|
+ <custom-table :data="reqData" :fields="reqFields" :total="reqTotal" height="30vh">
|
|
|
|
+ <template #rate="{ row }">
|
|
|
|
+ <el-rate v-model="row.rate" size="large" />
|
|
|
|
+ </template>
|
|
|
|
+ </custom-table>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="8">
|
|
|
|
+ <div ref="c1" style="width: 100%; height: 100%"></div>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="8">
|
|
|
|
+ <div ref="c2" style="width: 100%; height: 100%"></div>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script setup>
|
|
|
|
+import * as echarts from 'echarts'
|
|
|
|
+import moment from 'moment'
|
|
|
|
+const achieveData = ref([{ name: '多种酶的催化剂', rate: 4 }])
|
|
|
|
+const achieveFields = [
|
|
|
|
+ { label: '需求标题', model: 'name' },
|
|
|
|
+ { label: '推荐指数', model: 'rate', custom: true }
|
|
|
|
+]
|
|
|
|
+const achieveTotal = ref(1)
|
|
|
|
+const reqData = ref([{ name: '蛋白质分子合成技术', rate: 5 }])
|
|
|
|
+const reqTotal = ref(1)
|
|
|
|
+
|
|
|
|
+const reqFields = [
|
|
|
|
+ { label: '供给成果', model: 'name' },
|
|
|
|
+ { label: '推荐指数', model: 'rate', custom: true }
|
|
|
|
+]
|
|
|
|
+const nowTime = ref()
|
|
|
|
+const setNowTime = () => {
|
|
|
|
+ setInterval(() => {
|
|
|
|
+ nowTime.value = moment().format('YYYY-MM-DD HH:mm:ss')
|
|
|
|
+ }, 1000)
|
|
|
|
+}
|
|
|
|
+setNowTime()
|
|
|
|
+
|
|
|
|
+const c1 = ref()
|
|
|
|
+const initC1 = () => {
|
|
|
|
+ const ch = echarts.init(c1.value)
|
|
|
|
+ const data1 = 1
|
|
|
|
+ const options = {
|
|
|
|
+ title: {
|
|
|
|
+ text: '成果统计',
|
|
|
|
+ left: 'center',
|
|
|
|
+ textStyle: {
|
|
|
|
+ fontSize: 28,
|
|
|
|
+ fontWeight: 600,
|
|
|
|
+ fontStyle: 'normal'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ legend: {
|
|
|
|
+ orient: 'vertical',
|
|
|
|
+ left: 'left'
|
|
|
|
+ },
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'item',
|
|
|
|
+ formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
|
|
+ },
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ name: '专利',
|
|
|
|
+ type: 'pie',
|
|
|
|
+ center: ['50%', '65%'],
|
|
|
|
+ radius: ['45%', '60%'],
|
|
|
|
+ startAngle: 360,
|
|
|
|
+ avoidLabelOverlap: true,
|
|
|
|
+ labelLine: {
|
|
|
|
+ normal: {
|
|
|
|
+ show: true
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ data: [
|
|
|
|
+ {
|
|
|
|
+ value: data1,
|
|
|
|
+ name: '蛋白质方向专利'
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ ch.setOption(options)
|
|
|
|
+ window.addEventListener('resize', function () {
|
|
|
|
+ ch.resize()
|
|
|
|
+ })
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const c2 = ref()
|
|
|
|
+const initC2 = () => {
|
|
|
|
+ const dayList = [
|
|
|
|
+ `${moment().subtract(7, 'd').format('M-D')}`,
|
|
|
|
+ `${moment().subtract(6, 'd').format('M-D')}`,
|
|
|
|
+ `${moment().subtract(5, 'd').format('M-D')}`,
|
|
|
|
+ `${moment().subtract(4, 'd').format('M-D')}`,
|
|
|
|
+ `${moment().subtract(3, 'd').format('M-D')}`,
|
|
|
|
+ `${moment().subtract(2, 'd').format('M-D')}`,
|
|
|
|
+ `${moment().subtract(1, 'd').format('M-D')}`
|
|
|
|
+ ]
|
|
|
|
+ const ch = echarts.init(c2.value)
|
|
|
|
+ const options = {
|
|
|
|
+ title: {
|
|
|
|
+ text: '近七日业务统计'
|
|
|
|
+ },
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'axis'
|
|
|
|
+ },
|
|
|
|
+ legend: {
|
|
|
|
+ data: ['供需发布数', '赛事进行数', '成果洽谈数']
|
|
|
|
+ },
|
|
|
|
+ xAxis: {
|
|
|
|
+ type: 'category',
|
|
|
|
+ boundaryGap: false,
|
|
|
|
+ data: dayList
|
|
|
|
+ },
|
|
|
|
+ yAxis: {
|
|
|
|
+ type: 'value'
|
|
|
|
+ },
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ name: '供需发布数',
|
|
|
|
+ type: 'line',
|
|
|
|
+ stack: 'Total',
|
|
|
|
+ data: [120, 132, 101, 134, 90, 230, 210]
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '赛事进行数',
|
|
|
|
+ type: 'line',
|
|
|
|
+ stack: 'Total',
|
|
|
|
+ data: [220, 182, 191, 234, 290, 330, 310]
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '成果洽谈数',
|
|
|
|
+ type: 'line',
|
|
|
|
+ stack: 'Total',
|
|
|
|
+ data: [150, 232, 201, 154, 190, 330, 410]
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ ch.setOption(options)
|
|
|
|
+ window.addEventListener('resize', function () {
|
|
|
|
+ ch.resize()
|
|
|
|
+ })
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+onMounted(() => {
|
|
|
|
+ initC1()
|
|
|
|
+ initC2()
|
|
|
|
+})
|
|
|
|
+</script>
|
|
|
|
+<style scoped></style>
|