kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

黔西南大屏

Browse Source
This commit is contained in:
yanran200730
2023-04-23 17:50:29 +08:00
parent 69b2bd6b6f
commit 605f8a33f6
4 changed files with 1262 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
packages/bigscreen/dv/components/DoughnutChart.vue Normal file
View File

@@ -0,0 +1,185 @@
<template>
<div class="DoughnutChart-wrapper">
<div class="DoughnutChart" :id="id">
<canvas :id="canvasId"></canvas>
<div class="DonutChart-text">
<span>{{ ratio }}%</span>
</div>
</div>
<div class="DoughnutChart-explain">
<div class="item">
<i></i>
<span>已激活成员</span>
<p>2142</p>
</div>
<div class="item">
<i></i>
<span>未激活成员</span>
<p>2142</p>
</div>
</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(102, 121, 138, 0.3)'
ctx.beginPath();
ctx.arc(x, y, x - 8, 0, 2 * Math.PI)
ctx.stroke()
ctx.beginPath()
ctx.lineWidth = 4
var g = ctx.createLinearGradient(0, 0, 0, 80)
g.addColorStop(0, 'rgba(44, 150, 231, 0.8)')
g.addColorStop(1, 'rgba(92, 255, 243, 1)')
ctx.strokeStyle = g
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()
ctx.beginPath()
ctx.strokeStyle = 'rgba(102, 121, 138, 0.4)'
ctx.lineWidth = 1
ctx.arc(x, y, x - 15, 0, 2 * Math.PI)
ctx.stroke()
}
}
}
</script>
<style lang="scss" scoped>
.DoughnutChart-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
padding-top: 12px;
.DoughnutChart-explain {
flex: 1;
margin-left: 12px;
.item {
display: flex;
align-items: center;
i {
width: 8px;
height: 8px;
margin-right: 6px;
border-radius: 50%;
background: #5AF9F0;
}
span {
margin-right: 24px;
font-weight: 400;
font-size: 14px;
color: #9BB7D4;
}
p {
font-size: 14px;
color: #FFFFFF;
}
&:last-child i {
background: rgba(102, 121, 138, 0.3);
}
}
}
.DoughnutChart {
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: 18px;
font-weight: bold;
color: #02FEFF;
}
}
}
}
</style>

271
packages/bigscreen/dv/components/DvMap.vue Normal file
View File

@@ -0,0 +1,271 @@
<template>
<div class="AiDvMap" v-resize="onDomResize">
<div class="chart-map" :class="v" style="width: 100%; height: 100%"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import http from "dui/lib/js/request";
export default {
name: 'AiDvMap',
data() {
return {
timer: null,
v: `AiDvMap-${new Date().getTime()}`,
chart: null
}
},
directives: {
resize: {
bind(el, binding) {
let width = ''
let height = ''
function isReize() {
const style = document.defaultView.getComputedStyle(el)
if (width !== style.width || height !== style.height) {
binding.value({
width: style.width,
height: style.height
})
}
width = style.width
height = style.height
}
el.__vueSetInterval__ = setInterval(isReize, 300)
},
unbind(el) {
clearInterval(el.__vueSetInterval__)
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
methods: {
onDomResize() {
this.$nextTick(() => {
this.chart.resize()
})
},
initChart() {
this.chart = echarts.init(document.querySelector(`.${this.v}`))
this.getData().then(res => {
if (res.code === 0) {
echarts.registerMap('黔西南', res.data)
let option = {
geo: [
{
map: "黔西南",
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "50%"],
layoutSize: "180%",
show: true,
roam: false,
emphasis: {
show: true,
label: {
textStyle: {
color: "#FFFFFF"
},
},
itemStyle: {
// areaColor: '#fff'
}
},
label: {
normal: {
show: true,
color: '#fff',
fontSize: '15'
}
},
itemStyle: {
normal: {
borderColor: "rgba(2, 254, 255, 0.7)",
borderWidth: 2,
shadowColor: "rgba(2, 254, 255, 0.1)",
shadowOffsetY: 10,
shadowBlur: 120,
areaColor: "#0f7295",
},
}
},
// 重影
{
type: "map",
map: "黔西南",
zlevel: -1,
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "51%"],
layoutSize: "180%",
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 1,
// borderColor:"rgba(17, 149, 216,0.6)",
borderColor: "rgba(2, 254, 255, 0.3)",
shadowColor: "rgba(2, 254, 255, 0.3)",
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: "rgba(5,21,35,0.1)",
},
},
},
{
type: "map",
map: "黔西南",
zlevel: -2,
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "52%"],
layoutSize: "180%",
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 1,
// borderColor: "rgba(57, 132, 188,0.4)",
borderColor: "rgba(2, 254, 255, 0.2)",
shadowColor: "rgba(2, 254, 255, 0.24)",
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: "transpercent",
},
},
},
{
type: "map",
map: "黔西南",
zlevel: -3,
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "53%"],
layoutSize: "180%",
roam: false,
silent: true,
itemStyle: {
normal: {
borderWidth: 1,
// borderColor: "rgba(11, 43, 97,0.8)",
borderColor: "rgba(2, 254, 255, 0.1)",
shadowColor: "rgba(2, 254, 255, 0.1)",
shadowOffsetY: 15,
shadowBlur: 10,
areaColor: "transpercent",
},
},
}
],
series: [
{
type: 'scatter',
map: "黔西南",
coordinateSystem: 'geo',
z: 3,
zlevel: 3,
// symbol: 'none',
symbolSize: 16,
rippleEffect: {
period: 2,
scale: 4,
brushType: 'fill'
},
label: {
show: false
},
roam: false,
itemStyle: {
normal: {
areaColor: '#000',
borderColor: '#a18a3a',
borderWidth: 1
},
emphasis: {
show: false,
areaColor: null
}
},
// label: {
// show: true,
// formatter: e => {
// const name = e.data[3]
// const value = e.data[2]
// return `{a|${name}}\n{b|${value}}`
// },
// fontSize: 16,
// rich: {
// a: {
// width: '100%',
// color: '#fff',
// lineHeight: 20,
// fontSize: 16
// },
// b: {
// backgroundColor: {
// // image: require('@/assets/images/point.png')
// },
// color: '#fff',
// height: 56,
// align: 'center',
// width: 50,
// fontSize: 16
// }
// }
// },
data: []
}
]
}
this.chart.setOption(option)
}
})
},
convertData(data) {
return data.map(v => {
return [this.qqMapTransBMap(v.point[1], v.point[0]).lng, this.qqMapTransBMap(v.point[1], v.point[0]).lat, v.value, v.name]
})
},
qqMapTransBMap(lng, lat) {
const x_pi = 3.14159265358979324 * 3000.0 / 180.0
var x = lng
var y = lat
var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi)
var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi)
return {
lng: z * Math.cos(theta) + 0.0065,
lat: z * Math.sin(theta) + 0.006
}
},
getData() {
return http.post(`/app/appdvcpconfig/apiForward?url=${encodeURIComponent(`https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=522300_full`)}`,)
}
}
}
</script>
<style lang="scss" scoped>
.AiDvMap {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
</style>