修改数据看板

src/views/board/parts/achievement.vue

@@ -14,7 +14,7 @@
           </div>
           <div class="content top_2">
             <div class="title">
-              <span>行业领域</span>
+              <span>成果来源</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -34,7 +34,7 @@
         <div class="bottom">
           <div class="content bottom_1">
             <div class="title">
-              <span>审核情况</span>
+              <span>地区分布情况</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -43,16 +43,40 @@
           </div>
           <div class="content bottom_2">
             <div class="title">
-              <span>年度获奖情况</span>
+              <span>成果列表</span>
               <p></p>
             </div>
             <div class="boxnav">
-              <echarts5></echarts5>
+              <table class="table" width="100%" border="0" cellspacing="0" cellpadding="0">
+                <tbody>
+                  <tr>
+                    <th>成果名称</th>
+                    <th>地区</th>
+                    <th>行业领域</th>
+                    <th>状态</th>
+                  </tr>
+                  <tr v-for="(item, index) in list" :key="index">
+                    <td class="name">{{ item.name || '暂无成果名称' }}</td>
+                    <td>
+                      <span class="text-w">{{ getArea(item.area) || '暂无' }}</span>
+                    </td>
+                    <td>
+                      <span class="text-b">{{ item.field || '暂无' }}</span>
+                    </td>
+                    <td>
+                      <div class="text-d">{{ getDict(item.status, 'status') || '暂无' }}</div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <div class="total">
+                <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
+              </div>
             </div>
           </div>
           <div class="content bottom_3">
             <div class="title">
-              <span>成果来源</span>
+              <span>成果来源排名</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -71,9 +95,71 @@ 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')
+import { get } from 'lodash-es'
+// 成果
+import { AchievementStore } from '@/store/api/platform/achievement'
+import { DictDataStore } from '@/store/api/system/dictData'
+const dictDataStore = DictDataStore()
+const store = AchievementStore()
+const $checkRes = inject('$checkRes')
+// 列表
+const list = ref([])
+let skip = 0
+let limit = 5
+const total = ref(0)
+const currentPage = ref(1)
+onMounted(async () => {
+  await searchOther()
+  await search({ skip, limit })
+})
+// #region 字典表
+const examStatusList = ref([])
+const searchOther = async () => {
+  let result
+  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
+  if ($checkRes(result)) examStatusList.value = result.data
+  result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
+}
+const search = async (query = { skip, limit }) => {
+  const nq = { skip: get(query, 'skip'), limit: get(query, 'limit') }
+  const res = await store.query(nq)
+  if ($checkRes(res)) {
+    list.value = get(res, 'data', [])
+    total.value = get(res, 'total', 0)
+  }
+}
+// 地区
+const getArea = (data) => {
+  if (data) return data.join('-')
+  else return '暂无地区'
+}
+// 字典表
+const getDict = (data, type) => {
+  let list
+  let result
+  switch (type) {
+    case 'status':
+      list = examStatusList.value
+      break
+    default:
+      break
+  }
+  if (!list) return result
+  const i = list.find((f) => f.value === data)
+  if (!i) return result
+  return get(i, 'label')
+}
+// 分页
+const changePage = (page = currentPage.value) => {
+  search({ skip: (page - 1) * limit, limit: limit })
+}
+const sizeChange = (limits) => {
+  limit = limits
+  currentPage.value = 1
+  search({ skip: 0, limit: limit })
+}
 </script>
 <style scoped lang="scss">
 .main {
@@ -156,7 +242,73 @@ provide('type', 'achievement')
           opacity: 0.5;
         }
       }
+      .boxnav {
+        .table {
+          height: 26vh;
+          th {
+            border-bottom: 1px solid #407abd;
+            font-size: 14px;
+            text-align: center;
+            padding: 6px 0;
+            color: rgba(255, 255, 255, 0.8);
+          }
+          td {
+            border-bottom: 1px dotted#407abd;
+            font-size: 12px;
+            padding: 6px 0;
+            text-align: center;
+            color: rgba(255, 255, 255, 0.6);
+          }
+          .name {
+            max-width: 200px;
+          }
+          tr:last-child td {
+            border: none;
+          }
+          .text-w {
+            color: #ffe400;
+          }
+          .text-d {
+            color: #ff6316;
+          }
+          .text-s {
+            color: #14e144;
+          }
+          .text-b {
+            color: #07e5ff;
+          }
+        }
+        .total {
+          margin: 5px 0 0 0;
+          display: flex;
+          justify-content: center;
+        }
+      }
     }
   }
 }
