修改孵化基地

src/store/api/user/incubator.js

@@ -13,6 +13,26 @@ export const IncubatorStore = defineStore('incubator', () => {
     const res = await axios.$get(`${url}`, cond)
     return res
   }
+  const list = async ({ skip = 0, limit = undefined, ...info } = {}) => {
+    let cond = {}
+    if (skip) cond.skip = skip
+    if (limit) cond.limit = limit
+    cond = { ...cond, ...info }
+    const res = await axios.$get(`${url}/list`, cond)
+    return res
+  }
+  const all = async ({ skip = 0, limit = undefined, ...info } = {}) => {
+    let cond = {}
+    if (skip) cond.skip = skip
+    if (limit) cond.limit = limit
+    cond = { ...cond, ...info }
+    const res = await axios.$get(`${url}/allList`, cond)
+    return res
+  }
+  const statistics = async (payload) => {
+    const res = await axios.$get(`${url}/statistics`, payload)
+    return res
+  }
   const fetch = async (payload) => {
     const res = await axios.$get(`${url}/${payload}`)
     return res
@@ -36,6 +56,9 @@ export const IncubatorStore = defineStore('incubator', () => {
   }
   return {
     query,
+    list,
+    all,
+    statistics,
     detail,
     fetch,
     create,

src/views/elevenHatch/index.vue

@@ -2,6 +2,9 @@
   <div class="elevenHatch">
     <el-row>
       <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
+        <div class="loading" v-if="loading">
+          <div class="loadbox"><img :src="loadingUrl" /> 页面加载中...</div>
+        </div>
         <div class="head">
           <div class="head_1">{{ info.name || '孵化器基地' }}管理驾驶舱</div>
           <div class="head_2" id="showTime">{{ formattedTime }}</div>
@@ -12,9 +15,8 @@
               <div class="center_1">
                 <div class="boxall">
                   <div class="alltitle">孵化基地汇总</div>
-                  <!-- <echarts3></echarts3> -->
                   <div class="center_list">
-                    <div class="list_num" v-for="(item, index) in thrList" :key="index">
+                    <div class="list_num" v-for="(item, index) in thrList" :key="index" @click="toNum(item)">
                       {{ item.num }}<span>{{ item.name }}</span>
                     </div>
                   </div>
@@ -27,35 +29,87 @@
             </el-col>
             <el-col :span="12">
               <div class="center_1">
-                <div class="boxall" style="height: 175px">
-                  <div class="clearfix navboxall" style="height: 100%">
-                    <div class="pulll_left num">
-                      <div class="numbt">总体情况<span>(单位：家)</span></div>
-                      <div class="numtxt">190</div>
-                    </div>
-                    <div class="pulll_right zhibiao">
-                      <div class="zb1">
-                        <span>从业人员</span>
-                        <echarts5></echarts5>
+                <transition name="fade">
+                  <div class="boxall" style="height: 175px" v-if="info.show">
+                    <div class="clearfix navboxall" style="height: 100%">
+                      <div class="pulll_left num">
+                        <div class="numbt">总体情况<span>(单位：家)</span></div>
+                        <div class="numtxt" @click="toChang('1')">{{ info.total_num || 0 }}</div>
                       </div>
-                      <div class="zb2">
-                        <span>高新技术企业</span>
-                        <echarts6></echarts6>
+                      <div class="pulll_right zhibiao">
+                        <div class="zb1">
+                          <span>从业人员</span>
+                          <echarts5 @click="toChang('2')" :info="info"></echarts5>
+                        </div>
+                        <div class="zb2">
+                          <span>高新技术企业</span>
+                          <echarts6 @click="toChang('3')" :info="info"></echarts6>
+                        </div>
+                        <div class="zb3">
+                          <span>专精特新企业</span>
+                          <echarts7 @click="toChang('4')" :info="info"></echarts7>
+                        </div>
                       </div>
-                      <div class="zb3">
-                        <span>专精特新企业</span>
-                        <echarts7></echarts7>
+                    </div>
+                  </div>
+                  <div class="boxall" style="height: 480px" v-else>
+                    <div class="alltitle">
+                      <div>企业信息</div>
+                      <button class="button type1" @click="toBack">返回</button>
+                    </div>
+                    <div class="company">
+                      <div class="table">
+                        <div class="table-head">
+                          <div class="label" v-for="(item, index) in column" :key="index" :style="item.style">
+                            {{ item.name }}
+                          </div>
+                        </div>
+                        <div class="table-value">
+                          <div class="value" v-for="(item, index) in list_1" :key="index">
+                            <div class="table-colunm">{{ index + 1 }}</div>
+                            <div class="table-colunm textOne width1">{{ item.name || '暂无' }}</div>
+                            <div class="table-colunm textOne width2">{{ item.industry || '暂无' }}</div>
+                            <div class="table-colunm textOne">{{ item.person || '暂无' }}</div>
+                            <div class="table-colunm textOne width3 button" @click="toCView(item)">查看详情</div>
+                          </div>
+                        </div>
+                        <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>
+                </transition>
+                <div class="boxall" v-if="info.show">
+                  <div class="alltitle">
+                    <div>孵化基地荣誉</div>
+                    <div class="select_1">
+                      <div class="select_left">年度：</div>
+                      <div class="select_right">
+                        <el-select v-model="year1" clearable placeholder="请选择" style="width: 14rem" :teleported="false" @change="toYear1">
+                          <el-option v-for="(item, index) in yearList" :key="index" :label="item.label" :value="item.label" />
+                        </el-select>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="honor">
+                    <div class="honor_1" v-if="yearInfo.content">{{ yearInfo.content || '暂无孵化基地荣誉' }}</div>
+                    <div class="honor_2" v-else>暂无数据</div>
+                  </div>
                 </div>
                 <div class="boxall">
-                  <div class="alltitle">孵化基地荣誉</div>
-                  <echarts4></echarts4>
-                </div>
-                <div class="boxall">
-                  <div class="alltitle">孵化基地企业产业占比</div>
-                  <echarts2></echarts2>
+                  <div class="alltitle">
+                    <div>孵化基地企业产业占比</div>
+                    <div class="select_1">
+                      <div class="select_left">年度：</div>
+                      <div class="select_right">
+                        <el-select v-model="year2" clearable placeholder="请选择" style="width: 14rem" :teleported="false" @change="toYear2">
+                          <el-option v-for="(item, index) in yearList" :key="index" :label="item.label" :value="item.label" />
+                        </el-select>
+                      </div>
+                    </div>
+                  </div>
+                  <echarts2 :info_2="info_2"></echarts2>
                 </div>
               </div>
             </el-col>
@@ -77,6 +131,9 @@
 </template>
 
 <script setup>
+// 路由
+const router = useRouter()
+const $checkRes = inject('$checkRes')
 // 用户信息
 import { UserStore } from '@/store/user'
 const userStore = UserStore()
@@ -84,12 +141,12 @@ const user = computed(() => userStore.user)
 // 接口
 import { IncubatorStore } from '@/store/api/user/incubator'
 import { IncubatorYearStore } from '@/store/api/user/incubatorYear'
+import { DictDataStore } from '@/store/api/system/dictData'
 const incubatorStore = IncubatorStore()
 const yearStore = IncubatorYearStore()
+const dictDataStore = DictDataStore()
 import echarts1 from './path/echarts1.vue'
 import echarts2 from './path/echarts2.vue'
-import echarts3 from './path/echarts3.vue'
-import echarts4 from './path/echarts4.vue'
 import echarts5 from './path/echarts5.vue'
 import echarts6 from './path/echarts6.vue'
 import echarts7 from './path/echarts7.vue'
@@ -97,49 +154,91 @@ import echarts7 from './path/echarts7.vue'
 const loading = ref(false)
 // 时间
 const formattedTime = ref('')
-const oneList = ref([
-  { name: '鱿鱼卤制品的研究', money: '110万', number: '10%', time: '2023-4-22' },
-  { name: '一种快速装置自净系统', money: '190万', number: '20%', time: '2023-6-15' },
-  { name: '玻璃表面清洁技术', money: '90万', number: '33%', time: '2023-5-30' },
-  { name: '网上信息安全处理', money: '180万', number: '14%', time: '2023-7-12' },
-  { name: '视觉检测', money: '119万', number: '10%', time: '2023-5-14' },
-  { name: '无纺布气味去除', money: '120万', number: '20%', time: '2023-6-15' },
-  { name: '功能性色母开发', money: '160万', number: '10%', time: '2023-5-30' }
-])
 import video_1 from '/images/video_1.jpg'
 import video_2 from '/images/video_2.jpg'
 import video_3 from '/images/video_3.jpg'
 import video_4 from '/images/video_4.jpg'
+import loadingUrl from '../elevenHatch/images/loading.gif'
 const twoList = ref([{ url: video_1 }, { url: video_2 }, { url: video_3 }, { url: video_4 }])
-
-const thrList = ref([
-  { num: 266, name: '中试场地' },
-  { num: 266, name: '单位人数' },
-  { num: 266, name: '省级导师数' },
-  { num: 266, name: '开展活动总数' },
-  { num: 266, name: '参加活动人次' },
-  { num: 266, name: '合作孵化基地' },
-  { num: 266, name: '开展活动总数' },
-  { num: 266, name: '参加活动人次' },
-  { num: 266, name: '合作孵化基地' }
+const thrList = ref([])
+const info = ref({ show: true })
+const info_2 = ref()
+const yearInfo = ref({})
+const year1 = ref('2023')
+const year2 = ref('2023')
+// 字典表
+const yearList = ref([])
+const column = ref([
+  { name: '序号', style: { width: '10%' } },
+  { name: '公司名称', style: { width: '40%' } },
+  { name: '所属产业', style: { width: '30%' } },
+  { name: '人员总数', style: { width: '10%' } },
+  { name: '操作', style: { width: '20%' } }
 ])
-const info = ref({})
+// 列表
+const list_1 = ref([])
+let skip = 0
+let limit = 10
+const total = ref(0)
 // 请求
 onMounted(async () => {
   loading.value = true
+  await searchOther()
   await search()
+  await searchYear()
+  await searchcYear()
   await updateTime()
   loading.value = false
 })
+const searchOther = async () => {
+  let result
+  // 年度
+  result = await dictDataStore.query({ code: 'year', is_use: '0' })
+  if ($checkRes(result)) yearList.value = result.data
+}
 const search = async () => {
   if (user.value.id) {
-    let res = await incubatorStore.query({ user: user.value.id })
+    let res = await incubatorStore.statistics({ user: user.value.id, status: '1' })
+    if (res.errcode == '0') {
+      info.value = res.data || {}
+      thrList.value = res.data.list || []
+      if (res.data.file && res.data.file.length > 0) twoList.value = res.data.file || []
+    }
+  }
+}
+const searchYear = async () => {
+  if (info.value.id) {
+    let res = await yearStore.query({ incubator: info.value.id, year: year1.value, is_use: '0', status: '1' })
+    if (res.errcode == '0') yearInfo.value = res.data[0] || {}
+  }
+}
+const searchCompany = async (query) => {
+  if (info.value.id) {
+    skip = query.skip
+    limit = query.limit
+    const data = {
+      skip: query.skip,
+      limit: query.limit,
+      incubator: info.value.id,
+      status: '1'
+    }
+    if (query.is_new) data.is_new = query.is_new
+    if (query.is_tech) data.is_tech = query.is_tech
+    const res = await incubatorStore.list(data)
     if (res.errcode == '0') {
-      info.value = res.data[0]
-      if (res.data[0].file && res.data[0].file.length > 0) twoList.value = res.data[0].file
+      list_1.value = res.data
+      total.value = res.total
     }
   }
 }
+const searchcYear = async () => {
+  if (info.value.id) {
+    const data = { is_use: '0', incubator: info.value.id, year: year2.value, status: '1' }
+    const res = await incubatorStore.all(data)
+    if (res.errcode == '0') info_2.value = res.data
+  }
+}
+
 // 创建一个函数来格式化时间并更新状态
 const updateTime = () => {
   const now = new Date()
@@ -167,6 +266,48 @@ onBeforeUnmount(() => {
 const getUrl = (item) => {
   if (item) return `${import.meta.env.VITE_APP_HOST}${item}`
 }
+// 点击数字改变
+const toChang = async (e) => {
+  let data
+  if (e == '3') data = { skip, limit, is_tech: '0' }
+  else if (e == '4') data = { skip, limit, is_new: '0' }
+  else data = { skip, limit }
+  await searchCompany(data)
+  info.value.show = false
+}
+//选择荣誉称号年度
+const toYear1 = (e) => {
+  year1.value = e
+  searchYear()
+}
+//孵化基地企业产业占比
+const toYear2 = (e) => {
+  year2.value = e
+  console.log(e)
+}
+// 孵化基地汇总
+const toNum = (item) => {
+  console.log(item)
+}
+// 返回
+const toBack = async () => {
+  info.value.show = true
+  await search()
+}
+// 查看企业信息
+const toCView = (item) => {
+  router.push({ path: `/company/detail`, query: { id: item.company } })
+}
+const currentPage = ref(1)
+// 分页
+const changePage = (page = currentPage.value) => {
+  searchCompany({ skip: (page - 1) * limit, limit: limit })
+}
+const sizeChange = (limits) => {
+  limit = limits
+  currentPage.value = 1
+  searchCompany({ skip: 0, limit: limit })
+}
 </script>
 <style scoped lang="scss">
 .elevenHatch {
@@ -187,6 +328,33 @@ const getUrl = (item) => {
     color: #06c;
     text-decoration: none !important;
   }
+  .loading {
+    position: fixed;
+    left: 0;
+    top: 0;
+    font-size: 16px;
+    z-index: 100000000;
+    width: 100%;
+    height: 100%;
+    background: -webkit-radial-gradient(50% 50%, farthest-corner, #034f8e, #034987, #02366d, #06165e);
+    background: radial-gradient(50% 50%, farthest-corner, #034f8e, #034987, #02366d, #06165e);
+    text-align: center;
+  }
+  .loadbox {
+    position: absolute;
+    width: 160px;
+    height: 150px;
+    color: #fff;
+    left: 50%;
+    top: 50%;
+    margin-top: -100px;
+    margin-left: -75px;
+  }
+  .loadbox img {
+    margin: 10px auto;
+    display: block;
+    width: 40px;
+  }
   .head {
     position: relative;
     height: 70px;
@@ -216,6 +384,22 @@ const getUrl = (item) => {
       .navboxall {
         height: calc(100% - 30px);
       }
+      .fade-enter-from,
+      .fade-leave-to {
+        opacity: 0;
+        transform: scale(0.6);
+      }
+
+      .fade-enter-to,
+      .fade-leave-from {
+        opacity: 1;
+        transform: scale(1);
+      }
+
+      .fade-enter-active,
+      .fade-leave-active {
+        transition: all 1s ease;
+      }
       .boxall {
         padding: 15px;
         background: rgba(0, 0, 0, 0.2);
@@ -237,7 +421,8 @@ const getUrl = (item) => {
             flex-direction: column;
             font-size: 32px;
             font-family: electronicFont;
-            color: #fef000;
+            color: #20dbfd;
+            text-shadow: 0 0 25px #00d8ff;
             span {
               color: #fff !important;
               font-size: 16px !important;
@@ -280,17 +465,146 @@ const getUrl = (item) => {
             }
           }
         }
+        .honor {
+          height: 223px;
+          font-size: $global-font-size-16;
+          color: #fff;
+          overflow: auto;
+          .honor_1 {
+            margin: 10px 0 0 0;
+          }
+          .honor_2 {
+            height: 100%;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+        .company {
+          font-size: $global-font-size-16;
+          color: #fff;
+          .table {
+            width: 100%;
+            margin: 0.5rem 0;
+            .table-head {
+              width: 100%;
+              height: 10%;
+              display: flex;
+              justify-content: space-between;
+              color: #fff;
+              font-size: 1.2rem;
+              background-color: rgba(255, 255, 255, 0.1);
+              padding: 0.5rem 0;
+              .label {
+                text-align: center;
+              }
+            }
+            .table-value {
+              width: 100%;
+              height: 86%;
+              color: #fff;
+              font-size: 1.2rem;
+              .value {
+                display: flex;
+                justify-content: space-between;
+                padding: 0.5rem 0;
+                .table-colunm {
+                  width: 10%;
+                  text-align: center;
+                }
+                .button:hover {
+                  color: #49bcf7;
+                }
+                .width1 {
+                  width: 40% !important;
+                }
+                .width2 {
+                  width: 30% !important;
+                }
+                .width3 {
+                  width: 20% !important;
+                }
+              }
+              .value:nth-child(2n) {
+                background-color: rgba(255, 255, 255, 0.1);
+              }
+            }
+            .total {
+              margin: 10px 0 0 0;
+              width: 100%;
+              display: flex;
+              justify-content: center;
+            }
+          }
+        }
       }
       .bottom {
         margin-bottom: 0;
       }
 
       .alltitle {
+        display: flex;
+        justify-content: space-between;
         font-size: $global-font-size-20;
         color: #fff;
         position: relative;
         padding-left: 12px;
         margin-bottom: 10px;
+        .select_1 {
+          font-size: $global-font-size-16 !important;
+          display: flex;
+          align-items: center;
+          .select_left {
+            width: 50px;
+            margin: 0 3px 0 0;
+          }
+        }
+        .button {
+          position: relative;
+          padding: 0.5em 1.5em;
+          border: none;
+          background-color: transparent;
+          cursor: pointer;
+          outline: none;
+          font-size: 18px;
+        }
+        .button.type1 {
+          color: #49bcf7;
+          text-shadow: 0 0 25px #49bcf7;
+        }
+        .button.type1.type1::after,
+        .button.type1.type1::before {
+          content: '';
+          display: block;
+          position: absolute;
+          width: 20%;
+          height: 20%;
+          border: 2px solid;
+          transition: all 0.6s ease;
+          border-radius: 2px;
+        }
+        .button.type1.type1::after {
+          bottom: 0;
+          right: 0;
+          border-top-color: transparent;
+          border-left-color: transparent;
+          border-bottom-color: #566473;
+          border-right-color: #566473;
+        }
+        .button.type1.type1::before {
+          top: 0;
+          left: 0;
+          border-bottom-color: transparent;
+          border-right-color: transparent;
+          border-top-color: #566473;
+          border-left-color: #566473;
+        }
+        .button.type1.type1:hover:after,
+        .button.type1.type1:hover:before {
+          width: 100%;
+          height: 100%;
+        }
       }
 
       .alltitle:before {
@@ -422,5 +736,77 @@ const getUrl = (item) => {
       }
     }
   }
+  //select 选择器
+  :deep(.el-select__wrapper) {
+    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
+    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
+  }
+  :deep(.el-input__wrapper) {
+    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
+    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
+  }
+  // 修改下拉框背景颜色
+  :deep(.el-popper.is-light) {
+    background: #0b3571 !important;
+    border: 1px solid #33394d !important;
+  }
+
+  // 小三角颜色修改
+  :deep(.el-popper.is-light .el-popper__arrow::before) {
+    border: 1px solid #33394d !important;
+    background: #0b3571 !important;
+  }
+  //下拉选项字体颜色修改
+  :deep(.el-select-dropdown__item) {
+    color: #6687b8 !important;
+  }
+  :deep(.el-select-dropdown__item.is-hovering) {
+    background: #0b3571 !important;
+  }
+  :deep(.el-cascader-node:hover) {
+    background: #4d5b87 !important;
+    border-radius: 0.5rem !important;
+    color: #fff !important;
+    margin: 0 0.7vh !important;
+  }
+  //下拉选项---鼠标选中 字体，背景，颜色修改，圆角，间距修改
+  :deep(.el-select-dropdown__item:hover) {
+    background: #4d5b87 !important;
+    border-radius: 0.5rem !important;
+    color: #fff !important;
+    margin: 0 0.7vh !important;
+  }
+  :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 .el-pager li.is-active) {
+    background-color: #49bcf7 !important;
+    color: #ffffff !important;
+  }
+  /* 定制滚动条整体 */
+  ::-webkit-scrollbar {
+    width: 8px; /* 宽度 */
+  }
+
+  /* 定制滚动条轨道 */
+  ::-webkit-scrollbar-track {
+    background-color: #0b3571; /* 轨道颜色 */
+  }
+
+  /* 定制滚动条滑块 */
+  ::-webkit-scrollbar-thumb {
+    background-color: #6687b8; /* 滑块颜色 */
+    border-radius: 6px; /* 圆角 */
+  }
+
+  /* 滑块在鼠标悬停时改变颜色 */
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #6687b8;
+  }
 }
 </style>

src/views/elevenHatch/path/echarts2.vue

@@ -12,17 +12,14 @@
 <script setup>
 import * as echarts from 'echarts'
 const echarts2 = ref()
-onMounted(() => {
-  drawEcharts2()
+const props = defineProps({
+  info_2: { type: Object, default: () => {} }
 })
+const { info_2 } = toRefs(props)
 function drawEcharts2() {
   var myChart2 = echarts.init(echarts2.value)
-  var vdata = [
-    [4, 3, 5, 9, 3, 8, 3, 7, 2, 4, 6, 4],
-    [5, 5, 7, 3, 6, 8, 9, 4, 3, 7, 2, 2],
-    [4, 3, 5, 9, 5, 8, 3, 7, 2, 4, 6, 4]
-  ]
-  var xdata = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+  var vdata = info_2.value.list
+  var xdata = info_2.value.nameList
   var ydata = [
     { color1: '#8bd46e', color2: '#09bcb7', name: '预计营业收入' },
     { color1: '#248ff7', color2: '#6851f1', name: '预计收入' },
@@ -121,4 +118,13 @@ function drawEcharts2() {
   }
   myChart2.setOption(option2)
 }
+watch(
+  info_2,
+  () => {
+    drawEcharts2()
+  },
+  {
+    deep: true
+  }
+)
 </script>

src/views/elevenHatch/path/echarts3.vue

@@ -51,15 +51,7 @@ function echarts3View() {
         overflow: 'truncate', //超出的部分截断
         ellipsis: '...' //截断的部分用...代替
       },
-      data: [
-        '鱿鱼卤制品的研究',
-        '一种快速装置自净系统',
-        '玻璃表面清洁技术',
-        '网上信息安全处理',
-        '视觉检测',
-        '无纺布气味去除',
-        '功能性色母开发'
-      ],
+      data: ['鱿鱼卤制品的研究', '一种快速装置自净系统', '玻璃表面清洁技术', '网上信息安全处理', '视觉检测', '无纺布气味去除', '功能性色母开发'],
       axisTick: {
         show: false
       },

src/views/elevenHatch/path/echarts5.vue

@@ -12,14 +12,14 @@
 <script setup>
 import * as echarts from 'echarts'
 const echarts5 = ref()
-onMounted(() => {
-  drawEcharts5()
+const props = defineProps({
+  info: { type: Object, default: () => {} }
 })
+const { info } = toRefs(props)
 function drawEcharts5() {
   var myChart5 = echarts.init(echarts5.value)
-  var b = 298
-  var c = 523
-  var d = b + c
+  var b = 1000
+  var c = info.value.person
   var option5 = {
     series: [
       {
@@ -34,7 +34,7 @@ function drawEcharts5() {
         data: [
           {
             value: c,
-            name: '女消费',
+            name: '就业人员',
             label: {
               normal: {
                 formatter: c + '',
@@ -47,15 +47,13 @@ function drawEcharts5() {
           },
           {
             value: b,
-            name: '男消费',
+            name: '就业人员',
             label: {
               normal: {
-                formatter: function () {
-                  return '占比' + Math.round((c / d) * 100) + '%'
-                },
+                formatter: c + '',
                 textStyle: {
-                  color: '#aaa',
-                  fontSize: 12
+                  fontSize: 20,
+                  color: '#fff'
                 }
               }
             },
@@ -74,4 +72,13 @@ function drawEcharts5() {
   }
   myChart5.setOption(option5)
 }
+watch(
+  info,
+  () => {
+    drawEcharts5()
+  },
+  {
+    deep: true
+  }
+)
 </script>

src/views/elevenHatch/path/echarts6.vue

@@ -12,14 +12,14 @@
 <script setup>
 import * as echarts from 'echarts'
 const echarts6 = ref()
-onMounted(() => {
-  drawEcharts6()
+const props = defineProps({
+  info: { type: Object, default: () => {} }
 })
+const { info } = toRefs(props)
 function drawEcharts6() {
   var myChart6 = echarts.init(echarts6.value)
-  var b = 298
-  var c = 523
-  var d = b + c
+  var b = info.value.tech_noum
+  var c = info.value.tech_num
   var option6 = {
     series: [
       {
@@ -33,11 +33,11 @@ function drawEcharts6() {
         },
         data: [
           {
-            value: b,
-            name: '男消费',
+            value: c,
+            name: '高新技术企业',
             label: {
               normal: {
-                formatter: b + '',
+                formatter: c + '',
                 textStyle: {
                   fontSize: 20,
                   color: '#fff'
@@ -46,16 +46,14 @@ function drawEcharts6() {
             }
           },
           {
-            value: c,
-            name: '女消费',
+            value: b,
+            name: '高新技术企业',
             label: {
               normal: {
-                formatter: function () {
-                  return '占比' + Math.round((b / d) * 100) + '%'
-                },
+                formatter: c + '',
                 textStyle: {
-                  color: '#aaa',
-                  fontSize: 12
+                  color: '#fff',
+                  fontSize: 20
                 }
               }
             },
@@ -74,4 +72,13 @@ function drawEcharts6() {
   }
   myChart6.setOption(option6)
 }
+watch(
+  info,
+  () => {
+    drawEcharts6()
+  },
+  {
+    deep: true
+  }
+)
 </script>

src/views/elevenHatch/path/echarts7.vue

@@ -12,14 +12,14 @@
 <script setup>
 import * as echarts from 'echarts'
 const echarts7 = ref()
-onMounted(() => {
-  drawEcharts7()
+const props = defineProps({
+  info: { type: Object, default: () => {} }
 })
+const { info } = toRefs(props)
 function drawEcharts7() {
   var myChart7 = echarts.init(echarts7.value)
-  var b = 298
-  var c = 523
-  var d = b + c
+  var b = info.value.new_noum
+  var c = info.value.new_num
   var option7 = {
     series: [
       {
@@ -34,7 +34,7 @@ function drawEcharts7() {
         data: [
           {
             value: c,
-            name: '女消费',
+            name: '专精特新企业',
             label: {
               normal: {
                 formatter: c + '',
@@ -47,15 +47,13 @@ function drawEcharts7() {
           },
           {
             value: b,
-            name: '男消费',
+            name: '专精特新企业',
             label: {
               normal: {
-                formatter: function () {
-                  return '占比' + Math.round((c / d) * 100) + '%'
-                },
+                formatter: c + '',
                 textStyle: {
-                  color: '#aaa',
-                  fontSize: 12
+                  color: '#fff',
+                  fontSize: 20
                 }
               }
             },
@@ -74,4 +72,13 @@ function drawEcharts7() {
   }
   myChart7.setOption(option7)
 }
+watch(
+  info,
+  () => {
+    drawEcharts7()
+  },
+  {
+    deep: true
+  }
+)
 </script>