@@ -4,6 +4,7 @@ | |||||
<div class="left_sign"></div> | <div class="left_sign"></div> | ||||
<div class="right_sign"></div> | <div class="right_sign"></div> | ||||
</div> | </div> | ||||
<div class="light"></div> | |||||
<div class="header row align_item_center"> | <div class="header row align_item_center"> | ||||
<div v-if="title" class="title_bk row align_item_center"> | <div v-if="title" class="title_bk row align_item_center"> | ||||
<i class="icon"></i> | <i class="icon"></i> | ||||
@@ -13,10 +14,9 @@ | |||||
<div class="more"> | <div class="more"> | ||||
<slot name="header"></slot> | <slot name="header"></slot> | ||||
<div v-show="flexIble" class="flexIble hover_pointer" :class="[isOpen ? 'flexIble_open' : '']" @click="open"></div> | <div v-show="flexIble" class="flexIble hover_pointer" :class="[isOpen ? 'flexIble_open' : '']" @click="open"></div> | ||||
<div v-show="flexIbleTable" class="flexIble hover_pointer" :class="[isOpen ? 'flexIble_open' : '']" @click="openTable"></div> | |||||
<div v-show="flexIbleTable" class="flexIble_list hover_pointer" @click="openTable"></div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="light"></div> | |||||
</div> | </div> | ||||
<div class="body"> | <div class="body"> | ||||
<div> | <div> | ||||
@@ -58,6 +58,8 @@ | |||||
.more { | .more { | ||||
margin-right: 20px; | margin-right: 20px; | ||||
position: absolute; | |||||
right: 0; | |||||
} | } | ||||
} | } | ||||
@@ -114,6 +116,14 @@ | |||||
} | } | ||||
} | } | ||||
.flexIble_list { | |||||
z-index: 4; | |||||
width: 20px; | |||||
height: 20px; | |||||
background: url('./list.png'); | |||||
background-size: 100% 100%; | |||||
} | |||||
.flexIble { | .flexIble { | ||||
z-index: 4; | z-index: 4; | ||||
width: 16px; | width: 16px; | ||||
@@ -149,4 +159,4 @@ | |||||
transform: translateX(0px); | transform: translateX(0px); | ||||
/* 样式 */ | /* 样式 */ | ||||
} | } | ||||
} | |||||
} |
@@ -0,0 +1,65 @@ | |||||
export default [ | |||||
{ | |||||
area: '长春', | |||||
count: 233, | |||||
money: 534534, | |||||
dealCount: 564, | |||||
dealMoney: 31 | |||||
}, | |||||
{ | |||||
area: '松原', | |||||
count: 233, | |||||
money: 534534, | |||||
dealCount: 564, | |||||
dealMoney: 31 | |||||
}, | |||||
{ | |||||
area: '通化', | |||||
count: 233, | |||||
money: 534534, | |||||
dealCount: 564, | |||||
dealMoney: 31 | |||||
}, | |||||
{ | |||||
area: '四平', | |||||
count: 233, | |||||
money: 534534, | |||||
dealCount: 564, | |||||
dealMoney: 31 | |||||
}, | |||||
{ | |||||
area: '吉林', | |||||
count: 233, | |||||
money: 534534, | |||||
dealCount: 564, | |||||
dealMoney: 31 | |||||
}, | |||||
{ | |||||
area: '辽源', | |||||
count: 233, | |||||
money: 534534, | |||||
dealCount: 564, | |||||
dealMoney: 31 | |||||
}, | |||||
{ | |||||
area: '通化', | |||||
count: 233, | |||||
money: 534534, | |||||
dealCount: 564, | |||||
dealMoney: 31 | |||||
}, | |||||
{ | |||||
area: '白山', | |||||
count: 233, | |||||
money: 534534, | |||||
dealCount: 564, | |||||
dealMoney: 31 | |||||
}, | |||||
{ | |||||
area: '延边', | |||||
count: 233, | |||||
money: 534534, | |||||
dealCount: 564, | |||||
dealMoney: 31 | |||||
} | |||||
]; |
@@ -0,0 +1,19 @@ | |||||
<div :style="[style]"> | |||||
<div class="table_show"> | |||||
<div class="table_header table_one clearfix"> | |||||
<div v-for="header in headers" :key="header" class="item test_center">{{header}}</div> | |||||
<div v-if="details" class="item test_center">操作</div> | |||||
</div> | |||||
<div class="table_bodyer" :style="[bodyStyle]" @click="handleClick($event)"> | |||||
<scroll :data="data" class="seamless-warp" :class-option="swiperOption"> | |||||
<div v-for="(line, index) in data" class="table_one clearfix item_height"> | |||||
<div class="item test_center ellipsis_1" >{{line.voucherSummary}}</div> | |||||
<div class="item test_center ellipsis_1" >{{line.bookDate}}</div> | |||||
<div class="item test_center ellipsis_1" >{{line.jieAmount}}</div> | |||||
<div class="item test_center ellipsis_1" >{{line.daiAmount}}</div> | |||||
<div v-show="details" class="item test_center ellipsis_1" style="cursor: pointer;" :data-item="JSON.stringify(line)">查看详情</div> | |||||
</div> | |||||
</scroll> | |||||
</div> | |||||
</div> | |||||
</div> |
@@ -0,0 +1,95 @@ | |||||
import scroll from 'vue-seamless-scroll' | |||||
export default { | |||||
components: { | |||||
scroll | |||||
}, | |||||
data () { | |||||
return { | |||||
}; | |||||
}, | |||||
props: { | |||||
details: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
width: { | |||||
type: [String, Number], | |||||
default: '100%' | |||||
}, | |||||
height: { | |||||
type: [String, Number], | |||||
default: '100' | |||||
}, | |||||
bodyHeight: { | |||||
type: [Number], | |||||
default: 200 | |||||
}, | |||||
headers: { | |||||
type: Array, | |||||
default: function () { | |||||
return ['表头1', '表头2', '表头3'] | |||||
} | |||||
}, | |||||
data: { | |||||
type: Array, | |||||
default: function () { | |||||
return [ | |||||
['表头1', '表头2', '表头3'], | |||||
['表头1', '表头2', '表头3'], | |||||
['表头1', '表头2', '表头3'], | |||||
['表头1', '表头2', '表头3'], | |||||
['表头1', '表头2', '表头3'], | |||||
['表头1', '表头2', '表头3'], | |||||
['表头1', '表头2', '表头3'], | |||||
['表头11', '表头22', '表头33'] | |||||
] | |||||
} | |||||
} | |||||
}, | |||||
computed: { | |||||
dataLength: function () { | |||||
return this.dataList.length; | |||||
}, | |||||
bodyStyle: function () { | |||||
return { | |||||
height: this.bodyHeight + 'px', | |||||
}; | |||||
}, | |||||
style: function () { | |||||
return { | |||||
height: this.height, | |||||
width: this.width | |||||
}; | |||||
}, | |||||
// 如果数据不足5条则不滚动 | |||||
swiperOption: function () { | |||||
return { | |||||
step: 0.4, | |||||
limitMoveNum: 5, | |||||
hoverStop: true, | |||||
direction: 1, | |||||
openWatch: true, | |||||
singleHeight: 0, | |||||
waitTime: 1000 | |||||
} | |||||
} | |||||
}, | |||||
created () { | |||||
}, | |||||
methods: { | |||||
lineClick (line) { | |||||
console.log(11111111111) | |||||
this.$emit('lineClick', line) | |||||
}, | |||||
handleClick(e) { | |||||
// 获取最近携带 data-item 属性的元素 | |||||
const target = e.target.closest('[data-item]'); | |||||
if (!target) return; | |||||
// 解析存储的数据 | |||||
const item = JSON.parse(target.dataset.item); | |||||
console.log("点击项数据:", item); | |||||
this.$emit('lineClick', item) | |||||
} | |||||
} | |||||
}; |
@@ -0,0 +1,133 @@ | |||||
.table_show { | |||||
box-sizing: border-box; | |||||
padding: 0 10px; | |||||
margin-top: 10px; | |||||
.table_header { | |||||
width: 100%; | |||||
background: rgba(44, 117, 223, 0.5); | |||||
border-radius: 4px; | |||||
height: 40px; | |||||
font-size: 12px; | |||||
font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI-Bold; | |||||
font-weight: 700; | |||||
text-align: center; | |||||
color: rgba(185, 211, 235, 1); | |||||
} | |||||
.table_bodyer { | |||||
margin-top: 20px; | |||||
overflow: hidden; | |||||
height: 200px; | |||||
line-height: 40px; | |||||
.table_one { | |||||
height: 40px; | |||||
display: flex; | |||||
justify-content: space-around; | |||||
} | |||||
} | |||||
.table_one { | |||||
width: 100%; | |||||
height: 40px; | |||||
display: flex; | |||||
justify-content: space-around; | |||||
align-items: center; | |||||
} | |||||
} | |||||
.swiper-container { | |||||
height: 100%; | |||||
} | |||||
.table_bodyer { | |||||
height: 100%; | |||||
} | |||||
.margin { | |||||
margin-right: 5px; | |||||
} | |||||
.item_height { | |||||
color: rgba(214, 234, 252, 1); | |||||
font-size: 10px; | |||||
line-height: 40px; | |||||
height: 40px; | |||||
display: flex; | |||||
justify-content: space-around; | |||||
align-items: center; | |||||
border-bottom: 1px solid #183053; | |||||
&:nth-child(odd) { | |||||
background-color: rgba(49, 129, 246, 0.1); | |||||
} | |||||
&:hover { | |||||
color: rgba(49, 129, 246, 1); | |||||
} | |||||
} | |||||
.item { | |||||
font-size: 14px; | |||||
text-align: center; | |||||
overflow: hidden; | |||||
white-space: nowrap; | |||||
flex: 1!important; | |||||
} | |||||
.item1 { | |||||
flex: 1.8; | |||||
} | |||||
.item:nth-child(1) { | |||||
text-align: left; | |||||
flex: 1.8; | |||||
padding-left: 5px; | |||||
} | |||||
.item:nth-child(2) { | |||||
flex: 1.3; | |||||
} | |||||
.item:nth-child(3) { | |||||
flex: 1.8; | |||||
} | |||||
.item:nth-child(4) { | |||||
flex: 1.4; | |||||
} | |||||
.item:nth-child(5) { | |||||
flex: 1.3; | |||||
} | |||||
.item:nth-child(6) { | |||||
flex: 1.3; | |||||
} | |||||
.item:nth-child(7) { | |||||
flex: 2; | |||||
} | |||||
.text_overflow { | |||||
text-overflow: ellipsis; | |||||
} | |||||
.test_center { | |||||
text-align: center; | |||||
} | |||||
.pop { | |||||
padding: 4px; | |||||
position: fixed; | |||||
z-index: 20; | |||||
color: white; | |||||
background: rgba($color: #000000, $alpha: 0.3); | |||||
border-radius: 6px; | |||||
} | |||||
.margin_top { | |||||
margin-top: 5px; | |||||
} |
@@ -0,0 +1,3 @@ | |||||
<template src='./index.html'/> | |||||
<script lang='js' src='./index.js'></script> | |||||
<style lang='scss' src='./index.scss' scoped></style> |
@@ -13,4 +13,4 @@ | |||||
</scroll> | </scroll> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | |||||
</div> |
@@ -130,6 +130,48 @@ export function analysisOfLargeFundExpenditureWarning (deptId, year) { | |||||
}) | }) | ||||
} | } | ||||
// 资金一张图-预警分析-左上点击-资金支出大额预警列表(分页) | |||||
export function financeWarningZjzcdeyjList (deptId, year) { | |||||
let query = { | |||||
deptId, | |||||
year, | |||||
voucherAmountMin: 10000 | |||||
} | |||||
return request({ | |||||
url: 'api/home/xixia/financeWarning/zjzcdeyjList', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 资金一张图-预警分析-左中点击-资金往来敏感词预警列表(分页) | |||||
export function financeWarningZjwlmgcyjList (deptId, year) { | |||||
let query = { | |||||
deptId, | |||||
year, | |||||
voucherAmountMin: 10000 | |||||
} | |||||
return request({ | |||||
url: 'api/home/xixia/financeWarning/zjwlmgcyjList', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 资金一张图-预警分析-左下点击-资金往来不规范预警列表(分页) | |||||
export function financeWarningZjwlbgfyjList (deptId, year) { | |||||
let query = { | |||||
deptId, | |||||
year, | |||||
voucherAmountMin: 10000 | |||||
} | |||||
return request({ | |||||
url: 'api/home/xixia/financeWarning/zjwlbgfyjList', | |||||
method: 'get', | |||||
params: query | |||||
}) | |||||
} | |||||
// 资金一张图-预警分析-左下-资金往来不规范预警分析 | // 资金一张图-预警分析-左下-资金往来不规范预警分析 | ||||
export function warninganalysisofnonstandardfund (deptId, year) { | export function warninganalysisofnonstandardfund (deptId, year) { | ||||
let query = { | let query = { | ||||
@@ -198,4 +240,4 @@ export function RankingSensitiveWordWarningFundTransactions (deptId, year, type) | |||||
method: 'get', | method: 'get', | ||||
params: query | params: query | ||||
}) | }) | ||||
} | |||||
} |
@@ -0,0 +1,42 @@ | |||||
<!--资产信息详情-弹窗--> | |||||
<div class="gl_pop_cash pop_statistical_desc"> | |||||
<div class="head_main"> | |||||
<div class="title"><i></i>凭证详情</div> | |||||
<div class="close" @click="close"></div> | |||||
</div> | |||||
<div class="echarts_main scrollbar"> | |||||
<div> | |||||
<p>项目名称</p> | |||||
<p>{{data.cashflowName}}</p> | |||||
</div> | |||||
<div> | |||||
<p>科目编码</p> | |||||
<p>{{data.subjectId}}</p> | |||||
</div> | |||||
<div> | |||||
<p>科目名称</p> | |||||
<p>{{data.subjectNameAll}}</p> | |||||
</div> | |||||
<div> | |||||
<p>借方金额</p> | |||||
<p>{{data.jieAmount}}</p> | |||||
</div> | |||||
<div> | |||||
<p>贷方金额</p> | |||||
<p>{{data.daiAmount}}</p> | |||||
</div> | |||||
<div> | |||||
<p>数量</p> | |||||
<p>{{data.quantityNum}}</p> | |||||
</div> | |||||
<div> | |||||
<p>单位</p> | |||||
<p>{{data.quantityUnit}}</p> | |||||
</div> | |||||
<div> | |||||
<p>凭证摘要</p> | |||||
<p>{{data.voucherSummary}}</p> | |||||
</div> | |||||
</div> | |||||
</div> |
@@ -0,0 +1,23 @@ | |||||
export default { | |||||
props: { | |||||
data: {} | |||||
}, | |||||
data () { | |||||
return { | |||||
isLoad: false, | |||||
permanentDetail: {} | |||||
}; | |||||
}, | |||||
computed: { | |||||
}, | |||||
created () { | |||||
}, | |||||
mounted () { | |||||
}, | |||||
methods: { | |||||
close () { | |||||
this.$emit('close') | |||||
} | |||||
} | |||||
}; |
@@ -0,0 +1,182 @@ | |||||
.gl_pop_cash { | |||||
background: rgba(10, 25, 47, 0.8); | |||||
position: absolute; | |||||
border: 2px solid #3181f6; | |||||
box-shadow: 0 0 5px #3181f6; | |||||
border-radius: 0 0 100px 0; | |||||
// border-left: 0.15vw solid #357dfa; | |||||
z-index: 11; | |||||
.head_main { | |||||
height: 60px; | |||||
display: flex; | |||||
align-items: center; | |||||
position: relative; | |||||
justify-content: space-between; | |||||
padding: 0 20px; | |||||
background: linear-gradient(to right, rgba(49, 129, 246, .8), rgba(49, 129, 246, 0)); | |||||
.title { | |||||
color: #ffad00; | |||||
font-size: 20px !important; | |||||
display: flex; | |||||
align-items: center; | |||||
line-height: 1; | |||||
text-shadow: 0 0 15px #3181f6; | |||||
i{ | |||||
display: block; | |||||
width: 20px; | |||||
height: 20px; | |||||
background: url("tt_icon.png") no-repeat center; | |||||
background-size: 100% 100%; | |||||
margin-right: 10px; | |||||
} | |||||
} | |||||
.close { | |||||
background: url('./close.png') no-repeat; | |||||
background-size: 100% 100%; | |||||
width: 20px; | |||||
height: 20px; | |||||
cursor: pointer; | |||||
} | |||||
.xs_main { | |||||
height: 30px; | |||||
position: absolute; | |||||
width: 100%; | |||||
display: flex; | |||||
align-items: center; | |||||
.block { | |||||
width: 20px; | |||||
display: flex; | |||||
.point { | |||||
width: .55vh; | |||||
height: .55vh; | |||||
margin-right: 0.36vw; | |||||
&.p1 { | |||||
background: rgba(53, 125, 250, 1) | |||||
} | |||||
&.p2 { | |||||
background: rgba(53, 125, 250, .7) | |||||
} | |||||
&.p3 { | |||||
background: rgba(53, 125, 250, .4) | |||||
} | |||||
} | |||||
} | |||||
.xs_x { | |||||
height: 1px; | |||||
flex: 1; | |||||
background: #214284; | |||||
} | |||||
} | |||||
} | |||||
.echarts_main { | |||||
overflow-y: auto; | |||||
div { | |||||
font-size: 10px; | |||||
// height: 40px; | |||||
line-height: 20px; | |||||
p { | |||||
// white-space: nowrap; | |||||
} | |||||
} | |||||
.headers { | |||||
height: 30px; | |||||
font-size: 14px; | |||||
color: #0befca; | |||||
text-align: center; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
margin-right: 0.53vw; | |||||
background: rgba(11, 239, 202, .2); | |||||
margin-bottom: 0.9vh | |||||
} | |||||
.desc_main { | |||||
overflow-y: scroll; | |||||
padding-right: 0.33vw; | |||||
.analysisTable_list { | |||||
margin: 0; | |||||
padding: 0; | |||||
flex: 1; | |||||
display: flex; | |||||
flex-direction: column; | |||||
.flex_item { | |||||
cursor: pointer; | |||||
list-style: none; | |||||
margin: 0; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
text-align: center; | |||||
color: #fff; | |||||
font-size: 12px; | |||||
position: relative; | |||||
height: 30px; | |||||
&:nth-child(2n) { | |||||
background: rgba(53, 125, 250, .1); | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.pop_statistical_desc { | |||||
width: 600px; | |||||
margin: 0; | |||||
left: 480px; | |||||
top: 180px; | |||||
padding-bottom: 1.04vw !important; | |||||
.head_main { | |||||
.title { | |||||
color: #fff; | |||||
} | |||||
} | |||||
.echarts_main { | |||||
margin-top: 16px; | |||||
div { | |||||
display: flex; | |||||
align-items: center; | |||||
&:nth-child(even) { | |||||
//background: rgba(32, 89, 188, 0.2); | |||||
} | |||||
p { | |||||
font-size: 16px; | |||||
&:nth-child(1) { | |||||
width: 8vw; | |||||
padding-right: 1vw; | |||||
text-align: right; | |||||
flex-shrink: 0; | |||||
color: #b0cfec; | |||||
} | |||||
margin: 0; | |||||
color: #ffffff; | |||||
line-height: 3.92vh; | |||||
} | |||||
} | |||||
} | |||||
} |
@@ -0,0 +1,4 @@ | |||||
<template src='./index.html'/> | |||||
<script lang='js' src='./index.js'></script> | |||||
<style lang='scss' src='./index.scss' scoped> | |||||
</style> |
@@ -1,3 +1,4 @@ | |||||
<Pannel :title="bottomTit + '预警清单'" height="305" width="960" v-if="showBottom"> | |||||
<ScrollTable :headers="headers" :data="data" details></ScrollTable> | |||||
<Pannel :title="bottomTit + '预警清单'" height="305" width="960" v-show="showBottom"> | |||||
<ScrollTable :headers="headers" :data="data" :dataDetail="dataDetail" details @lineClick="lineClick1"></ScrollTable> | |||||
</Pannel> | </Pannel> |
@@ -1,9 +1,13 @@ | |||||
import Pannel from '@/components/pannel/index.vue'; | import Pannel from '@/components/pannel/index.vue'; | ||||
import ScrollTable from '@/components/scroll-table/index.vue'; | |||||
import ScrollTable from '@/components/scroll-table-details/index.vue'; | |||||
import {financeWarningZjzcdeyjList, financeWarningZjwlmgcyjList, financeWarningZjwlbgfyjList} from "../../../api"; | |||||
import {mapGetters} from "vuex"; | |||||
import AssetDetails from './asset-details/index.vue'; | |||||
export default { | export default { | ||||
components: { | components: { | ||||
ScrollTable, | ScrollTable, | ||||
Pannel | |||||
Pannel, | |||||
AssetDetails | |||||
}, | }, | ||||
props: { | props: { | ||||
showBottom: { | showBottom: { | ||||
@@ -15,21 +19,86 @@ export default { | |||||
default: '' | default: '' | ||||
} | } | ||||
}, | }, | ||||
computed: { | |||||
...mapGetters(['year', 'deptId']) | |||||
}, | |||||
data () { | data () { | ||||
return { | return { | ||||
headers: ['摘要', '日期', '借方金额', '贷方金额'], | headers: ['摘要', '日期', '借方金额', '贷方金额'], | ||||
data: [ | |||||
['摘要内容摘要内容摘要内容摘要内容摘要内容摘', '2025-12', '234', '3434'] | |||||
] | |||||
data: [], | |||||
dataDetail: [], | |||||
}; | }; | ||||
}, | }, | ||||
watch: { | |||||
year: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
}, | |||||
deptId: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
}, | |||||
bottomTit: { | |||||
handler () { | |||||
this.getData(); | |||||
}, | |||||
immediate: true, // 立即执行 | |||||
} | |||||
}, | |||||
created () { | created () { | ||||
}, | }, | ||||
mounted () { | mounted () { | ||||
}, | }, | ||||
methods: { | methods: { | ||||
tabChange () { | tabChange () { | ||||
}, | |||||
lineClick1 (val) { | |||||
console.log(val) | |||||
this.$emit('clickDetail', val) | |||||
}, | |||||
getData () { | |||||
if (this.year, this.deptId) { | |||||
this.data = []; | |||||
switch (this.bottomTit) { | |||||
case "大额": | |||||
financeWarningZjzcdeyjList(this.deptId, this.year).then(res => { | |||||
let data = res.rows; | |||||
// .map(item => { | |||||
// return [item.voucherSummary, item.bookDate, item.jieAmount, item.daiAmount] | |||||
// }) | |||||
this.data = data; | |||||
}) | |||||
break; | |||||
case "敏感": | |||||
financeWarningZjwlmgcyjList(this.deptId, this.year).then(res => { | |||||
let data = res.rows; | |||||
// .map(item => { | |||||
// return [item.voucherSummary, item.bookDate, item.jieAmount, item.daiAmount] | |||||
// }) | |||||
this.data = data; | |||||
}) | |||||
break; | |||||
case "不规范": | |||||
financeWarningZjwlbgfyjList(this.deptId, this.year).then(res => { | |||||
let data = res.rows; | |||||
// .map(item => { | |||||
// return [item.voucherSummary, item.bookDate, item.jieAmount, item.daiAmount] | |||||
// }) | |||||
this.data = data; | |||||
}) | |||||
break; | |||||
} | |||||
} | |||||
} | } | ||||
} | } | ||||
}; | }; |
@@ -13,6 +13,7 @@ | |||||
<component :is="item" v-for="(item, index) in currentComp.right" :key="index"></component> | <component :is="item" v-for="(item, index) in currentComp.right" :key="index"></component> | ||||
</div> | </div> | ||||
<div class="buttom_side row space_between zIndextop"> | <div class="buttom_side row space_between zIndextop"> | ||||
<component :is="item" v-for="(item, index) in currentComp.buttom" :key="index" :showBottom="showBottom" :bottomTit="bottomTit"></component> | |||||
<component :is="item" v-for="(item, index) in currentComp.buttom" :key="index" :showBottom="showBottom" :bottomTit="bottomTit" @clickDetail="clickDetail"></component> | |||||
</div> | </div> | ||||
<AssetDetails @close="showPermanentDetail = false" v-if="showPermanentDetail" :data="dataDetailById"></AssetDetails> | |||||
</div> | </div> |
@@ -21,6 +21,7 @@ import { comps } from './data.js' | |||||
import GisMap from '@/components/gis-map/index.vue'; | import GisMap from '@/components/gis-map/index.vue'; | ||||
import AssetDetails from './comps/buttom/2/asset-details/index.vue'; | |||||
export default { | export default { | ||||
components: { | components: { | ||||
GisMap, | GisMap, | ||||
@@ -39,7 +40,8 @@ export default { | |||||
Right22, | Right22, | ||||
Right32, | Right32, | ||||
Bottom2, | Bottom2, | ||||
Bottom1 | |||||
Bottom1, | |||||
AssetDetails | |||||
}, | }, | ||||
data () { | data () { | ||||
return { | return { | ||||
@@ -57,6 +59,8 @@ export default { | |||||
tab: '1', | tab: '1', | ||||
comps, | comps, | ||||
showBottom: false, | showBottom: false, | ||||
dataDetailById: {}, | |||||
showPermanentDetail: false, | |||||
bottomTit: '' | bottomTit: '' | ||||
}; | }; | ||||
}, | }, | ||||
@@ -73,14 +77,16 @@ export default { | |||||
tabChange (info) { | tabChange (info) { | ||||
this.tab = info.id; | this.tab = info.id; | ||||
}, | }, | ||||
clickDetail (val) { | |||||
this.dataDetailById = val; | |||||
this.showPermanentDetail = true; | |||||
}, | |||||
openTable(val){ | openTable(val){ | ||||
if (val == this.bottomTit){ | if (val == this.bottomTit){ | ||||
this.showBottom = !this.showBottom; | this.showBottom = !this.showBottom; | ||||
}else{ | }else{ | ||||
this.showBottom = true | this.showBottom = true | ||||
} | } | ||||
this.bottomTit = val | this.bottomTit = val | ||||
} | } | ||||
} | } | ||||