+:deep(.el-pagination.is-background .btn-prev:disabled) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-next:disabled) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-prev) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-next) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .el-pager li.is-active) {
+  background-color: #4d5b87 !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .el-pager li) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
 </style>

src/views/board/parts/company.vue

@@ -34,7 +34,7 @@
         <div class="bottom">
           <div class="content bottom_1">
             <div class="title">
-              <span>审核情况</span>
+              <span>地区分布情况</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -43,16 +43,40 @@
           </div>
           <div class="content bottom_2">
             <div class="title">
-              <span>年度获奖情况</span>
+              <span>企业列表</span>
               <p></p>
             </div>
             <div class="boxnav">
-              <echarts5></echarts5>
+              <table class="table" width="100%" border="0" cellspacing="0" cellpadding="0">
+                <tbody>
+                  <tr>
+                    <th>企业名称</th>
+                    <th>地区</th>
+                    <th>人数</th>
+                    <th>状态</th>
+                  </tr>
+                  <tr v-for="(item, index) in list" :key="index">
+                    <td>{{ item.name || '暂无企业名称' }}</td>
+                    <td>
+                      <span class="text-w">{{ getArea(item.area) || '暂无' }}</span>
+                    </td>
+                    <td>
+                      <span class="text-b">{{ item.person || '暂无' }}</span>
+                    </td>
+                    <td>
+                      <div class="text-d">{{ getDict(item.status, 'status') || '暂无' }}</div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <div class="total">
+                <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
+              </div>
             </div>
           </div>
           <div class="content bottom_3">
             <div class="title">
-              <span>企业员工数量</span>
+              <span>企业员工数量排名</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -71,9 +95,71 @@ 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')
+import { get } from 'lodash-es'
+// 企业
+import { CompanyStore } from '@/store/api/user/company'
+import { DictDataStore } from '@/store/api/system/dictData'
+const dictDataStore = DictDataStore()
+const store = CompanyStore()
+const $checkRes = inject('$checkRes')
+// 列表
+const list = ref([])
+let skip = 0
+let limit = 5
+const total = ref(0)
+const currentPage = ref(1)
+onMounted(async () => {
+  await searchOther()
+  await search({ skip, limit })
+})
+// #region 字典表
+const examStatusList = ref([])
+const searchOther = async () => {
+  let result
+  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
+  if ($checkRes(result)) examStatusList.value = result.data
+  result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
+}
+const search = async (query = { skip, limit }) => {
+  const nq = { skip: get(query, 'skip'), limit: get(query, 'limit') }
+  const res = await store.query(nq)
+  if ($checkRes(res)) {
+    list.value = get(res, 'data', [])
+    total.value = get(res, 'total', 0)
+  }
+}
+// 地区
+const getArea = (data) => {
+  if (data) return data.join('-')
+  else return '暂无地区'
+}
+// 字典表
+const getDict = (data, type) => {
+  let list
+  let result
+  switch (type) {
+    case 'status':
+      list = examStatusList.value
+      break
+    default:
+      break
+  }
+  if (!list) return result
+  const i = list.find((f) => f.value === data)
+  if (!i) return result
+  return get(i, 'label')
+}
+// 分页
+const changePage = (page = currentPage.value) => {
+  search({ skip: (page - 1) * limit, limit: limit })
+}
+const sizeChange = (limits) => {
+  limit = limits
+  currentPage.value = 1
+  search({ skip: 0, limit: limit })
+}
 </script>
 <style scoped lang="scss">
 .main {
@@ -156,7 +242,73 @@ provide('type', 'company')
           opacity: 0.5;
         }
       }
+      .boxnav {
+        .table {
+          height: 26vh;
+          .name {
+            max-width: 200px;
+          }
+          th {
+            border-bottom: 1px solid #407abd;
+            font-size: 14px;
+            text-align: center;
+            padding: 6px 0;
+            color: rgba(255, 255, 255, 0.8);
+          }
+          td {
+            border-bottom: 1px dotted#407abd;
+            font-size: 12px;
+            padding: 6px 0;
+            text-align: center;
+            color: rgba(255, 255, 255, 0.6);
+          }
+          tr:last-child td {
+            border: none;
+          }
+          .text-w {
+            color: #ffe400;
+          }
+          .text-d {
+            color: #ff6316;
+          }
+          .text-s {
+            color: #14e144;
+          }
+          .text-b {
+            color: #07e5ff;
+          }
+        }
+        .total {
+          margin: 5px 0 0 0;
+          display: flex;
+          justify-content: center;
+        }
+      }
     }
   }
 }
