大屏
This commit is contained in:
yanran200730
209
project/dv/apps/components/AiGrid.vue
Normal file
209
project/dv/apps/components/AiGrid.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<div class="AiGrid" ref="container">
|
||||
<div
|
||||
class="AiGrid-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: 'AiGrid',
|
||||
|
||||
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>
|
||||
.AiGrid {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.AiGrid-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;
|
||||
border: 1px solid;
|
||||
background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%)!important;
|
||||
border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1!important;
|
||||
|
||||
.org-chart-node-label-inner {
|
||||
line-height: 1.3;
|
||||
padding: 10px 4px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #a2afba;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&: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;
|
||||
background: linear-gradient(180deg, rgba(69,210,218,0.2500) 0%, rgba(69,210,218,0.1000) 100%)!important;
|
||||
border-image: linear-gradient(180deg, rgba(5, 185, 203, 1), rgba(73, 214, 207, 1)) 1 1!important;
|
||||
|
||||
.org-chart-node-label-inner {
|
||||
padding: 0 30px!important;
|
||||
color: #fff!important;
|
||||
}
|
||||
}
|
||||
|
||||
.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: #23A0AC!important;
|
||||
}
|
||||
|
||||
.vertical .org-chart-node:after, .vertical .org-chart-node:before {
|
||||
border-radius: 0;
|
||||
border-color: #23A0AC!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
133
project/dv/apps/components/DonutChart.vue
Normal file
133
project/dv/apps/components/DonutChart.vue
Normal file
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="DonutChart" :id="id">
|
||||
<canvas :id="canvasId"></canvas>
|
||||
<div class="DonutChart-text">
|
||||
<span>{{ ratio }}%</span>
|
||||
<i>{{ text }}</i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['ratio', 'text'],
|
||||
|
||||
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 = 2
|
||||
ctx.strokeStyle = '#383f56'
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, x - 3, 0, 2 * Math.PI)
|
||||
ctx.stroke()
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.lineWidth = 4
|
||||
ctx.strokeStyle = 'rgba(76, 202, 227, 1)'
|
||||
|
||||
if (this.ratio < 25) {
|
||||
radian = 3 / 2 + angle
|
||||
ctx.arc(x, y, x - 4, Math.PI + Math.PI / 2, Math.PI * radian, false)
|
||||
} else if (this.ratio === 100) {
|
||||
ctx.arc(x, y, x - 4, 0, Math.PI * 2)
|
||||
} else {
|
||||
radian = (this.ratio - 25) / 100 * 2
|
||||
ctx.arc(x, y, x - 4, Math.PI + Math.PI / 2, Math.PI * radian, false)
|
||||
}
|
||||
ctx.stroke()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.DonutChart {
|
||||
position: relative;
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
overflow: hidden;
|
||||
|
||||
.DonutChart-text {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
span {
|
||||
margin-bottom: 8px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-style: oblique;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
color: rgba(42, 183, 209, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user