123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684 |
- <template>
- <div class="myTable">
- <!-- 科目选择以及表格备注 -->
- <div class="table-subject-select">
- <!-- <Select v-model="subjectSelectVal" style="width:150px" v-if="showSelect" @on-change="onSelectChange">
- <Option v-for="(item,index) in subjectList" :value="index" :key="index">{{ item }}</Option>
- </Select> -->
- <div class="myTable-title">{{ tableName }}</div>
- <div>
- <span @click="exportData(3)" class="table-export-btn"><Icon type="ios-share-alt" /> {{$t('totalAnalysis.exportTable').slice(0,2)}}</span>
- <span class="table-tips" v-if="tips">{{tips}}</span>
- <span class="table-tips" v-if="!tips"></span>
- </div>
-
- </div>
- <!-- 表格组件 -->
- <Table :border="isShowBorder" ref="table" :data="tableData" :columns="tableColumns" @on-sort-change="onSortChange" @on-filter-change="onFilterChange"></Table>
- <!-- 表格分页组件 -->
- <div style="margin: 10px;overflow: hidden" v-if="!noPage">
- <div style="float: right;margin-top: 20px;">
- <Page show-total
- size="small"
- :current="currentPage"
- :total="originData.length"
- :page-size="pageSize"
- :page-size-opts="pageSizeOpts"
- @on-change="pageChange"
- @on-page-size-change="pageSizeChange"
- show-sizer />
- </div>
- </div>
- </div>
- </template>
- <script>
- import excel from '@/utils/excel.js'
- export default {
- props: {
- columns: {
- type: Array,
- default: () => []
- },
- isScroll: {
- type: Boolean,
- default: false
- },
- tableDatas: {
- type: Array,
- default: () => []
- },
- showSelect: {
- type: Boolean,
- default: false
- },
- noPage: {
- type: Boolean,
- default: false
- },
- tips: {
- type: String,
- default: null
- },
- tableTitle: {
- type: String,
- default: null
- },
- pageSize: {
- type: Number,
- default: 10
- },
- tableName: {
- type: String,
- default:'Analysis Table'
- },
- tableRef: {
- type: String,
- default:''
- }
- },
- data() {
- return {
- isShowBorder: true,
- isFirst: true,
- subjectSelectVal: 0,
- tableData: [],
- firstData: [],
- originData: [],
- tableColumns: [],
- subjectList: [],
- currentPage: 1,
- pageSizes: 10,
- pageSizeOpts: [5, 10, 20, 30, 40],
- poperData: []
- }
- },
- created() {
- this.tableColumns = this.columns
- this.originData = this.tableDatas
- this.columns.forEach(item => {
- item.render = typeof item.renderType === 'function' ? item.renderType : this[item.renderType]
- })
-
- },
- methods: {
-
- // 导出表格
- exportData (type) {
- if (type === 3) {
- const params = {
- title: this.columns.map(i => i.title),
- key: this.columns.map(i => i.key),
- data: this.originData,
- autoWidth: true,
- filename: this.tableName
- }
- excel.export_array_to_excel(params)
- } else {
- // 多个文件 打包下载
- const params = {
- title: this.columns.map(i => i.title),
- key: this.columns.map(i => i.key),
- data: this.originData,
- autoWidth: true,
- filename: this.tableName
- }
- this.$store.commit('updateExportParams', params)
- }
- },
-
- // 排序操作
- onSortChange(data) {
- console.log(data)
- let order = data.order // 当前排序方式 升序、降序、正常
- let key = data.key // 当前排序依据
- switch (order) {
- case 'asc':
- this.originData = this.tableDatas.sort((a, b) => { return Number(a[key]) - Number(b[key]) })
- break
- case 'desc':
- this.originData = this.tableDatas.sort((a, b) => { return Number(b[key]) - Number(a[key]) })
- break
- case 'normal':
- this.originData = this.firstData
- break
- default:
- break
- }
- this.pageChange(1)
- },
-
- // 筛选操作
- onFilterChange(val) {
- let filterValue = val._filterChecked[0]
- const ipoint = this.$store.state.totalAnalysis.analysisJson.ipoint
- const touchScore = this.$store.state.totalAnalysis.analysisJson.touchScore
- switch (filterValue) {
- case 1:
- this.originData = this.tableDatas.filter(item => item.score > ipoint)
- break
- case 2:
- this.originData = this.tableDatas.filter(item => item.score > ipoint && item.score < (ipoint + touchScore))
- break
- case 3:
- console.log('进步班级')
- break
- case 4:
- console.log('退步班级')
- break
- case 5:
- console.log('稳定班级')
- break
- default:
- this.originData = this.firstData
- break
- }
- this.pageChange(1)
- },
- // 分页操作
- pageChange(page) {
- let start = this.pageSizes * (page - 1)
- let end = this.pageSizes * page
- this.currentPage = page
- this.tableData = this.originData.slice(start, end)
- },
-
- // 页码操作
- pageSizeChange(val) {
- this.pageSizes = val
- this.pageChange(1)
- },
-
- // 下拉选择
- onSelectChange(val) {
- this.$emit('onSelectChange', val)
- },
-
- // 渲染班级标题以及相应点击事件
- renderClassName(h, params) {
- let that = this
- let row = params.row
- return h('span', {
- }, [
- h('span', {
- domProps: {
- className: 'table-rank-value'
- }
- }, params.row.classId),
- ])
- },
-
- renderEventIndex(h, params) {
- let that = this
- return h('span', {
- on: {
- click: function() {
- that.$parent.$parent.$parent.isShowQuestions = true
- that.$router.push({ path: '/total/questionList', query: { QIndex: params.row.id } })
- }
- },
- style: {
- cursor: 'pointer',
- color: '#00ffd2',
- fontWeight: 'bold'
- }
- }, params.row.id)
- },
- // 总分排名Render
- renderRank(h, params) {
- const row = params.row
- return h('span', {
- domProps: {
- className: 'badge-wrap'
- }
- }, [
- h('span', {
- domProps: {
- className: 'table-rank-badge'
- },
- style: {
- color: row.changesStatus === 1 ? '#0ccb0c' : '#ff5d5d'
- }
- }, (row.changesStatus === 1 && row.changesVal !== 0) ? '+' + row.changesVal : (row.changesStatus === -1 && row.changesVal !== 0) ? '-' + row.changesVal : ''),
- h('span', {
- domProps: {
- className: 'table-rank-value'
- }
- }, row.gradeRank)
- ]
- )
- },
- // 折线图趋势变化
- renderLineChange(h, params) {
- const row = params.row
- return h('Poptip', {
- props: {
- trigger: 'hover',
- placement: 'right',
- transfer: true
- },
- on: {
- // 鼠标触发气泡事件
- 'on-popper-show': () => {
- console.log(row.poperData)
- // this.poperData = row.poperData
- }
- }
- }, [
- h('Icon', {
- props: {
- type: row.classRank === 1 ? 'md-trending-up' : row.classRank === 2 ? 'md-trending-down' : 'md-git-commit',
- color: row.classRank === 1 ? '#13ff13' : row.classRank === 2 ? '#fd4e4e' : 'yellow',
- size: '22'
- },
- style: {
- cursor: 'pointer'
- }
- }),
- h('div', {
- slot: 'content'
- }, [h('BaseChangeLine', {
- props: {
- poperData: row.poperData,
- isLoad: true,
- lineColor: row.classRank === 1 ? 'green' : row.classRank === 2 ? '#fd4e4e' : '#ffcc33'
- }
- })
- ])
- ])
- },
- // 排名变化
- renderRankChange(h, params) {
- const row = params.row
- return h('span', [
- h('Icon', {
- props: {
- type: (row.changesStatus === 1 && row.changesVal !== 0) ? 'md-arrow-up' : (row.changesStatus === -1 && row.changesVal !== 0) ? 'md-arrow-down' : 'md-git-commit',
- color: (row.changesStatus === 1 && row.changesVal !== 0) ? '#13ff13' : (row.changesStatus === -1 && row.changesVal !== 0) ? '#fd4e4e' : 'yellow',
- size: '22'
- },
- style: {
- cursor: 'pointer'
- }
- }),
- h('span', {
- domProps: {
- className: 'table-rank-value'
- }
- }, row.changesStatus === 0 ? '' : row.changesVal)
- ])
- },
- // 是否进线
- renderEntry(h, params) {
- let that = this
- const row = params.row
- const ipoint = this.$store.state.totalAnalysis.analysisJson.ipoint
- const touchScore = this.$store.state.totalAnalysis.analysisJson.touchScore
- return h('span', [
- h('span', {
- domProps: {
- className: 'table-entry-status'
- },
- style: {
- cursor: 'pointer',
- background: row.score > (ipoint + touchScore) ? '#209a31' : row.score > ipoint ? '#00767d' : 'transparent'
- }
- }, row.score > (ipoint + touchScore) ? that.$t('totalAnalysis.myTable.inner') : row.score > ipoint ? that.$t('totalAnalysis.myTable.outer') : ''),
- h('span', {
- domProps: {
- className: 'table-rank-value'
- }
- }, row.score)
- ])
- },
- // 变化状态
- renderStauts(h, params) {
- const row = params.row
- return h('span', [
- h('Icon', {
- props: {
- type: row.classRank === 1 ? 'md-arrow-up' : row.classRank === 2 ? 'md-arrow-down' : 'md-git-commit',
- color: row.classRank === 1 ? '#13ff13' : row.classRank === 2 ? '#fd4e4e' : 'yellow',
- size: '22'
- },
- style: {
- cursor: 'pointer'
- }
- })
- ])
- },
- // 渲染应努力题号
- renderHard(h, params) {
- let that = this
- const list = params.row.hardList ? params.row.hardList.split(',') : params.row.itemNO.split(',')
- return h('span', { style: {
- textAlign:'left'
- }},list.map(function(item, index) {
- return h('span', {
- style: {
- fontSize: '16px',
- fontWeight: '600',
- color: '#03efdb',
- cursor: 'pointer',
- display: 'inline-block',
- float: 'left'
- },
- on: {
- 'click': function() {
- that.$parent.$parent.$parent.isShowQuestions = true
- that.$router.push({ path: '/total/questionList', query: { QIndex: isNaN(item) ? 1 : item } })
- }
- }
- }, item + (index === list.length - 1 ? '' : ' , '))
- }))
- },
- // 渲染应小心题号
- renderCareful(h, params) {
- let that = this
- const row = params.row
- const list = params.row.carefulList ? params.row.carefulList.split(',') : []
- return h('span', list.map(function(item, index) {
- return h('span', {
- style: {
- fontSize: '16px',
- fontWeight: '600',
- color: '#03efdb',
- cursor: 'pointer',
- display: 'inline-block',
- float: 'left'
- // textDecoration: "underline"
- },
- on: {
- 'click': function() {
- that.$parent.$parent.$parent.isShowQuestions = true
- that.$router.push({ path: '/total/questionList', query: { QIndex: isNaN(item) ? 1 : item } })
- }
- }
- }, item + (index === list.length - 1 ? '' : ' , '))
- }))
- },
- // 渲染百分比数据
- renderPercent(h, params) {
- return h('span', params.row.scoreRate + '%')
- }
- },
- mounted() {
- if(this.noPage){
- this.pageSizes = 999999
- this.pageChange(1)
- this.currentPage = 1
- }
- },
- computed: {
- exportTableRefs() {
- return this.$store.state.totalAnalysis.exportTableRefs
- }
- },
- watch: {
- tableDatas: function(data) {
- this.originData = JSON.parse(JSON.stringify(data))
- if (this.isFirst) this.firstData = JSON.parse(JSON.stringify(data))
- // 获取当前测评班级数据
- this.subjectList = this.$store.state.totalAnalysis.subjectList
- // this.subjectList = ['全部'].concat(this.$store.state.totalAnalysis.subjectList)
- this.pageChange(1)
- this.isFirst = false
- },
- exportTableRefs: {
- handler(n) {
- // 如果导出的表格包含当前表格 则直接运行下载
- if (n.length && n.indexOf(this.tableRef) > -1) {
- // 如果选择下载的表格数量大于1 则进行打包下载
- if(n.length > 1){
- this.exportData(4)
- }else{
- this.exportData(3)
- }
- }
- },
- deep:true
- }
- }
- }
- </script>
- <style>
- .myTable {
- width: 100%;
- /*height: 400px;*/
- /*padding: 20px 0;*/
- padding-right: 20px;
- margin-top: 20px;
- margin: 0 auto;
- display: block;
- user-select: none !important;
- }
- .myTable .ivu-table td, .myTable .ivu-table th {
- /*border: none;*/
- color: #e4eadb;
- border-color: #595959;
- }
- .myTable .ivu-table-wrapper {
- /*border:none;*/
- border-color: #595959;
- border-right: 1px solid #595959;
- }
- .myTable .ivu-table::before, .myTable .ivu-table::after {
- height: 1px;
- background: #595959;
- }
- .myTable .ivu-table {
- box-sizing: border-box;
- /*border:1px solid #595959;*/
- }
- .myTable .ivu-table, .myTable .ivu-table td {
- background: #343434;
- text-align: center;
- position: relative;
- }
- .myTable .ivu-table th {
- background: rgba(107, 107, 107, 0.19);
- text-align: center;
- position: relative;
- }
- .myTable .ivu-table-sort {
- margin-left: -6px;
- }
- .myTable .ivu-table-sort i {
- color: #fff;
- margin-left: 1px;
- }
-
- .myTable .ivu-table-sort i.on{
- color: #4cf8da;
- }
- .myTable .ivu-table-header .ivu-table-cell {
- font-size: 14px;
- font-weight: bold;
- }
- .myTable .ivu-table-header {
- background: rgba(228, 234, 219, 0.08);
- }
- .myTable .table-rank-value {
- margin-left: 10px;
- vertical-align: middle;
- font-size: 14px;
- }
- .myTable .table-rank-badge {
- position: absolute;
- right: 10px;
- top: 12px;
- font-size: 14px;
- padding: 2px 14px;
- color: #e4eadb;
- }
- .myTable .badge-wrap .ivu-icon, .myTable .badge-wrap img {
- position: absolute;
- left: 7px;
- top: 12px;
- }
- .myTable .ivu-page-item {
- background: rgba(40,40,40,.5);
- }
- .myTable .ivu-page-item:hover {
- border-color: #e4eadb;
- }
- .myTable .ivu-page-item-active {
- background: #bfbfb9;
- }
- .myTable .ivu-page-item a {
- color: #f1f1f1;
- }
- .myTable .ivu-page-next, .myTable .ivu-page-prev {
- background: rgba(0,0,0,0);
- }
- .myTable .ivu-page-next a, .myTable .ivu-page-prev a {
- color: #e4eadb;
- }
- .myTable .ivu-page-next:hover, .myTable .ivu-page-prev:hover {
- border-color: #e4eadb;
- }
- .myTable .ivu-page-item-active, .myTable .ivu-page-item:hover a {
- border-color: #e4eadb;
- }
- .myTable .ivu-page-item-active a {
- color: #595959;
- }
- .myTable .ivu-table-fixed {
- /*padding-top:3px;*/
- background: #282828;
- }
- .myTable .ivu-table-fixed-right::before, .ivu-table-fixed::before {
- height: 0;
- }
- .table-subject-select {
- position: relative;
- display: flex;
- justify-content: space-between;
- padding-right: 5px;
- height: 40px;
- margin-bottom: 10px;
- }
- .table-subject-select .table-tips {
- font-size: 14px;
- color: #4cf8da;
- font-weight: bold;
- position: absolute;
- right: 65px;
- top: 10px;
- }
- .table-subject-select .ivu-select {
- margin: 5px 20px 15px 0;
- height: 30px;
- }
- .table-subject-select .ivu-select-single .ivu-select-selection {
- height: 30px;
- background: transparent;
- border: 1px solid #595959;
- box-shadow: none;
- color: #cecece;
- }
- .table-subject-select .ivu-select-single .ivu-select-arrow {
- /*top:76%;*/
- }
- .table-subject-select .ivu-select-single .ivu-select-placeholder {
- height: 30px;
- line-height: 30px;
- font-size: 16px;
- }
- .table-subject-select .table-export-btn {
- font-size: 14px;
- font-weight: bold;
- width:50px;
- position: absolute;
- right: 5px;
- top: 10px;
- cursor:pointer;
- }
- .myTable .table-entry-status {
- position: absolute;
- right: 20px;
- top: 15px;
- background: #209a31;
- width: 15px;
- height: 15px;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 10px;
- }
- .ivu-table-overflowX::-webkit-scrollbar {
- height: 12px !important;
- }
- .ivu-table-overflowX::-webkit-scrollbar-track {
- border-radius: 0px;
- display: none;
- }
- .ivu-table-overflowX::-webkit-scrollbar-thumb {
- border-radius: 0px;
- background: #949494;
- }
- .myTable .ivu-select-small.ivu-select-single .ivu-select-selection .ivu-select-selected-value {
- height: 27px;
- line-height: 27px;
- font-size: 12px;
- }
-
- .myTable .myTable-title{
- font-size: 16px;
- }
- </style>
|