+:deep(.el-pagination.is-background .btn-prev:disabled) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-next:disabled) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-prev) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-next) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .el-pager li.is-active) {
+  background-color: #4d5b87 !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .el-pager li) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
 </style>

src/views/board/parts/demand.vue

@@ -14,7 +14,7 @@
           </div>
           <div class="content top_2">
             <div class="title">
-              <span>行业领域</span>
+              <span>需求来源</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -23,7 +23,7 @@
           </div>
           <div class="content top_3">
             <div class="title">
-              <span>所属产业</span>
+              <span>行业领域</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -34,7 +34,7 @@
         <div class="bottom">
           <div class="content bottom_1">
             <div class="title">
-              <span>审核情况</span>
+              <span>地区分布情况</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -43,16 +43,40 @@
           </div>
           <div class="content bottom_2">
             <div class="title">
-              <span>年度获奖情况</span>
+              <span>需求列表</span>
               <p></p>
             </div>
             <div class="boxnav">
-              <echarts5></echarts5>
+              <table class="table" width="100%" border="0" cellspacing="0" cellpadding="0">
+                <tbody>
+                  <tr>
+                    <th>需求名称</th>
+                    <th>地区</th>
+                    <th>行业领域</th>
+                    <th>状态</th>
+                  </tr>
+                  <tr v-for="(item, index) in list" :key="index">
+                    <td>{{ item.name || '暂无需求名称' }}</td>
+                    <td>
+                      <span class="text-w">{{ getArea(item.area) || '暂无' }}</span>
+                    </td>
+                    <td>
+                      <span class="text-b">{{ item.field || '暂无' }}</span>
+                    </td>
+                    <td>
+                      <div class="text-d">{{ getDict(item.status, 'status') || '暂无' }}</div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <div class="total">
+                <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
+              </div>
             </div>
           </div>
           <div class="content bottom_3">
             <div class="title">
-              <span>行业领域</span>
+              <span>需求来源</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -71,9 +95,71 @@ 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')
+import { get } from 'lodash-es'
+// 需求
+import { DemandStore } from '@/store/api/platform/demand'
+import { DictDataStore } from '@/store/api/system/dictData'
+const dictDataStore = DictDataStore()
+const store = DemandStore()
+const $checkRes = inject('$checkRes')
+// 列表
+const list = ref([])
+let skip = 0
+let limit = 5
+const total = ref(0)
+const currentPage = ref(1)
+onMounted(async () => {
+  await searchOther()
+  await search({ skip, limit })
+})
+// #region 字典表
+const examStatusList = ref([])
+const searchOther = async () => {
+  let result
+  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
+  if ($checkRes(result)) examStatusList.value = result.data
+  result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
+}
+const search = async (query = { skip, limit }) => {
+  const nq = { skip: get(query, 'skip'), limit: get(query, 'limit') }
+  const res = await store.query(nq)
+  if ($checkRes(res)) {
+    list.value = get(res, 'data', [])
+    total.value = get(res, 'total', 0)
+  }
+}
+// 地区
+const getArea = (data) => {
+  if (data) return data.join('-')
+  else return '暂无地区'
+}
+// 字典表
+const getDict = (data, type) => {
+  let list
+  let result
+  switch (type) {
+    case 'status':
+      list = examStatusList.value
+      break
+    default:
+      break
+  }
+  if (!list) return result
+  const i = list.find((f) => f.value === data)
+  if (!i) return result
+  return get(i, 'label')
+}
+// 分页
+const changePage = (page = currentPage.value) => {
+  search({ skip: (page - 1) * limit, limit: limit })
+}
+const sizeChange = (limits) => {
+  limit = limits
+  currentPage.value = 1
+  search({ skip: 0, limit: limit })
+}
 </script>
 <style scoped lang="scss">
 .main {
@@ -156,7 +242,73 @@ provide('type', 'demand')
           opacity: 0.5;
         }
       }
+      .boxnav {
+        .table {
+          height: 26vh;
+          .name {
+            max-width: 200px;
+          }
+          th {
+            border-bottom: 1px solid #407abd;
+            font-size: 14px;
+            text-align: center;
+            padding: 6px 0;
+            color: rgba(255, 255, 255, 0.8);
+          }
+          td {
+            border-bottom: 1px dotted#407abd;
+            font-size: 12px;
+            padding: 6px 0;
+            text-align: center;
+            color: rgba(255, 255, 255, 0.6);
+          }
+          tr:last-child td {
+            border: none;
+          }
+          .text-w {
+            color: #ffe400;
+          }
+          .text-d {
+            color: #ff6316;
+          }
+          .text-s {
+            color: #14e144;
+          }
+          .text-b {
+            color: #07e5ff;
+          }
+        }
+        .total {
+          margin: 5px 0 0 0;
+          display: flex;
+          justify-content: center;
+        }
+      }
     }
   }
 }
+:deep(.el-pagination.is-background .btn-prev:disabled) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-next:disabled) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-prev) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-next) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .el-pager li.is-active) {
+  background-color: #4d5b87 !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .el-pager li) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
 </style>

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

@@ -41,20 +41,6 @@ function echarts3View() {
       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: '数据',

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

@@ -8,87 +8,93 @@
 }
 </style>
 <script setup>
+// 引入jilin.js
+import jilinJson from './json/jilin.json'
 import * as echarts from 'echarts'
 const echarts4 = ref()
 const type = inject('type')
 // 接口
 import { UtilStore } from '@/store/api/util'
 const utilStore = UtilStore()
-const info = ref({})
+const data = ref([])
 onMounted(async () => {
   await search()
   await echarts4View()
 })
 const search = async () => {
   let res = await utilStore.four({ type })
-  if (res.errcode == '0') info.value = res.data
+  if (res.errcode == '0') data.value = res.data
+}
+const convertData = (data) => {
+  var res = []
+  let features = jilinJson['features']
+  for (var i = 0; i < data.length; i++) {
+    var geoCoord = features.find((a) => a.properties.name == data[i].name)
+    if (geoCoord && geoCoord.properties && geoCoord.properties.center) {
+      res.push({
+        name: data[i].name,
+        value: geoCoord.properties.center.concat(data[i].value)
+      })
+    }
+  }
+  return res
 }
 function echarts4View() {
   const myChart4 = echarts.init(echarts4.value)
+  echarts.registerMap('jilin', jilinJson)
   const option4 = {
     tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
-      }
-    },
-    grid: {
-      left: '0%',
-      top: '15px',
-      right: '0%',
-      bottom: '0%',
-      containLabel: true
+      trigger: 'item'
     },
-    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
+    geo: {
+      map: 'jilin',
+      label: {
+        emphasis: {
+          show: false
+        }
       },
-      splitLine: { show: false },
-      interval: 100,
-      max: 500
+      roam: false,
+      zoom: 1.2,
+      itemStyle: {
+        normal: {
+          areaColor: 'rgba(2,37,101,.5)',
+          borderColor: 'rgba(112,187,252,.5)'
+        },
+        emphasis: {
+          areaColor: 'rgba(2,37,101,.8)'
+        }
+      }
     },
     series: [
       {
-        type: 'bar',
-        barWidth: '30%',
+        name: '企业分布',
+        type: 'scatter',
+        coordinateSystem: 'geo',
+        data: convertData(data.value),
+        symbolSize: function (val) {
+          if (val[2] > 10) return val[2] / 10
+          else return val[2]
+        },
+        label: {
+          normal: {
+            formatter: '{b}',
+            position: 'right',
+            show: false
+          },
+          emphasis: {
+            show: true
+          }
+        },
         itemStyle: {
           normal: {
-            barBorderRadius: 50,
-            color: new echarts.graphic.LinearGradient(
-              0,
-              0,
-              0,
-              1,
-              [
-                {
-                  offset: 0,
-                  color: '#01fdcc'
-                },
-                {
-                  offset: 0.8,
-                  color: '#11a1d8'
-                }
-              ],
-              false
-            )
+            color: '#ffeb7b'
           }
         },
-        data: [25, 325, 164, 245, 475, 201, 121]
+        tooltip: {
+          formatter: function (params) {
+            return params.name + ' : ' + params.value[2] + '个'
+          }
+        }
       }
     ]
   }

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

