tyyx_chart/src/pages/teacher.vue

<script setup lang="ts">
import _request from '../utils/request';
import pie1 from './teacher/pie1.vue'
import pie2 from './teacher/pie2.vue'
import pie3 from './teacher/pie3.vue'

const AllResponse = ref('');

const left_top_mainShow = ref('');
const left_middle_table = ref('');
const left_bottom_table = ref('');

const right_top_echartsData = ref('');
const right_middle_echartsData = ref('');
const right_bottom_echartsData = ref('');

const initData = () => {
  _request({
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    baseURL:window.GLOBAL_CONFIG.api,
    url: "/openapi/chart/teacher_data.php",
    data:{},
  })
    .then(res => {
      if (res.code == '1') {
        AllResponse.value = res.data;
        console.log(res,"alvis")
        left_top_mainShow.value = res.data.left_top_mainShow;
        left_middle_table.value =res.data.left_middle_table ;
        left_bottom_table.value =res.data.left_bottom_table ;

        right_top_echartsData.value = res.data.right_top_echartsData;
        right_middle_echartsData.value = res.data.right_middle_echartsData;
        right_bottom_echartsData.value = res.data.right_bottom_echartsData;

      }
    })
  .catch(error=>{console.log(error)})
}
initData();


// newTotal = numTrans(res.data.school_base_data.yhgmData.total)

function numTrans(num) {
  let newNum = converToArray(num)
  if (newNum.length < 7) {
    const zero = []
    for (let i = 0; i < 7 - newNum.length; i++)
      zero.push(0)

    newNum = [...zero, ...newNum]
    // return [...zero, ...newNum]
  }
  return newNum
}
const converToArray = number => [...`${number}`].map(el => parseInt(el))



</script>

<template>
  <div class="flex justify-between">
    <div class="flex flex-col justify-between" style="width:49%;">
      <div class="w-full ">
        <div class="flex flex-row justify-between ">
          <div v-for="(item,index) in left_top_mainShow" :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 class="border-blue-500/50  text-4xl mt-4 splitNum">
              <span class="bg-block">0</span>
              <span class="bg-block">1</span>
              <span class="bg-block">1</span>
              <span class="bg-block">1</span>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full ">
        <div class="normalTable">
          <div class="flex justify-between normalTable_title" v-if="left_middle_table.mainTable">
            <div class="wslice5" v-for="(item,index)  in left_middle_table.mainTable.secScholltableTitle " :key="index" >{{item }}</div>
          </div>
          <div class="normalTable_content" v-if="left_middle_table.mainTable" v-for="(item,index) in left_middle_table.mainTable.secSchollTableContent" :key="index">
            <div class="normalTable_contentDetile" >
             <div class="wslice5" >{{ item.a1}}</div>
             <div class="wslice5" >{{ item.a2 }}</div>
             <div class="wslice5" >{{ item.a3 }}</div>
             <div class="wslice5" >{{ item.a4 }}</div>
             <div class="wslice5" >{{ item.a5 }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full ">
        <div class="normalTable">
          <div class="flex justify-between normalTable_title" v-if="left_bottom_table.mainTable">
            <div class="wslice5" v-for="(item,index)  in left_bottom_table.mainTable.secScholltableTitle" :key="index" >{{item }}</div>
          </div>
          <div class="normalTable_content" v-if="left_bottom_table.mainTable" v-for="(item,index) in left_bottom_table.mainTable.secSchollTableContent" :key="index">
            <div class="normalTable_contentDetile" >
             <div class="wslice5" >{{ item.a1}}</div>
             <div class="wslice5" >{{ item.a2 }}</div>
             <div class="wslice5" >{{ item.a3 }}</div>
             <div class="wslice5" >{{ item.a4 }}</div>
             <div class="wslice5" >{{ item.a5 }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w-960px flex flex-col justify-between" style="width:50%;">
      <div class="w-full h-300px flex flex-col border border-hex-0A337E bg-block p-6">
        <div class="text-lg mb-4 ">{{ right_top_echartsData.bigtitle }}</div>
        <div class="flex flex-auto">
          <pie1 v-show="right_top_echartsData.echartsData" :ecahrtsData="right_top_echartsData.echartsData" />
        </div>
      </div>
      <div class="w-full h-300px flex flex-col border border-hex-0A337E bg-block p-6" style="margin-top: 1%;">
        <div class="text-lg mb-4 ">{{ right_middle_echartsData.bigtitle }}</div>
        <div class="flex flex-auto">
          <pie2 v-show="right_middle_echartsData.echartsData" :ecahrtsData="right_middle_echartsData.echartsData"  />
        </div>
      </div>
      <div class="w-full h-300px flex flex-col border border-hex-0A337E bg-block p-6" style="margin-top: 1%;">
        <div class="text-lg mb-4 ">{{ right_bottom_echartsData.bigtitle }}</div>
        <div class="flex flex-auto">
          <pie3 v-show="right_bottom_echartsData.echartsData" :ecahrtsData="right_bottom_echartsData.echartsData" />
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.wslice8{
  width: 12%;
}
.wslice7{
  width: 14%;
}
.wslice6{
  width: 16%;
}
.wslice5{
  width: 20%;
}
.wslice4{
  width: 25%;
}

.normalTable_title{
  height:50px;
  line-height: 50px;
  box-sizing: border-box;
  padding:0 2%;
  background: linear-gradient(90deg,rgba(11,38,147,1) 0%, rgba(27,66,131,0) 100%);
  font-size: 14px;
  font-weight: normal;
  
}
.normalTable_title div{
  text-align: center;
}

.normalTable_content{
  display: flex;
  justify-content: space-between;
  height:40px;
  line-height:40px;
  box-sizing: border-box;
  padding:0 2%;
  background-color: rgba(0,22,68, 0.5);
}
.normalTable_contentDetile{
  width:100%;
  display: flex;
  flex-direction: row;
  justify-content:space-between;

}
.normalTable_contentDetile div{
  text-align: center;
}

.splitNum span{
  border: 2px solid rgba(35,188,248,1 );
  border-image-source: linear-gradient(135deg, #23BEFA, #0358C1);
  border-image-slice: 1;
  border-image-repeat: stretch;
  padding:2px 5px;
  margin-right: 3px;
  background-color: rgba(11,39,146,0.3);
}
</style>