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-02-23 12:52:09 +08:00
parent 2d881eae08
commit 7e822f1c66
9 changed files with 82 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/scenic.js Normal file
View File

@@ -0,0 +1,10 @@
import request from './request'
// GPS列表
export function getGpsListApi(data) {
return request({
url: '/fjtcc-api/api/largeScreen/spot/gpsList',
method: 'get',
params: data
})
}

BIN
src/assets/images/unfollow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

24
src/components/CoreVideo/index.vue
View File

@@ -14,13 +14,14 @@
<p class="item-title--primary">
{{ item.cameraName || item.cameraIndexCode }}
</p>
<div class="item-unfollow">取消关注</div>
<video
class="item-img"
:id="'video' + index"
muted
autoplay
:controls="false"
style="object-fit: cover"
controlsList="nodownload"
>
<source src="" type="application/x-mpegURL" />
</video>
@@ -145,9 +146,30 @@
margin-bottom: vh(10);
padding: vw(10);
background-size: 100% 100%;
&-unfollow {
display: none;
position: absolute;
right: vw(8);
top: vw(8);
width: vw(64);
height: vh(24);
text-align: center;
line-height: vh(24);
font-weight: 400;
font-size: vw(12);
color: #ffffff;
background-image: url('@/assets/images/unfollow.png');
background-size: 100% 100%;
}
&:hover {
.item-unfollow {
display: block;
}
}
& > div {
position: relative;
}
&-title {
position: absolute;
bottom: 0;

4
src/utils/config.js
View File

@@ -1,7 +1,7 @@
export const baseUrl = 'http://36.138.38.16:8001' // http://36.138.38.16:8001
export const baseUrl = 'http://36.138.38.16:8001'
export const proBaseUrl = 'http://192.168.77.200'
export const socketBaseUrl = 'ws://36.138.38.16:81' // ws://36.138.38.16:81
export const socketBaseUrl = 'ws://36.138.38.16:81'
export const proSocketBaseUrl = 'ws://192.168.77.200:8060'
export const mode = 'pro' // 测试 dev 正式 pro

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

@@ -62,7 +62,7 @@
clockwise: false,
silent: true,
center: ['30%', '50%'],
radius: ['60%', '70%'],
radius: ['50%', '60%'],
itemStyle: {
borderColor: 'transparent',
borderRadius: fitChartSize(2),
@@ -80,7 +80,7 @@
clockwise: false,
silent: true,
center: ['30%', '50%'],
radius: ['54%', '58%'],
radius: ['44%', '48%'],
itemStyle: {
borderColor: 'transparent',
borderRadius: fitChartSize(2),
@@ -136,6 +136,6 @@
<style lang="scss" scoped>
.age {
width: vw(300);
height: vh(120);
height: vh(150);
}
</style>

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

@@ -33,7 +33,7 @@
<div class="alarm-box">
<ul class="flex">
<li class="alarm-item" v-for="(item, index) in list" :key="index">
<img class="icon" :src="item.icon" />
<img class="alarm-item__icon" :src="item.icon" />
<span>{{ item.label }}</span>
</li>
</ul>
@@ -124,6 +124,7 @@
<script setup>
import countup from 'vue-countup-v3'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import ScrollNumber from '@/components/ScrollNumber/index.vue'
import { getSpotListApi, getBaiduMapApi, getBaiduMapCrowdedApi } from '@/api/home'
@@ -170,7 +171,7 @@
watch(
() => [map.value, homeStore.carShipData],
() => {
return;
return
if (map.value && homeStore.carShipData) {
// clearOverlays()
markers.forEach((item) => {
@@ -352,7 +353,7 @@
margin-top: vh(20);
}
.item {
margin-right:vh(20);
margin-right: vh(20);
flex: 1;
.label {
margin-bottom: vh(20);
@@ -395,8 +396,8 @@
left: vw(20);
z-index: 99;
.alarm-item {
width: vw(110);
height: vh(40);
padding: 0 vw(20);
height: vw(40);
margin-right: vw(4);
font-weight: 400;
font-size: vw(14);
@@ -405,7 +406,7 @@
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, rgba(238, 44, 44, 0) 0%, #ee2c2c 100%);
.icon {
&__icon {
width: vw(20);
height: vw(20);
margin-right: vw(4);

115
src/views/scenic/components/age.vue
View File

@@ -33,18 +33,17 @@
}
const init = () => {
if (!params) {
const center = ['50%', '40%']
const center = ['50%', '34%']
params = {
legend: {
x: 'left',
y: '76%',
x: 'center',
y: '70%',
itemHeight: fitChartSize(8),
itemWidth: fitChartSize(8),
itemGap: fitChartSize(14),
formatter: function (name) {
// let obj = homeData.value?.userPortrait?.ageRate.find((item) => item.name == name)
// return '{name|' + name + '} {value|' + obj.value + '}{value|%}'
return '{name|' + name + '}'
let obj = props.list.find((item) => item.name == name)
return '{name|' + name + '} {value|' + obj.value + '}{value|%}'
},
textStyle: {
rich: {
@@ -64,7 +63,7 @@
type: 'pie',
silent: true,
center: center,
radius: ['60%', '70%'],
radius: ['40%', '50%'],
itemStyle: {
borderColor: 'transparent',
borderRadius: fitChartSize(2),
@@ -81,7 +80,7 @@
type: 'pie',
silent: true,
center: center,
radius: ['54%', '58%'],
radius: ['34%', '38%'],
itemStyle: {
borderColor: 'transparent',
borderRadius: fitChartSize(2),
@@ -98,7 +97,7 @@
type: 'pie',
silent: true,
center: center,
radius: ['0', '40%'],
radius: ['0', '20%'],
itemStyle: {
color: '#065EAD'
},
@@ -111,7 +110,7 @@
type: 'pie',
silent: true,
center: center,
radius: ['0', '26%'],
radius: ['0', '16%'],
itemStyle: {
color: '#0477D1'
},
@@ -133,100 +132,6 @@
<style lang="scss" scoped>
.age {
width: vw(240);
height: vh(240);
height: vh(260);
}
</style>
<!-- <template>
<div class="age-ratio" :id="id" />
</template>
<script setup>
import * as echarts from 'echarts'
import { fitChartSize } from '@/utils/dataUtil'
import { guid } from '@/utils/util'
let ageChart = null
let id = ref(guid())
const init = () => {
// 基于准备好的dom，初始化echarts实例
ageChart = echarts.init(document.getElementById(id.value))
ageChart.setOption({
legend: {
orient: 'horizontal',
x: 'left',
y: 'bottom',
data: ['19岁以下', '18-30岁', '30-40岁', '40-60岁', '60岁以上'],
itemHeight: fitChartSize(8),
itemWidth: fitChartSize(8),
itemGap: fitChartSize(10),
formatter: function (name) {
return '{title|' + name + '}'
},
textStyle: {
rich: {
title: {
color: '#fff',
fontSize: fitChartSize(14)
},
value: {
color: '#00D5F6',
fontSize: fitChartSize(14)
}
}
}
},
series: [
{
type: 'pie',
center: ['50%', '40%'],
radius: ['65%', '75%'],
itemStyle: {
borderColor: 'transparent',
borderRadius: fitChartSize(2),
borderWidth: fitChartSize(2)
},
label: {
show: false,
color: '#D3F0FE',
fontSize: fitChartSize(12)
},
labelLine: {
normal: {
lineStyle: {
type: 'dashed'
}
}
},
data: [
{ value: 484, name: '19岁以下' },
{ value: 300, name: '18-30岁' },
{ value: 1048, name: '30-40岁' },
{ value: 580, name: '40-60岁' },
{ value: 735, name: '60岁以上' }
]
}
]
})
window.addEventListener('resize', resize)
}
const resize = () => {
if (ageChart) {
ageChart.dispose()
ageChart = null
init()
}
}
onMounted(() => {
init()
})
</script>
<style lang="scss" scoped>
.age-ratio {
width: vw(280);
height: vh(240);
}
</style> -->

24
src/views/scenic/components/big-map.vue
View File

@@ -5,7 +5,7 @@
<div class="flex">
<div class="list-box">
<title2 title="车船" />
<el-input v-model="value" clearable placeholder="设备号/设备名称SIM卡号">
<el-input v-model="keyword" clearable placeholder="设备号/设备名称SIM卡号">
<template #suffix>
<img src="@/assets/images/search-icon-1.png" alt="" />
</template>
@@ -41,6 +41,8 @@
</template>
<script setup>
import { getGpsListApi } from '@/api/scenic'
import closeIcon from '@/assets/images/close.png'
import carIcon from '@/assets/images/car.png'
import shipIcon from '@/assets/images/ship.png'
@@ -55,10 +57,13 @@
import { useMap } from '@/hooks/map'
let modelValue = defineModel()
const { map, marker, initMap, addMarker } = useMap()
let props = defineProps({
scenicSpotId: {
type: String,
default: ''
},
carList: {
type: Array,
default: () => []
@@ -68,10 +73,13 @@
default: () => []
}
})
let modelValue = defineModel()
let lat = ref('')
let lng = ref('')
let value = ref('')
let scenicSpotId = ref('')
let keyword = ref('')
let status = ref('')
let active = ref(0)
let current = ref('')
let scenicChange = null
@@ -270,10 +278,20 @@
active.value = index
}
const getGpsList = async () => {
let res = await getGpsListApi({
scenicSpotId: scenicSpotId.value,
keyword: keyword.value,
status: status.value
})
}
onMounted(() => {
scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
scenicSpotId.value = data.scenicSpotId
lat.value = data.lat
lng.value = data.lng
getGpsList()
})
})
onUnmounted(() => {

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

@@ -325,6 +325,11 @@
const scenicStore = useScenicStore()
const { initMap, addMarker, marker } = useMap()
let show = ref(false)
let scenicChange = null
let carOverlays = ref([])
let shipOverlays = ref([])
const garageList = computed(() => {
return scenicStore.stopCarData.headList
})
@@ -362,11 +367,6 @@
return scenicStore.scenicQueueData.dataList.map((item) => item.name)
})
let show = ref(false)
let scenicChange = null
let carOverlays = ref([])
let shipOverlays = ref([])
watch(
() => scenicStore.carShipData,
(val) => {