Merge remote-tracking branch 'origin/dev' into dev
This commit is contained in:
@@ -403,7 +403,7 @@
|
||||
value: '0'
|
||||
}],
|
||||
images: [],
|
||||
summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary5', 'summary7', 'summary9', 'summary10'],
|
||||
summaryList: ['summary0', 'summary1', 'summary2', 'summary3', 'summary4', 'summary6', 'summary5', 'summary7', 'summary8', 'summary9', 'summary10', 'summary11'],
|
||||
borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5']
|
||||
}
|
||||
},
|
||||
|
||||
@@ -138,6 +138,7 @@
|
||||
<ai-map :markers="data[data.dataType]" v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId || user.info.areaId" map-style="amap://styles/e51987628aee5206d4c9ca8c6e98b4f7"/>
|
||||
<ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"></ai-monitor>
|
||||
<video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay v-else-if="data.type === 'video'"></video>
|
||||
<AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="data.type === 'partyOrg'" :instance="instance"></AiDvPartyOrg>
|
||||
</ai-dv-panel>
|
||||
</div>
|
||||
</template>
|
||||
@@ -155,7 +156,7 @@
|
||||
export default {
|
||||
name: 'RenderElement',
|
||||
|
||||
props: ['data', 'index', 'theme'],
|
||||
props: ['data', 'index', 'theme', 'instance'],
|
||||
|
||||
components: {
|
||||
AiSwiper
|
||||
@@ -222,15 +223,6 @@
|
||||
.render-element {
|
||||
::v-deep .dvScrollBoard1 {
|
||||
|
||||
.index {
|
||||
color: #fff;
|
||||
text-shadow: none;
|
||||
background: transparent;
|
||||
background-color: #BD4921!important;
|
||||
-webkit-background-clip: inherit;
|
||||
-webkit-text-fill-color: #fff;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: rgba(0, 0, 0, 0.1)!important;
|
||||
|
||||
@@ -251,9 +243,19 @@
|
||||
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
|
||||
& > div:nth-of-type(2n) {
|
||||
background: rgba(0, 0, 0, 0.1)!important;
|
||||
}
|
||||
|
||||
.index {
|
||||
color: #fff;
|
||||
text-shadow: none;
|
||||
background: transparent;
|
||||
background-color: #BD4921!important;
|
||||
-webkit-background-clip: inherit;
|
||||
-webkit-text-fill-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -543,6 +543,39 @@ const components = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '党组织',
|
||||
type: 'partyOrg',
|
||||
list: [
|
||||
{
|
||||
type: 'partyOrg',
|
||||
label: '党组织',
|
||||
width: 840,
|
||||
height: 800,
|
||||
zIndex: 1,
|
||||
top: 0,
|
||||
left: 0,
|
||||
dataX: '',
|
||||
dataY: [],
|
||||
title: '党组织',
|
||||
border: 'border3',
|
||||
sourceDataId: '',
|
||||
dataType: 'staticData',
|
||||
staticData: [
|
||||
{
|
||||
key: '个人服务办理',
|
||||
value: 247
|
||||
},
|
||||
{
|
||||
key: '同比上月',
|
||||
value: 247
|
||||
}
|
||||
],
|
||||
dynamicData: [],
|
||||
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/total.png'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '边框',
|
||||
type: 'panel',
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
}"
|
||||
v-for="(item, index) in componentList"
|
||||
:key="index">
|
||||
<RenderElement :data="item" :index="index" :theme="dashboard.theme"></RenderElement>
|
||||
<RenderElement :instance="instance" :data="item" :index="index" :theme="dashboard.theme"></RenderElement>
|
||||
</div>
|
||||
</div>
|
||||
<components v-else :is="component" :dict="dict" :instance="instance" :nav="meta"/>
|
||||
|
||||
224
project/dvui/components/AiDvPartyOrg/AiDvPartyOrg.vue
Normal file
224
project/dvui/components/AiDvPartyOrg/AiDvPartyOrg.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div class="partyDvOrg" ref="container">
|
||||
<div
|
||||
class="partyDvOrg-wrapper"
|
||||
ref="tree"
|
||||
id="tree"
|
||||
:style="{left: x, top: y, transform: `scale(${scale}) translate(-50%, -50%) `, 'transform-origin': `${0} ${0}`}">
|
||||
<VueOkrTree
|
||||
:props="props"
|
||||
node-key="id"
|
||||
ref="VueOkrTree"
|
||||
:data="treeData">
|
||||
</VueOkrTree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VueOkrTree } from 'vue-okr-tree'
|
||||
import 'vue-okr-tree/dist/vue-okr-tree.css'
|
||||
|
||||
export default {
|
||||
name: 'AiDvPartyOrg',
|
||||
|
||||
props: ['instance'],
|
||||
|
||||
components: {
|
||||
VueOkrTree
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
scale: 1,
|
||||
x: '50%',
|
||||
y: '50%',
|
||||
treeData: [],
|
||||
props: {
|
||||
label: 'name',
|
||||
children: 'children'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.bindEvent()
|
||||
this.getPartyOrg()
|
||||
},
|
||||
|
||||
destroyed () {
|
||||
document.querySelector('body').removeEventListener('mousewheel', this.onMousewheel)
|
||||
document.querySelector('body').removeEventListener('mouseup', this.onMouseUp)
|
||||
document.querySelector('body').removeEventListener('mousedown', this.onMousedown)
|
||||
document.querySelector('body').removeEventListener('mousemove', this.onMouseMove)
|
||||
},
|
||||
|
||||
methods: {
|
||||
bindEvent () {
|
||||
document.querySelector('body').addEventListener('mousewheel', this.onMousewheel, true)
|
||||
document.querySelector('body').addEventListener('mouseup', this.onMouseUp, true)
|
||||
document.querySelector('body').addEventListener('mousedown', this.onMousedown, true)
|
||||
document.querySelector('body').addEventListener('mousemove', this.onMouseMove, true)
|
||||
},
|
||||
|
||||
onMousewheel (event) {
|
||||
if (!event) return false
|
||||
const elClass = event.target.className
|
||||
if (elClass === 'tree' || elClass === 'middle' || (elClass && (elClass.indexOf('chart') > -1 || elClass.indexOf('user') > -1))) {
|
||||
var dir = event.deltaY > 0 ? 'Up' : 'Down'
|
||||
if (dir === 'Up') {
|
||||
this.scale = this.scale - 0.2 <= 0.1 ? 0.1 : this.scale - 0.2
|
||||
} else {
|
||||
this.scale = this.scale + 0.2
|
||||
}
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
|
||||
onMousedown (e) {
|
||||
const elClass = e.target.className
|
||||
if ((elClass && (elClass.indexOf('chart') > -1 || elClass.indexOf('user') > -1))) {
|
||||
const left = document.querySelector('#tree').offsetLeft
|
||||
const top = document.querySelector('#tree').offsetTop
|
||||
this.isMove = true
|
||||
this.offsetX = e.clientX - left
|
||||
this.offsetY = e.clientY - top
|
||||
}
|
||||
},
|
||||
|
||||
onMouseMove (e) {
|
||||
if (!this.isMove) return
|
||||
|
||||
this.x = (e.clientX - this.offsetX) + 'px'
|
||||
this.y = (e.clientY - this.offsetY) + 'px'
|
||||
},
|
||||
|
||||
onMouseUp () {
|
||||
this.isMove = false
|
||||
},
|
||||
|
||||
getPartyOrg () {
|
||||
this.instance.post('/app/partyOrganization/queryPartyOrganizationServiceList').then(res => {
|
||||
if (res.code === 0) {
|
||||
this.treeData = res.data.filter(e => !e.parentId)
|
||||
this.treeData.map(p => this.addChild(p, res.data.map(v => {
|
||||
return {
|
||||
...v,
|
||||
name: v.name.substr(0, 12)
|
||||
}
|
||||
}), {parent: 'parentId'}))
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.autoScale()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
autoScale () {
|
||||
const treeWidth = this.$refs.tree.offsetWidth
|
||||
const containerWidth = this.$refs.container.offsetWidth
|
||||
this.scale = treeWidth < containerWidth ? 1 : containerWidth / treeWidth
|
||||
this.x = '50%'
|
||||
this.y = '50%'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.partyDvOrg {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.partyDvOrg-wrapper {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
width: max-content;
|
||||
height: 300%;
|
||||
}
|
||||
|
||||
::v-deep .org-chart-container {
|
||||
color: #FFFFFF;
|
||||
font-size: 16px;
|
||||
|
||||
.org-chart-node {
|
||||
overflow: hidden;
|
||||
|
||||
.org-chart-node-label {
|
||||
width: 40px;
|
||||
height: 330px;
|
||||
margin-right: 15px;
|
||||
padding: 0 0;
|
||||
box-shadow: 0 0 10px 4px rgba(188, 59, 0, 0.6) inset;
|
||||
|
||||
.org-chart-node-label-inner {
|
||||
line-height: 1.3;
|
||||
padding: 10px 0;
|
||||
font-weight: 500;
|
||||
writing-mode: vertical-rl;
|
||||
text-align: center;
|
||||
letter-spacing: 5px;
|
||||
font-size: 18px;
|
||||
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 24px;
|
||||
text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.2);
|
||||
background: linear-gradient(180deg, #FFF6C7 0%, #FFC573 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.org-chart-node-label {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-root-label {
|
||||
width: auto!important;
|
||||
height: 40px!important;
|
||||
line-height: 40px!important;
|
||||
min-height: 40px!important;
|
||||
text-align: center;
|
||||
|
||||
.org-chart-node-label-inner {
|
||||
padding: 0 30px!important;
|
||||
writing-mode: horizontal-tb!important;
|
||||
font-size: 18px;
|
||||
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 24px;
|
||||
text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.2);
|
||||
background: linear-gradient(180deg, #FFF6C7 0%, #FFC573 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.org-chart-node-children:before, .org-chart-node:after, .org-chart-node:last-child:before,
|
||||
.org-chart-node.is-leaf:before {
|
||||
border-radius: 0;
|
||||
border-color: #FFBA3E!important;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node:after, .vertical .org-chart-node:before {
|
||||
border-radius: 0;
|
||||
border-color: #FFBA3E!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -13,8 +13,10 @@
|
||||
import Summary5 from './components/Summary5'
|
||||
import Summary6 from './components/Summary6'
|
||||
import Summary7 from './components/Summary7'
|
||||
import Summary8 from './components/Summary8'
|
||||
import Summary9 from './components/Summary9'
|
||||
import Summary10 from './components/Summary10'
|
||||
import Summary11 from './components/Summary11'
|
||||
|
||||
export default {
|
||||
name: 'AiDvSummary',
|
||||
@@ -28,8 +30,10 @@
|
||||
Summary5,
|
||||
Summary6,
|
||||
Summary7,
|
||||
Summary8,
|
||||
Summary9,
|
||||
Summary10
|
||||
Summary10,
|
||||
Summary11
|
||||
},
|
||||
|
||||
props: {
|
||||
|
||||
137
project/dvui/layout/AiDvSummary/components/DonutChart.vue
Normal file
137
project/dvui/layout/AiDvSummary/components/DonutChart.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div class="DonutChart" :id="id">
|
||||
<canvas :id="canvasId"></canvas>
|
||||
<div class="DonutChart-text">
|
||||
<span>{{ ratio }}</span>
|
||||
<i>%</i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['ratio'],
|
||||
|
||||
data () {
|
||||
return {
|
||||
id: `DonutChart-${Math.ceil(Math.random() * 10000)}`,
|
||||
canvasId: `DonutChartCanvas-${Math.ceil(Math.random() * 10000)}`,
|
||||
canvasWidth: 90,
|
||||
canvasHeight: 90
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.init()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
drawLine(ctx, options) {
|
||||
const { beginX, beginY, endX, endY, lineColor, lineWidth } = options
|
||||
ctx.lineWidth = lineWidth
|
||||
ctx.strokeStyle = lineColor
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(beginX, beginY)
|
||||
ctx.lineTo(endX, endY)
|
||||
ctx.closePath()
|
||||
ctx.stroke()
|
||||
},
|
||||
|
||||
angle (a, i, ox, oy, or) {
|
||||
var hudu = (2 * Math.PI / 360) * a * i
|
||||
var x = ox + Math.sin(hudu) * or
|
||||
var y = oy - Math.cos(hudu) * or
|
||||
return x + '_' + y
|
||||
},
|
||||
|
||||
mapColor (value) {
|
||||
if (value < 25) {
|
||||
return '#FFC139'
|
||||
}
|
||||
|
||||
if (value < 50) {
|
||||
return '#21E03E'
|
||||
}
|
||||
|
||||
return '#05C8FF'
|
||||
},
|
||||
|
||||
init () {
|
||||
const ctx = document.querySelector(`#${this.canvasId}`).getContext('2d')
|
||||
const canvasWidth = document.querySelector(`#${this.id}`).offsetWidth
|
||||
const canvasHeight = document.querySelector(`#${this.id}`).offsetHeight
|
||||
const angle = this.ratio / 100 * 2
|
||||
let radian = 0
|
||||
|
||||
ctx.width = canvasWidth
|
||||
ctx.height = canvasHeight
|
||||
const x = canvasWidth / 2
|
||||
const y = canvasHeight / 2
|
||||
ctx.lineWidth = 4
|
||||
ctx.strokeStyle = 'rgba(250, 140, 22, 0.5)'
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, x - 8, 0, 2 * Math.PI)
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.lineWidth = 8
|
||||
ctx.strokeStyle = 'rgba(255, 225, 94, 1)'
|
||||
|
||||
if (this.ratio < 25) {
|
||||
radian = 3 / 2 + angle
|
||||
ctx.arc(x, y, x - 8, Math.PI + Math.PI / 2, Math.PI * radian, false)
|
||||
} else if (this.ratio === 100) {
|
||||
ctx.arc(x, y, x - 8, 0, Math.PI * 2)
|
||||
} else {
|
||||
radian = (this.ratio - 25) / 100 * 2
|
||||
ctx.arc(x, y, x - 8, Math.PI + Math.PI / 2, Math.PI * radian, false)
|
||||
}
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.DonutChart {
|
||||
position: relative;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
overflow: hidden;
|
||||
|
||||
.DonutChart-text {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
justify-content: center;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
span {
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
color: #CEE1FF;
|
||||
text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.1);
|
||||
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
i {
|
||||
position: relative;
|
||||
bottom: -8px;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
color: #CEE1FF;
|
||||
text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.1);
|
||||
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
107
project/dvui/layout/AiDvSummary/components/Summary11.vue
Normal file
107
project/dvui/layout/AiDvSummary/components/Summary11.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="Summary11">
|
||||
<div class="summary5-item" v-for="(item, index) in data" :key="index">
|
||||
<img class="left" src="https://cdn.cunwuyun.cn/dvcp/dv/img/ms.png">
|
||||
<div class="middle">
|
||||
<h2>{{ item[keys] }}</h2>
|
||||
<p>{{ item[value] }}</p>
|
||||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/img/dh.svg">
|
||||
</div>
|
||||
<img class="right" src="https://cdn.cunwuyun.cn/dvcp/dv/img/ms.png">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Summary11',
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
keys: {
|
||||
type: String,
|
||||
default: 'key'
|
||||
},
|
||||
|
||||
value: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
},
|
||||
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Summary11 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.summary5-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
||||
& > img {
|
||||
width: 50px;
|
||||
height: 102px;
|
||||
}
|
||||
|
||||
.right {
|
||||
position: relative;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.middle {
|
||||
flex: 1;
|
||||
// padding: 0 8px;
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
height: 27px;
|
||||
font-size: 20px;
|
||||
color: #CEE1FF;
|
||||
line-height: 27px;
|
||||
text-shadow: 0px 4px 4px rgba(86, 0, 0, 0.1);
|
||||
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 8px 0 4px;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #CEE1FF;
|
||||
line-height: 35px;
|
||||
text-shadow: 0px 4px 4px rgba(117, 9, 9, 0.1);
|
||||
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
124
project/dvui/layout/AiDvSummary/components/Summary8.vue
Normal file
124
project/dvui/layout/AiDvSummary/components/Summary8.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="Summary8">
|
||||
<div class="summary5-item" v-for="(item, index) in arr" :key="index">
|
||||
<div class="left">
|
||||
<DonutChart :ratio="item.ratio"></DonutChart>
|
||||
</div>
|
||||
<div class="right">
|
||||
<h2>{{ item[keys] }}</h2>
|
||||
<p>{{ item[value] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DonutChart from './DonutChart'
|
||||
export default {
|
||||
name: 'Summary8',
|
||||
|
||||
components: {
|
||||
DonutChart
|
||||
},
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
|
||||
keys: {
|
||||
type: String,
|
||||
default: 'key'
|
||||
},
|
||||
|
||||
value: {
|
||||
type: String,
|
||||
default: 'value'
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
data: {
|
||||
handler (v) {
|
||||
if (!v.length) return []
|
||||
|
||||
let sum = 0
|
||||
v.forEach(x => {
|
||||
sum = x[this.value] + sum
|
||||
})
|
||||
|
||||
this.arr = v.map(v => {
|
||||
return {
|
||||
...v,
|
||||
ratio: Number((v[this.value] / sum).toFixed(2)) * 100
|
||||
}
|
||||
})
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
arr: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Summary8 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.summary5-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
||||
.right {
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 12px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
color: #CEE1FF;
|
||||
text-shadow: 0px 2px 4px rgba(117, 9, 9, 0.1);
|
||||
background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -11,7 +11,7 @@
|
||||
</div>
|
||||
<div class="detail-info__item">
|
||||
<h2>获取积分</h2>
|
||||
<span style="color: #2266FF;">{{ info.personalIntegral || 0 }}</span>
|
||||
<span style="color: #2266FF;">{{ (info.personalIntegral + info.personalUsedIntegral) || 0 }}</span>
|
||||
</div>
|
||||
<div class="detail-info__item">
|
||||
<h2>已用积分</h2>
|
||||
|
||||
@@ -87,9 +87,10 @@ export default {
|
||||
label: '用户账号',
|
||||
},
|
||||
{
|
||||
prop: 'personalIntegral',
|
||||
// prop: 'personalIntegral',
|
||||
align: 'center',
|
||||
label: '获取积分',
|
||||
render: (h, {row}) => h('span',null, row.personalIntegral + row.personalUsedIntegral)
|
||||
},
|
||||
{
|
||||
prop: 'personalUsedIntegral',
|
||||
@@ -97,9 +98,10 @@ export default {
|
||||
label: '已用积分',
|
||||
},
|
||||
{
|
||||
prop: 'personalIntegral',
|
||||
align: 'center',
|
||||
label: '剩余积分',
|
||||
render: (h, {row}) => h('span', null, row.personalIntegral - row.personalUsedIntegral)
|
||||
// render: (h, {row}) => h('span', null, row.personalIntegral - row.personalUsedIntegral)
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<template #left>
|
||||
<ai-select placeholder="机构类型" :selectList="dict.getDict('financialOrganizationType')"
|
||||
v-model="search.organizationType" @change="page.current=1,getTableData()"/>
|
||||
<ai-select placeholder="审批状态" :selectList="dict.getDict('financialLoanApplyStatus')"
|
||||
<ai-select placeholder="审批状态" :selectList="dict.getDict('financialLoanApplySearchStatus')"
|
||||
v-model="search.status" @change="page.current=1,getTableData()"/>
|
||||
<ai-search label="申请时间">
|
||||
<el-date-picker size="small" v-model="search.applyTime" type="daterange"
|
||||
@@ -69,22 +69,24 @@ export default {
|
||||
{label: "申请时间", prop: "createTime", width: 160},
|
||||
{label: "贷款机构", prop: "organizationName"},
|
||||
{label: "机构类型", prop: "organizationType", dict: "financialOrganizationType"},
|
||||
{label: "状态", prop: "status", align: "center", dict: "financialLoanApplyStatus"},
|
||||
{label: "状态", prop: "status", align: "center", dict: "financialLoanApplySearchStatus"},
|
||||
{slot: "options"}
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: {name: ""},
|
||||
search: {search: ""},
|
||||
page: {current: 1, size: 10, total: 0},
|
||||
tableData: []
|
||||
tableData: [],
|
||||
// status: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getTableData() {
|
||||
let status = this.search.status || 999
|
||||
this.instance.post("/appfinancialloanapply/list", null, {
|
||||
params: {...this.page, ...this.search}
|
||||
params: {...this.page, ...this.search, status}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.tableData = res.data?.records
|
||||
@@ -103,6 +105,7 @@ export default {
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.dict.load('financialLoanApplySearchStatus')
|
||||
this.getTableData()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -24,13 +24,18 @@
|
||||
<h2 v-text="overviews['累计申请笔数(笔)']"/>
|
||||
<p>总数</p>
|
||||
</div>
|
||||
<ai-echart :ops="circleEchart" :data="[{name:'企业融资',value:overviews['累计申请笔数(笔)']}]"/>
|
||||
<ai-echart :ops="circleEchart" :data="[{name:'企业融资',value:applyInfo['企业融资']}, {name:'个人融资',value:applyInfo['个人贷款']}]"/>
|
||||
</div>
|
||||
<div class="cir-text">
|
||||
<el-row type="flex" justify="space-between" align="middle" class="info">
|
||||
<span class="tips-bg" style="background: #2891FF;"/>
|
||||
<p class="fill">企业融资</p>
|
||||
<div v-text="overviews['累计申请笔数']"/>
|
||||
<div v-text="applyInfo['企业融资']"/>
|
||||
</el-row>
|
||||
<el-row type="flex" justify="space-between" align="middle" class="info">
|
||||
<span class="tips-bg" style="background: #FFB865;"/>
|
||||
<p class="fill">个人融资</p>
|
||||
<div v-text="applyInfo['个人贷款']"/>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
@@ -172,6 +177,7 @@ export default {
|
||||
overviews: [],
|
||||
productTop10: [],
|
||||
tradeTrend: [],
|
||||
applyInfo: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -179,6 +185,16 @@ export default {
|
||||
this.getOverviews()
|
||||
this.getProductTop10()
|
||||
this.getTradeTrend()
|
||||
this.getApply()
|
||||
},
|
||||
getApply() {
|
||||
this.instance.post("/appfinancialloanapply/staticFinancialLoanApplyByMainbody", null, {
|
||||
params: {...this.search}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.applyInfo = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
getOverviews() {
|
||||
this.instance.post("/appfinancialloanapply/staticFinancialLoanApplyByOrganization", null, {
|
||||
|
||||
@@ -48,7 +48,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: {status: 1},
|
||||
search: {status: ''},
|
||||
page: {current: 1, size: 10, total: 0},
|
||||
tableData: [],
|
||||
colConfigs: [
|
||||
@@ -67,8 +67,9 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getTableData() {
|
||||
let status = this.search.status || 999
|
||||
this.instance.post("/appfinancialloanapply/list", null, {
|
||||
params: {...this.page, ...this.search}
|
||||
params: {...this.page, ...this.search, status}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.tableData = res.data?.records
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<template #content>
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<ai-select v-model="search.status" placeholder="状态" :selectList="dict.getDict('financingDemandStatus')"
|
||||
<ai-select v-model="search.status" placeholder="状态" :selectList="dict.getDict('financingDemandSearchStatus')"
|
||||
@change="page.current=1,getTableData()"/>
|
||||
<ai-search label="申请时间">
|
||||
<el-date-picker size="small" placeholder="请选择" type="daterange"
|
||||
@@ -29,7 +29,7 @@
|
||||
@getList="getTableData" :col-configs="colConfigs" :dict="dict">
|
||||
<el-table-column slot="options" label="状态" fixed="right" width="100" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<span :class="`status${row.status}`">{{ dict.getLabel('financingDemandStatus', row.status) }}</span>
|
||||
<span :class="`status${row.status}`">{{ dict.getLabel('financingDemandSearchStatus', row.status) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
@@ -54,7 +54,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: {status: "1"},
|
||||
search: {status: ""},
|
||||
page: {current: 1, size: 10, total: 0},
|
||||
tableData: [],
|
||||
colConfigs: [
|
||||
@@ -74,7 +74,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getTableData() {
|
||||
let status = this.search.status || 999
|
||||
let status = this.search.status || 888
|
||||
this.instance.post("/appfinancingdemand/list", null, {
|
||||
params: {...this.page, ...this.search, status}
|
||||
}).then(res => {
|
||||
@@ -92,7 +92,7 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.dict.load('financingDemandStatus')
|
||||
this.dict.load('financingDemandSearchStatus')
|
||||
this.search.areaId = this.user.info.areaId
|
||||
this.getTableData()
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user