@@ -32,107 +32,64 @@ function echarts5View() {
         type: 'shadow'
       }
     },
-    legend: {
-      data: ['2022年', '2023年'],
-      top: '5%',
-      textStyle: {
-        color: '#fff',
-        fontSize: '12'
-      },
-      itemGap: 35
-    },
     grid: {
       left: '0%',
-      top: '40px',
+      top: '15px',
       right: '0%',
-      bottom: '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)'
-          }
-        }
+    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
+    },
     series: [
       {
-        name: '2022年',
-        type: 'line',
-        smooth: true,
-        data: [2, 6, 3, 8, 5, 8],
+        type: 'bar',
+        barWidth: '30%',
 
         itemStyle: {
           normal: {
-            color: '#2f89cf',
-            opacity: 1,
-            barBorderRadius: 5
+            barBorderRadius: 50,
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: '#01fdcc'
+                },
+                {
+                  offset: 0.8,
+                  color: '#11a1d8'
+                }
+              ],
+              false
+            )
           }
-        }
-      },
-      {
-        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
-          }
-        }
+        },
+        data: info.value.list
       }
     ]
   }

src/views/board/parts/expert.vue

@@ -14,7 +14,7 @@
           </div>
           <div class="content top_2">
             <div class="title">
-              <span>职称</span>
+              <span>职称类型</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -34,7 +34,7 @@
         <div class="bottom">
           <div class="content bottom_1">
             <div class="title">
-              <span>审核情况</span>
+              <span>地区分布情况</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -43,16 +43,40 @@
           </div>
           <div class="content bottom_2">
             <div class="title">
-              <span>年度获奖情况</span>
+              <span>专家列表</span>
               <p></p>
             </div>
             <div class="boxnav">
-              <echarts5></echarts5>
+              <table class="table" width="100%" border="0" cellspacing="0" cellpadding="0">
+                <tbody>
+                  <tr>
+                    <th>专家名称</th>
+                    <th>产业类型</th>
+                    <th>职称</th>
+                    <th>状态</th>
+                  </tr>
+                  <tr v-for="(item, index) in list" :key="index">
+                    <td>{{ item.name || '暂无专家名称' }}</td>
+                    <td>
+                      <span class="text-w">{{ item.industry_type || '暂无' }}</span>
+                    </td>
+                    <td>
+                      <span class="text-b">{{ item.title || '暂无' }}</span>
+                    </td>
+                    <td>
+                      <div class="text-d">{{ getDict(item.status, 'status') || '暂无' }}</div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <div class="total">
+                <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
+              </div>
             </div>
           </div>
           <div class="content bottom_3">
             <div class="title">
-              <span>专家职称情况</span>
+              <span>职称类型排名</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -71,9 +95,66 @@ 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')
+import { get } from 'lodash-es'
+// 专家
+import { ExpertStore } from '@/store/api/user/expert'
+import { DictDataStore } from '@/store/api/system/dictData'
+const dictDataStore = DictDataStore()
+const store = ExpertStore()
+const $checkRes = inject('$checkRes')
+// 列表
+const list = ref([])
+let skip = 0
+let limit = 5
+const total = ref(0)
+const currentPage = ref(1)
+onMounted(async () => {
+  await searchOther()
+  await search({ skip, limit })
+})
+// #region 字典表
+const examStatusList = ref([])
+const searchOther = async () => {
+  let result
+  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
+  if ($checkRes(result)) examStatusList.value = result.data
+  result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
+}
+const search = async (query = { skip, limit }) => {
+  const nq = { skip: get(query, 'skip'), limit: get(query, 'limit') }
+  const res = await store.query(nq)
+  if ($checkRes(res)) {
+    list.value = get(res, 'data', [])
+    total.value = get(res, 'total', 0)
+  }
+}
+// 字典表
+const getDict = (data, type) => {
+  let list
+  let result
+  switch (type) {
+    case 'status':
+      list = examStatusList.value
+      break
+    default:
+      break
+  }
+  if (!list) return result
+  const i = list.find((f) => f.value === data)
+  if (!i) return result
+  return get(i, 'label')
+}
+// 分页
+const changePage = (page = currentPage.value) => {
+  search({ skip: (page - 1) * limit, limit: limit })
+}
+const sizeChange = (limits) => {
+  limit = limits
+  currentPage.value = 1
+  search({ skip: 0, limit: limit })
+}
 </script>
 <style scoped lang="scss">
 .main {
@@ -156,7 +237,73 @@ provide('type', 'expert')
           opacity: 0.5;
         }
       }
