tmp-jn/src/pages/xdjy/qjygl/zytj.vue

<script setup>
import { ref } from "vue";
import typeUrl from '~/assets/type.png';
import request from '~/utils/request';

import * as echarts from 'echarts';

const loading = ref(true)

const tableKey = 'xqzt_id'

const queryFormData = ref({})

const tableData = ref()
const cardData = ref([])


// const xAxisType = ['语文', '英语', '数学', '音乐', '体育', '美术', '物理', '化学', '历史', '政治', '生物', '地理']

function queryApi() {
  loading.value = true
  return request({
    url: '/xdjy/qjygl_zytj_stat/content_json',
    data: {
      // ...queryFormData.value,
      // limit: limit.value,
      // page: currentPage.value
    }
  }).then(response => {
    const { data } = response
    const str = JSON.stringify(data.content_json)
    if(str==='{}'){
      throw new Error('暂无数据')
    }
    tableData.value = data.content_json
    cardData.value = data.content_json.card ?? []
    return response
  }).then(() => {
    loading.value = false
  }).then(() => {

    const size = boxRef.value.getBoundingClientRect()
    const chartData = tableData.value?.chart
    const xAxisType = chartData?.xk


    const chart1 = echarts.init(canvasRef1.value, 'default', { width: size.width * 0.6, height: size.height / 2 })
    const chart2 = echarts.init(canvasRef2.value, 'default', { width: size.width * 0.4, height: size.height / 2 })
    const chart3 = echarts.init(canvasRef3.value, 'default', { width: size.width * .33, height: size.height / 2 })
    const chart4 = echarts.init(canvasRef4.value, 'default', { width: size.width * .34, height: size.height / 2 })
    const chart5 = echarts.init(canvasRef5.value, 'default', { width: size.width * .33, height: size.height / 2 })

    chart1.setOption({
      title: { bottom: 0, left: 'center', text: '各学科资源数量' },
      legend: {
        right: '10',
        top: '10',
      },
      grid: {
        left: '3%',
        right: '40px',
        bottom: '30',
        containLabel: true
      },
      xAxis:
      {
        type: 'category',
        show: true,
        name: '学期',
        data: xAxisType
      },
      yAxis:
      {
        type: 'value',
        name: '数量',
        show: true,
      }
      ,
      series: [
        {
          name: '总数',
          type: 'bar',
          stack: 'me',
          emphasis: {
            focus: 'series'
          },
          data: chartData?.zysl?.map(({ zs }) => zs)
        },
        {
          name: '今年新增',
          type: 'bar',
          stack: 'me',
          emphasis: {
            focus: 'series'
          },
          data: chartData?.zysl?.map(({ jnxz }) => jnxz)
        },
      ]
    })

    chart2.setOption({
      title: { bottom: 0, left: '25%', text: '各学科资源占比' },
      legend: {
        right: '3%',
        top: 'center',
        orient: 'vertical',
      },
      series: [
        {
          type: 'pie',
          center: ['42%', '50%'],
          itemStyle: {
            borderRadius: 1
          },
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: false
            }
          },
          data: xAxisType.map((val, idx) => ({
            value: chartData.zyzb[idx],
            name: val
          }))
        },
      ]
    })

    chart3.setOption({
      title: { bottom: 0, left: '25%', text: '各学科占有的空间占比' },
      legend: {
        right: '3%',
        top: 'center',
        orient: 'vertical',
      },
      series: [
        {
          type: 'pie',
          radius: ['57%', '70%'],
          center: ['42%', '50%'],
          itemStyle: {
            borderRadius: 1
          },
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: false
            }
          },
          data: xAxisType.map((val, idx) => ({
            value: chartData.kjzb[idx],
            name: val
          }))
        },
      ]
    })

    chart4.setOption({
      title: { bottom: 0, left: '25%', text: '各学科资源上传量' },

      legend: {
        right: '3%',
        top: 'center',
        orient: 'vertical',
      },
      series: [
        {
          type: 'pie',
          radius: ['57%', '70%'],
          center: ['42%', '50%'],
          itemStyle: {
            borderRadius: 1
          },
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: false
            }
          },
          data: xAxisType.map((val, idx) => ({
            value: chartData.zyscl[idx],
            name: val
          }))
        },
      ]
    })

    chart5.setOption({
      title: { bottom: 0, left: '25%', text: '各学科资源下载量' },
      legend: {
        right: '3%',
        top: 'center',
        orient: 'vertical',
      },
      series: [
        {
          type: 'pie',
          radius: ['57%', '70%'],
          center: ['42%', '50%'],
          itemStyle: {
            borderRadius: 1
          },
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: false
            }
          },
          data: xAxisType.map((val, idx) => ({
            value: chartData.zyxzl[idx],
            name: val
          }))
        },
      ]
    })
  }).catch(err => {
    console.log(err)
    loading.value = false
    ElMessage.error(err.message)
  })
}
queryApi()


