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