update

src/views/home/index.vue

@@ -2,13 +2,18 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <el-col :span="24" class="one"> 首页 </el-col>
+        <admin v-if="hasView('admin')"></admin>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script setup>
+import admin from './parts/admin.vue'
+import { UserStore } from '@/store/user'
+import { upperFirst, isArray } from 'lodash-es'
+const userStore = UserStore()
+const user = userStore.user
 // 加载中
 const loading = ref(false)
 // 请求
@@ -16,5 +21,11 @@ onMounted(async () => {
   loading.value = true
   loading.value = false
 })
+const hasView = (roleCode) => {
+  const rc = upperFirst(roleCode)
+  const ru = toRaw(user)
+  console.log(ru)
+  if (isArray(ru.role) && ru.role.includes(rc)) return true
+}
 </script>
 <style scoped lang="scss"></style>

src/views/home/parts/admin.vue

@@ -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>