+      .boxnav {
+        .table {
+          height: 26vh;
+          .name {
+            max-width: 200px;
+          }
+          th {
+            border-bottom: 1px solid #407abd;
+            font-size: 14px;
+            text-align: center;
+            padding: 6px 0;
+            color: rgba(255, 255, 255, 0.8);
+          }
+          td {
+            border-bottom: 1px dotted#407abd;
+            font-size: 12px;
+            padding: 6px 0;
+            text-align: center;
+            color: rgba(255, 255, 255, 0.6);
+          }
+          tr:last-child td {
+            border: none;
+          }
+          .text-w {
+            color: #ffe400;
+          }
+          .text-d {
+            color: #ff6316;
+          }
+          .text-s {
+            color: #14e144;
+          }
+          .text-b {
+            color: #07e5ff;
+          }
+        }
+        .total {
+          margin: 5px 0 0 0;
+          display: flex;
+          justify-content: center;
+        }
+      }
     }
   }
 }
+:deep(.el-pagination.is-background .btn-prev:disabled) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-next:disabled) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-prev) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-next) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .el-pager li.is-active) {
+  background-color: #4d5b87 !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .el-pager li) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
 </style>

src/views/board/parts/incubate.vue

@@ -14,7 +14,7 @@
           </div>
           <div class="content top_2">
             <div class="title">
-              <span>统计数量</span>
+              <span>孵化基地入驻企业数</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -23,7 +23,7 @@
           </div>
           <div class="content top_3">
             <div class="title">
-              <span>行业领域</span>
+              <span>市级以上活动数</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -34,7 +34,7 @@
         <div class="bottom">
           <div class="content bottom_1">
             <div class="title">
-              <span>审核情况</span>
+              <span>地区分布情况</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -43,16 +43,40 @@
           </div>
           <div class="content bottom_2">
             <div class="title">
-              <span>年度获奖情况</span>
+              <span>孵化基地列表</span>
               <p></p>
             </div>
             <div class="boxnav">
-              <echarts5></echarts5>
+              <table class="table" width="100%" border="0" cellspacing="0" cellpadding="0">
+                <tbody>
+                  <tr>
+                    <th>孵化基地名称</th>
+                    <th>负责人</th>
+                    <th>负责人电话</th>
+                    <th>状态</th>
+                  </tr>
+                  <tr v-for="(item, index) in list" :key="index">
+                    <td>{{ item.name || '暂无孵化基地名称' }}</td>
+                    <td>
+                      <span class="text-w">{{ item.person || '暂无' }}</span>
+                    </td>
+                    <td>
+                      <span class="text-b">{{ item.person_phone || '暂无' }}</span>
+                    </td>
+                    <td>
+                      <div class="text-d">{{ getDict(item.status, 'status') || '暂无' }}</div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <div class="total">
+                <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
+              </div>
             </div>
           </div>
           <div class="content bottom_3">
             <div class="title">
-              <span>当日情况</span>
+              <span>省级以上导师数排名</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -71,9 +95,66 @@ 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')
+import { get } from 'lodash-es'
+// 孵化基地
+import { IncubatorStore } from '@/store/api/user/incubator'
+import { DictDataStore } from '@/store/api/system/dictData'
+const dictDataStore = DictDataStore()
+const store = IncubatorStore()
+const $checkRes = inject('$checkRes')
+// 列表
+const list = ref([])
+let skip = 0
+let limit = 5
+const total = ref(0)
+const currentPage = ref(1)
+onMounted(async () => {
+  await searchOther()
+  await search({ skip, limit })
+})
+// #region 字典表
+const examStatusList = ref([])
+const searchOther = async () => {
+  let result
+  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
+  if ($checkRes(result)) examStatusList.value = result.data
+  result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
+}
+const search = async (query = { skip, limit }) => {
+  const nq = { skip: get(query, 'skip'), limit: get(query, 'limit') }
+  const res = await store.query(nq)
+  if ($checkRes(res)) {
+    list.value = get(res, 'data', [])
+    total.value = get(res, 'total', 0)
+  }
+}
+// 字典表
+const getDict = (data, type) => {
+  let list
+  let result
+  switch (type) {
+    case 'status':
+      list = examStatusList.value
+      break
+    default:
+      break
+  }
+  if (!list) return result
+  const i = list.find((f) => f.value === data)
+  if (!i) return result
+  return get(i, 'label')
+}
+// 分页
+const changePage = (page = currentPage.value) => {
+  search({ skip: (page - 1) * limit, limit: limit })
+}
+const sizeChange = (limits) => {
+  limit = limits
+  currentPage.value = 1
+  search({ skip: 0, limit: limit })
+}
 </script>
 <style scoped lang="scss">
 .main {
@@ -156,7 +237,73 @@ provide('type', 'incubate')
           opacity: 0.5;
         }
       }
