修改数据看板

package-lock.json

@@ -14,6 +14,7 @@
         "@vueuse/integrations": "^10.9.0",
         "@wangeditor/editor": "^5.1.23",
         "@wangeditor/editor-for-vue": "5.1.10",
+        "animate.css": "^4.1.1",
         "axios": "^1.6.7",
         "crypto-js": "^4.2.0",
         "echarts": "^5.5.0",
@@ -1592,6 +1593,11 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -7667,6 +7673,11 @@
         "uri-js": "^4.2.2"
       }
     },
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",

package.json

@@ -17,6 +17,7 @@
     "@vueuse/integrations": "^10.9.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "5.1.10",
+    "animate.css": "^4.1.1",
     "axios": "^1.6.7",
     "crypto-js": "^4.2.0",
     "echarts": "^5.5.0",

src/main.js

@@ -18,6 +18,7 @@ import globalComponents from '@/components'
 import { InitDirective } from './utils/directives'
 // 自动滚动
 import vue3SeamlessScroll from 'vue3-seamless-scroll'
+import 'animate.css/animate.min.css'
 const app = createApp(App)
 globalComponents(app)
 setupStore(app)

src/store/api/util.js

@@ -10,5 +10,29 @@ export const UtilStore = defineStore('util', () => {
     const res = await axios.$post(`/util/toExport`, payload)
     return res
   }
-  return { toImport, toExport }
+  const one = async (payload) => {
+    const res = await axios.$get(`/util/oneStatistics`, payload)
+    return res
+  }
+  const two = async (payload) => {
+    const res = await axios.$get(`/util/twoStatistics`, payload)
+    return res
+  }
+  const thr = async (payload) => {
+    const res = await axios.$get(`/util/thrStatistics`, payload)
+    return res
+  }
+  const four = async (payload) => {
+    const res = await axios.$get(`/util/fourStatistics`, payload)
+    return res
+  }
+  const five = async (payload) => {
+    const res = await axios.$get(`/util/fiveStatistics`, payload)
+    return res
+  }
+  const six = async (payload) => {
+    const res = await axios.$get(`/util/sixStatistics`, payload)
+    return res
+  }
+  return { toImport, toExport, one, two, thr, four, five, six }
 })

src/views/board/index.vue

@@ -1,8 +1,65 @@
 <template>
-  <div id="index">
-    <p>index</p>
-  </div>
+  <el-row>
+    <el-col :span="24">
+      <el-segmented v-model="value" :options="options" @change="viewChange" block>
+        <template #default="{ item }"> {{ item.label }} </template>
+      </el-segmented>
+      <el-divider />
+      <template v-if="!value">
+        <el-alert title="请在上方选择您要查看的数据" type="warning" effect="dark" :closable="false" />
+      </template>
+      <template v-else>
+        <component :is="viewComponent"></component>
+      </template>
+    </el-col>
+  </el-row>
 </template>
 
-<script setup></script>
+<script setup>
+import { get } from 'lodash-es'
+import { defineAsyncComponent } from 'vue'
+const componentList = ref({
+  achievement: defineAsyncComponent(() => import('./parts/achievement.vue')),
+  company: defineAsyncComponent(() => import('./parts/company.vue')),
+  supply: defineAsyncComponent(() => import('./parts/supply.vue')),
+  demand: defineAsyncComponent(() => import('./parts/demand.vue')),
+  expert: defineAsyncComponent(() => import('./parts/expert.vue')),
+  incubate: defineAsyncComponent(() => import('./parts/incubate.vue')),
+  project: defineAsyncComponent(() => import('./parts/project.vue')),
+  user: defineAsyncComponent(() => import('./parts/user.vue'))
+})
+const value = ref()
+const viewComponent = ref()
+/**
+ * 子页面设置
+ * @param label 子页面名称
+ * @param value 子页面id
+ * @param component 子页面文件名,需要与代码中的页面对应,上面componentList设置的key
+ */
+const route = useRoute()
+const path = get(route, 'path')
+import { UserStore } from '@/store/user'
+const userStore = UserStore()
+const menus = userStore.menus
+const thisRouteConfig = menus.find((f) => f.path === path)
+const children = get(thisRouteConfig, 'children', [])
+const options = children.map((i) => {
+  const obj = {
+    label: get(i, 'name'),
+    value: get(i, 'id'),
+    component: get(i, 'component')
+  }
+  return obj
+})
+
+const viewChange = (val) => {
+  const i = options.find((f) => f.value === val)
+  if (!i) return
+  const componentName = get(i, 'component')
+  if (!componentName) return
+  const component = componentList.value[componentName]
+  if (!component) return
+  viewComponent.value = component
+}
+</script>
 <style scoped></style>

src/views/board/parts/achievement.vue

