Merge branch 'dev' into vite
# Conflicts: # examples/main.js # examples/router/autoRoutes.js # package.json # packages/bigscreen/designer/AppDesigner.vue # packages/bigscreen/designer/components/Add.vue # packages/bigscreen/designer/components/Layout.vue # packages/bigscreen/designer/components/List.vue # packages/bigscreen/designer/components/SourceData.vue # packages/bigscreen/designer/components/form/DataConfig.vue # packages/bigscreen/designer/config.js # packages/bigscreen/viewer/AppGigscreenViewer.vue # packages/conv/creditScore/scoreManage/scoreChange.vue # packages/index.js # project/dv/apps/AppGridDV.vue # project/dvui/components/AiMonitor/dhVideo.vue # project/dvui/components/AiSwiper.vue # project/dvui/layout/AiDvBackground.vue # project/dvui/layout/AiDvSummary/AiDvSummary.vue # project/dvui/layout/AiDvWrapper/AiDvWrapper.vue # project/dvui/package.json # public/index.html # vue.config.js
This commit is contained in:
aixianling
@@ -30,7 +30,7 @@ export default {
|
||||
.slot {
|
||||
width: 100%;
|
||||
height: calc(100% - 0px);
|
||||
padding: 20px 10px 20px;
|
||||
padding: 40px 10px 20px;
|
||||
background: rgba(120, 0, 0, 0.2);
|
||||
border: 1px solid rgba(203, 45, 0, 0.5);
|
||||
}
|
||||
|
||||
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;
|
||||
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;
|
||||
text-align: center;
|
||||
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>
|
||||
Reference in New Issue
Block a user