const boxRef = ref()
const canvasRef1 = ref()
const canvasRef2 = ref()
const canvasRef3 = ref()
const canvasRef4 = ref()
const canvasRef5 = ref()




</script>

<template>
  <div class="flex flex-col justify-between h-full">
    <div class="flex-none flex justify-between text-gray-500 text-sm mb-14px">
      <div class="card w-19/100">
        <div class="flex justify-start ">
          <div class="flex_center w-40px h-40px rounded-4px mr-6 bg-blue-500">
            <img :src="typeUrl" class="w-3/5 h-3/5" />
          </div>
          <div>
            <div>资源数量</div>
            <div class="text-black text-2xl mt-1">{{ cardData[0]?.zysl ??'-'}}</div>
          </div>
        </div>
        <div class="divider"></div>
        <div class="flex justify-between py-1"><span>本月新增</span><span class="text-black">{{ cardData[0]?.byxz ??'-'}}</span>
        </div>
        <div class="flex justify-between py-1"><span>资源类型数</span><span class="text-black">{{ cardData[0]?.zylxs ??'-'}}</span>
        </div>
      </div>

      <div class="card w-19/100">
        <div class="flex justify-start ">
          <div class="flex_center w-40px h-40px rounded-4px mr-6 bg-orange-500">
            <img :src="typeUrl" class="w-3/5 h-3/5" />

          </div>
          <div>
            <div>下载数量</div>
            <div class=" text-black text-2xl mt-1">{{ cardData[1]?.xzsl ??'-'}}</div>
          </div>
        </div>
        <div class="divider"></div>
        <div class="flex justify-between py-1"><span>本月下载</span><span class="text-black">{{ cardData[1]?.byxz ??'-'}}</span>
        </div>
        <div class="flex justify-between py-1"><span>单日最多下载数</span><span class="text-black">{{ cardData[1]?.drzdxzs
        ??'-'}}</span></div>
      </div>

      <div class="card w-19/100">
        <div class="flex justify-start ">
          <div class="flex_center w-40px h-40px rounded-4px mr-6 bg-red-500">
            <img :src="typeUrl" class="w-3/5 h-3/5" />

          </div>
          <div>
            <div>占有空间</div>
            <div class=" text-black text-2xl mt-1">{{ cardData[2]?.zykj ??'-'}}</div>
          </div>
        </div>
        <div class="divider"></div>
        <div class="flex justify-between py-1"><span>本月占有</span><span class="text-black">{{ cardData[2]?.byzy ??'-'}}</span>
        </div>
        <div class="flex justify-between py-1"><span>总空间</span><span class="text-black">{{ cardData[2]?.zkj ??'-'}}</span>
        </div>
      </div>

      <div class="card w-19/100">
        <div class="flex justify-start ">
          <div class="flex_center w-40px h-40px rounded-4px mr-6 bg-green-500">
            <img :src="typeUrl" class="w-3/5 h-3/5" />

          </div>
          <div>
            <div>总空间</div>
            <div class=" text-black text-2xl mt-1">{{ cardData[3]?.yhsl ??'-'}}</div>
          </div>
        </div>
        <div class="divider"></div>
        <div class="flex justify-between py-1"><span>本年新增</span><span class="text-black">{{ cardData[3]?.bnxz ??'-'}}</span>
        </div>
        <div class="flex justify-between py-1"><span>平台总访问量</span><span class="text-black">{{ cardData[3]?.ptzfwl
        ??'-'}}</span></div>
      </div>

      <div class="card w-19/100">
        <div class="flex justify-start ">
          <div class="flex_center w-40px h-40px rounded-4px mr-6 bg-teal-500">
            <img :src="typeUrl" class="w-3/5 h-3/5" />

          </div>
          <div>
            <div>资源评论</div>
            <div class=" text-black text-2xl mt-1">{{ cardData[4]?.zypl ??'-'}}</div>
          </div>
        </div>
        <div class="divider"></div>
        <div class="flex justify-between py-1"><span>本月新增</span><span class="text-black">{{ cardData[4]?.byxz ??'-'}}</span>
        </div>
        <div class="flex justify-between py-1"><span>匿名评价总数</span><span class="text-black">{{ cardData[4]?.nmpjzs
        ??'-'}}</span></div>
      </div>

    </div>

    <div class="flex-auto card flex flex-col w-full">
      <div>各学科资源统计</div>
      <div class="divider"></div>
      <div v-if="tableData" ref="boxRef" class="flex-auto w-full">
        <div class="h-1/2 flex">
          <canvas ref="canvasRef1" class=" h-full"></canvas>
          <canvas ref="canvasRef2" class=" h-full"></canvas>
        </div>
        <div class="h-1/2 flex">
          <canvas ref="canvasRef3" class=" h-full"></canvas>
          <canvas ref="canvasRef4" class=" h-full"></canvas>
          <canvas ref="canvasRef5" class=" h-full"></canvas>
        </div>
      </div>
      <el-empty v-else description="暂无数据"></el-empty>
    </div>
  </div>
</template>