From 93ba4f1e8043909197be6ff7620b204ed01c4b80 Mon Sep 17 00:00:00 2001
From: cgd_mac <349008059@qq.com>
Date: Mon, 17 Jan 2022 23:26:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20uI=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                    |   2 +
 src/api/myexamCount/index.js    |   2 +-
 src/api/myresource/index.js     |  13 +++
 src/views/myexamCount/index.vue | 170 ++++++++++++++++++++++++++++----
 src/views/mynotice/index.vue    |  92 ++++++++++++++++-
 src/views/myresource/index.vue  |  53 ++++++----
 6 files changed, 290 insertions(+), 42 deletions(-)
 create mode 100644 src/api/myresource/index.js

diff --git a/package.json b/package.json
index 27f3eac..5720d52 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "core-js": "^3.1.2",
     "dplayer": "^1.26.0",
     "draftjs-to-html": "^0.9.1",
+    "echarts": "^5.2.2",
     "enquire.js": "^2.1.6",
     "file-saver": "^2.0.5",
     "html-to-draftjs": "^1.5.0",
@@ -54,6 +55,7 @@
     "@vue/cli-plugin-unit-jest": "^4.0.4",
     "@vue/cli-plugin-vuex": "^4.0.4",
     "@vue/cli-service": "^4.0.4",
+    "@vue/composition-api": "^1.4.4",
     "@vue/eslint-config-standard": "^4.0.0",
     "@vue/test-utils": "^1.0.0-beta.29",
     "babel-eslint": "^10.0.1",
