From 77536cfa95b1e3c5e60f94dce3a53aa2e93f121a Mon Sep 17 00:00:00 2001
From: zhangxiaoxu123 <819527061@qq.com>
Date: 星期三, 14 九月 2022 17:35:54 +0800
Subject: [PATCH] echarts添加显示隐藏按钮
---
src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoChikaRenshu.vue | 215 ++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 162 insertions(+), 53 deletions(-)
diff --git a/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoChikaRenshu.vue b/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoChikaRenshu.vue
index cf20b24..a653ca2 100644
--- a/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoChikaRenshu.vue
+++ b/src/pages/show/shehuiBaozhang/shehuiBaozhangChildren/shebaoChikaRenshu.vue
@@ -1,28 +1,99 @@
<template>
<div class="shebaoChikaRenshu-wrap">
<h1>鍚勫幙锛堝競銆佸尯锛�2021骞村氨涓氭儏鍐电粺璁¤〃</h1>
- <el-tabs v-model="activeName">
- <el-tab-pane label="鎬昏" name="first">
- <baoxianForm></baoxianForm>
- </el-tab-pane>
- <el-tab-pane label="浼佷笟鑱屽伐鍏昏�佷繚闄�" name="second">
- <baoxianForm></baoxianForm>
- </el-tab-pane>
- <el-tab-pane label="鍩庝埂灞呮皯鍏昏�佷繚闄�" name="third">
- <baoxianForm></baoxianForm>
- </el-tab-pane>
- <el-tab-pane label="宸ヤ激淇濋櫓" name="fourth">
- <baoxianForm></baoxianForm>
- </el-tab-pane>
- <el-tab-pane label="澶变笟淇濋櫓" name="five ">
- <baoxianForm></baoxianForm>
- </el-tab-pane>
- </el-tabs>
+ <el-table
+ :cell-style="handleCellStyle"
+ :max-height="tableHeight"
+ :data="tableData"
+ stripe
+ border
+ style="width: 100%">
+ <template v-for="(item,index) in headerArry">
+ <el-table-column
+ :key="index"
+ align="center"
+ :prop="item.val"
+ :label="item.time">
+ <template slot-scope="scope">
+ <span>{{scope.row[index].val}}</span>
+ </template>
+ </el-table-column>
+ </template>
+
+ <!--<el-table-column
+ prop="yearFinish"
+ align="center"
+ label="鍘诲勾瀹屾垚"
+ width="180">
+ </el-table-column>
+ <el-table-column
+ prop="january"
+ align="center"
+ label="1鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="february"
+ align="center"
+ label="2鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="march"
+ align="center"
+ label="3鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="april"
+ align="center"
+ label="4鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="may"
+ align="center"
+ label="5鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="june"
+ align="center"
+ label="6鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="july"
+ align="center"
+ label="7鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="august"
+ align="center"
+ label="8鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="september"
+ align="center"
+ label="9鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="october"
+ align="center"
+ label="10鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="november"
+ align="center"
+ label="11鏈�">
+ </el-table-column>
+ <el-table-column
+ prop="december"
+ align="center"
+ label="12鏈�">
+ </el-table-column>-->
+ </el-table>
</div>
</template>
<script>
- import baoxianForm from "../../../components/juminYanglaoBaoxian/baoxianForm";
+ import {getCardNumsTable} from '@/api/shehuiBaozhang'
+ import baoxianForm from "../../../components/juminYanglaoBaoxian/baoxianForm";
+ import nowSize from "../../../../libs/nowSize";
export default {
name: "shebaoChikaRenshu",
components: {
@@ -30,8 +101,50 @@
},
data() {
return {
- activeName: 'first'
+ tableData: [],
+ headerArry: [],
+ tableHeight: window.innerHeight - nowSize(250)
}
+ },
+ mounted() {
+ this.getCardNumsTable()
+ },
+ methods: {
+ getCardNumsTable(){
+ getCardNumsTable().then(res => {
+ if(res.code == 1000) {
+ let result = res.list
+ let data = []
+ result.forEach((item,index) => {
+ let row = item.dataList
+ row.unshift({
+ time: '鎸囨爣',
+ val: item.name
+ })
+ data.push(row)
+ if(index == 0) {
+ this.headerArry = row
+ }
+
+ })
+ this.tableData = data
+ }
+ })
+ },
+ getHeight() {
+ this.tableHeight = window.innerHeight - nowSize(250)
+ },
+ handleCellStyle({rowIndex, columnIndex}) {
+ if(columnIndex == 0) {
+ return { background:'#51D2FF' }
+ }
+ }
+ },
+ created() {
+ window.addEventListener('resize', this.getHeight)
+ },
+ destroy() {
+ window.addEventListener('resize', this.getHeight)
}
}
</script>
@@ -39,45 +152,41 @@
<style lang="scss">
@import "../../../../assets/css/base";
.shebaoChikaRenshu-wrap{
- .el-tabs__nav-wrap::after{
- background-color: transparent;
- height: 0;
+ .el-table tr{
+ background-color: #CEF2FF;
}
- .el-tabs__nav-scroll{
- display: flex;
- justify-content: center;
+ .el-table th.el-table__cell{
+ background-color: #51D2FF;
}
- .el-tabs__item{
- width: 0.9375rem /* 240/256 */;
- height: 0.25rem /* 64/256 */;
- background: rgba(81,210,255,0.08);
- border: 1Px solid #0097cc; /*no*/
- color: #9CE6FF;
- font-size: $fontSize-24;
- margin: 0 0.078125rem /* 20/256 */ /* 10/10 */;
- display: flex;
- justify-content: center;
- align-items: center;
+ .el-table__fixed, .el-table__fixed-right,.el-table__fixed-right::before, .el-table__fixed::before{
+ background-color: #51D2FF;
}
- .el-tabs__item.is-active{
- width: 0.9375rem /* 240/256 */;
- height: 0.25rem /* 64/256 */;
- background: #00a6e1;
- border: 1Px solid #51d2ff;
- box-shadow: 0Px 3Px 10Px 0Px rgba(255,255,255,0.80) inset;
- color: $color-white;
- font-size: $fontSize-24;
- display: flex;
- justify-content: center;
- align-items: center;
+ .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
+ background-color: #A8E9FF;
}
- .el-tabs__nav{
- width: 100%;
- display: flex;
- justify-content: center;
+ .el-table thead{
+ color: #111111;
}
- .el-tabs__active-bar{
- height: 0;
+ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
+ border-bottom: 1Px solid #8E8E8E;
+ }
+ .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
+ border-right: 1Px solid #8E8E8E;
+ }
+ .el-table .el-table__cell{
+ padding: 0.0859375rem /* 22/256 */ 0;
+ }
+ .el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, .el-table__body tr.hover-row>td.el-table__cell{
+ background: transparent;
+ }
+ .el-table .cell{
+ font-size: $fontSize-28;
+ color: $color-darkGrey;
+ font-weight: 300;
+ line-height: 1;
+ span{
+ font-size: $fontSize-28;
+ }
}
}
</style>
--
Gitblit v1.9.1