+      .boxnav {
+        .table {
+          height: 26vh;
+          .name {
+            max-width: 200px;
+          }
+          th {
+            border-bottom: 1px solid #407abd;
+            font-size: 14px;
+            text-align: center;
+            padding: 6px 0;
+            color: rgba(255, 255, 255, 0.8);
+          }
+          td {
+            border-bottom: 1px dotted#407abd;
+            font-size: 12px;
+            padding: 6px 0;
+            text-align: center;
+            color: rgba(255, 255, 255, 0.6);
+          }
+          tr:last-child td {
+            border: none;
+          }
+          .text-w {
+            color: #ffe400;
+          }
+          .text-d {
+            color: #ff6316;
+          }
+          .text-s {
+            color: #14e144;
+          }
+          .text-b {
+            color: #07e5ff;
+          }
+        }
+        .total {
+          margin: 5px 0 0 0;
+          display: flex;
+          justify-content: center;
+        }
+      }
     }
   }
 }
+:deep(.el-pagination.is-background .btn-prev:disabled) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-next:disabled) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-prev) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-next) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .el-pager li.is-active) {
+  background-color: #4d5b87 !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .el-pager li) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
 </style>

src/views/board/parts/project.vue

@@ -14,7 +14,7 @@
           </div>
           <div class="content top_2">
             <div class="title">
-              <span>行业领域</span>
+              <span>项目来源</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -34,7 +34,7 @@
         <div class="bottom">
           <div class="content bottom_1">
             <div class="title">
-              <span>审核情况</span>
+              <span>地区分布情况</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -43,16 +43,40 @@
           </div>
           <div class="content bottom_2">
             <div class="title">
-              <span>年度获奖情况</span>
+              <span>项目列表</span>
               <p></p>
             </div>
             <div class="boxnav">
-              <echarts5></echarts5>
+              <table class="table" width="100%" border="0" cellspacing="0" cellpadding="0">
+                <tbody>
+                  <tr>
+                    <th>项目名称</th>
+                    <th>地区</th>
+                    <th>人数</th>
+                    <th>状态</th>
+                  </tr>
+                  <tr v-for="(item, index) in list" :key="index">
+                    <td>{{ item.name || '暂无项目名称' }}</td>
+                    <td>
+                      <span class="text-w">{{ getArea(item.area) || '暂无' }}</span>
+                    </td>
+                    <td>
+                      <span class="text-b">{{ item.person || '暂无' }}</span>
+                    </td>
+                    <td>
+                      <div class="text-d">{{ getDict(item.status, 'status') || '暂无' }}</div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <div class="total">
+                <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
+              </div>
             </div>
           </div>
           <div class="content bottom_3">
             <div class="title">
-              <span>项目来源</span>
+              <span>项目来源排名</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -71,9 +95,71 @@ 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')
+import { get } from 'lodash-es'
+// 项目
+import { ProjectStore } from '@/store/api/platform/project'
+import { DictDataStore } from '@/store/api/system/dictData'
+const dictDataStore = DictDataStore()
+const store = ProjectStore()
+const $checkRes = inject('$checkRes')
+// 列表
+const list = ref([])
+let skip = 0
+let limit = 5
+const total = ref(0)
+const currentPage = ref(1)
+onMounted(async () => {
+  await searchOther()
+  await search({ skip, limit })
+})
+// #region 字典表
+const examStatusList = ref([])
+const searchOther = async () => {
+  let result
+  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
+  if ($checkRes(result)) examStatusList.value = result.data
+  result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
+}
+const search = async (query = { skip, limit }) => {
+  const nq = { skip: get(query, 'skip'), limit: get(query, 'limit') }
+  const res = await store.query(nq)
+  if ($checkRes(res)) {
+    list.value = get(res, 'data', [])
+    total.value = get(res, 'total', 0)
+  }
+}
+// 地区
+const getArea = (data) => {
+  if (data) return data.join('-')
+  else return '暂无地区'
+}
+// 字典表
+const getDict = (data, type) => {
+  let list
+  let result
+  switch (type) {
+    case 'status':
+      list = examStatusList.value
+      break
+    default:
+      break
+  }
+  if (!list) return result
+  const i = list.find((f) => f.value === data)
+  if (!i) return result
+  return get(i, 'label')
+}
+// 分页
+const changePage = (page = currentPage.value) => {
+  search({ skip: (page - 1) * limit, limit: limit })
+}
+const sizeChange = (limits) => {
+  limit = limits
+  currentPage.value = 1
+  search({ skip: 0, limit: limit })
+}
 </script>
 <style scoped lang="scss">
 .main {
@@ -156,7 +242,73 @@ provide('type', 'project')
           opacity: 0.5;
         }
       }
+      .boxnav {
+        .table {
+          height: 26vh;
+          .name {
+            max-width: 200px;
+          }
+          th {
+            border-bottom: 1px solid #407abd;
+            font-size: 14px;
+            text-align: center;
+            padding: 6px 0;
+            color: rgba(255, 255, 255, 0.8);
+          }
+          td {
+            border-bottom: 1px dotted#407abd;
+            font-size: 12px;
+            padding: 6px 0;
+            text-align: center;
+            color: rgba(255, 255, 255, 0.6);
+          }
+          tr:last-child td {
+            border: none;
+          }
+          .text-w {
+            color: #ffe400;
+          }
+          .text-d {
+            color: #ff6316;
+          }
+          .text-s {
+            color: #14e144;
+          }
+          .text-b {
+            color: #07e5ff;
+          }
+        }
+        .total {
+          margin: 5px 0 0 0;
+          display: flex;
+          justify-content: center;
+        }
+      }
     }
   }
 }
