桐乡网校

src/App.vue

@@ -20,7 +20,7 @@ function routerReplace(path: string) {
     <div
       class="w-full flex-grow px-8 pt-2 pb-2 overflow-y-auto scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-hex-fff6 scrollbar-track-transparent"
     >
-      <router-view class="h-full" />
+    <Suspense><router-view class="h-full" /></Suspense>
     </div>
   </div>
 </template>

src/pages/txwx.detail.vue

@@ -1,29 +1,242 @@
 <script setup lang="ts">
+import * as echarts from 'echarts'
 import _request from '../utils/request';
 import bar from './txwx/bar2.vue'
 import under from '~/assets/img/home/under.webp'
 
-const formInline = $ref({
-  a: '',
-  b: '',
-  c: '',
-  d: '',
+
+
+const formInline = ref({
+  xueke: '',
+  nianji: '',
+  jigou: '',
+  ziyuan:'',
 })
-const options = [
+
+const xuekeOptions = ref("");
+const nianjiOptions = ref("");
+const jigouOptions = ref("");
+const ziyuanOptions = [
+  {
+    value: '1',
+    label: '推荐课程',
+  },
+  {
+    value: '2',
+    label: '名师在线',
+  },
+  {
+    value: '3',
+    label: '直播课程',
+  },
   {
-    value: 'Option1',
-    label: 'Option1',
+    value: '4',
+    label: '家庭教育',
   },
   {
-    value: 'Option2',
-    label: 'Option2',
+    value: '5',
+    label: '特色课程',
   },
   {
-    value: 'Option3',
-    label: 'Option3',
+    value: '6',
+    label: '作业辅导',
   },
 ]
 
+
+const allInfo = ref("");
+const echartsData = ref("");
+
+const timeRefusr = ref('');
+
+onMounted(() => {
+  initXueKeOption();
+  initNianJiOption();
+  initJiGouOption();
+  initData();
+})
+
+
+//初始化数据
+const initData = () => {
+  timeRefusr.value = new Date().getTime();
+  let transData = {
+    xueke_id: formInline.value.xueke,
+    grade_id: formInline.value.nianji,
+    dept_id: formInline.value.jigou,
+    resourse_id:formInline.value.ziyuan,
+  };
+   _request({
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    baseURL: window.GLOBAL_CONFIG.txwxapi,
+    url: "/openapi/chart/tx_detail_data.php",
+    data: transData,
+  })
+    .then(res => {
+      if (res.code == "1") {
+        allInfo.value = res.data.allInfo;
+        echartsData.value = res.data.echartsData;
+        initEchartsData();
+      }
+    })
+    .catch(error => { console.log(error) });
+}
+
+
+//初始化图表
+const chartRef = ref("");
+const initEchartsData = () => {
+  echarts.init(chartRef.value).setOption({
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      top: '1%',
+      right: '5%',
+      textStyle: {
+        color: '#ccc',
+      },
+    },
+    grid: {
+      top: '8%',
+      bottom: '20%',
+    },
+    color: ['#7D7CFC', '#0293FD'],
+    dataset: {
+      source: echartsData.value.dataset_source,
+    },
+    xAxis: {
+      type: 'category',
+      axisLine: {
+        show: true,
+
+        lineStyle: {
+          type: 'dashed',
+          color: '#ccc',
+        },
+      },
+    },
+    yAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed',
+          color: '#ccc',
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed',
+          color: '#ccc',
+        },
+      },
+    },
+    // Declare several bar series, each will be mapped
+    // to a column of dataset.source by default.
+    series: [{ type: 'bar', barWidth: 50 }],
+  })
+}
+
+
+
+
+//学科列表
+const initXueKeOption = () => {
+  _request({
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    baseURL: window.GLOBAL_CONFIG.txwxapi,
+    url: "/txwx/jcxxgl_zyflgl_xk/index",
+    data: {},
+  })
+    .then(res => {
+      if (res.code == "1") {
+        let responseData = res.data.page_data;
+        let tempArr = [];
+        responseData.forEach(item => {
+          tempArr.push({
+            value: item.tjzx_id,
+            label: item.tjzx_xkmc,
+          })
+        });
+        xuekeOptions.value=tempArr
+      }
+    })
+    .catch(error => { console.log(error) });
+}
+
+//年级列表
+const initNianJiOption = () => {
+  _request({
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    baseURL: window.GLOBAL_CONFIG.txwxapi,
+    url: "/txwx/jcxxgl_zyflgl_nj/index",
+    data: {},
+  })
+    .then(res => {
+      if (res.code == "1") {
+        let responseData = res.data.page_data;
+        let tempArr = [];
+        responseData.forEach(item => {
+          tempArr.push({
+            value: item.tjzn_id,
+            label: item.tjzn_njmc,
+          })
+        });
+        nianjiOptions.value=tempArr
+      }
+    })
+    .catch(error => { console.log(error) });
+}
+
+//机构列表（学校）
+const initJiGouOption = () => {
+  _request({
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    baseURL: window.GLOBAL_CONFIG.txwxapi,
+    url: "/school/main/index",
+    data: {},
+  })
+    .then(res => {
+      if (res.code == "1") {
+        let responseData = res.data.page_data;
+        let tempArr = [];
+        responseData.forEach(item => {
+          tempArr.push({
+            value: item.sm_id,
+            label: item.sm_name,
+          })
+        });
+        jigouOptions.value = tempArr;
+      }
+    })
+    .catch(error => { console.log(error) });
+}
+
+//选择切换
+const handleChange = () => {
+  initData();
+}
+//清除选项
+const clearBtn = () => {
+  formInline.value = {
+    xueke: '',
+    nianji: '',
+    jigou: '',
+    ziyuan: '',
+  };
+  initData();
+}
+
+
 const router = useRouter()
 function back() {
   router.replace({ name: 'home' })
@@ -43,36 +256,41 @@ function back() {
         返回
       </el-button>
     </div>
-
-    <el-form :inline="true" :model="formInline" class="vars">
-      <el-form-item label="学科筛选：">
-        <el-select v-model="formInline.a" placeholder="全部">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="年级筛选：">
-        <el-select v-model="formInline.b" placeholder="全部">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="机构筛选：">
-        <el-select v-model="formInline.c" placeholder="全部">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="资源筛选：">
-        <el-select v-model="formInline.d" placeholder="全部">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-        </el-select>
-      </el-form-item>
-    </el-form>
+        <el-form :inline="true" :model="formInline" class="vars">
+        <el-form-item label="学科筛选：">
+          <el-select v-model="formInline.xueke" placeholder="全部" @change="handleChange">
+            <el-option v-for="item in xuekeOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="年级筛选：">
+          <el-select v-model="formInline.nianji" placeholder="全部" @change="handleChange">
+            <el-option v-for="item in nianjiOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="机构筛选：">
+          <el-select v-model="formInline.jigou" placeholder="全部" @change="handleChange">
+            <el-option v-for="item in jigouOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="资源筛选：">
+          <el-select v-model="formInline.ziyuan" placeholder="全部" @change="handleChange">
+            <el-option v-for="item in ziyuanOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button plain @click="clearBtn">清空选项</el-button>
+        </el-form-item>
+      </el-form>
+      
+    
 
     <div>
-      <span class="text-18px">总资源数：</span>
-      <span class="text-30px">25.6w</span>
+      <span class="text-18px">{{ allInfo.textTitle }}</span>
+      <span class="text-30px">{{allInfo.textNumber}}w</span>
     </div>
-    <div class="w-full h-760px">
-      <bar />
+    <div class="w-full h-full">
+      <!-- <bar v-if="echartsData" :echarts-data="echartsData" :key="timeRefusr"  /> -->
+      <div ref="chartRef" class="w-full h-full " />
     </div>
   </div>
 </template>
@@ -94,4 +312,5 @@ body {
   --el-fill-color-light: #02133a97;
 
 }
+
 </style>

src/pages/txwx.index.vue

@@ -63,7 +63,6 @@ const initData =  () => {
   })
     .then(res => {
       if (res.code == '1') {
-        console.log(res, "67567");
         b1data.value = res.data.b1data;
         b3data.value = res.data.b3data;
         b4data.value = res.data.b4data;

src/pages/txwx/bar2.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import * as echarts from 'echarts'
 
+const props = defineProps<{
+  echartsData: Array
+}>()
+
 const chartRef = ref()
 onMounted(() => {
   echarts.init(chartRef.value).setOption({
@@ -20,19 +24,7 @@ onMounted(() => {
     },
     color: ['#7D7CFC', '#0293FD'],
     dataset: {
-      source: [
-        ['date', '数量'],
-        ['语文', 1080],
-        ['数学', 2060],
-        ['英语', 2800],
-        ['物理', 2600],
-        ['化学', 3100],
-        ['生物', 3000],
-        ['政治', 3000],
-        ['历史', 3000],
-        ['地理', 3000],
-        ['其他', 3000],
-      ],
+      source: props.echartsData.dataset_source,
     },
     xAxis: {
       type: 'category',
@@ -67,6 +59,7 @@ onMounted(() => {
 
   })
 })
+
 </script>
 
 <template>