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-20 16:22:44 +08:00
parent 65244492b4
commit f27f34bcfb
15 changed files with 160 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -112,7 +112,7 @@
<div class="box-1">
<Title3 title="客源地TOP5" />
<top />
<RegionTop :list="homeStore.userPortraitData.provinceRate" :width="230" :height="260" />
</div>
<div class="box-1">
@@ -120,17 +120,15 @@
<div v-if="channelTotal > 0" class="count">
游客总数：<countup :end-val="channelTotal" />
</div>
<ticket />
<TicketSource :list="homeStore.userPortraitData.channel" :width="230" :height="230" />
</div>
</div>
</div>
</template>
<script setup>
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'

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

@@ -194,7 +194,7 @@
map.value.addOverlay(polyline)
})
})
getBaiduMapCrowded()
// getBaiduMapCrowded()
}
const getBaiduMapCrowded = async () => {
let res = await getBaiduMapCrowdedApi({

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

@@ -1,171 +0,0 @@
<!-- 购票来源 -->
<template>
<div class="ticket" :id="id" />
</template>
<script setup>
import { fitChartSize } from '@/utils/dataUtil'
import { useEchart } from '@/hooks/echart'
import { useHomeStore } from '@/stores/home'
const homeStore = useHomeStore()
const { id, setOption } = useEchart()
let x = 25
let y = 35
let params = null
watch(
() => homeStore.userPortraitData.channel,
(val) => {
if (val.length > 0) {
setTimeout(() => {
init()
}, 1000)
}
},
{
immediate: true
}
)
const setSeries = () => {
return homeStore.userPortraitData.channel.map((item, index) => {
return {
name: item.name,
type: 'pie',
clockwise: false,
silent: true,
radius: [`${x * (index + 1)}%`, `${y + index * 25}%`],
center: ['50%', '40%'],
label: { show: false },
labelLine: { show: false },
emphasis: { show: false },
data: [
{
value: parseFloat(item.value),
name: item.name
}
// {
// value: 100,
// itemStyle: {
// color: '#07439C'
// }
// }
]
}
})
}
const init = () => {
if (!params) {
params = {
backgroundColor: 'transparent',
legend: {
show: true,
x: 'center',
y: '74%',
itemHeight: fitChartSize(12),
itemWidth: fitChartSize(12),
itemGap: fitChartSize(6),
formatter: function (name) {
let obj = homeStore.userPortraitData.channel.find((item) => item.name == name)
return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
},
textStyle: {
rich: {
name: {
color: '#fff',
fontSize: fitChartSize(12)
},
value: {
color: '#00D5F6',
fontWeight: 600,
fontSize: fitChartSize(12)
}
}
}
},
color: ['#F15A25', '#01FEFE', '#12B5FD'],
series: setSeries()
}
} else {
params.series = setSeries()
}
setOption(params)
}
</script>
<style scoped lang="scss">
.ticket {
width: 100%;
height: vh(230);
}
.legend {
display: flex;
align-items: center;
justify-content: center;
@mixin icon($column) {
padding: 0 vw(10);
height: vh(70);
display: flex;
flex-direction: $column;
align-items: center;
justify-content: center;
}
&__wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: vw(8);
}
&-item {
color: #fff;
}
&-item:nth-child(1) {
@include icon(column);
background-image: url('@/assets/images/legend-item-1.png');
background-size: 100% 100%;
}
&-item:nth-child(2) {
@include icon(column);
background-image: url('@/assets/images/legend-item-1.png');
background-size: 100% 100%;
}
&-item:nth-child(3) {
@include icon(column);
background-image: url('@/assets/images/legend-item-1.png');
background-size: 100% 100%;
}
&-item:nth-child(4) {
@include icon(column-reverse);
background-image: url('@/assets/images/legend-item-2.png');
background-size: 100% 100%;
}
&-item:nth-child(5) {
@include icon(column-reverse);
background-image: url('@/assets/images/legend-item-2.png');
background-size: 100% 100%;
}
&-item:nth-child(6) {
@include icon(column-reverse);
background-image: url('@/assets/images/legend-item-2.png');
background-size: 100% 100%;
}
&-item-label {
font-weight: 400;
font-size: vw(12);
line-height: vh(14);
}
&-item-value {
font-weight: bold;
font-size: vw(16);
line-height: vh(18);
}
}
</style>

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

@@ -1,132 +0,0 @@
<!-- 客源地分析TOP5 -->
<template>
<div class="top" :id="id" />
</template>
<script setup>
import { fitChartSize } from '@/utils/dataUtil'
import { useEchart } from '@/hooks/echart'
import { useHomeStore } from '@/stores/home'
const homeStore = useHomeStore()
const { id, setOption } = useEchart()
let params = null
const init = () => {
if (!params) {
params = {
backgroundColor: 'transparent',
tooltip: {
show: false
},
legend: {
show: false
},
grid: {
left: '4%',
right: '4%',
top: '10%',
bottom: '-4%',
containLabel: false
},
xAxis: [{ max: 100, show: false }],
yAxis: [
{
type: 'category',
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
},
{
type: 'category',
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
color: '#fff',
fontSize: fitChartSize(18),
verticalAlign: 'bottom',
padding: [0, -fitChartSize(10), fitChartSize(10), 0],
inside: true,
formatter: function (value) {
return `{value|${value}}%`
},
rich: {
value: {
align: 'center',
color: '#fff',
fontSize: fitChartSize(14)
}
}
},
data: homeStore?.userPortraitData?.provinceRate.map((item) => Number(item.value))
}
],
series: [
{
type: 'bar',
barWidth: fitChartSize(12),
showBackground: true,
borderRadius: [0, 0, 0, 0],
backgroundStyle: {
color: 'rgba(0, 150, 255, 0.15)'
},
label: {
show: true,
offset: [fitChartSize(12), -fitChartSize(20)],
color: '#D3E5FF',
fontWeight: 500,
position: 'left',
align: 'left',
fontSize: fitChartSize(14),
formatter: function (params) {
return params.data.name ?? '其他'
}
},
data: homeStore?.userPortraitData?.provinceRate.map((item) => {
return {
name: item.name,
value: Number(item.value),
itemStyle: {
borderRadius: [0, 0, 0, 0],
color: parseFloat(item.value) > 50 ? '#FF7021' : '#00CCFF'
}
}
})
}
]
}
}
setOption(params)
}
watch(
() => homeStore?.userPortraitData?.provinceRate,
(val) => {
if (val.length > 0) {
setTimeout(() => {
init()
}, 1000)
}
},
{
immediate: true
}
)
</script>
<style scoped lang="scss">
.top {
width: 100%;
height: vh(260);
}
</style>

13
src/views/monitor/components/box-1.vue
View File

@@ -63,7 +63,12 @@
<template v-if="scenicSpotId">
<div class="detection-top">
<img class="map-img" src="@/assets/images/map-img-1.jpg" />
<img
v-if="scenicSpotId == 'root000000'"
class="map-img"
src="@/assets/images/bdc.png"
alt=""
/>
</div>
<div class="flex">
<div class="monitor">
@@ -260,7 +265,6 @@
height: 100%;
}
}
.monitor {
width: vw(405);
margin-right: vw(8);
@@ -351,7 +355,6 @@
background-image: url('@/assets/images/title-4.png');
background-size: 100% 100%;
}
:deep(.el-select__wrapper) {
background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
border: none;
@@ -361,10 +364,6 @@
font-size: vw(14);
color: #fff;
}
.line-chart {
width: 100%;
height: vh(200);
}
.box-1 {
margin-top: vh(120);
width: vw(800);

15
src/views/scenic/components/box-1.vue
View File

@@ -35,7 +35,9 @@
</div>
</div>
</div>
<div class="main"> </div>
<div class="main">
<img v-if="scenicSpotId == 'root000000'" src="@/assets/images/bdc.png" alt="" />
</div>
<div class="footer">
<div class="flex">
<div class="item">
@@ -119,6 +121,13 @@
const router = useRouter()
const scenicStore = useScenicStore()
let props = defineProps({
scenicSpotId: {
type: String,
default: () => ''
}
})
const handleMore = () => {
router.push('/workOrder')
}
@@ -192,6 +201,10 @@
.main {
width: 100%;
height: vh(600);
> img {
width: 100%;
height: 100%;
}
}
.footer {
.item {

18
src/views/scenic/components/box-2.vue
View File

@@ -213,16 +213,23 @@
</div>
<div class="border mr-8 flex-1">
<Title3 title="客源地分析TOP5" />
<top />
<RegionTop
:list="scenicStore.userPortraitData.data.provinceRate"
:width="250"
:height="366"
/>
</div>
<div class="border flex-1">
<Title3 title="购票来源" />
<div class="count">总人数：<countup :end-val="channelTotal" /></div>
<ticket />
<TicketSource
:list="scenicStore.userPortraitData.data.channel"
:width="240"
:height="330"
/>
</div>
</div>
</div>
<div class="box-5">
<Title1 title="车船信息" />
<div class="flex mb-6">
@@ -304,12 +311,11 @@
import shipIcon from '@/assets/images/ship.png'
import age from './age'
import top from './top'
import jam from './jam'
import ticket from './ticket'
import TrafficFlow from './traffic-flow'
import BigCarShipMap from './big-car-ship-map'
import countup from 'vue-countup-v3'
import { useMap } from '@/hooks/map'
import { useScenicStore } from '@/stores/scenic'
@@ -522,6 +528,7 @@
height: vw(74);
}
.car-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
@@ -544,6 +551,7 @@
.suffix {
font-size: vw(12);
color: #02f9fa;
margin-bottom: vw(4);
}
}
.sum {

106
src/views/scenic/components/ticket.vue
View File

@@ -1,106 +0,0 @@
<!-- 购票来源 -->
<template>
<div class="ticket" :id="id" />
</template>
<script setup>
import { fitChartSize } from '@/utils/dataUtil'
import { useEchart } from '@/hooks/echart'
import { useScenicStore } from '@/stores/scenic'
const scenicStore = useScenicStore()
const { id, setOption } = useEchart()
let x = 30
let y = 40
let params = null
watch(
() => scenicStore.userPortraitData.data.channel,
(val) => {
if (val.length > 0) {
setTimeout(() => {
init()
}, 1000)
}
},
{
immediate: true
}
)
const setSeries = () => {
return scenicStore.userPortraitData.data.channel.map((item, index) => {
return {
name: item.name,
type: 'pie',
clockwise: false,
silent: true,
radius: [`${x * (index + 1)}%`, `${y + index * 30}%`],
center: ['50%', '40%'],
label: { show: false },
labelLine: { show: false },
emphasis: { show: false },
data: [
{
value: parseFloat(item.value),
name: item.name
},
{
value: 100,
itemStyle: {
color: '#07439C'
}
}
]
}
})
}
const init = () => {
if (!params) {
params = {
backgroundColor: 'transparent',
legend: {
show: true,
x: 'center',
y: '70%',
itemHeight: fitChartSize(12),
itemWidth: fitChartSize(12),
itemGap: fitChartSize(6),
formatter: function (name) {
let obj = scenicStore.userPortraitData.data.channel.find((item) => item.name == name)
return '{name|' + name + '} {value|' + obj?.value + '}{value|%}'
},
textStyle: {
rich: {
name: {
color: '#fff',
fontSize: fitChartSize(12)
},
value: {
color: '#00D5F6',
fontWeight: 600,
fontSize: fitChartSize(12)
}
}
}
},
color: ['#F15A25', '#01FEFE', '#12B5FD'],
series: setSeries()
}
} else {
params.series = setSeries()
}
setOption(params)
}
</script>
<style scoped lang="scss">
.ticket {
width: vw(240);
height: vh(336);
}
</style>

132
src/views/scenic/components/top.vue
View File

@@ -1,132 +0,0 @@
<!-- 客源地分析TOP5 -->
<template>
<div class="top" :id="id" />
</template>
<script setup>
import { fitChartSize } from '@/utils/dataUtil'
import { useEchart } from '@/hooks/echart'
import { useScenicStore } from '@/stores/scenic'
const scenicStore = useScenicStore()
const { id, setOption } = useEchart()
let params = null
const init = () => {
if (!params) {
params = {
backgroundColor: 'transparent',
tooltip: {
show: false
},
legend: {
show: false
},
grid: {
left: '4%',
right: '4%',
top: '4%',
bottom: '-4%',
containLabel: false
},
xAxis: [{ max: 100, show: false }],
yAxis: [
{
type: 'category',
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
},
{
type: 'category',
axisTick: 'none',
axisLine: 'none',
show: true,
axisLabel: {
color: '#fff',
fontSize: fitChartSize(18),
verticalAlign: 'bottom',
padding: [0, -fitChartSize(10), fitChartSize(10), 0],
inside: true,
formatter: function (value) {
return `{value|${value}}%`
},
rich: {
value: {
align: 'center',
color: '#fff',
fontSize: fitChartSize(14)
}
}
},
data: scenicStore.userPortraitData.data.provinceRate.map((item) => Number(item.value))
}
],
series: [
{
type: 'bar',
barWidth: fitChartSize(12),
showBackground: true,
borderRadius: [0, 0, 0, 0],
backgroundStyle: {
color: 'rgba(0, 150, 255, 0.15)'
},
label: {
show: true,
offset: [fitChartSize(12), -fitChartSize(20)],
color: '#D3E5FF',
fontWeight: 500,
position: 'left',
align: 'left',
fontSize: fitChartSize(14),
formatter: function (params) {
return params.data.name ?? '其他'
}
},
data: scenicStore.userPortraitData.data.provinceRate.map((item) => {
return {
name: item.name,
value: Number(item.value),
itemStyle: {
borderRadius: [0, 0, 0, 0],
color: parseFloat(item.value) > 50 ? '#FF7021' : '#00CCFF'
}
}
})
}
]
}
}
setOption(params)
}
watch(
() => scenicStore.userPortraitData.data.provinceRate,
(val) => {
if (val.length > 0) {
setTimeout(() => {
init()
}, 1000)
}
},
{
immediate: true
}
)
</script>
<style scoped lang="scss">
.top {
width: vw(250);
height: vh(366);
}
</style>

12
src/views/scenic/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<box1 />
<box1 :scenicSpotId="scenicSpotId" />
<box2 />
</template>
@@ -18,13 +18,13 @@
`${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/scenic-spot`
)
let id = ref('')
let scenicSpotId = ref('')
watch(
() => [isConnected.value, id.value],
() => [isConnected.value, scenicSpotId.value],
(val) => {
if (val[0] && val[1]) {
sendMessage(JSON.stringify({ action: 'start', type: '', scenicSpotId: id.value }))
sendMessage(JSON.stringify({ action: 'start', type: '', scenicSpotId: scenicSpotId.value }))
}
},
{ immediate: true }
@@ -34,7 +34,6 @@
() => dataRes.value,
(val) => {
if (val) {
console.log(val, '景区接受消息')
switch (val.type) {
case 'wordkOrderlist':
scenicStore.setWordkOrderList(val.data)
@@ -73,8 +72,7 @@
let scenicChange = null
onMounted(() => {
scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
id.value = data.scenicSpotId
console.log(id.value, 'id.value')
scenicSpotId.value = data.scenicSpotId
})
})
onUnmounted(() => {

2
src/views/traffic/components/box-2.vue
View File

@@ -81,7 +81,7 @@
<div class="chart-item">
<Title3 title="拥堵类型分析" />
<div class="chart-box">
<traffic-jam :series="item.series" :data="item.xdata" />
<traffic-jam :series="item.series" :data="item.xdata" :key="index" />
</div>
</div>
</div>

43
src/views/traffic/components/traffic-jam.vue
View File

@@ -22,7 +22,7 @@
watch(
() => props.series,
(val) => {
if (val.length > 0) {
if (val.length) {
setTimeout(() => {
init()
}, 1000)
@@ -34,20 +34,7 @@
let params = null
const getSeriesData = () => {
let colorMap = {
1: '#00C000',
2: '#FFA700',
3: '#FFO000',
4: '#B50000'
}
return props.series.map((item) => {
return {
value: item,
itemStyle: {
color: colorMap[item]
}
}
})
return props.series
}
const getXAxisData = () => {
return props.data
@@ -63,9 +50,8 @@
containLabel: true
},
xAxis: {
boundaryGap: false,
type: 'category',
data: getXAxisData(),
boundaryGap: false,
axisTick: {
show: false
},
@@ -77,7 +63,8 @@
axisLabel: {
fontSize: fitChartSize(12),
color: 'rgba(255,255,255,0.9)'
}
},
data: getXAxisData()
},
yAxis: {
type: 'value',
@@ -97,9 +84,6 @@
series: [
{
type: 'bar',
emphasis: {
opacity: 1
},
data: getSeriesData(),
barWidth: fitChartSize(40),
label: {
@@ -110,12 +94,23 @@
formatter: (res) => {
let valueMap = {
1: '畅通',
2: '高疑似事件拥堵',
3: '异常拥堵',
4: '常规拥堵'
2: '缓行',
3: '拥堵',
4: '严重拥堵'
}
return valueMap[res.value]
}
},
itemStyle: {
color: (res) => {
let colorMap = {
1: '#00c000',
2: '#ffa700',
3: '#ff0000',
4: '#b50000'
}
return colorMap[res.value]
}
}
}
]