修复bug

This commit is contained in:
梁泽军 2025-03-20 18:06:23 +08:00
parent 203bb50212
commit 89c23cae2c
5 changed files with 116 additions and 56 deletions

View File

@ -2,6 +2,6 @@
VITE_MODE = dev VITE_MODE = dev
# 请求域名 # 请求域名
VITE_APP_BASE_URL='http://192.168.1.249:8084/ai-agent-server' # VITE_APP_BASE_URL='http://192.168.1.249:8084/ai-agent-server'
# VITE_APP_BASE_URL='https://info.xglpa.com/ai-agent-server' VITE_APP_BASE_URL='https://info.xglpa.com/ai-agent-server'

View File

@ -30,7 +30,6 @@ import NewsList from './component/news-list.vue'
import { getArticleCate } from '@/api/news' import { getArticleCate } from '@/api/news'
import Tabs from '@/packages/components/tabs/tabs.vue' import Tabs from '@/packages/components/tabs/tabs.vue'
import Tab from '@/packages/components/tab/tab.vue' import Tab from '@/packages/components/tab/tab.vue'
const tabList = ref<any>([]) const tabList = ref<any>([])
const current = ref<number>(0) const current = ref<number>(0)

View File

@ -67,7 +67,7 @@ const options = {
xAxis: { xAxis: {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
formatter: '{value} ' formatter: '{value} '
} }
}, },
yAxis: { yAxis: {
@ -86,7 +86,6 @@ const options = {
boundaryGap: [0.1, 0.1] // boundaryGap: [0.1, 0.1] //
}, },
series: [{ series: [{
silent: true, //
type: 'bar', type: 'bar',
barWidth: '60%', barWidth: '60%',
itemStyle: { itemStyle: {
@ -131,7 +130,7 @@ const handleResize = () => {
onMounted(() => { onMounted(() => {
initChart() initChart()
chartRef.value.style.touchAction = 'none' // chartRef.value.style.touchAction = 'none'
window.addEventListener('resize', updateSize) window.addEventListener('resize', updateSize)
}) })
@ -152,20 +151,20 @@ const updateSize = () => {
// //
watch(() => props.data, (newVal) => { watch(() => props.data, (newVal) => {
chartInstance.value?.setOption(newVal) options.dataset.source = newVal
chartInstance.value?.setOption(options)
}, { deep: true }) }, { deep: true })
</script> </script>
<style scoped> <style scoped>
.chart-wrapper { .chart-wrapper {
touch-action: pan-y; touch-action: none;
/* 允许垂直滚动 */ /* ✅ 完全禁用父级触摸 */
pointer-events: none; pointer-events: none;
/* 穿透点击事件 */
} }
.chart-container { .chart-container {
pointer-events: auto; /* pointer-events: auto; */
/* 恢复图表区域事件 */ /* 恢复图表区域事件 */
/* min-height: 300px; */ /* min-height: 300px; */
} }

View File

@ -1,5 +1,5 @@
<template> <template>
<div ref="chartEl" :style="{ width, height }"></div> <div ref="chartEl" :style="{ width, height }" class="chart-container"></div>
</template> </template>
<script setup> <script setup>
@ -22,10 +22,11 @@ const props = defineProps({
}, },
height: { height: {
type: String, type: String,
default: '400px' default: '600px'
} }
}) })
const chartEl = ref(null) const chartEl = ref(null)
let chartInstance = null let chartInstance = null
@ -43,50 +44,47 @@ const initChart = () => {
title: { title: {
text: props.title, text: props.title,
left: 'center', left: 'center',
top: '0%', top: '5%',
}, },
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
legend: { legend: {
top: '7%', top: '15%',
left: 'center' left: 'center',
selectedMode: true,
}, },
selectedMode: 'single',
series: [ series: [
{ {
name: 'Access From', name: '部门使用次数',
type: 'pie', type: 'pie',
radius: ['40%', '70%'], radius: ['40%', '70%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
top: '20%', top: '20%',
itemStyle: { itemStyle: {
borderRadius: 10, borderRadius: 10
borderColor: '#fff', },
borderWidth: 2 label: {
show: true,
position: 'center'
}, },
// label: {
// show: false,
// position: 'center'
// },
emphasis: { emphasis: {
scale: true, //
scaleSize: 8, //
itemStyle: {
shadowBlur: 15, //
shadowColor: 'rgba(0, 0, 0, 0.3)'
},
label: { label: {
show: true, show: true,
fontSize: 20, // fontSize: 40,
fontWeight: 'bold', fontWeight: 'bold'
color: '#333',
formatter: '{b}\n{d}%' //
} }
}, },
selectedOffset: 10, //
labelLine: { labelLine: {
show: false show: true
}, },
hoverOffset: 15, //
still: false, //
silent: true, //
//
hoverAnimationThreshold: 1, //
selectedOffset: 10, //
data: props.data data: props.data
} }
] ]
@ -117,4 +115,14 @@ watch(() => props.data, () => {
}) })
} }
}, { deep: true }) }, { deep: true })
</script> </script>
<style scoped>
.chart-container {
touch-action: manipulation;
/* 优化移动端触控 */
-webkit-tap-highlight-color: transparent;
/* 移除点击高光 */
}
</style>

View File