+:deep(.el-pagination.is-background .btn-prev:disabled) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-next:disabled) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-prev) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-next) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .el-pager li.is-active) {
+  background-color: #4d5b87 !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .el-pager li) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
 </style>

src/views/board/parts/supply.vue

@@ -34,7 +34,7 @@
         <div class="bottom">
           <div class="content bottom_1">
             <div class="title">
-              <span>审核情况</span>
+              <span>地区分布情况</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -43,16 +43,40 @@
           </div>
           <div class="content bottom_2">
             <div class="title">
-              <span>年度获奖情况</span>
+              <span>供给列表</span>
               <p></p>
             </div>
             <div class="boxnav">
-              <echarts5></echarts5>
+              <table class="table" width="100%" border="0" cellspacing="0" cellpadding="0">
+                <tbody>
+                  <tr>
+                    <th>供给名称</th>
+                    <th>地区</th>
+                    <th>人数</th>
+                    <th>状态</th>
+                  </tr>
+                  <tr v-for="(item, index) in list" :key="index">
+                    <td>{{ item.name || '暂无供给名称' }}</td>
+                    <td>
+                      <span class="text-w">{{ getArea(item.area) || '暂无' }}</span>
+                    </td>
+                    <td>
+                      <span class="text-b">{{ item.person || '暂无' }}</span>
+                    </td>
+                    <td>
+                      <div class="text-d">{{ getDict(item.status, 'status') || '暂无' }}</div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <div class="total">
+                <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
+              </div>
             </div>
           </div>
           <div class="content bottom_3">
             <div class="title">
-              <span>行业领域</span>
+              <span>行业领域排名</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -71,9 +95,71 @@ 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')
+provide('type', 'supply')
+import { get } from 'lodash-es'
+// 供给
+import { SupplyStore } from '@/store/api/platform/supply'
+import { DictDataStore } from '@/store/api/system/dictData'
+const dictDataStore = DictDataStore()
+const store = SupplyStore()
+const $checkRes = inject('$checkRes')
+// 列表
+const list = ref([])
+let skip = 0
+let limit = 5
+const total = ref(0)
+const currentPage = ref(1)
+onMounted(async () => {
+  await searchOther()
+  await search({ skip, limit })
+})
+// #region 字典表
+const examStatusList = ref([])
+const searchOther = async () => {
+  let result
+  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
+  if ($checkRes(result)) examStatusList.value = result.data
+  result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
+}
+const search = async (query = { skip, limit }) => {
+  const nq = { skip: get(query, 'skip'), limit: get(query, 'limit') }
+  const res = await store.query(nq)
+  if ($checkRes(res)) {
+    list.value = get(res, 'data', [])
+    total.value = get(res, 'total', 0)
+  }
+}
+// 地区
+const getArea = (data) => {
+  if (data) return data.join('-')
+  else return '暂无地区'
+}
+// 字典表
+const getDict = (data, type) => {
+  let list
+  let result
+  switch (type) {
+    case 'status':
+      list = examStatusList.value
+      break
+    default:
+      break
+  }
+  if (!list) return result
+  const i = list.find((f) => f.value === data)
+  if (!i) return result
+  return get(i, 'label')
+}
+// 分页
+const changePage = (page = currentPage.value) => {
+  search({ skip: (page - 1) * limit, limit: limit })
+}
+const sizeChange = (limits) => {
+  limit = limits
+  currentPage.value = 1
+  search({ skip: 0, limit: limit })
+}
 </script>
 <style scoped lang="scss">
 .main {
@@ -156,7 +242,73 @@ provide('type', 'demand')
           opacity: 0.5;
         }
       }
+      .boxnav {
+        .table {
+          height: 26vh;
+          .name {
+            max-width: 200px;
+          }
+          th {
+            border-bottom: 1px solid #407abd;
+            font-size: 14px;
+            text-align: center;
+            padding: 6px 0;
+            color: rgba(255, 255, 255, 0.8);
+          }
+          td {
+            border-bottom: 1px dotted#407abd;
+            font-size: 12px;
+            padding: 6px 0;
+            text-align: center;
+            color: rgba(255, 255, 255, 0.6);
+          }
+          tr:last-child td {
+            border: none;
+          }
+          .text-w {
+            color: #ffe400;
+          }
+          .text-d {
+            color: #ff6316;
+          }
+          .text-s {
+            color: #14e144;
+          }
+          .text-b {
+            color: #07e5ff;
+          }
+        }
+        .total {
+          margin: 5px 0 0 0;
+          display: flex;
+          justify-content: center;
+        }
+      }
     }
   }
 }
