新增页面

package.json

@@ -17,6 +17,7 @@
     "axios": "^0.27.2",
     "echarts": "^5.4.0",
     "echarts-liquidfill": "^3.1.0",
+    "vant": "^4.1.2",
     "vue": "^3.2.41",
     "vue-router": "^4.1.5"
   },

pnpm-lock.yaml

@@ -17,6 +17,7 @@ specifiers:
   unplugin-auto-import: ^0.10.3
   unplugin-icons: ^0.14.12
   unplugin-vue-components: ^0.22.8
+  vant: ^4.1.2
   vite: ^3.1.8
   vite-plugin-windicss: ^1.8.8
   vue: ^3.2.41
@@ -29,6 +30,7 @@ dependencies:
   axios: 0.27.2
   echarts: 5.4.0
   echarts-liquidfill: 3.1.0_echarts@5.4.0
+  vant: 4.1.2_vue@3.2.41
   vue: 3.2.41
   vue-router: 4.1.5_vue@3.2.41
 
@@ -456,6 +458,18 @@ packages:
       eslint-visitor-keys: 3.3.0
     dev: true
 
+  /@vant/popperjs/1.3.0:
+    resolution: {integrity: sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==}
+    dev: false
+
+  /@vant/use/1.5.1_vue@3.2.41:
+    resolution: {integrity: sha512-Zxd7lDz/LliVYEQi3PR9a8CQa/kGCVzF0u9hqDMaTlgXlbG0wHMFPllrcG0ThR6bfs8xrYVuSFM9pJn6HSoUGQ==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      vue: 3.2.41
+    dev: false
+
   /@vitejs/plugin-vue/3.1.2_vite@3.1.8+vue@3.2.41:
     resolution: {integrity: sha512-3zxKNlvA3oNaKDYX0NBclgxTQ1xaFdL7PzwF6zj9tGFziKwmBa3Q/6XcJQxudlT81WxDjEhHmevvIC4Orc1LhQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -3003,6 +3017,16 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
+  /vant/4.1.2_vue@3.2.41:
+    resolution: {integrity: sha512-iRUYBR5zDbs7O0UTxauyW/0XbJoE0g/eHipn0y3QxXeazdmNiaV0kGbBKRJ8vE/7p74zila/O5LzDiYbPDDN7Q==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      '@vant/popperjs': 1.3.0
+      '@vant/use': 1.5.1_vue@3.2.41
+      vue: 3.2.41
+    dev: false
+
   /vite-plugin-windicss/1.8.8_vite@3.1.8:
     resolution: {integrity: sha512-iyu+ZX0NmhNEUaLPv7xtC+EFRBpWMmw0nhd9a9upayfuNG/thwslKiQKmRB7U/dG0k/2oWLvPDvN/B9i7oRgSA==}
     peerDependencies:

src/pages/apiItem.js

@@ -0,0 +1,8 @@
+import { _request } from '../../utils/request.ts'
+
+export const userDetail = (data = {}) =>
+_request({
+    // baseURL: window.GLOBAL_CONFIG.uc,
+    url: 'https://jsonplaceholder.typicode.com/posts',
+    data,
+  })

src/pages/index.vue

@@ -10,6 +10,12 @@ import line3 from './home/line3.vue';
 
 import blocks from './home/blocks.vue'
 
+
+
+
+
+
+
 </script>
 
 <template>
@@ -129,12 +135,14 @@ import blocks from './home/blocks.vue'
 </template>
 
 <style scoped>
-.left_1{
+.left_1 {
   text-align: left;
-  font-size: 14px;;
+  font-size: 14px;
+  ;
 }
-.left_2{
+
+.left_2 {
   text-align: right;
-  color:#0FEEF1;
+  color: #0FEEF1;
 }
 </style>

src/pages/school.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import fxykh from '~/assets/img/school/fxykh.png'
-import jbqk from '~/assets/img/school/jbqk.png'
-import syxxykh from '~/assets/img/school/syxxykh.png'
 import ysl from '~/assets/img/school/ysl.png'
+import cone from './school/cone.vue';
+
+// import { userDetail } from './home/apiItem';
+
 
 // 二级分校基本情况
 const secScholltableTitle = ref(["二级分校", "结对学校数量", "结对教师数量", "结对班级数量", "开课数量", "资源贡献数量", "线上教研次数", "覆盖学生数量"]);
@@ -38,15 +39,29 @@ const secSchollSupportContent = ref([
   { a1: "东方", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4},
 ])
 
+const initData = () => {
+  userDetail()
+    .then(res => {
+      console.log(res,"8978")
+    })
+  .catch(error=>{console.log(error)})
+}
+// initData();
+
+
 
 </script>
 
 <template>
   <div class="flex flex-col justify-between">
     <div class="flex justify-between">
-      <!-- <div class="table">111</div> -->
-      <img :src="ysl" alt="" style="width:50%;">
-
+      <div style="width:49%;">
+        <div class="w-full flex flex-col border border-hex-0A337E bg-block p-6">
+          <div class="text-lg mb-2 ">桐乡农村学校艺术类教师结构性缺编情况</div>
+          <cone/>
+        </div>
+        
+      </div>
       <div style="width:49%;">
         <div class="text-lg mb-2 ">二级分校基本情况</div>
         <div class="normalTable">
@@ -71,6 +86,7 @@ const secSchollSupportContent = ref([
     </div>
     <div class="flex justify-between mt-4">
       <div style="width:49%;">
+        
         <div class="text-lg mb-2 ">二级分校月考核数据表</div>
         <div class="normalTable">
           <div class="flex justify-between normalTable_title">

src/pages/school/cone.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import * as echarts from 'echarts'
+
+const chartRef = ref()
+onMounted(() => {
+  echarts.init(chartRef.value).setOption({
+    xAxis: {
+    type: 'category',
+    data: ['美术专职教师占比100%', '美术专职教师占比80%至99%', '美术专职教师占比50以下']
+  },
+  yAxis: {
+    type: 'value'
+    },
+    series: [
+    {
+      data: [4, 8, 16],
+      type: 'pictorialBar', // 象形柱图
+      symbol: 'triangle', // 三角形
+      color: {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [{
+          offset: 0, color: 'rgba(15,243,221,1)'
+        }, {
+          offset: 1, color: 'rgba(15,243,221,0)'
+        }]
+      },
+    }
+  ]
+  })
+})
+</script>
+
+<template>
+  <div ref="chartRef" class="w-full h-full " />
+</template>

src/pages/student.vue

@@ -3,12 +3,6 @@ import bar from './student/bar.vue'
 import lines from './student/lines.vue'
 import radars1 from './student/radars1.vue'
 import radars2 from './student/radars2.vue'
-import jdqk from '~/assets/img/student/jdqk.png'
-import xcpj from '~/assets/img/student/xcpj.png'
-import yspj from '~/assets/img/student/yspj.png'
-import yxzp from '~/assets/img/student/yxzp.png'
-import yxzy from '~/assets/img/student/yxzy.png'
-import zpqk from '~/assets/img/student/zpqk.png'
 
 
 //本学期优秀美术作品排行

src/pages/teacher.vue

@@ -3,10 +3,27 @@ import pie1 from './teacher/pie1.vue'
 import pie2 from './teacher/pie2.vue'
 import pie3 from './teacher/pie3.vue'
 
-import teacher1 from '~/assets/img/teacher/teacher1.png'
-import teacher2 from '~/assets/img/teacher/teacher2.png'
 import top from '~/assets/img/teacher/top.png'
 
+const baseInfo = ref([
+  {
+    title: "参与教师",
+    detailNum:'0111',
+  },
+  {
+    title: "开课数量",
+    detailNum:'0911',
+  },
+  {
+    title: "教研数量",
+    detailNum:'0911',
+  },
+  {
+    title: "资源数量",
+    detailNum:'8911',
+  }
+]);
+
 const secSchollTeacherTitle = ref(["全科教师", "协同数量", "教研次数", "教学效果","上传资源"]);
 const secSchollTeacherContent = ref([
   { a1: "花花", a2: 28, a3: 8, a4: 5,a5:5, },
@@ -22,7 +39,6 @@ const secSchollTeacher2Content = ref([
   { a1: "花花", a2: 26, a3: 8, a4: 5,a5:5, },
   { a1: "花花", a2: 26, a3: 8, a4: 5,a5:5, },
   { a1: "花花", a2: 26, a3: 8, a4: 5,a5:5, },
-  
 ])
 
 </script>
@@ -32,13 +48,10 @@ const secSchollTeacher2Content = ref([
     <div class="flex flex-col justify-between" style="width:49%;">
       <div class="w-full ">
         <div class="flex flex-row justify-between ">
-          <div>
-            <h4>参与教师</h4>
-            <div>1111</div>
+          <div v-for="(item,index) in baseInfo" :key="index" >
+            <h4 class="text-lg font-medium">{{ item.title }}</h4>
+            <div class="border-blue-500/50  text-4xl mt-2">{{ item.detailNum }}</div>
           </div>
-          <div>22</div>
-          <div>33</div>
-          <div>44</div>
         </div>
       </div>
       <div class="w-full ">
@@ -147,4 +160,5 @@ const secSchollTeacher2Content = ref([
 .normalTable_contentDetile div{
   text-align: center;
 }
+
 </style>

src/utils/request.ts

@@ -1,6 +1,6 @@
 import axios from 'axios'
 import type { AxiosRequestConfig } from 'axios'
-import { showFailToast } from 'vant'
+import { showFailToast } from 'vant';
 import { token } from '~/store/index'
 
 const _request = axios.create({