|
|
@@ -1,5 +1,4 @@
|
|
|
<template>
|
|
|
-
|
|
|
<div class="header-actions" v-if="getActionList.length != 0">
|
|
|
<div class="overflow-box">
|
|
|
<el-button
|
|
|
@@ -15,27 +14,54 @@
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="stat-warp" v-if="statConfig.length != 0">
|
|
|
+ <div class="stat-warp" v-if="statConfig.length != 0" :class="statWarpHeight > 200 && isMore ? 'show-more' : ''">
|
|
|
<div class="title">
|
|
|
-
|
|
|
- <select v-model="statSelectVal" v-if="statConfig.length > 1">
|
|
|
- <option :value="index" v-for="(i,index) in statConfig" :key="index">{{i.label}}</option>
|
|
|
+ <select v-model="statSelectVal" v-if="statConfig.length > 1" @change="changeStatData">
|
|
|
+ <option
|
|
|
+ :value="index"
|
|
|
+ v-for="(i, index) in statConfig"
|
|
|
+ :key="index"
|
|
|
+
|
|
|
+ >
|
|
|
+ {{ i.label }}
|
|
|
+ </option>
|
|
|
</select>
|
|
|
- <div v-if="statConfig.length === 1">{{statConfig[0].label}}</div>
|
|
|
+ <div v-if="statConfig.length === 1">{{ statConfig[0].label }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="more-btn">
|
|
|
+ <span @click="isMore = !isMore" v-if="statWarpHeight > 200">
|
|
|
+ {{ isMore ? '收起' : '展开' }}
|
|
|
+ <i class="el-icon-arrow-down" :class="isMore ? 'el-icon-arrow-up' : ''"></i>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
- <ul>
|
|
|
- <li v-show="!i.data" :class="'theme' + i.type" v-for="(i,index) in statConfig[statSelectVal].data" :key='index'>
|
|
|
- <div class="label">{{i.label}}</div>
|
|
|
+ <ul id="statWarp" >
|
|
|
+ <li
|
|
|
+ v-show="!i.data"
|
|
|
+ :class="'theme' + i.type"
|
|
|
+ v-for="(i, index) in statConfig[statSelectVal].data"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="label">{{ i.label }}</div>
|
|
|
<div class="num">300000.00</div>
|
|
|
</li>
|
|
|
- <li v-show="i.data" v-for="(i,index) in statConfig[statSelectVal].data" :key='index' class="multi-data">
|
|
|
- <div class="label">{{i.label}}</div>
|
|
|
+ <li
|
|
|
+ v-show="i.data"
|
|
|
+ v-for="(i, index) in statConfig[statSelectVal].data"
|
|
|
+ :key="index"
|
|
|
+ class="multi-data"
|
|
|
+ >
|
|
|
+ <div class="label">{{ i.label }}</div>
|
|
|
<div class="num-warp">
|
|
|
- <div class="num-box" v-for="(j,jindex) in i.data" :key="jindex">
|
|
|
- <div class="num-small" :style="'color:' + j.color">{{j.num}}</div>
|
|
|
- <div class="label-small">{{j.label}}</div>
|
|
|
+ <div
|
|
|
+ class="num-box"
|
|
|
+ v-for="(j, jindex) in i.data"
|
|
|
+ :key="jindex"
|
|
|
+ >
|
|
|
+ <div class="num-small" :style="'color:' + j.color">
|
|
|
+ {{ j.num }}
|
|
|
+ </div>
|
|
|
+ <div class="label-small">{{ j.label }}</div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
@@ -104,8 +130,12 @@
|
|
|
@click="searchFn"
|
|
|
>{{ $t('common.search') }}</el-button
|
|
|
>
|
|
|
- <div class="more-icon" @click="retrievalModalFn">
|
|
|
- <img src="@/assets/images/iconm_xiangyzk.png" alt="" />
|
|
|
+ <div
|
|
|
+ class="more-icon"
|
|
|
+ @click="retrievalModalFn"
|
|
|
+ v-if="$attrs.onMoreSearch"
|
|
|
+ >
|
|
|
+ <i class="iconfont icon-iconx_saixuan"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -198,14 +228,16 @@
|
|
|
import { isFunction as isFn, isBoolean } from './type'
|
|
|
import ElementsMapping from './ElementsMapping'
|
|
|
import ComponentsMapping from './ComponentsMapping'
|
|
|
-import { computed, defineComponent, getCurrentInstance, ref } from 'vue'
|
|
|
+import { computed, defineComponent, getCurrentInstance, ref,watch } from 'vue'
|
|
|
import expand from './expand'
|
|
|
+
|
|
|
export default defineComponent({
|
|
|
name: 'Table',
|
|
|
components: {
|
|
|
ElementsMapping,
|
|
|
ComponentsMapping,
|
|
|
},
|
|
|
+
|
|
|
props: {
|
|
|
hideSearch: {
|
|
|
type: Boolean,
|
|
|
@@ -318,6 +350,7 @@ export default defineComponent({
|
|
|
// default: true,
|
|
|
// },
|
|
|
},
|
|
|
+
|
|
|
setup(props) {
|
|
|
const { proxy } = getCurrentInstance()
|
|
|
const selectConfigCopy = computed(() => {
|
|
|
@@ -326,6 +359,18 @@ export default defineComponent({
|
|
|
return item
|
|
|
})
|
|
|
})
|
|
|
+ let isMore = ref(true)
|
|
|
+ const changeStatData = () => {
|
|
|
+ statWarpHeight.value = document.getElementById('statWarp').offsetHeight
|
|
|
+ console.log(statWarpHeight.value)
|
|
|
+ }
|
|
|
+ let statWarpHeight = ref(0)
|
|
|
+ watch(proxy.statConfig,(newValue,oldValue)=>{
|
|
|
+ setTimeout(() => {
|
|
|
+ //获取statWarp的height
|
|
|
+ statWarpHeight.value = document.getElementById('statWarp').offsetHeight
|
|
|
+ }, 100);
|
|
|
+ },{immediate:true})
|
|
|
let statSelectVal = ref(0)
|
|
|
const retrievalModal = ref(false)
|
|
|
console.log(selectConfigCopy)
|
|
|
@@ -409,7 +454,9 @@ export default defineComponent({
|
|
|
)
|
|
|
}
|
|
|
const retrievalModalFn = () => {
|
|
|
+ console.log(proxy.$attrs)
|
|
|
proxy.$emit('moreSearch', '')
|
|
|
+ //获取父组件定义的moreSearch方法
|
|
|
}
|
|
|
const handlePageChange = (val) => {
|
|
|
proxy.$emit(
|
|
|
@@ -494,7 +541,10 @@ export default defineComponent({
|
|
|
isSelectable,
|
|
|
retrievalModal,
|
|
|
retrievalModalFn,
|
|
|
- statSelectVal
|
|
|
+ statSelectVal,
|
|
|
+ statWarpHeight,
|
|
|
+ isMore,
|
|
|
+ changeStatData
|
|
|
}
|
|
|
},
|
|
|
})
|
|
|
@@ -520,119 +570,137 @@ export default defineComponent({
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
-.stat-warp{
|
|
|
+.show-more{
|
|
|
+ height: auto!important;
|
|
|
+}
|
|
|
+.stat-warp {
|
|
|
margin-bottom: 20px;
|
|
|
background: #fff;
|
|
|
padding: 0 20px;
|
|
|
- .title{
|
|
|
+ height: 200px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ .more-btn{
|
|
|
+ position: absolute;
|
|
|
+ right:0;
|
|
|
+ top: 0;
|
|
|
+ width: 40px;
|
|
|
+ height: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
height: 60px;
|
|
|
- select{
|
|
|
+ select {
|
|
|
height: 60px;
|
|
|
- border:none;
|
|
|
+ border: none;
|
|
|
outline: none;
|
|
|
- -webkit-appearance: none;
|
|
|
- appearance: none;
|
|
|
+ -webkit-appearance: none;
|
|
|
+ appearance: none;
|
|
|
font-size: 14px;
|
|
|
font-weight: bold;
|
|
|
- background:url('@/assets/images/sanjiao.png') no-repeat right center;
|
|
|
+ background: url('@/assets/images/sanjiao.png') no-repeat right
|
|
|
+ center;
|
|
|
padding-right: 20px;
|
|
|
}
|
|
|
- div{
|
|
|
+ div {
|
|
|
height: 60px;
|
|
|
font-size: 14px;
|
|
|
font-weight: bold;
|
|
|
line-height: 60px;
|
|
|
}
|
|
|
}
|
|
|
- ul{
|
|
|
+ ul {
|
|
|
padding: 0;
|
|
|
overflow: hidden;
|
|
|
margin: 0;
|
|
|
- li{
|
|
|
+ li {
|
|
|
list-style: none;
|
|
|
- min-width: 368px;
|
|
|
+ min-width: 285px;
|
|
|
box-sizing: border-box;
|
|
|
- margin:0 20px 20px 0;
|
|
|
- background: #EFF6FF;
|
|
|
+ margin: 0 20px 20px 0;
|
|
|
+ background: #eff6ff;
|
|
|
float: left;
|
|
|
overflow: hidden;
|
|
|
- padding:20px;
|
|
|
+ padding: 20px;
|
|
|
color: #333333;
|
|
|
border-radius: 10px;
|
|
|
- .label{
|
|
|
+ .label {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
- .label::before{
|
|
|
+ .label::before {
|
|
|
width: 10px;
|
|
|
height: 10px;
|
|
|
content: '';
|
|
|
border-radius: 50%;
|
|
|
- background: #0084FF;
|
|
|
+ background: #0084ff;
|
|
|
display: inline-block;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
- .num{
|
|
|
- margin-top:10px;
|
|
|
+ .num {
|
|
|
+ margin-top: 10px;
|
|
|
font-size: 24px;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
//#F5F3FF #9E64ED
|
|
|
- .theme2{
|
|
|
- background: #F5F3FF;
|
|
|
- .label::before{
|
|
|
- background: #9E64ED;
|
|
|
+ .theme2 {
|
|
|
+ background: #f5f3ff;
|
|
|
+ .label::before {
|
|
|
+ background: #9e64ed;
|
|
|
}
|
|
|
}
|
|
|
//#FFF1E1 #FF9315
|
|
|
- .theme3{
|
|
|
- background: #FFF1E1;
|
|
|
- .label::before{
|
|
|
- background: #FF9315;
|
|
|
+ .theme3 {
|
|
|
+ background: #fff1e1;
|
|
|
+ .label::before {
|
|
|
+ background: #ff9315;
|
|
|
}
|
|
|
}
|
|
|
//#E2FBE8 #39C55A
|
|
|
- .theme4{
|
|
|
- background: #E2FBE8;
|
|
|
- .label::before{
|
|
|
- background: #39C55A;
|
|
|
+ .theme4 {
|
|
|
+ background: #e2fbe8;
|
|
|
+ .label::before {
|
|
|
+ background: #39c55a;
|
|
|
}
|
|
|
}
|
|
|
- .theme5{
|
|
|
- background: #FFEBE9;
|
|
|
- .label::before{
|
|
|
- background: #F94539;
|
|
|
+ .theme5 {
|
|
|
+ background: #ffebe9;
|
|
|
+ .label::before {
|
|
|
+ background: #f94539;
|
|
|
}
|
|
|
}
|
|
|
- .theme6{
|
|
|
- background: #E4F9F9;
|
|
|
- .label::before{
|
|
|
- background: #53CBCB;
|
|
|
+ .theme6 {
|
|
|
+ background: #e4f9f9;
|
|
|
+ .label::before {
|
|
|
+ background: #53cbcb;
|
|
|
}
|
|
|
}
|
|
|
- .multi-data{
|
|
|
- .label::before{
|
|
|
+ .multi-data {
|
|
|
+ .label::before {
|
|
|
display: none;
|
|
|
}
|
|
|
- .label{
|
|
|
+ .label {
|
|
|
font-size: 14px;
|
|
|
font-weight: bold;
|
|
|
color: #333;
|
|
|
- margin-bottom:8px;
|
|
|
+ margin-bottom: 8px;
|
|
|
}
|
|
|
- .num-warp{
|
|
|
+ .num-warp {
|
|
|
overflow: hidden;
|
|
|
- .num-box{
|
|
|
+ .num-box {
|
|
|
float: left;
|
|
|
min-width: 80px;
|
|
|
margin-right: 20px;
|
|
|
- .num-small{
|
|
|
+ .num-small {
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
- margin-bottom:8px;
|
|
|
+ margin-bottom: 8px;
|
|
|
}
|
|
|
- .label-small{
|
|
|
- color:#666;
|
|
|
+ .label-small {
|
|
|
+ color: #666;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
@@ -647,6 +715,9 @@ export default defineComponent({
|
|
|
.more-icon {
|
|
|
float: right;
|
|
|
cursor: pointer;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 5px;
|
|
|
}
|
|
|
}
|
|
|
.by-dropdown {
|
cz