lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：新增景区页面

Browse Source
This commit is contained in:
zjc
2024-12-17 18:18:07 +08:00
parent 5e5ce522db
commit 1108aafed4
22 changed files with 1061 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/home/components/pie.vue → src/views/home/components/age-ratio.vue
View File

@@ -1,33 +1,22 @@
<template>
<div class="pie" :id="id" />
<div class="age-ratio" id="age-ratio" />
</template>
<script setup>
import * as echarts from 'echarts'
import { fitChartSize } from '@/utils/dataUtil'
const props = defineProps({
id: {
type: String,
default: () => ''
}
})
let ageChart = null
let gaugeChart = null
onMounted(() => {
init()
})
const init = () => {
// 基于准备好的dom，初始化echarts实例
gaugeChart = echarts.init(document.getElementById(props.id))
gaugeChart.setOption({
ageChart = echarts.init(document.getElementById('age-ratio'))
ageChart.setOption({
tooltip: {
trigger: 'item'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['30%', '40%'],
itemStyle: {
@@ -59,15 +48,20 @@
window.addEventListener('resize', resize)
}
const resize = () => {
if (gaugeChart) {
gaugeChart.dispose()
if (ageChart) {
ageChart.dispose()
ageChart = null
init()
}
}
onMounted(() => {
init()
})
</script>
<style lang="scss" scoped>
.pie {
.age-ratio {
width: vw(253);
height: vh(100);
}

93
src/views/home/components/box-1.vue
View File

@@ -1,93 +0,0 @@
<template>
<div class="box-1">
<div class="title">核心景区视频</div>
<ul class="list">
<li
class="item"
:style="{ backgroundImage: `url(${index == 0 ? item1 : item2})` }"
v-for="(item, index) in 10"
:key="index"
>
<p class="item-title">三峡之巅-最新异常名称</p>
<img class="item-img" src="@/assets/images/cover.png" />
</li>
</ul>
</div>
</template>
<script setup>
import item1 from '@/assets/images/item-1.png'
import item2 from '@/assets/images/item-2.png'
</script>
<style lang="scss" scoped>
.box-1 {
margin: vh(10);
width: vw(326);
border-radius: vw(2);
background-image: url('@/assets/images/bg-1.png');
background-size: 100% 100%;
.title {
width: vw(260);
height: vh(26);
text-align: center;
line-height: vh(26);
margin-left: vw(32.5);
font-size: vw(16);
font-weight: 800;
color: #fff;
background-image: url('@/assets/images/title-1.png');
background-size: 100% 100%;
}
.list {
overflow-y: auto;
overflow-x: hidden;
height: vh(1026);
padding: vw(8);
/* 滚动条整体样式 */
&::-webkit-scrollbar {
width: vw(0); /* 滚动条的宽度 */
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background: #f1f1f1; /* 轨道的背景色 */
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
background: #888; /* 滑块的背景色 */
border-radius: 5px; /* 滑块的圆角 */
}
/* 当鼠标悬停在滚动条上时滑块的样式 */
&::-webkit-scrollbar-thumb:hover {
background: #555; /* 滑块的背景色 */
}
}
.item {
margin-bottom: vh(13);
background-size: 100% 100%;
&-title {
margin-bottom: vh(6);
margin-left: vw(45);
color: #fff;
font-size: vw(16);
height: vh(24);
line-height: vh(24);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&-img {
width: 100%;
height: vh(164);
display: block;
object-fit: cover;
}
}
}
</style>

4
src/views/home/components/box-2.vue
View File

@@ -91,7 +91,7 @@
<div class="flex">
<div class="box-1">
<Title3 title="年龄/性别占比" />
<pie id="pie" />
<age-ratio />
<div class="count">总人数：<countup endVal="124563" /></div>
<div class="cell pt-20">
<img class="icon" src="@/assets/images/man.png" />
@@ -138,7 +138,7 @@
<script setup>
import countup from 'vue-countup-v3'
import pie from './pie.vue'
import AgeRatio from './age-ratio.vue'
import top from './top.vue'
import gauge from './gauge.vue'
import ticket from './ticket.vue'

53
src/views/home/components/box-3.vue
View File

@@ -44,7 +44,7 @@
<div class="footer">
<div class="left">
<div>
<div class="flex">
<div class="flex justify-center pt-10">
<div class="item">
<p class="label">今日工单总条数</p>
<countup :endVal="1234" />
@@ -54,10 +54,21 @@
<countup :endVal="1234" />
</div>
</div>
<p>工单完成数</p>
<div class="progress-box">
<span class="text">工单完成数</span>
<div class="progress">
<el-progress
:percentage="50"
:show-text="false"
color="linear-gradient( to right,
#00C4F9 0%, #00C4F9 100%)"
/>
</div>
<span class="value">50%</span>
</div>
</div>
<div>
<div class="flex">
<div class="flex justify-center pt-10">
<div class="item">
<p class="label">紧急工单数</p>
<countup :endVal="1234" />
@@ -67,7 +78,18 @@
<countup :endVal="1234" />
</div>
</div>
<p>工单完成数</p>
<div class="progress-box">
<span class="text">工单完成数</span>
<div class="progress">
<el-progress
:percentage="50"
:show-text="false"
color="linear-gradient( to right,
#DA3637 0%, #DA3637 100%)"
/>
</div>
<span class="value">50%</span>
</div>
</div>
</div>
<div class="right">
@@ -166,9 +188,11 @@
.left {
flex: 1;
display: flex;
margin-top: vh(4);
& > div {
flex: 1;
height: vh(110);
margin-right: vw(6);
background-image: url('@/assets/images/bg-3.png');
background-size: 100% 100%;
.item {
@@ -189,6 +213,27 @@
font-size: vw(28);
font-weight: bold;
}
.progress-box {
margin-top: vh(10);
display: flex;
align-items: center;
justify-content: center;
.text {
margin-right: vw(10);
font-weight: 400;
font-size: vw(14);
color: #ffffff;
}
.progress {
width: vw(100);
}
.value {
margin-left: vw(10);
font-weight: 400;
font-size: vw(14);
color: #ffffff;
}
}
}
}
.right {

6
src/views/home/components/gauge.vue
View File

@@ -44,15 +44,15 @@
roundCap: true,
width: fitChartSize(6)
},
pointer: {
show: false
},
axisLine: {
roundCap: true,
lineStyle: {
width: fitChartSize(6)
}
},
pointer: {
show: false
},
axisTick: {
show: false
},