@ -6,15 +6,32 @@
</page-meta> </page-meta>
<page-status :status="status"> <page-status :status="status">
<view class="ai-creation"> <view class="ai-creation">
<view class="flex-1 min-h-0"> <view class="flex-1">
<scroll-view scroll-y class="h-full"> <u-field @click="showCalendar = true" v-model="dateRange" :disabled="true" label="时间"
<VerticalPieChart :data="chartData4" title="部门使用次数" /> placeholder="请选择时间范围" right-icon="arrow-down-fill">
<VerticalBarChart :data="chartData" title="模板使用人数" /> </u-field>
<VerticalBarChart :data="chartData2" title="模板使用次数" /> <tabs :current="current" :swipeable="true" @change="handleChange" height="80" bar-width="60"
<VerticalBarChart :data="chartData3" title="个人使用次数" /> :barStyle="{ bottom: '0' }">
</scroll-view> <tab name="模板">
<view class="news-list pt-[20rpx]">
<VerticalBarChart :data="chartData" title="模板使用人数" />
<VerticalBarChart :data="chartData2" title="模板使用次数" />
</view>
</tab>
<tab name="部门">
<view class="news-list pt-[20rpx]">
<VerticalPieChart :data="chartData4" title="部门使用次数" />
</view>
</tab>
<tab name="个人">
<view class="news-list pt-[20rpx]">
<VerticalBarChart :data="chartData3" title="个人使用次数" />
</view>
</tab>
</tabs>
</view> </view>
</view> </view>
<u-calendar v-model="showCalendar" :mode="mode" @change="changeCalendar"></u-calendar>
</page-status> </page-status>
<tabbar /> <tabbar />
@ -28,27 +45,55 @@ import VerticalBarChart from './_components/chart.vue'
import VerticalPieChart from './_components/pie-chart.vue' import VerticalPieChart from './_components/pie-chart.vue'
import { PageStatusEnum } from '@/enums/appEnums' import { PageStatusEnum } from '@/enums/appEnums'
import { cloneDeep } from 'lodash-es' import { cloneDeep } from 'lodash-es'
import Tabs from '@/packages/components/tabs/tabs.vue'
import Tab from '@/packages/components/tab/tab.vue'
import uCalendar from '@/uni_modules/vk-uview-ui/components/u-calendar/u-calendar.vue'
import uField from '@/uni_modules/vk-uview-ui/components/u-field/u-field.vue'
// 7
const getDateRange = () => {
const today = new Date()
const yesterday = new Date(today)
yesterday.setDate(today.getDate() - 1)
const startDate = new Date(yesterday)
startDate.setDate(startDate.getDate() - 6)
const start = formatDate(startDate)
const end = formatDate(yesterday)
return `${start} ~ ${end}`
}
//
const formatDate = (date: Date) => {
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
}
const status = ref(PageStatusEnum.LOADING) const status = ref(PageStatusEnum.LOADING)
const dateRange = ref(getDateRange())
const showCalendar = ref(false)
const mode = ref('range')
const queryParams = ref({ const queryParams = ref({
startTime: "2025-03-18 00:00:00", startTime: getDateRange().split(' ~ ')[0] + ' 00:00:00',
endTime: "2025-03-19 00:00:00", endTime: getDateRange().split(' ~ ')[1] + ' 23:59:59',
}) })
const data = ref<any[]>([])
const current = ref<number>(0)
const handleChange = (index: number) => {
current.value = Number(index)
}
const chartData = ref([]) const chartData = ref([])
const chartData2 = ref([]) const chartData2 = ref([])
const chartData3 = ref([]) const chartData3 = ref([])
const chartData4 = ref([])
const chartData4 = ref([
{ name: '分类A', value: 335 },
{ name: '分类B', value: 310 },
{ name: '分类C', value: 234 }
])
// //
const getData = async () => { const getData = async () => {
@ -61,6 +106,7 @@ const getData = async () => {
chartData3.value = responseData.userUseTotalList.map((item: any) => ([item.name, item.total])) chartData3.value = responseData.userUseTotalList.map((item: any) => ([item.name, item.total]))
chartData4.value = responseData.companyTotalList.map((item: any) => ({ name: item.name, value: item.total })) chartData4.value = responseData.companyTotalList.map((item: any) => ({ name: item.name, value: item.total }))
status.value = PageStatusEnum.NORMAL status.value = PageStatusEnum.NORMAL
} catch (error) { } catch (error) {
status.value = PageStatusEnum.ERROR status.value = PageStatusEnum.ERROR
@ -70,6 +116,14 @@ onLoad(() => {
getData() getData()
}) })
//
const changeCalendar = (e: Object) => {
console.log('range', e);
dateRange.value = e.startDate + ' ~ ' + e.endDate
queryParams.value.startTime = e.startDate + ' 00:00:00'
queryParams.value.endTime = e.endDate + ' 23:59:59'
getData()
}
@ -98,7 +152,7 @@ page {
} }
.ai-creation { .ai-creation {
height: 100%; // height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: linear-gradient(44.7deg, #eaffff 0%, #faf6ff 50%, #f2f3ff 63%, #eaffff 100%); background: linear-gradient(44.7deg, #eaffff 0%, #faf6ff 50%, #f2f3ff 63%, #eaffff 100%);