diff --git a/src/api/myexamCount/index.js b/src/api/myexamCount/index.js
index ed7502d..f487dfd 100644
--- a/src/api/myexamCount/index.js
+++ b/src/api/myexamCount/index.js
@@ -1,7 +1,7 @@
 import request from '@/utils/request'
 
 const countApi = {
-    myexamCount: 'studyStatistics/getMyCourseList' // 学习统计
+    myexamCount: 'study/data/home' // 学习统计
 }
 
 export function getMyexamCount (params) {
diff --git a/src/api/myresource/index.js b/src/api/myresource/index.js
new file mode 100644
index 0000000..d9fd2c5
--- /dev/null
+++ b/src/api/myresource/index.js
@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+const myresourceApi = {
+    list: 'study/data/home' // 学习统计
+}
+
+export function gerMyresource (params) {
+    return request({
+        url: myresourceApi.list,
+        method: 'get',
+        params: params
+    })
+}
diff --git a/src/views/myexamCount/index.vue b/src/views/myexamCount/index.vue
index 991691c..a7ed192 100644
--- a/src/views/myexamCount/index.vue
+++ b/src/views/myexamCount/index.vue
@@ -1,49 +1,87 @@
 <template>
   <a-row :gutter="24">
     <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-      <chart-card :loading="loading" title="" total="300">
+      <chart-card :loading="loading" title="" :total="data.totalClassHour">
         <template slot="footer">当前累计学时</template>
       </chart-card>
     </a-col>
     <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-      <chart-card :loading="loading" title="" total="300">
+      <chart-card :loading="loading" title="" :total="data.totalCourse">
         <template slot="footer">累计学习课程</template>
       </chart-card>
     </a-col>
     <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-      <chart-card :loading="loading" title="" total="300">
+      <chart-card :loading="loading" title="" :total="data.completeCourse">
         <template slot="footer">结业课程</template>
       </chart-card>
     </a-col>
     <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-      <chart-card :loading="loading" title="" total="300">
-        <template slot="footer">结业课程</template>
+      <chart-card :loading="loading" title="" :total="data.examSize">
+        <template slot="footer">考试次数</template>
       </chart-card>
     </a-col>
     <a-col
-      :xl="12"
-      :lg="24"
-      :md="24"
-      :sm="24"
-      :xs="24"
+      :span="24"
       :style="{ marginBottom: '24px' }">
-      <a-card :bordered="false" title="年度学时完成情况" :style="{ height: '100%' }">
+      <a-card :bordered="false" :style="{ height: '100%' }">
+        <div class="flex-center" style="justify-content: flex-start;" slot="title">
+          <h4 style="margin: 0;">年度学时完成情况</h4>
+          <div style="flex: 0 0 220px;margin: 0 10px;"><a-progress :percent="data.yearClassHourSituation * 100" :show-info="false" /></div>
+          <h4 style="margin: 0;">{{ data.yearTotalClassHour }}学时/{{ data.yearClassHourRequi }}学时</h4>
+        </div>
       </a-card>
     </a-col>
     <a-col
-      :xl="12"
-      :lg="24"
-      :md="24"
-      :sm="24"
-      :xs="24"
+      :span="24"
+      :style="{ marginBottom: '24px' }">
+      <a-card :bordered="false" title="学时统计图" :style="{ height: '100%' }">
+        <v-chart class="chart" :option="chartOptions" autoresize />
+      </a-card>
+    </a-col>
+    <a-col
+      :span="24"
       :style="{ marginBottom: '24px' }">
       <a-card :bordered="false" title="所选课程的成绩情况" :style="{ height: '100%' }">
+        <a-table
+          ref="table"
+          :pageSize="5"
+          :columns="columns"
+          :showPagination="false"
+          :data-source="data.courseList"
+          :rowKey="record => record.courseId">
+          <template slot="trainSdate" slot-scope="text, record">
+            {{ record.trainSdate }}至{{ record.trainEdate }}
+          </template>
+          <span slot="courseType" slot-scope="text, record">
+            <a-tag v-if="record.courseType === 1" color="blue">选修</a-tag>
+            <a-tag v-if="record.courseType === 0" color="red">必修</a-tag>
+            <template v-else>-</template>
+          </span>
+          <span slot="status" slot-scope="text, record">
+            <a-tag v-if="record.status === 0" color="blue">在修</a-tag>
+            <a-tag v-if="record.status === 1" color="green">修完课程通过</a-tag>
+            <template v-else>-</template>
+          </span>
+          <span slot="action" slot-scope="text, record">
+            <a @click="handlerDetail(record)">查看详情</a>
+          </span>
+        </a-table>
       </a-card>
     </a-col>
   </a-row>
 </template>
 
 <script>
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart } from 'echarts/charts'
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent
+} from 'echarts/components'
+import VChart, { THEME_KEY } from 'vue-echarts'
 import {
   ChartCard,
   MiniArea,
@@ -56,6 +94,16 @@ import {
   MiniSmoothArea
 } from '@/components'
 import { getMyexamCount } from '@/api/myexamCount/index.js'
+
+use([
+  CanvasRenderer,
+  BarChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent
+])
+
 export default {
   components: {
     ChartCard,
@@ -66,11 +114,51 @@ export default {
     Bar,
     Trend,
     NumberInfo,
-    MiniSmoothArea
+    MiniSmoothArea,
+    VChart
+  },
+  provide: {
+    [THEME_KEY]: 'light'
   },
   data () {
     return {
-      loading: false
+      data: {},
+      loading: true,
+      chartOptions: {},
+      columns: [
+        {
+          title: '课程名称',
+          dataIndex: 'courseName'
+        },
+        {
+          title: '课程类别',
+          dataIndex: 'courseType',
+          scopedSlots: { customRender: 'courseType' }
+        },
+        {
+          title: '开始时间',
+          dataIndex: 'startTime'
+        },
+        {
+          title: '课程状态',
+          dataIndex: 'status',
+          scopedSlots: { customRender: 'status' }
+        },
+        {
+          title: '学时',
+          dataIndex: 'studyTime'
+        },
+        {
+          title: '考试成绩',
+          dataIndex: 'testResult'
+        },
+        {
+          title: '操作',
+          width: '150px',
+          dataIndex: 'action',
+          scopedSlots: { customRender: 'action' }
+        }
+      ]
     }
   },
   mounted () {
@@ -79,15 +167,55 @@ export default {
   methods: {
     initData () {
       console.log('this.$sotre', this.$store)
-      const { id: userId } = this.$store.state.person
-      getMyexamCount({ personId: userId }).then(res => {
+      getMyexamCount().then(res => {
         console.log('data', res)
+        this.data = res.data
+        this.loading = false
+        this.initChart(res.data)
       })
+    },
+    initChart (data) {
+      this.chartOptions = {
+        tooltip: {
+          trigger: 'item'
+        },
+        colors: ['#1890ff'],
+        xAxis: {
+          type: 'category',
+          data: ['必修课程', '选修课程', '必须公告']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        grid: {
+          left: 60,
+          top: 30,
+          right: 30,
+          bottom: 30
+        },
+        series: [
+          {
+            name: '课时',
+            type: 'bar',
+            barMaxWidth: 30,
+            data: [data.yearClassHour1, data.yearClassHour2, data.yearClassHour3],
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          }
+        ]
+      }
+    },
+    handlerDetail (row) {
+      this.$router.push({ path: '/myresult', query: { id: row.id } })
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
-
+.chart{
+  height: 300px;
+}
 </style>
diff --git a/src/views/mynotice/index.vue b/src/views/mynotice/index.vue
index 1cfb2f5..6bdeda4 100644
--- a/src/views/mynotice/index.vue
+++ b/src/views/mynotice/index.vue
@@ -1,15 +1,101 @@
 <template>
   <a-card :bordered="false">
-    我的公告
+    <div class="table-page-search-wrapper">
+      <SearchCom
+        :form="queryParam"
+        :list="queryOptions"
+        @search="handleRefresh"
+        @reset="
+          () => {
+            queryParam = {}
+            handleRefresh()
+          }
+        "></SearchCom>
+    </div>
+    <template v-if="dataList && dataList.length>0">
+      <a-card v-for="(item, index) in dataList" :key="index" style="margin-bottom: 15px;">
+        <div class="flex-center" >
+          <div style="flex: 1;">
+            <h3><a href="javascript:void(0);">建筑施工安全培训第一期课程学习（6.8-7.8）</a></h3>
+            <div><span style="margin-right: 20px;">下载次数{{ item.rightQuestions }}次</span><span>预览次数：{{ item.submitTime }}次</span></div>
+          </div>
+        </div>
+      </a-card>
+      <div class="flex-center">
+        <a-pagination @change="changePagination" :default-current="params.pageNum" :total="total" />
+      </div>
+    </template>
+    <template v-else>
+      <a-empty style="margin: 30px 0;" />
+    </template>
+
   </a-card>
 </template>
 
 <script>
-export default {
+import { Pagination, Empty } from 'ant-design-vue'
+import { SearchCom } from '@/components'
+import { dictToTree } from '@/utils/util'
+import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
+import { gerMyresource } from '@/api/myresource/index'
 
+export default {
+  components: { SearchCom, 'a-pagination': Pagination, 'a-empty': Empty },
+  data () {
+    return {
+      dataList: [],
+      total: 0,
+      params: {
+        pageSize: 10,
+        pageNum: 1
+      },
+      queryParam: {
+        name: '', // 课程分类
+        trainWay: ''
+      },
+      queryOptions: [
+        { type: 'select-dic-tree', placeholder: '课程类别', key: 'trainWay', options: [] }
+      ]
+    }
+  },
+  created () {
+    this.dictionaryDropDown()
+  },
+  mounted () {
+    this.getList()
+  },
+  methods: {
+    getList () {
+        this.dataList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+      // gerMyresource(this.params).then(res => {
+      //   // console.log('>>>>>>', res)
+      // })
+    },
+    changePagination (page, size) {
+      this.params.pageSize = size
+      this.params.pageNum = page
+      this.$nextTick(() => {
+        this.getList()
+      })
+    },
+    handlerDown () {
+
+    },
+    handlerPreview () {},
+    handleRefresh () {
+      this.getList()
+    },
+    // 获取数据词典
+    dictionaryDropDown () {
+      dictionaryDropDown({ dictionaryCode: '0006' }).then((res) => {
+        this.queryOptions[1].options = dictToTree(res.data, [], 0)
+				this.loading = false
+      })
+    }
+  }
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 
 </style>
diff --git a/src/views/myresource/index.vue b/src/views/myresource/index.vue
index 078d7ef..c1e283a 100644
--- a/src/views/myresource/index.vue
+++ b/src/views/myresource/index.vue
@@ -12,37 +12,46 @@
           }
         "></SearchCom>
     </div>
-    <a-card v-for="(item, index) in dataList" :key="index" style="margin-bottom: 15px;">
-      <div class="flex-center" >
-        <div style="flex: 1;">
-          <h3>{{ item.courseName }}</h3>
-          <div><span style="margin-right: 20px;">下载次数{{ item.rightQuestions }}次</span><span>预览次数：{{ item.submitTime }}次</span></div>
-        </div>
-        <div style="flex: 0 0 200px; text-align: right;">
-          <div @click="handlerDown()" :span="24" style="margin-bottom: 10px;"><a-button type="primary" size="small" >下载</a-button></div>
-          <div @click="handlerPreview()" :span="24"><a-button type="danger" size="small">预览</a-button></div>
+    <template v-if="dataList && dataList.length>0">
+      <a-card v-for="(item, index) in dataList" :key="index" style="margin-bottom: 15px;">
+        <div class="flex-center" >
+          <div style="flex: 1;">
+            <h3>{{ item.courseName }}</h3>
+            <div><span style="margin-right: 20px;">下载次数{{ item.rightQuestions }}次</span><span>预览次数：{{ item.submitTime }}次</span></div>
+          </div>
+          <div style="flex: 0 0 200px; text-align: right;">
+            <div @click="handlerDown(item)" :span="24" style="margin-bottom: 10px;"><a-button type="primary" size="small" >下载</a-button></div>
+            <div @click="handlerPreview(item)" :span="24"><a-button type="danger" size="small">预览</a-button></div>
+          </div>
         </div>
+      </a-card>
+      <div class="flex-center">
+        <a-pagination @change="changePagination" :default-current="params.pageNum" :total="total" />
       </div>
-    </a-card>
-    <div class="flex-center">
-      <a-pagination :default-current="params.pageNum" :total="params.total" />
-    </div>
+    </template>
+    <template v-else>
+      <a-empty style="margin: 30px 0;" />
+    </template>
+
   </a-card>
 </template>
 
 <script>
+import { Pagination, Empty } from 'ant-design-vue'
 import { SearchCom } from '@/components'
 import { dictToTree } from '@/utils/util'
 import { dictionaryDropDown } from '@/api/sys/dictionaryItem'
+import { gerMyresource } from '@/api/myresource/index'
 
 export default {
-  components: { SearchCom },
+  components: { SearchCom, 'a-pagination': Pagination, 'a-empty': Empty },
   data () {
     return {
       dataList: [],
+      total: 0,
       params: {
-        pageNum: 1,
-        total: 100
+        pageSize: 10,
+        pageNum: 1
       },
       queryParam: {
         name: '', // 课程分类
@@ -61,7 +70,17 @@ export default {
   },
   methods: {
     getList () {
-
+      gerMyresource(this.params).then(res => {
+        console.log('>>>>>>', res)
+        this.dataList = res.data.courseList
+      })
+    },
+    changePagination (page, size) {
+      this.params.pageSize = size
+      this.params.pageNum = page
+      this.$nextTick(() => {
+        this.getList()
+      })
     },
     handlerDown () {