dbsd_kczx/src/views/kc/tktj/tkfgl/tkfgl.vue

<template>
  <div class="tktjClass">
    <a-row>
      <a-col :span="24" style="text-align: center;"><strong style="font-size: 16px;">听课覆盖率</strong></a-col>
      <a-col :span="24">
        <a-row>
          <a-col :span="6">
            <a-form-item label="" style="padding: 10px;">
              <!-- <JDictSelectTag placeholder="听课身份" v-model:value="queryParam.tksf" dictCode="kc_tksf" @change="loadData" /> -->
              <j-dict-select-tag placeholder="听课身份" v-model:value="queryParam.tksf" style="width: 100%;" dictCode="kc_tksfrzb,ZWMC,ZWMC,true group by ZWMC" @change="loadData"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="" style="padding: 10px;">
              <JDictSelectTag placeholder="听课人所在单位" v-model:value="queryParam.szdw" :dictCode="`tkrszdw_view,college,college`" @change="loadData"/>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="" style="padding: 10px;">
              <JDictSelectTag placeholder="课程性质" v-model:value="queryParam.kcxz" dictCode="kcxz" @change="loadData"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <div style="margin-top:0px;z-index: 0;">
          <tkfglTjt :chartData="barMultiData" height="300px" type="line"></tkfglTjt>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" name="kcTingke-tkztj" setup>
import { ref,reactive,onMounted } from 'vue';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import tkfglTjt from '/@/views/kc/tktj/tkfgl/tkfglTjt.vue';
import { dateFormat } from '/@/utils/common/compUtils';
import { defHttp } from '/@/utils/http/axios';
import { getSysConfig } from '/@/views/site/utils/index';

const barMultiData = reactive<any>([]);
const queryParam = ref<any>({});
const list = (queryParam) => defHttp.get({ url: '/kcTingke/kcTingke/getTkfglList', params:queryParam });

  //进入就加载
  onMounted(() => {
    const format = 'yyyy-MM-dd';
    const startTime = new Date(getSysConfig().bxqkssj);
    queryParam.value.startTime =  dateFormat(startTime, format)
    queryParam.value.endTime =  dateFormat(new Date(), format)
    loadData()
  });

  function loadData(){
    barMultiData.length = 0
    list(queryParam.value).then(res=>{
      var list = res
      for(var i=0;i<list.length;i++){
        barMultiData.push({name: list[i].dwjc, value: parseFloat(list[i].ljtkv), type: '累计听课率', seriesType: 'bar'})
        barMultiData.push({name: list[i].dwjc, value: parseFloat(list[i].avgtkv), type: '累计全校平均听课率', seriesType: 'line'})
        barMultiData.push({name: list[i].dwjc, value: parseFloat(list[i].jrtkv), type: '今日听课率', seriesType: 'line'})
        barMultiData.push({name: list[i].dwjc, value: parseFloat(list[i].jravgtkv), type: '今日全校平均听课率', seriesType: 'line'})
      }
    })
  }



</script>
<style lang="less" scoped>
</style>