tyyx_chart/src/pages/index.vue

<script setup lang="ts">

import _request from '../utils/request';

import scrollblock from './home/scrollblock.vue';
import geoblock from './home/geoblock.vue';
import bar1 from './home/bar1.vue';
import bar2 from './home/bar2.vue';
import radars from './home/radars.vue';
import line1 from './home/line1.vue';
import line2 from './home/line2.vue';
import line3 from './home/line3.vue';

import blocks from './home/blocks.vue'


const baseInfo = ref({
  allSchoolNum: 40,
  allCitySchoolNum: 1326,
  linkSchool: 12,
  outlinkSchool: 3,
  linkTeacher: 75,
  outLinkTeacher: 20,
  lackschool: 7,
  lackschoolPercent:"17.5%",
  lackClassNum: 327,
  lackClassNumPercent:"24.6%",
  linkClass: 60,
  outLinkClass: 14,
  linkStudentNum: 2480,
  outLinkStudentNum:144,
})

const initData = () => {
  let data = {
    
  };

  _request({
    baseURL:"https://jsonplaceholder.typicode.com",
    url: '/posts',
    data:{},
  })
    .then(res => {
    console.log(res,"987978")
    })
  .catch(error=>{console.log(error)})
}
initData();


</script>

<template>
  <div class="flex justify-between">
    <div class="h-full flex flex-col justify-between" style="width: 25%;">
      <div class="border border-hex-0A337E bg-block p-4  h-1/2">
        <radars />
      </div>
      <div class="border border-hex-0A337E bg-block mt-4 h-1/2">
        <bar1 />
      </div>
    </div>
    <div class="flex flex-col justify-between " style="width: 48%;">
      <div class="flex justify-evenly">
        <div class="flex flex-col">
          <div class="flex items-end mb-2">
            <div class="w-140px text-right">全市学校数：</div>
            <div class="text-28px mr-1">40</div>
            <div>个</div>
          </div>
          <div class="flex items-end mb-2">
            <div class="w-140px text-right">全市学校班级数：</div>
            <div class="text-28px mr-1">1326</div>
            <div>个</div>
          </div>
          <div class="flex items-end mb-2">
            <div class="w-140px text-right">结对学校数：</div>
            <div class="text-28px mr-1">12</div>
            <div>个(市外：3个)</div>
          </div>
          <div class="flex items-end mb-2">
            <div class="w-140px text-right">结对教师数：</div>
            <div class="text-28px mr-1">75</div>
            <div>个(市外：20个)</div>
          </div>
        </div>

        <div class="flex flex-col flex-grow max-w-480px">
          <div class="flex items-end mb-2">
            <div class="w-240px text-right">
              缺少专职美术教师学校数：
            </div>
            <div class="text-28px mr-1">
              7
            </div>
            <div>个</div>
            <div class="text-xs text-hex-16F5FF flex-auto text-right mr-2">
              百分比17.5%
            </div>
          </div>
          <div class="flex items-end mb-2">
            <div class="w-240px text-right">
              缺少专职美术教师学校班级数：
            </div>
            <div class="text-28px mr-1">
              327
            </div>
            <div>个</div>
            <div class="text-xs text-hex-16F5FF flex-auto text-right mr-2">
              百分比24.6%
            </div>
          </div>
          <div class="flex items-end mb-2">
            <div class="w-240px text-right">
              结对班级数：
            </div>
            <div class="text-28px mr-1">
              60
            </div>
            <div>个 ( 市外：14个 )</div>
          </div>
          <div class="flex items-end mb-2">
            <div class="w-240px text-right">
              结对学生数：
            </div>
            <div class="text-28px mr-1">
              2480
            </div>
            <div>个 ( 市外：144个 )</div>
          </div>
        </div>
      </div>
      <geoblock />

      <div class="flex justify-between h-240px">
        <blocks class="w-557px border border-hex-0A337E bg-block py-6 px-8 mr-4" />
        <scrollblock />
      </div>
    </div>
    <div class="h-full flex flex-col justify-between" style="width: 25%;">
      <div class="border border-hex-0A337E bg-block p-4 mb-4 h-1/4">
        <bar2 />
      </div>
      <div class="border border-hex-0A337E bg-block mb-4 h-1/4">
        <div class="w-full flex flex-row justify-between p-2">
          <div class="left_1">覆盖率·参与或者结对班级覆盖率</div>
          <div class="left_2">1.0728%</div>
        </div>
        <line1 />
      </div>
      <div class="border border-hex-0A337E bg-block mb-4 h-1/4">
        <div class="w-full flex flex-row justify-between p-2">
          <div class="left_1">贡献度·教师周人均开课数</div>
          <div class="left_2">0.1%</div>
        </div>
        <line2 />
      </div>
      <div class="border border-hex-0A337E bg-block mb-4 h-1/4">
        <div class="w-full flex flex-row justify-between p-2">
          <div class="left_1">应用度·班级周均上课次数</div>
          <div class="left_2">0.3%</div>
        </div>
        <line3 />
      </div>
    </div>
  </div>
</template>

<style scoped>
.left_1 {
  text-align: left;
  font-size: 14px;
  ;
}

.left_2 {
  text-align: right;
  color: #0FEEF1;
}
</style>