@@ -0,0 +1,162 @@
+<template>
+  <div id="path">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight">
+        <div class="top">
+          <div class="content top_1">
+            <div class="title">
+              <span>统计数量</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts1></echarts1>
+            </div>
+          </div>
+          <div class="content top_2">
+            <div class="title">
+              <span>行业领域</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts2></echarts2>
+            </div>
+          </div>
+          <div class="content top_3">
+            <div class="title">
+              <span>行业领域</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts3></echarts3>
+            </div>
+          </div>
+        </div>
+        <div class="bottom">
+          <div class="content bottom_1">
+            <div class="title">
+              <span>审核情况</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts4></echarts4>
+            </div>
+          </div>
+          <div class="content bottom_2">
+            <div class="title">
+              <span>年度获奖情况</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts5></echarts5>
+            </div>
+          </div>
+          <div class="content bottom_3">
+            <div class="title">
+              <span>成果来源</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts6></echarts6>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+// 组件
+import echarts1 from './echarts/echarts1.vue'
+import echarts2 from './echarts/echarts2.vue'
+import echarts3 from './echarts/echarts3.vue'
+import echarts4 from './echarts/echarts4.vue'
+import echarts5 from './echarts/echarts5.vue'
+import echarts6 from './echarts/echarts6.vue'
+provide('type', 'achievement')
+</script>
+<style scoped lang="scss">
+.main {
+  width: 100%;
+  min-height: 74vh;
+  color: #fff;
+  font-size: 16px;
+  background: #033c76 url('/images/bg.png') no-repeat center bottom;
+  .top {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 45%;
+    padding: 20px 0 0 0;
+    .top_1 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .top_2 {
+      width: 50%;
+    }
+    .top_3 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .content {
+      .title {
+        display: flex;
+        align-items: flex-end;
+        span {
+          background: url('/images/line1.png') no-repeat bottom right;
+          font-size: 20px;
+          white-space: nowrap;
+          padding-bottom: 10px;
+          padding-right: 20px;
+        }
+        p {
+          background: url('/images/line2.png') no-repeat bottom right;
+          width: 100%;
+          height: 13px;
+          margin-bottom: 5px;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+  .bottom {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 45%;
+    padding: 20px 0;
+    .bottom_1 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .bottom_2 {
+      width: 50%;
+    }
+    .bottom_3 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .content {
+      .title {
+        display: flex;
+        align-items: flex-end;
+        span {
+          background: url('/images/line1.png') no-repeat bottom right;
+          font-size: 20px;
+          white-space: nowrap;
+          padding-bottom: 10px;
+          padding-right: 20px;
+        }
+        p {
+          background: url('/images/line2.png') no-repeat bottom right;
+          width: 100%;
+          height: 13px;
+          margin-bottom: 5px;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/board/parts/company.vue

@@ -0,0 +1,162 @@
+<template>
+  <div id="path">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight">
+        <div class="top">
+          <div class="content top_1">
+            <div class="title">
+              <span>统计数量</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts1></echarts1>
+            </div>
+          </div>
+          <div class="content top_2">
+            <div class="title">
+              <span>企业类型</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts2></echarts2>
+            </div>
+          </div>
+          <div class="content top_3">
+            <div class="title">
+              <span>行业领域</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts3></echarts3>
+            </div>
+          </div>
+        </div>
+        <div class="bottom">
+          <div class="content bottom_1">
+            <div class="title">
+              <span>审核情况</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts4></echarts4>
+            </div>
+          </div>
+          <div class="content bottom_2">
+            <div class="title">
+              <span>年度获奖情况</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts5></echarts5>
+            </div>
+          </div>
+          <div class="content bottom_3">
+            <div class="title">
+              <span>企业员工数量</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts6></echarts6>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+// 组件
+import echarts1 from './echarts/echarts1.vue'
+import echarts2 from './echarts/echarts2.vue'
+import echarts3 from './echarts/echarts3.vue'
+import echarts4 from './echarts/echarts4.vue'
+import echarts5 from './echarts/echarts5.vue'
+import echarts6 from './echarts/echarts6.vue'
+provide('type', 'company')
+</script>
+<style scoped lang="scss">
+.main {
+  width: 100%;
+  min-height: 74vh;
+  color: #fff;
+  font-size: 16px;
+  background: #033c76 url('/images/bg.png') no-repeat center bottom;
+  .top {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 45%;
+    padding: 20px 0 0 0;
+    .top_1 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .top_2 {
+      width: 50%;
+    }
+    .top_3 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .content {
+      .title {
+        display: flex;
+        align-items: flex-end;
+        span {
+          background: url('/images/line1.png') no-repeat bottom right;
+          font-size: 20px;
+          white-space: nowrap;
+          padding-bottom: 10px;
+          padding-right: 20px;
+        }
+        p {
+          background: url('/images/line2.png') no-repeat bottom right;
+          width: 100%;
+          height: 13px;
+          margin-bottom: 5px;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+  .bottom {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 45%;
+    padding: 20px 0;
+    .bottom_1 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .bottom_2 {
+      width: 50%;
+    }
+    .bottom_3 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .content {
+      .title {
+        display: flex;
+        align-items: flex-end;
+        span {
+          background: url('/images/line1.png') no-repeat bottom right;
+          font-size: 20px;
+          white-space: nowrap;
+          padding-bottom: 10px;
+          padding-right: 20px;
+        }
+        p {
+          background: url('/images/line2.png') no-repeat bottom right;
+          width: 100%;
+          height: 13px;
+          margin-bottom: 5px;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/board/parts/demand.vue

@@ -0,0 +1,162 @@
+<template>
+  <div id="path">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight">
+        <div class="top">
+          <div class="content top_1">
+            <div class="title">
+              <span>统计数量</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts1></echarts1>
+            </div>
+          </div>
+          <div class="content top_2">
+            <div class="title">
+              <span>行业领域</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts2></echarts2>
+            </div>
+          </div>
+          <div class="content top_3">
+            <div class="title">
+              <span>所属产业</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts3></echarts3>
+            </div>
+          </div>
+        </div>
+        <div class="bottom">
+          <div class="content bottom_1">
+            <div class="title">
+              <span>审核情况</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts4></echarts4>
+            </div>
+          </div>
+          <div class="content bottom_2">
+            <div class="title">
+              <span>年度获奖情况</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts5></echarts5>
+            </div>
+          </div>
+          <div class="content bottom_3">
+            <div class="title">
+              <span>行业领域</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts6></echarts6>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+// 组件
+import echarts1 from './echarts/echarts1.vue'
+import echarts2 from './echarts/echarts2.vue'
+import echarts3 from './echarts/echarts3.vue'
+import echarts4 from './echarts/echarts4.vue'
+import echarts5 from './echarts/echarts5.vue'
+import echarts6 from './echarts/echarts6.vue'
+provide('type', 'demand')
+</script>
+<style scoped lang="scss">
+.main {
+  width: 100%;
+  min-height: 74vh;
+  color: #fff;
+  font-size: 16px;
+  background: #033c76 url('/images/bg.png') no-repeat center bottom;
+  .top {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 45%;
+    padding: 20px 0 0 0;
+    .top_1 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .top_2 {
+      width: 50%;
+    }
+    .top_3 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .content {
+      .title {
+        display: flex;
+        align-items: flex-end;
+        span {
+          background: url('/images/line1.png') no-repeat bottom right;
+          font-size: 20px;
+          white-space: nowrap;
+          padding-bottom: 10px;
+          padding-right: 20px;
+        }
+        p {
+          background: url('/images/line2.png') no-repeat bottom right;
+          width: 100%;
+          height: 13px;
+          margin-bottom: 5px;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+  .bottom {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 45%;
+    padding: 20px 0;
+    .bottom_1 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .bottom_2 {
+      width: 50%;
+    }
+    .bottom_3 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .content {
+      .title {
+        display: flex;
+        align-items: flex-end;
+        span {
+          background: url('/images/line1.png') no-repeat bottom right;
+          font-size: 20px;
+          white-space: nowrap;
+          padding-bottom: 10px;
+          padding-right: 20px;
+        }
+        p {
+          background: url('/images/line2.png') no-repeat bottom right;
+          width: 100%;
+          height: 13px;
+          margin-bottom: 5px;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/board/parts/echarts/echarts1.vue

@@ -0,0 +1,328 @@
+<template>
+  <div class="echarts">
+    <div ref="echarts1" class="echarts1"></div>
+    <div ref="echarts2" class="echarts1"></div>
+    <div ref="echarts3" class="echarts1"></div>
+    <div ref="echarts4" class="echarts1"></div>
+  </div>
+</template>
+<style scoped lang="scss">
+.echarts {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  .echarts1 {
+    height: 15vh;
+    width: 50%;
+  }
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts1 = ref()
+const echarts2 = ref()
+const echarts3 = ref()
+const echarts4 = ref()
+const type = inject('type')
+// 接口
+import { UtilStore } from '@/store/api/util'
+const utilStore = UtilStore()
+const list = ref([])
+onMounted(async () => {
+  await search()
+  await echarts1View()
+  await echarts2View()
+  await echarts3View()
+  await echarts4View()
+})
+const search = async () => {
+  let res = await utilStore.one({ type })
+  if (res.errcode == '0') list.value = res.data
+}
+function echarts1View() {
+  const myChart1 = echarts.init(echarts1.value)
+  const option1 = {
+    grid: {
+      left: '0%',
+      top: '20%',
+      right: '0%',
+      bottom: '0%',
+      containLabel: true
+    },
+    title: {
+      subtext: list.value[0].name,
+      left: 'center',
+      bottom: 15,
+      subtextStyle: {
+        color: 'rgba(255,255,255,.6)',
+        fontSize: 12
+      }
+    },
+    series: [
+      {
+        name: '',
+        type: 'gauge',
+        radius: '90%',
+        startAngle: 200,
+        endAngle: -20,
+        detail: { formatter: '{value}', offsetCenter: [0, 1], color: '#fff', fontSize: 16 },
+        data: list.value[0].data,
+        axisLine: {
+          lineStyle: {
+            width: 10,
+            color: [
+              [
+                list.value[0].percentage,
+                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  {
+                    offset: 0,
+                    color: '#ae3df6'
+                  },
+                  {
+                    offset: 1,
+                    color: '#53bef9'
+                  }
+                ])
+              ],
+              [1, '#1c4e85']
+            ]
+          }
+        },
+        pointer: {
+          show: false, //不显示指针
+          length: '70%',
+          width: 3
+        },
+        axisLabel: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          show: false
+        }
+      }
+    ]
+  }
+  myChart1.setOption(option1)
+  window.addEventListener('resize', function () {
+    myChart1.resize()
+  })
+}
+function echarts2View() {
+  const myChart2 = echarts.init(echarts2.value)
+  const option2 = {
+    grid: {
+      left: '0%',
+      top: '20%',
+      right: '0%',
+      bottom: '0%',
+      containLabel: true
+    },
+    title: {
+      subtext: list.value[1].name,
+      left: 'center',
+      bottom: 15,
+      subtextStyle: {
+        color: 'rgba(255,255,255,.6)',
+        fontSize: 12
+      }
+    },
+    series: [
+      {
+        name: '',
+        type: 'gauge',
+        radius: '90%',
+        startAngle: 200,
+        endAngle: -20,
+        detail: { formatter: '{value}', offsetCenter: [0, 1], color: '#fff', fontSize: 16 },
+        data: list.value[1].data,
+        axisLine: {
+          lineStyle: {
+            width: 10,
+            color: [
+              [
+                list.value[1].percentage,
+                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  {
+                    offset: 0,
+                    color: '#1db0d2'
+                  },
+                  {
+                    offset: 1,
+                    color: '#44ceef'
+                  }
+                ])
+              ],
+              [1, '#1c4e85']
+            ]
+          }
+        },
+        pointer: {
+          show: false, //不显示指针
+          length: '70%',
+          width: 3
+        },
+        axisLabel: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          show: false
+        }
+      }
+    ]
+  }
+  myChart2.setOption(option2)
+  window.addEventListener('resize', function () {
+    myChart2.resize()
+  })
+}
+function echarts3View() {
+  const myChart3 = echarts.init(echarts3.value)
+  const option3 = {
+    grid: {
+      left: '0%',
+      top: '20%',
+      right: '0%',
+      bottom: '0%',
+      containLabel: true
+    },
+    title: {
+      subtext: list.value[2].name,
+      left: 'center',
+      bottom: 15,
+      subtextStyle: {
+        color: 'rgba(255,255,255,.6)',
+        fontSize: 12
+      }
+    },
+    series: [
+      {
+        name: '',
+        type: 'gauge',
+        radius: '90%',
+        startAngle: 200,
+        endAngle: -20,
+        detail: { formatter: '{value}', offsetCenter: [0, 1], color: '#fff', fontSize: 16 },
+        data: list.value[2].data,
+        axisLine: {
+          lineStyle: {
+            width: 10,
+            color: [
+              [
+                list.value[2].percentage,
+                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  {
+                    offset: 0,
+                    color: '#1ea899'
+                  },
+                  {
+                    offset: 1,
+                    color: '#29c582'
+                  }
+                ])
+              ],
+              [1, '#1c4e85']
+            ]
+          }
+        },
+        pointer: {
+          show: false, //不显示指针
+          length: '70%',
+          width: 3
+        },
+        axisLabel: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          show: false
+        }
+      }
+    ]
+  }
+  myChart3.setOption(option3)
+  window.addEventListener('resize', function () {
+    myChart3.resize()
+  })
+}
+function echarts4View() {
+  const myChart4 = echarts.init(echarts4.value)
+  const option4 = {
+    grid: {
+      left: '0%',
+      top: '20%',
+      right: '0%',
+      bottom: '0%',
+      containLabel: true
+    },
+    title: {
+      subtext: list.value[3].name,
+      left: 'center',
+      bottom: 15,
+      subtextStyle: {
+        color: 'rgba(255,255,255,.6)',
+        fontSize: 12
+      }
+    },
+    series: [
+      {
+        name: '',
+        type: 'gauge',
+        radius: '90%',
+        startAngle: 200,
+        endAngle: -20,
+        detail: { formatter: '{value}', offsetCenter: [0, 1], color: '#fff', fontSize: 16 },
+        data: list.value[3].data,
+        axisLine: {
+          lineStyle: {
+            width: 10,
+            color: [
+              [
+                list.value[3].percentage,
+                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  //0.8值为颜色显示百分比80%
+                  {
+                    offset: 0,
+                    color: '#e6658f'
+                  },
+                  {
+                    offset: 1,
+                    color: '#f8a58b'
+                  }
+                ])
+              ],
+              [1, '#1c4e85']
+            ]
+          }
+        },
+        pointer: {
+          show: false, //不显示指针
+          length: '70%',
+          width: 3
+        },
+        axisLabel: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          show: false
+        }
+      }
+    ]
+  }
+  myChart4.setOption(option4)
+  window.addEventListener('resize', function () {
+    myChart4.resize()
+  })
+}
+</script>

src/views/board/parts/echarts/echarts2.vue

@@ -0,0 +1,119 @@
+<template>
+  <div ref="echarts2" class="echarts2"></div>
+</template>
+<style scoped lang="scss">
+.echarts2 {
+  height: 30vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts2 = ref()
+const type = inject('type')
+// 接口
+import { UtilStore } from '@/store/api/util'
+const utilStore = UtilStore()
+const info = ref({})
+onMounted(async () => {
+  await search()
+  await echarts2View()
+})
+const search = async () => {
+  let res = await utilStore.two({ type })
+  if (res.errcode == '0') info.value = res.data
+}
+function echarts2View() {
+  const myChart2 = echarts.init(echarts2.value)
+  const option2 = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    grid: {
+      left: '0%',
+      top: '15px',
+      right: '0%',
+      bottom: '0%',
+      containLabel: true
+    },
+    xAxis: {
+      data: info.value.nameList,
+      axisLine: { show: false },
+      axisLabel: {
+        color: '#fff',
+        fontSize: 12
+      }
+    },
+    yAxis: {
+      name: '（人）',
+      nameTextStyle: {
+        color: '#fff',
+        fontSize: 14
+      },
+      axisLine: { show: false },
+      axisLabel: {
+        color: '#fff',
+        fontSize: 12
+      },
+      splitLine: { show: false },
+      interval: 100,
+      max: 500
+    },
+    dataZoom: [
+      {
+        show: true,
+        height: 12,
+        xAxisIndex: [0, 6],
+        bottom: 5,
+        start: 0,
+        end: 80,
+        handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+        handleSize: '110%',
+        handleStyle: {
+          color: '#d3dee5'
+        },
+        textStyle: {
+          color: '#fff'
+        },
+        borderColor: 'rgba(255,255,255,.3)'
+      }
+    ],
+    series: [
+      {
+        type: 'bar',
+        barWidth: '30%',
+        itemStyle: {
+          normal: {
+            barBorderRadius: 50,
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: '#01fdcc'
+                },
+                {
+                  offset: 0.8,
+                  color: '#11a1d8'
+                }
+              ],
+              false
+            )
+          }
+        },
+        data: info.value.list
+      }
+    ]
+  }
+  myChart2.setOption(option2)
+  window.addEventListener('resize', function () {
+    myChart2.resize()
+  })
+}
+</script>

src/views/board/parts/echarts/echarts3.vue

@@ -0,0 +1,89 @@
+<template>
+  <div ref="echarts3" class="echarts3"></div>
+</template>
+<style scoped lang="scss">
+.echarts3 {
+  height: 30vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts3 = ref()
+const type = inject('type')
+// 接口
+import { UtilStore } from '@/store/api/util'
+const utilStore = UtilStore()
+const info = ref({})
+onMounted(async () => {
+  await search()
+  await echarts3View()
+})
+const search = async () => {
+  let res = await utilStore.thr({ type })
+  if (res.errcode == '0') info.value = res.data
+}
+function echarts3View() {
+  const myChart3 = echarts.init(echarts3.value)
+  const option3 = {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)',
+      position: function (p) {
+        //其中p为当前鼠标的位置
+        return [p[0] + 10, p[1] - 10]
+      }
+    },
+    grid: {
+      left: '20%',
+      top: '0',
+      right: '0%',
+      bottom: '0%',
+      containLabel: true
+    },
+    legend: {
+      left: 0,
+      top: 30,
+      height: 600,
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 10,
+      textStyle: {
+        fontSize: 16,
+        color: '#fff'
+      },
+      orient: 'vertical',
+      data: info.value.nameList
+    },
+    series: [
+      {
+        name: '数据',
+        type: 'pie',
+        radius: ['45%', '70%'],
+        color: ['#1E90FF', '#00FFFF', '#B0E0E6', '#00BFFF'],
+        avoidLabelOverlap: false,
+        label: {
+          alignTo: 'labelLine',
+          lineHeight: 15,
+          edgeDistance: 10,
+          color: '#FFFFFF',
+          fontSize: '14'
+        },
+        emphasis: {
+          label: {
+            show: false
+          }
+        },
+        labelLine: {
+          show: true
+        },
+        data: info.value.list
+      }
+    ]
+  }
+  myChart3.setOption(option3)
+  window.addEventListener('resize', function () {
+    myChart3.resize()
+  })
+}
+</script>

src/views/board/parts/echarts/echarts4.vue

@@ -0,0 +1,100 @@
+<template>
+  <div ref="echarts4" class="echarts4"></div>
+</template>
+<style scoped lang="scss">
+.echarts4 {
+  height: 30vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts4 = ref()
+const type = inject('type')
+// 接口
+import { UtilStore } from '@/store/api/util'
+const utilStore = UtilStore()
+const info = ref({})
+onMounted(async () => {
+  await search()
+  await echarts4View()
+})
+const search = async () => {
+  let res = await utilStore.four({ type })
+  if (res.errcode == '0') info.value = res.data
+}
+function echarts4View() {
+  const myChart4 = echarts.init(echarts4.value)
+  const option4 = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    grid: {
+      left: '0%',
+      top: '15px',
+      right: '0%',
+      bottom: '0%',
+      containLabel: true
+    },
+    xAxis: {
+      data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
+      axisLine: { show: false },
+      axisLabel: {
+        color: '#fff',
+        fontSize: 12
+      }
+    },
+    yAxis: {
+      name: '（人）',
+      nameTextStyle: {
+        color: '#fff',
+        fontSize: 14
+      },
+      axisLine: { show: false },
+      axisLabel: {
+        color: '#fff',
+        fontSize: 12
+      },
+      splitLine: { show: false },
+      interval: 100,
+      max: 500
+    },
+    series: [
+      {
+        type: 'bar',
+        barWidth: '30%',
+        itemStyle: {
+          normal: {
+            barBorderRadius: 50,
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: '#01fdcc'
+                },
+                {
+                  offset: 0.8,
+                  color: '#11a1d8'
+                }
+              ],
+              false
+            )
+          }
+        },
+        data: [25, 325, 164, 245, 475, 201, 121]
+      }
+    ]
+  }
+  myChart4.setOption(option4)
+  window.addEventListener('resize', function () {
+    myChart4.resize()
+  })
+}
+</script>

src/views/board/parts/echarts/echarts5.vue

@@ -0,0 +1,144 @@
+<template>
+  <div ref="echarts5" class="echarts5"></div>
+</template>
+<style scoped lang="scss">
+.echarts5 {
+  height: 30vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts5 = ref()
+const type = inject('type')
+// 接口
+import { UtilStore } from '@/store/api/util'
+const utilStore = UtilStore()
+const info = ref({})
+onMounted(async () => {
+  await search()
+  await echarts5View()
+})
+const search = async () => {
+  let res = await utilStore.five({ type })
+  if (res.errcode == '0') info.value = res.data
+}
+function echarts5View() {
+  const myChart5 = echarts.init(echarts5.value)
+  const option5 = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    legend: {
+      data: ['2022年', '2023年'],
+      top: '5%',
+      textStyle: {
+        color: '#fff',
+        fontSize: '12'
+      },
+      itemGap: 35
+    },
+    grid: {
+      left: '0%',
+      top: '40px',
+      right: '0%',
+      bottom: '0',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(255,255,255,.1)',
+            width: 1,
+            type: 'solid'
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          interval: 0,
+          // rotate:50,
+          show: true,
+          splitNumber: 5,
+          textStyle: {
+            color: 'rgba(255,255,255,.6)',
+            fontSize: '12'
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        axisLabel: {
+          //formatter: '{value} %'
+          show: true,
+          textStyle: {
+            color: 'rgba(255,255,255,.6)',
+            fontSize: '12'
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(255,255,255,.1	)',
+            width: 1,
+            type: 'solid'
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.1)'
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        name: '2022年',
+        type: 'line',
+        smooth: true,
+        data: [2, 6, 3, 8, 5, 8],
+
+        itemStyle: {
+          normal: {
+            color: '#2f89cf',
+            opacity: 1,
+            barBorderRadius: 5
+          }
+        }
+      },
+      {
+        name: '2023年',
+        type: 'line',
+        smooth: true,
+        data: [5, 2, 6, 4, 5, 12],
+        barWidth: '15',
+        // barGap: 1,
+        itemStyle: {
+          normal: {
+            color: '#62c98d',
+            opacity: 1,
+            barBorderRadius: 5
+          }
+        }
+      }
+    ]
+  }
+  myChart5.setOption(option5)
+  window.addEventListener('resize', function () {
+    myChart5.resize()
+  })
+}
+</script>

src/views/board/parts/echarts/echarts6.vue

@@ -0,0 +1,135 @@
+<template>
+  <div ref="echarts6" class="echarts6"></div>
+</template>
+<style scoped lang="scss">
+.echarts6 {
+  height: 30vh;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts6 = ref()
+const type = inject('type')
+// 接口
+import { UtilStore } from '@/store/api/util'
+const utilStore = UtilStore()
+const info = ref({})
+onMounted(async () => {
+  await search()
+  await echarts6View()
+})
+const search = async () => {
+  let res = await utilStore.six({ type })
+  if (res.errcode == '0') info.value = res.data
+}
+function echarts6View() {
+  const myChart6 = echarts.init(echarts6.value)
+  const option6 = {
+    grid: {
+      left: '10',
+      top: '20',
+      right: '30',
+      bottom: '-25',
+      containLabel: true
+    },
+    xAxis: {
+      show: false
+    },
+    yAxis: [
+      {
+        show: true,
+        data: info.value.nameList,
+        inverse: true,
+        axisLine: {
+          show: false
+        },
+
+        splitLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          textStyle: {
+            color: 'rgba(255,255,255,.6)'
+          },
+          formatter: function (value) {
+            return ['{title|' + value + '} '].join('\n')
+          },
+          rich: {}
+        }
+      },
+      {
+        show: true,
+        inverse: true,
+        data: info.value.list,
+        axisLabel: {
+          textStyle: {
+            color: 'rgba(255,255,255,.5)'
+          }
+        },
+        axisLine: {
+          show: false
+        },
+        splitLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        }
+      }
+    ],
+    series: [
+      {
+        name: '条',
+        type: 'bar',
+        yAxisIndex: 0,
+        data: info.value.list,
+        barWidth: '40%',
+        itemStyle: {
+          normal: {
+            barBorderRadius: 30,
+            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+              {
+                offset: 0,
+                color: '#248ff7'
+              },
+              {
+                offset: 1,
+                color: '#3893e5'
+              }
+            ])
+          }
+        },
+        label: {
+          normal: {
+            show: false
+          }
+        }
+      },
+      {
+        name: '框',
+        type: 'bar',
+        yAxisIndex: 1,
+        barGap: '-100%',
+        data: info.value.max,
+        barWidth: '40%',
+        itemStyle: {
+          normal: {
+            color: 'none',
+            borderColor: 'rgba(255,255,255,.1)',
+            borderWidth: 1,
+            barBorderRadius: 15
+          }
+        }
+      }
+    ]
+  }
+  myChart6.setOption(option6)
+  window.addEventListener('resize', function () {
+    myChart6.resize()
+  })
+}
+</script>

src/views/board/parts/expert.vue

@@ -0,0 +1,162 @@
+<template>
+  <div id="path">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight">
+        <div class="top">
+          <div class="content top_1">
+            <div class="title">
+              <span>统计数量</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts1></echarts1>
+            </div>
+          </div>
+          <div class="content top_2">
+            <div class="title">
+              <span>职称</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts2></echarts2>
+            </div>
+          </div>
+          <div class="content top_3">
+            <div class="title">
+              <span>产业类型</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts3></echarts3>
+            </div>
+          </div>
+        </div>
+        <div class="bottom">
+          <div class="content bottom_1">
+            <div class="title">
+              <span>审核情况</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts4></echarts4>
+            </div>
+          </div>
+          <div class="content bottom_2">
+            <div class="title">
+              <span>年度获奖情况</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts5></echarts5>
+            </div>
+          </div>
+          <div class="content bottom_3">
+            <div class="title">
+              <span>专家职称情况</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts6></echarts6>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+// 组件
+import echarts1 from './echarts/echarts1.vue'
+import echarts2 from './echarts/echarts2.vue'
+import echarts3 from './echarts/echarts3.vue'
+import echarts4 from './echarts/echarts4.vue'
+import echarts5 from './echarts/echarts5.vue'
+import echarts6 from './echarts/echarts6.vue'
+provide('type', 'expert')
+</script>
+<style scoped lang="scss">
+.main {
+  width: 100%;
+  min-height: 74vh;
+  color: #fff;
+  font-size: 16px;
+  background: #033c76 url('/images/bg.png') no-repeat center bottom;
+  .top {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 45%;
+    padding: 20px 0 0 0;
+    .top_1 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .top_2 {
+      width: 50%;
+    }
+    .top_3 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .content {
+      .title {
+        display: flex;
+        align-items: flex-end;
+        span {
+          background: url('/images/line1.png') no-repeat bottom right;
+          font-size: 20px;
+          white-space: nowrap;
+          padding-bottom: 10px;
+          padding-right: 20px;
+        }
+        p {
+          background: url('/images/line2.png') no-repeat bottom right;
+          width: 100%;
+          height: 13px;
+          margin-bottom: 5px;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+  .bottom {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 45%;
+    padding: 20px 0;
+    .bottom_1 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .bottom_2 {
+      width: 50%;
+    }
+    .bottom_3 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .content {
+      .title {
+        display: flex;
+        align-items: flex-end;
+        span {
+          background: url('/images/line1.png') no-repeat bottom right;
+          font-size: 20px;
+          white-space: nowrap;
+          padding-bottom: 10px;
+          padding-right: 20px;
+        }
+        p {
+          background: url('/images/line2.png') no-repeat bottom right;
+          width: 100%;
+          height: 13px;
+          margin-bottom: 5px;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/board/parts/incubate.vue

@@ -0,0 +1,162 @@
+<template>
+  <div id="path">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight">
+        <div class="top">
+          <div class="content top_1">
+            <div class="title">
+              <span>统计数量</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts1></echarts1>
+            </div>
+          </div>
+          <div class="content top_2">
+            <div class="title">
+              <span>统计数量</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts2></echarts2>
+            </div>
+          </div>
+          <div class="content top_3">
+            <div class="title">
+              <span>行业领域</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts3></echarts3>
+            </div>
+          </div>
+        </div>
+        <div class="bottom">
+          <div class="content bottom_1">
+            <div class="title">
+              <span>审核情况</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts4></echarts4>
+            </div>
+          </div>
+          <div class="content bottom_2">
+            <div class="title">
+              <span>年度获奖情况</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts5></echarts5>
+            </div>
+          </div>
+          <div class="content bottom_3">
+            <div class="title">
+              <span>当日情况</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts6></echarts6>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+// 组件
+import echarts1 from './echarts/echarts1.vue'
+import echarts2 from './echarts/echarts2.vue'
+import echarts3 from './echarts/echarts3.vue'
+import echarts4 from './echarts/echarts4.vue'
+import echarts5 from './echarts/echarts5.vue'
+import echarts6 from './echarts/echarts6.vue'
+provide('type', 'incubate')
+</script>
+<style scoped lang="scss">
+.main {
+  width: 100%;
+  min-height: 74vh;
+  color: #fff;
+  font-size: 16px;
+  background: #033c76 url('/images/bg.png') no-repeat center bottom;
+  .top {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 45%;
+    padding: 20px 0 0 0;
+    .top_1 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .top_2 {
+      width: 50%;
+    }
+    .top_3 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .content {
+      .title {
+        display: flex;
+        align-items: flex-end;
+        span {
+          background: url('/images/line1.png') no-repeat bottom right;
+          font-size: 20px;
+          white-space: nowrap;
+          padding-bottom: 10px;
+          padding-right: 20px;
+        }
+        p {
+          background: url('/images/line2.png') no-repeat bottom right;
+          width: 100%;
+          height: 13px;
+          margin-bottom: 5px;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+  .bottom {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 45%;
+    padding: 20px 0;
+    .bottom_1 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .bottom_2 {
+      width: 50%;
+    }
+    .bottom_3 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .content {
+      .title {
+        display: flex;
+        align-items: flex-end;
+        span {
+          background: url('/images/line1.png') no-repeat bottom right;
+          font-size: 20px;
+          white-space: nowrap;
+          padding-bottom: 10px;
+          padding-right: 20px;
+        }
+        p {
+          background: url('/images/line2.png') no-repeat bottom right;
+          width: 100%;
+          height: 13px;
+          margin-bottom: 5px;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/board/parts/project.vue

@@ -0,0 +1,162 @@
+<template>
+  <div id="path">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight">
+        <div class="top">
+          <div class="content top_1">
+            <div class="title">
+              <span>统计数量</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts1></echarts1>
+            </div>
+          </div>
+          <div class="content top_2">
+            <div class="title">
+              <span>行业领域</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts2></echarts2>
+            </div>
+          </div>
+          <div class="content top_3">
+            <div class="title">
+              <span>项目进展</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts3></echarts3>
+            </div>
+          </div>
+        </div>
+        <div class="bottom">
+          <div class="content bottom_1">
+            <div class="title">
+              <span>审核情况</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts4></echarts4>
+            </div>
+          </div>
+          <div class="content bottom_2">
+            <div class="title">
+              <span>年度获奖情况</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts5></echarts5>
+            </div>
+          </div>
+          <div class="content bottom_3">
+            <div class="title">
+              <span>项目来源</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts6></echarts6>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+// 组件
+import echarts1 from './echarts/echarts1.vue'
+import echarts2 from './echarts/echarts2.vue'
+import echarts3 from './echarts/echarts3.vue'
+import echarts4 from './echarts/echarts4.vue'
+import echarts5 from './echarts/echarts5.vue'
+import echarts6 from './echarts/echarts6.vue'
+provide('type', 'project')
+</script>
+<style scoped lang="scss">
+.main {
+  width: 100%;
+  min-height: 74vh;
+  color: #fff;
+  font-size: 16px;
+  background: #033c76 url('/images/bg.png') no-repeat center bottom;
+  .top {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 45%;
+    padding: 20px 0 0 0;
+    .top_1 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .top_2 {
+      width: 50%;
+    }
+    .top_3 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .content {
+      .title {
+        display: flex;
+        align-items: flex-end;
+        span {
+          background: url('/images/line1.png') no-repeat bottom right;
+          font-size: 20px;
+          white-space: nowrap;
+          padding-bottom: 10px;
+          padding-right: 20px;
+        }
+        p {
+          background: url('/images/line2.png') no-repeat bottom right;
+          width: 100%;
+          height: 13px;
+          margin-bottom: 5px;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+  .bottom {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 45%;
+    padding: 20px 0;
+    .bottom_1 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .bottom_2 {
+      width: 50%;
+    }
+    .bottom_3 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .content {
+      .title {
+        display: flex;
+        align-items: flex-end;
+        span {
+          background: url('/images/line1.png') no-repeat bottom right;
+          font-size: 20px;
+          white-space: nowrap;
+          padding-bottom: 10px;
+          padding-right: 20px;
+        }
+        p {
+          background: url('/images/line2.png') no-repeat bottom right;
+          width: 100%;
+          height: 13px;
+          margin-bottom: 5px;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/board/parts/supply.vue

@@ -0,0 +1,162 @@
+<template>
+  <div id="path">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight">
+        <div class="top">
+          <div class="content top_1">
+            <div class="title">
+              <span>统计数量</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts1></echarts1>
+            </div>
+          </div>
+          <div class="content top_2">
+            <div class="title">
+              <span>行业领域</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts2></echarts2>
+            </div>
+          </div>
+          <div class="content top_3">
+            <div class="title">
+              <span>所属产业</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts3></echarts3>
+            </div>
+          </div>
+        </div>
+        <div class="bottom">
+          <div class="content bottom_1">
+            <div class="title">
+              <span>审核情况</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts4></echarts4>
+            </div>
+          </div>
+          <div class="content bottom_2">
+            <div class="title">
+              <span>年度获奖情况</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts5></echarts5>
+            </div>
+          </div>
+          <div class="content bottom_3">
+            <div class="title">
+              <span>行业领域</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts6></echarts6>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+// 组件
+import echarts1 from './echarts/echarts1.vue'
+import echarts2 from './echarts/echarts2.vue'
+import echarts3 from './echarts/echarts3.vue'
+import echarts4 from './echarts/echarts4.vue'
+import echarts5 from './echarts/echarts5.vue'
+import echarts6 from './echarts/echarts6.vue'
+provide('type', 'demand')
+</script>
+<style scoped lang="scss">
+.main {
+  width: 100%;
+  min-height: 74vh;
+  color: #fff;
+  font-size: 16px;
+  background: #033c76 url('/images/bg.png') no-repeat center bottom;
+  .top {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 45%;
+    padding: 20px 0 0 0;
+    .top_1 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .top_2 {
+      width: 50%;
+    }
+    .top_3 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .content {
+      .title {
+        display: flex;
+        align-items: flex-end;
+        span {
+          background: url('/images/line1.png') no-repeat bottom right;
+          font-size: 20px;
+          white-space: nowrap;
+          padding-bottom: 10px;
+          padding-right: 20px;
+        }
+        p {
+          background: url('/images/line2.png') no-repeat bottom right;
+          width: 100%;
+          height: 13px;
+          margin-bottom: 5px;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+  .bottom {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 45%;
+    padding: 20px 0;
+    .bottom_1 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .bottom_2 {
+      width: 50%;
+    }
+    .bottom_3 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .content {
+      .title {
+        display: flex;
+        align-items: flex-end;
+        span {
+          background: url('/images/line1.png') no-repeat bottom right;
+          font-size: 20px;
+          white-space: nowrap;
+          padding-bottom: 10px;
+          padding-right: 20px;
+        }
+        p {
+          background: url('/images/line2.png') no-repeat bottom right;
+          width: 100%;
+          height: 13px;
+          margin-bottom: 5px;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/board/parts/user.vue

@@ -0,0 +1,162 @@
+<template>
+  <div id="path">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight">
+        <div class="top">
+          <div class="content top_1">
+            <div class="title">
+              <span>统计数量</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts1></echarts1>
+            </div>
+          </div>
+          <div class="content top_2">
+            <div class="title">
+              <span>行业领域</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts2></echarts2>
+            </div>
+          </div>
+          <div class="content top_3">
+            <div class="title">
+              <span>用户角色类型</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts3></echarts3>
+            </div>
+          </div>
+        </div>
+        <div class="bottom">
+          <div class="content bottom_1">
+            <div class="title">
+              <span>审核情况</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts4></echarts4>
+            </div>
+          </div>
+          <div class="content bottom_2">
+            <div class="title">
+              <span>年度获奖情况</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts5></echarts5>
+            </div>
+          </div>
+          <div class="content bottom_3">
+            <div class="title">
+              <span>当日情况</span>
+              <p></p>
+            </div>
+            <div class="boxnav">
+              <echarts6></echarts6>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+// 组件
+import echarts1 from './echarts/echarts1.vue'
+import echarts2 from './echarts/echarts2.vue'
+import echarts3 from './echarts/echarts3.vue'
+import echarts4 from './echarts/echarts4.vue'
+import echarts5 from './echarts/echarts5.vue'
+import echarts6 from './echarts/echarts6.vue'
+provide('type', 'user')
+</script>
+<style scoped lang="scss">
+.main {
+  width: 100%;
+  min-height: 74vh;
+  color: #fff;
+  font-size: 16px;
+  background: #033c76 url('/images/bg.png') no-repeat center bottom;
+  .top {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 45%;
+    padding: 20px 0 0 0;
+    .top_1 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .top_2 {
+      width: 50%;
+    }
+    .top_3 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .content {
+      .title {
+        display: flex;
+        align-items: flex-end;
+        span {
+          background: url('/images/line1.png') no-repeat bottom right;
+          font-size: 20px;
+          white-space: nowrap;
+          padding-bottom: 10px;
+          padding-right: 20px;
+        }
+        p {
+          background: url('/images/line2.png') no-repeat bottom right;
+          width: 100%;
+          height: 13px;
+          margin-bottom: 5px;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+  .bottom {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    min-height: 45%;
+    padding: 20px 0;
+    .bottom_1 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .bottom_2 {
+      width: 50%;
+    }
+    .bottom_3 {
+      width: 25%;
+      margin: 0 20px;
+    }
+    .content {
+      .title {
+        display: flex;
+        align-items: flex-end;
+        span {
+          background: url('/images/line1.png') no-repeat bottom right;
+          font-size: 20px;
+          white-space: nowrap;
+          padding-bottom: 10px;
+          padding-right: 20px;
+        }
+        p {
+          background: url('/images/line2.png') no-repeat bottom right;
+          width: 100%;
+          height: 13px;
+          margin-bottom: 5px;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/user/index.vue

@@ -30,7 +30,7 @@ const viewComponent = ref()
  * @param value 子页面id
  * @param component 子页面文件名,需要与代码中的页面对应,上面componentList设置的key
  */
- const route = useRoute()
+const route = useRoute()
 const path = get(route, 'path')
 import { UserStore } from '@/store/user'
 const userStore = UserStore()