Merge remote-tracking branch 'origin/dev' into dev
This commit is contained in:
		| @@ -403,7 +403,7 @@ | |||||||
|           value: '0' |           value: '0' | ||||||
|         }], |         }], | ||||||
|         images: [], |         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'] |         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-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> |       <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> |       <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> |     </ai-dv-panel> | ||||||
|   </div> |   </div> | ||||||
| </template> | </template> | ||||||
| @@ -155,7 +156,7 @@ | |||||||
|   export default { |   export default { | ||||||
|     name: 'RenderElement', |     name: 'RenderElement', | ||||||
|  |  | ||||||
|     props: ['data', 'index', 'theme'], |     props: ['data', 'index', 'theme', 'instance'], | ||||||
|  |  | ||||||
|     components: { |     components: { | ||||||
|       AiSwiper |       AiSwiper | ||||||
| @@ -222,15 +223,6 @@ | |||||||
|   .render-element { |   .render-element { | ||||||
|     ::v-deep .dvScrollBoard1 { |     ::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 { |       .header { | ||||||
|         background: rgba(0, 0, 0, 0.1)!important; |         background: rgba(0, 0, 0, 0.1)!important; | ||||||
|  |  | ||||||
| @@ -251,9 +243,19 @@ | |||||||
|         background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%); |         background: linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%); | ||||||
|         -webkit-background-clip: text; |         -webkit-background-clip: text; | ||||||
|         -webkit-text-fill-color: transparent; |         -webkit-text-fill-color: transparent; | ||||||
|  |  | ||||||
|         & > div:nth-of-type(2n) { |         & > div:nth-of-type(2n) { | ||||||
|           background: rgba(0, 0, 0, 0.1)!important; |           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: '边框', |         label: '边框', | ||||||
|         type: 'panel', |         type: 'panel', | ||||||
|   | |||||||
| @@ -14,7 +14,7 @@ | |||||||
|         }" |         }" | ||||||
|           v-for="(item, index) in componentList" |           v-for="(item, index) in componentList" | ||||||
|           :key="index"> |           :key="index"> | ||||||
|         <RenderElement :data="item" :index="index" :theme="dashboard.theme"></RenderElement> |         <RenderElement :instance="instance" :data="item" :index="index" :theme="dashboard.theme"></RenderElement> | ||||||
|       </div> |       </div> | ||||||
|     </div> |     </div> | ||||||
|     <components v-else :is="component" :dict="dict" :instance="instance" :nav="meta"/> |     <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 Summary5 from './components/Summary5' | ||||||
|   import Summary6 from './components/Summary6' |   import Summary6 from './components/Summary6' | ||||||
|   import Summary7 from './components/Summary7' |   import Summary7 from './components/Summary7' | ||||||
|  |   import Summary8 from './components/Summary8' | ||||||
|   import Summary9 from './components/Summary9' |   import Summary9 from './components/Summary9' | ||||||
|   import Summary10 from './components/Summary10' |   import Summary10 from './components/Summary10' | ||||||
|  |   import Summary11 from './components/Summary11' | ||||||
|  |  | ||||||
|   export default { |   export default { | ||||||
|     name: 'AiDvSummary', |     name: 'AiDvSummary', | ||||||
| @@ -28,8 +30,10 @@ | |||||||
|       Summary5, |       Summary5, | ||||||
|       Summary6, |       Summary6, | ||||||
|       Summary7, |       Summary7, | ||||||
|  |       Summary8, | ||||||
|       Summary9, |       Summary9, | ||||||
|       Summary10 |       Summary10, | ||||||
|  |       Summary11 | ||||||
|     }, |     }, | ||||||
|  |  | ||||||
|     props: { |     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> | ||||||
|         <div class="detail-info__item"> |         <div class="detail-info__item"> | ||||||
|           <h2>获取积分</h2> |           <h2>获取积分</h2> | ||||||
|           <span style="color: #2266FF;">{{ info.personalIntegral || 0 }}</span> |           <span style="color: #2266FF;">{{ (info.personalIntegral + info.personalUsedIntegral) || 0 }}</span> | ||||||
|         </div> |         </div> | ||||||
|         <div class="detail-info__item"> |         <div class="detail-info__item"> | ||||||
|           <h2>已用积分</h2> |           <h2>已用积分</h2> | ||||||
|   | |||||||
| @@ -87,9 +87,10 @@ export default { | |||||||
|           label: '用户账号', |           label: '用户账号', | ||||||
|         }, |         }, | ||||||
|         { |         { | ||||||
|           prop: 'personalIntegral', |           // prop: 'personalIntegral', | ||||||
|           align: 'center', |           align: 'center', | ||||||
|           label: '获取积分', |           label: '获取积分', | ||||||
|  |           render: (h, {row}) => h('span',null, row.personalIntegral + row.personalUsedIntegral) | ||||||
|         }, |         }, | ||||||
|         { |         { | ||||||
|           prop: 'personalUsedIntegral', |           prop: 'personalUsedIntegral', | ||||||
| @@ -97,9 +98,10 @@ export default { | |||||||
|           label: '已用积分', |           label: '已用积分', | ||||||
|         }, |         }, | ||||||
|         { |         { | ||||||
|  |           prop: 'personalIntegral', | ||||||
|           align: 'center', |           align: 'center', | ||||||
|           label: '剩余积分', |           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> |                   <template #left> | ||||||
|                     <ai-select placeholder="机构类型" :selectList="dict.getDict('financialOrganizationType')" |                     <ai-select placeholder="机构类型" :selectList="dict.getDict('financialOrganizationType')" | ||||||
|                                v-model="search.organizationType" @change="page.current=1,getTableData()"/> |                                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()"/> |                                v-model="search.status" @change="page.current=1,getTableData()"/> | ||||||
|                     <ai-search label="申请时间"> |                     <ai-search label="申请时间"> | ||||||
|                       <el-date-picker size="small" v-model="search.applyTime" type="daterange" |                       <el-date-picker size="small" v-model="search.applyTime" type="daterange" | ||||||
| @@ -69,22 +69,24 @@ export default { | |||||||
|         {label: "申请时间", prop: "createTime", width: 160}, |         {label: "申请时间", prop: "createTime", width: 160}, | ||||||
|         {label: "贷款机构", prop: "organizationName"}, |         {label: "贷款机构", prop: "organizationName"}, | ||||||
|         {label: "机构类型", prop: "organizationType", dict: "financialOrganizationType"}, |         {label: "机构类型", prop: "organizationType", dict: "financialOrganizationType"}, | ||||||
|         {label: "状态", prop: "status", align: "center", dict: "financialLoanApplyStatus"}, |         {label: "状态", prop: "status", align: "center", dict: "financialLoanApplySearchStatus"}, | ||||||
|         {slot: "options"} |         {slot: "options"} | ||||||
|       ] |       ] | ||||||
|     } |     } | ||||||
|   }, |   }, | ||||||
|   data() { |   data() { | ||||||
|     return { |     return { | ||||||
|       search: {name: ""}, |       search: {search: ""}, | ||||||
|       page: {current: 1, size: 10, total: 0}, |       page: {current: 1, size: 10, total: 0}, | ||||||
|       tableData: [] |       tableData: [], | ||||||
|  |       // status: '' | ||||||
|     } |     } | ||||||
|   }, |   }, | ||||||
|   methods: { |   methods: { | ||||||
|     getTableData() { |     getTableData() { | ||||||
|  |       let status = this.search.status || 999 | ||||||
|       this.instance.post("/appfinancialloanapply/list", null, { |       this.instance.post("/appfinancialloanapply/list", null, { | ||||||
|         params: {...this.page, ...this.search} |         params: {...this.page, ...this.search, status} | ||||||
|       }).then(res => { |       }).then(res => { | ||||||
|         if (res?.data) { |         if (res?.data) { | ||||||
|           this.tableData = res.data?.records |           this.tableData = res.data?.records | ||||||
| @@ -103,6 +105,7 @@ export default { | |||||||
|     }, |     }, | ||||||
|   }, |   }, | ||||||
|   created() { |   created() { | ||||||
|  |     this.dict.load('financialLoanApplySearchStatus') | ||||||
|     this.getTableData() |     this.getTableData() | ||||||
|   } |   } | ||||||
| } | } | ||||||
|   | |||||||
| @@ -24,13 +24,18 @@ | |||||||
|                 <h2 v-text="overviews['累计申请笔数(笔)']"/> |                 <h2 v-text="overviews['累计申请笔数(笔)']"/> | ||||||
|                 <p>总数</p> |                 <p>总数</p> | ||||||
|               </div> |               </div> | ||||||
|               <ai-echart :ops="circleEchart" :data="[{name:'企业融资',value:overviews['累计申请笔数(笔)']}]"/> |               <ai-echart :ops="circleEchart" :data="[{name:'企业融资',value:applyInfo['企业融资']}, {name:'个人融资',value:applyInfo['个人贷款']}]"/> | ||||||
|             </div> |             </div> | ||||||
|             <div class="cir-text"> |             <div class="cir-text"> | ||||||
|               <el-row type="flex" justify="space-between" align="middle" class="info"> |               <el-row type="flex" justify="space-between" align="middle" class="info"> | ||||||
|                 <span class="tips-bg" style="background: #2891FF;"/> |                 <span class="tips-bg" style="background: #2891FF;"/> | ||||||
|                 <p class="fill">企业融资</p> |                 <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> |               </el-row> | ||||||
|             </div> |             </div> | ||||||
|           </div> |           </div> | ||||||
| @@ -172,6 +177,7 @@ export default { | |||||||
|       overviews: [], |       overviews: [], | ||||||
|       productTop10: [], |       productTop10: [], | ||||||
|       tradeTrend: [], |       tradeTrend: [], | ||||||
|  |       applyInfo: {} | ||||||
|     } |     } | ||||||
|   }, |   }, | ||||||
|   methods: { |   methods: { | ||||||
| @@ -179,6 +185,16 @@ export default { | |||||||
|       this.getOverviews() |       this.getOverviews() | ||||||
|       this.getProductTop10() |       this.getProductTop10() | ||||||
|       this.getTradeTrend() |       this.getTradeTrend() | ||||||
|  |       this.getApply() | ||||||
|  |     }, | ||||||
|  |     getApply() { | ||||||
|  |       this.instance.post("/appfinancialloanapply/staticFinancialLoanApplyByMainbody", null, { | ||||||
|  |         params: {...this.search} | ||||||
|  |       }).then(res => { | ||||||
|  |         if (res?.data) { | ||||||
|  |           this.applyInfo = res.data | ||||||
|  |         } | ||||||
|  |       }) | ||||||
|     }, |     }, | ||||||
|     getOverviews() { |     getOverviews() { | ||||||
|       this.instance.post("/appfinancialloanapply/staticFinancialLoanApplyByOrganization", null, { |       this.instance.post("/appfinancialloanapply/staticFinancialLoanApplyByOrganization", null, { | ||||||
|   | |||||||
| @@ -48,7 +48,7 @@ export default { | |||||||
|   }, |   }, | ||||||
|   data() { |   data() { | ||||||
|     return { |     return { | ||||||
|       search: {status: 1}, |       search: {status: ''}, | ||||||
|       page: {current: 1, size: 10, total: 0}, |       page: {current: 1, size: 10, total: 0}, | ||||||
|       tableData: [], |       tableData: [], | ||||||
|       colConfigs: [ |       colConfigs: [ | ||||||
| @@ -67,8 +67,9 @@ export default { | |||||||
|   }, |   }, | ||||||
|   methods: { |   methods: { | ||||||
|     getTableData() { |     getTableData() { | ||||||
|  |       let status = this.search.status || 999 | ||||||
|       this.instance.post("/appfinancialloanapply/list", null, { |       this.instance.post("/appfinancialloanapply/list", null, { | ||||||
|         params: {...this.page, ...this.search} |         params: {...this.page, ...this.search, status} | ||||||
|       }).then(res => { |       }).then(res => { | ||||||
|         if (res?.data) { |         if (res?.data) { | ||||||
|           this.tableData = res.data?.records |           this.tableData = res.data?.records | ||||||
|   | |||||||
| @@ -6,7 +6,7 @@ | |||||||
|       <template #content> |       <template #content> | ||||||
|         <ai-search-bar> |         <ai-search-bar> | ||||||
|           <template #left> |           <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()"/> |                        @change="page.current=1,getTableData()"/> | ||||||
|             <ai-search label="申请时间"> |             <ai-search label="申请时间"> | ||||||
|               <el-date-picker size="small" placeholder="请选择" type="daterange" |               <el-date-picker size="small" placeholder="请选择" type="daterange" | ||||||
| @@ -29,7 +29,7 @@ | |||||||
|                   @getList="getTableData" :col-configs="colConfigs" :dict="dict"> |                   @getList="getTableData" :col-configs="colConfigs" :dict="dict"> | ||||||
|           <el-table-column slot="options" label="状态" fixed="right" width="100" align="center"> |           <el-table-column slot="options" label="状态" fixed="right" width="100" align="center"> | ||||||
|             <template slot-scope="{row}"> |             <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> |             </template> | ||||||
|           </el-table-column> |           </el-table-column> | ||||||
|         </ai-table> |         </ai-table> | ||||||
| @@ -54,7 +54,7 @@ export default { | |||||||
|   }, |   }, | ||||||
|   data() { |   data() { | ||||||
|     return { |     return { | ||||||
|       search: {status: "1"}, |       search: {status: ""}, | ||||||
|       page: {current: 1, size: 10, total: 0}, |       page: {current: 1, size: 10, total: 0}, | ||||||
|       tableData: [], |       tableData: [], | ||||||
|       colConfigs: [ |       colConfigs: [ | ||||||
| @@ -74,7 +74,7 @@ export default { | |||||||
|   }, |   }, | ||||||
|   methods: { |   methods: { | ||||||
|     getTableData() { |     getTableData() { | ||||||
|       let status = this.search.status || 999 |       let status = this.search.status || 888 | ||||||
|       this.instance.post("/appfinancingdemand/list", null, { |       this.instance.post("/appfinancingdemand/list", null, { | ||||||
|         params: {...this.page, ...this.search, status} |         params: {...this.page, ...this.search, status} | ||||||
|       }).then(res => { |       }).then(res => { | ||||||
| @@ -92,7 +92,7 @@ export default { | |||||||
|     } |     } | ||||||
|   }, |   }, | ||||||
|   created() { |   created() { | ||||||
|     this.dict.load('financingDemandStatus') |     this.dict.load('financingDemandSearchStatus') | ||||||
|     this.search.areaId = this.user.info.areaId |     this.search.areaId = this.user.info.areaId | ||||||
|     this.getTableData() |     this.getTableData() | ||||||
|   } |   } | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user