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
2025-01-17 19:15:14 +08:00
parent fd8ede8a32
commit 8eb966fa14
29 changed files with 510 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -55,7 +55,7 @@
v-for="(item, index) in homeStore.scenicBearData.info"
:key="index"
>
<gauge :value="item.value" />
<gauge :value="parseFloat(item.value)" />
<span class="statistic-title">{{ item.name }}</span>
</div>
</div>
@@ -131,10 +131,10 @@
</template>
<script setup>
import top from './top.vue'
import age from './age.vue'
import gauge from './gauge.vue'
import ticket from './ticket.vue'
import top from './top'
import age from './age'
import gauge from './gauge'
import ticket from './ticket'
import countup from 'vue-countup-v3'
import { useHomeStore } from '@/stores/home'

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

@@ -69,7 +69,7 @@
<span class="text">工单完成数</span>
<div class="progress-1">
<el-progress
:percentage="homeStore.wordkOrderData.toDayData.rate"
:percentage="parseFloat(homeStore.wordkOrderData.toDayData.rate)"
:show-text="false"
/>
</div>
@@ -91,7 +91,7 @@
<span class="text">工单完成数</span>
<div class="progress-2">
<el-progress
:percentage="homeStore.wordkOrderData.warnData.rate"
:percentage="parseFloat(homeStore.wordkOrderData.warnData.rate)"
:show-text="false"
/>
</div>

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

@@ -231,7 +231,7 @@
</div>
<div>
<div class="occupancy">
<Title3 title="酒店入住人数及入住率" />
<Title3 title="酒店入住率" />
</div>
<occupancy :list="homeStore.hotelData?.list" />
</div>

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