+:deep(.el-pagination.is-background .btn-prev:disabled) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-next:disabled) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-prev) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-next) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .el-pager li.is-active) {
+  background-color: #4d5b87 !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .el-pager li) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
 </style>

src/views/board/parts/user.vue

@@ -14,16 +14,14 @@
           </div>
           <div class="content top_2">
             <div class="title">
-              <span>行业领域</span>
+              <span>用户类型</span>
               <p></p>
             </div>
-            <div class="boxnav">
-              <echarts2></echarts2>
-            </div>
+            <div class="boxnav">1</div>
           </div>
           <div class="content top_3">
             <div class="title">
-              <span>用户角色类型</span>
+              <span>用户类型</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -34,25 +32,47 @@
         <div class="bottom">
           <div class="content bottom_1">
             <div class="title">
-              <span>审核情况</span>
+              <span>地区分布情况</span>
               <p></p>
             </div>
-            <div class="boxnav">
-              <echarts4></echarts4>
-            </div>
+            <div class="boxnav">2</div>
           </div>
           <div class="content bottom_2">
             <div class="title">
-              <span>年度获奖情况</span>
+              <span>用户列表</span>
               <p></p>
             </div>
             <div class="boxnav">
-              <echarts5></echarts5>
+              <table class="table" width="100%" border="0" cellspacing="0" cellpadding="0">
+                <tbody>
+                  <tr>
+                    <th>用户昵称</th>
+                    <th>账号</th>
+                    <th>手机号</th>
+                    <th>状态</th>
+                  </tr>
+                  <tr v-for="(item, index) in list" :key="index">
+                    <td>{{ item.nick_name || '暂无用户昵称' }}</td>
+                    <td>
+                      <span class="text-w">{{ item.account || '暂无' }}</span>
+                    </td>
+                    <td>
+                      <span class="text-b">{{ item.phone || '暂无' }}</span>
+                    </td>
+                    <td>
+                      <div class="text-d">{{ getDict(item.status, 'status') || '暂无' }}</div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              <div class="total">
+                <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
+              </div>
             </div>
           </div>
           <div class="content bottom_3">
             <div class="title">
-              <span>当日情况</span>
+              <span>用户所属产业排名</span>
               <p></p>
             </div>
             <div class="boxnav">
@@ -68,12 +88,67 @@
 <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')
+import { get } from 'lodash-es'
+// 用户
+import { UserStore } from '@/store/api/user/user'
+import { DictDataStore } from '@/store/api/system/dictData'
+const dictDataStore = DictDataStore()
+const store = UserStore()
+const $checkRes = inject('$checkRes')
+// 列表
+const list = ref([])
+let skip = 0
+let limit = 5
+const total = ref(0)
+const currentPage = ref(1)
+onMounted(async () => {
+  await searchOther()
+  await search({ skip, limit })
+})
+// #region 字典表
+const examStatusList = ref([])
+const searchOther = async () => {
+  let result
+  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
+  if ($checkRes(result)) examStatusList.value = result.data
+  result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
+}
+const search = async (query = { skip, limit }) => {
+  const nq = { skip: get(query, 'skip'), limit: get(query, 'limit') }
+  const res = await store.query(nq)
+  if ($checkRes(res)) {
+    list.value = get(res, 'data', [])
+    total.value = get(res, 'total', 0)
+  }
+}
+// 字典表
+const getDict = (data, type) => {
+  let list
+  let result
+  switch (type) {
+    case 'status':
+      list = examStatusList.value
+      break
+    default:
+      break
+  }
+  if (!list) return result
+  const i = list.find((f) => f.value === data)
+  if (!i) return result
+  return get(i, 'label')
+}
+// 分页
+const changePage = (page = currentPage.value) => {
+  search({ skip: (page - 1) * limit, limit: limit })
+}
+const sizeChange = (limits) => {
+  limit = limits
+  currentPage.value = 1
+  search({ skip: 0, limit: limit })
+}
 </script>
 <style scoped lang="scss">
 .main {
@@ -156,7 +231,73 @@ provide('type', 'user')
           opacity: 0.5;
         }
       }
+      .boxnav {
+        .table {
+          height: 26vh;
+          .name {
+            max-width: 200px;
+          }
+          th {
+            border-bottom: 1px solid #407abd;
+            font-size: 14px;
+            text-align: center;
+            padding: 6px 0;
+            color: rgba(255, 255, 255, 0.8);
+          }
+          td {
+            border-bottom: 1px dotted#407abd;
+            font-size: 12px;
+            padding: 6px 0;
+            text-align: center;
+            color: rgba(255, 255, 255, 0.6);
+          }
+          tr:last-child td {
+            border: none;
+          }
+          .text-w {
+            color: #ffe400;
+          }
+          .text-d {
+            color: #ff6316;
+          }
+          .text-s {
+            color: #14e144;
+          }
+          .text-b {
+            color: #07e5ff;
+          }
+        }
+        .total {
+          margin: 5px 0 0 0;
+          display: flex;
+          justify-content: center;
+        }
+      }
     }
   }
 }
+:deep(.el-pagination.is-background .btn-prev:disabled) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-next:disabled) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-prev) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .btn-next) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .el-pager li.is-active) {
+  background-color: #4d5b87 !important;
+  color: #ffffff !important;
+}
+:deep(.el-pagination.is-background .el-pager li) {
+  background-color: rgba($color: #ffffff, $alpha: 0.1) !important;
+  color: #ffffff !important;
+}
 </style>

src/views/user/parts/user/state.vue

@@ -21,9 +21,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="部门类型" prop="type">
-            <el-select clearable v-model="form.type" placeholder="请选择部门类型">
-              <el-option v-for="(item, index) in typeList" :key="index" :label="item.label" :value="item.value" />
-            </el-select>
+            <el-input clearable v-model="form.type" placeholder="请输入部门类型" />
           </el-form-item>
         </el-col>
       </el-row>