feat 交通大屏
This commit is contained in:
duanliang
75
src/components/CountItem/index.vue
Normal file
75
src/components/CountItem/index.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="count-item">
|
||||
<div class="flex align-center">
|
||||
<img src="@/assets/images/dian.svg" />
|
||||
<span class="label">{{ label }}</span>
|
||||
</div>
|
||||
<div class="count">
|
||||
<img class="bg" src="@/assets/images/mask-success.png" />
|
||||
<div class="flex align-center">
|
||||
<countup class="value" :end-val="count" />
|
||||
<span class="suffix">{{ suffix }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import countup from 'vue-countup-v3'
|
||||
|
||||
let props = defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
count: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
mode: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
suffix: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.count-item {
|
||||
flex: 1;
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
margin-left: vw(4);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
.count {
|
||||
position: relative;
|
||||
margin-top: vh(10);
|
||||
z-index: 1;
|
||||
.value {
|
||||
padding-left: vw(20);
|
||||
font-weight: bold;
|
||||
font-size: vw(28);
|
||||
color: #02f9fa;
|
||||
}
|
||||
.suffix {
|
||||
margin-top: vh(4);
|
||||
font-weight: bold;
|
||||
font-size: vw(12);
|
||||
color: #02f9fa;
|
||||
}
|
||||
.bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: vw(134);
|
||||
height: vh(30);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
124
src/components/PieCol/index.vue
Normal file
124
src/components/PieCol/index.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div
|
||||
:id="id"
|
||||
:style="{
|
||||
width: styleUtil.px2vw(width),
|
||||
height: styleUtil.px2vh(height)
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts'
|
||||
import styleUtil from '@/utils/styleUtil'
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import { guid } from '@/utils/util'
|
||||
|
||||
const props = defineProps({
|
||||
width: {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
let id = ref(guid())
|
||||
let pieChart = null
|
||||
var colorList = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA', '']
|
||||
var title = ['企业', '农业', '工业', '纺织']
|
||||
var dataValue = ['15', '30', '35', '20']
|
||||
var dataList = title.map((item, index) => {
|
||||
return {
|
||||
name: item,
|
||||
value: dataValue[index]
|
||||
}
|
||||
})
|
||||
|
||||
var defaultCofig = {
|
||||
color: colorList,
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
bottom: '10%',
|
||||
left: '4%',
|
||||
data: dataList,
|
||||
itemWidth: fitChartSize(16),
|
||||
itemHeight: fitChartSize(16),
|
||||
itemGap: fitChartSize(10),
|
||||
formatter: (name) => {
|
||||
return name + '\u3000' + '19%'
|
||||
},
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: fitChartSize(12)
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['50%', '40%'],
|
||||
radius: ['55%', '70%'],
|
||||
itemStyle: {
|
||||
borderWidth: fitChartSize(4),
|
||||
borderColor: '#093672'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
fontWeight: 'bold',
|
||||
formatter: function (o) {
|
||||
return `{value|123456}` + '\n' + `{name|整改率}`
|
||||
},
|
||||
rich: {
|
||||
value: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(24),
|
||||
fontWeight: 'bold',
|
||||
padding: [0, 0, 5, 0]
|
||||
},
|
||||
name: {
|
||||
color: '#7894A8',
|
||||
fontSize: fitChartSize(12)
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: dataList
|
||||
}
|
||||
]
|
||||
}
|
||||
const resize = () => {
|
||||
if (pieChart) {
|
||||
pieChart.dispose()
|
||||
pieChart = null
|
||||
init()
|
||||
}
|
||||
}
|
||||
|
||||
const init = () => {
|
||||
const dom = document.getElementById(id.value)
|
||||
pieChart = echarts.init(dom)
|
||||
pieChart.setOption({
|
||||
...defaultCofig,
|
||||
...props.config
|
||||
})
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', resize)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -13,6 +13,7 @@
|
||||
import styleUtil from '@/utils/styleUtil'
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
import { guid } from '@/utils/util'
|
||||
|
||||
const props = defineProps({
|
||||
width: {
|
||||
type: Number,
|
||||
@@ -21,6 +22,12 @@
|
||||
height: {
|
||||
type: Number,
|
||||
default: () => 0
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -38,57 +45,55 @@
|
||||
|
||||
var defaultCofig = {
|
||||
color: colorList,
|
||||
title: {
|
||||
show: true,
|
||||
text: '100%',
|
||||
itemGap: 10,
|
||||
x: 'center',
|
||||
y: '30%',
|
||||
subtext: '脱岗率',
|
||||
textStyle: {
|
||||
fontSize: fitChartSize(24),
|
||||
fontWeight: 'bold',
|
||||
color: '#ffffff'
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
bottom: 'center',
|
||||
left: '70%',
|
||||
data: dataList,
|
||||
itemWidth: fitChartSize(16),
|
||||
itemHeight: fitChartSize(16),
|
||||
itemGap: fitChartSize(10),
|
||||
formatter: (name) => {
|
||||
return name + '\u3000' + '19%'
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: fitChartSize(12),
|
||||
fontWeight: 'bold',
|
||||
color: '#7894A8'
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: fitChartSize(12)
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 'bottom',
|
||||
left: 'center',
|
||||
orient: 'horizontal',
|
||||
data: dataList,
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
itemGap: 10
|
||||
},
|
||||
|
||||
series: [
|
||||
// 展示层
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['50%', '30%'],
|
||||
center: ['30%', '50%'],
|
||||
radius: ['40%', '55%'],
|
||||
itemStyle: {
|
||||
borderWidth: fitChartSize(2), //描边线宽
|
||||
borderWidth: fitChartSize(4),
|
||||
borderColor: '#093672'
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
normal: {
|
||||
length: 20,
|
||||
length2: 40,
|
||||
align: 'center',
|
||||
lineStyle: {
|
||||
width: 1
|
||||
position: 'center',
|
||||
fontWeight: 'bold',
|
||||
formatter: function (o) {
|
||||
return `{value|123456}` + '\n' + `{name|整改率}`
|
||||
},
|
||||
rich: {
|
||||
value: {
|
||||
color: '#fff',
|
||||
fontSize: fitChartSize(24),
|
||||
fontWeight: 'bold',
|
||||
padding: [0, 0, 5, 0]
|
||||
},
|
||||
name: {
|
||||
color: '#7894A8',
|
||||
fontSize: fitChartSize(12)
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: dataList
|
||||
}
|
||||
]
|
||||
@@ -105,7 +110,8 @@
|
||||
const dom = document.getElementById(id.value)
|
||||
pieChart = echarts.init(dom)
|
||||
pieChart.setOption({
|
||||
...defaultCofig
|
||||
...defaultCofig,
|
||||
...props.config
|
||||
})
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', resize)
|
||||
@@ -31,7 +31,6 @@
|
||||
|
||||
<script setup>
|
||||
import { fitChartSize } from '@/utils/dataUtil'
|
||||
let searchValue = ref('')
|
||||
const options = reactive({
|
||||
src: "http://192.168.1.60:8080/live/340200000013200000011_34020000001320000001/hls.m3u8", //视频源
|
||||
type: 'm3u8', //视频类型
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
let searchValue = ref('')
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
//背景色设置为透明
|
||||
|
||||
Reference in New Issue
Block a user