@@ -25,11 +25,9 @@
watch(
() => props.value,
(val) => {
if (val) {
nextTick(() => {
init()
})
}
setTimeout(() => {
init()
}, 1000)
},
{ immediate: true }
)
@@ -44,7 +42,7 @@
endAngle: 0,
min: 0,
max: 100,
radius: '100%',
radius: '120%',
splitNumber: 10,
center: ['50%', '60%'],
itemStyle: {
@@ -65,11 +63,11 @@
}
],
global: false
},
shadowColor: 'rgba(0,138,255,0.45)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
}
// shadowColor: 'red',
// shadowBlur: 10,
// shadowOffsetX: 2,
// shadowOffsetY: 2
},
progress: {
show: true,
@@ -130,7 +128,7 @@
<style lang="scss" scoped>
.gauge {
width: vw(70);
width: vw(120);
height: vh(50);
}
</style>

18
src/views/home/components/jam-duration.vue
View File

@@ -34,7 +34,7 @@
return props.list.map((item) => {
return {
name: item.name,
value: item.count,
value: item.duration,
itemStyle: {
color: {
type: 'linear',
@@ -61,7 +61,7 @@
return props.list.map((item) => {
return {
name: item.name,
value: item.count,
value: item.duration,
itemStyle: {
color: '#fff',
opacity: 1
@@ -70,7 +70,7 @@
})
}
const setYAxisData = () => {
return props.list.map((item) => item.count)
return props.list.map((item) => item.duration)
}
const init = () => {
if (!params) {
@@ -110,10 +110,10 @@
axisTick: {
show: false
},
data: [],
axisLabel: {
show: false
}
},
data: []
},
{
type: 'category',
@@ -122,10 +122,8 @@
axisLine: 'none',
show: true,
axisLabel: {
textStyle: {
color: '#fff',
fontSize: fitChartSize(12)
},
color: '#fff',
fontSize: fitChartSize(12),
verticalAlign: 'bottom',
padding: [0, 0, 6, 0],
inside: true,
@@ -150,7 +148,7 @@
type: 'bar',
barWidth: fitChartSize(8),
showBackground: true,
barBorderRadius: [0, 0, 0, 0],
borderRadius: [0, 0, 0, 0],
backgroundStyle: {
color: 'rgba(0, 150, 255, 0.15)'
},

10
src/views/home/components/occupancy.vue
View File

@@ -85,7 +85,7 @@
grid: {
left: '4%',
right: '4%',
top: '14%',
top: '16%',
bottom: '4%',
containLabel: false
},
@@ -122,10 +122,8 @@
axisLine: 'none',
show: true,
axisLabel: {
textStyle: {
color: '#fff',
fontSize: fitChartSize(12)
},
color: '#fff',
fontSize: fitChartSize(12),
verticalAlign: 'bottom',
padding: [0, 0, 10, 0],
inside: true,
@@ -150,7 +148,7 @@
type: 'bar',
barWidth: fitChartSize(8),
showBackground: true,
barBorderRadius: [0, 0, 0, 0],
borderRadius: [0, 0, 0, 0],
backgroundStyle: {
color: 'rgba(0, 150, 255, 0.15)'
},

8
src/views/home/components/ticket.vue
View File

@@ -13,8 +13,8 @@
const { id, setOption } = useEchart()
let x = 15
let y = 25
let x = 25
let y = 35
let params = null
watch(
@@ -38,7 +38,7 @@
type: 'pie',
clockwise: false,
silent: true,
radius: [`${x * (index + 1)}%`, `${y + index * 15}%`],
radius: [`${x * (index + 1)}%`, `${y + index * 25}%`],
center: ['50%', '40%'],
label: { show: false },
labelLine: { show: false },
@@ -66,7 +66,7 @@
legend: {
show: true,
x: 'center',
y: '70%',
y: '74%',
itemHeight: fitChartSize(12),
itemWidth: fitChartSize(12),
itemGap: fitChartSize(6),

10
src/views/home/components/top.vue
View File

@@ -52,10 +52,8 @@
axisLine: 'none',
show: true,
axisLabel: {
textStyle: {
color: '#fff',
fontSize: fitChartSize(18)
},
color: '#fff',
fontSize: fitChartSize(18),
verticalAlign: 'bottom',
padding: [0, -fitChartSize(10), fitChartSize(10), 0],
inside: true,
@@ -78,7 +76,7 @@
type: 'bar',
barWidth: fitChartSize(12),
showBackground: true,
barBorderRadius: [0, 0, 0, 0],
borderRadius: [0, 0, 0, 0],
backgroundStyle: {
color: 'rgba(0, 150, 255, 0.15)'
},
@@ -99,7 +97,7 @@
name: item.name,
value: Number(item.value),
itemStyle: {
barBorderRadius: [0, 0, 0, 0],
borderRadius: [0, 0, 0, 0],
color: parseFloat(item.value) > 50 ? '#FF7021' : '#00CCFF'
}
}

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

@@ -34,6 +34,7 @@
return props.list.map((item) => {
return {
...item,
value: item.occupiedPercentage,
itemStyle: {
color: {
type: 'linear',
@@ -60,6 +61,7 @@
return props.list.map((item) => {
return {
...item,
value: item.occupiedPercentage,
itemStyle: {
color: '#fff',
opacity: 1
@@ -68,7 +70,7 @@
})
}
const getYAxisData = () => {
return props.list.map((item) => item.value)
return props.list.map((item) => item.occupied)
}
const init = () => {
if (!params) {
@@ -148,7 +150,7 @@
type: 'bar',
barWidth: fitChartSize(8),
showBackground: true,
barBorderRadius: [0, 0, 0, 0],
borderRadius: [0, 0, 0, 0],
backgroundStyle: {
color: 'rgba(0, 150, 255, 0.15)'
},

10
src/views/home/components/vehicle-source.vue
View File

@@ -83,8 +83,16 @@
type: 'bar',
showBackground: true,
barWidth: fitChartSize(8),
label: {
show: true,
position: 'top',
textStyle: {
color: '#fff',
fontSize: fitChartSize(10)
}
},
itemStyle: {
barBorderRadius: [0, 0, 0, 0],
borderRadius: [0, 0, 0, 0],
color: {
type: 'linear',
x: 0,