修复bug
This commit is contained in:
梁泽军
parent
203bb50212
commit
89c23cae2c
@ -2,6 +2,6 @@
|
||||
VITE_MODE = dev
|
||||
|
||||
# 请求域名
|
||||
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='http://192.168.1.249:8084/ai-agent-server'
|
||||
VITE_APP_BASE_URL='https://info.xglpa.com/ai-agent-server'
|
||||
|
||||
|
||||
@ -30,7 +30,6 @@ import NewsList from './component/news-list.vue'
|
||||
import { getArticleCate } from '@/api/news'
|
||||
import Tabs from '@/packages/components/tabs/tabs.vue'
|
||||
import Tab from '@/packages/components/tab/tab.vue'
|
||||
|
||||
const tabList = ref<any>([])
|
||||
const current = ref<number>(0)
|
||||
|
||||
|
||||
@ -67,7 +67,7 @@ const options = {
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value} 次'
|
||||
formatter: '{value} '
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
@ -86,7 +86,6 @@ const options = {
|
||||
boundaryGap: [0.1, 0.1] // 上下留白比例
|
||||
},
|
||||
series: [{
|
||||
silent: true, // 禁用系列交互
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
itemStyle: {
|
||||
@ -131,7 +130,7 @@ const handleResize = () => {
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
chartRef.value.style.touchAction = 'none'
|
||||
// chartRef.value.style.touchAction = 'none'
|
||||
window.addEventListener('resize', updateSize)
|
||||
})
|
||||
|
||||
@ -152,20 +151,20 @@ const updateSize = () => {
|
||||
|
||||
// 监听配置变化
|
||||
watch(() => props.data, (newVal) => {
|
||||
chartInstance.value?.setOption(newVal)
|
||||
options.dataset.source = newVal
|
||||
chartInstance.value?.setOption(options)
|
||||
}, { deep: true })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-wrapper {
|
||||
touch-action: pan-y;
|
||||
/* 允许垂直滚动 */
|
||||
touch-action: none;
|
||||
/* ✅ 完全禁用父级触摸 */
|
||||
pointer-events: none;
|
||||
/* 穿透点击事件 */
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
pointer-events: auto;
|
||||
/* pointer-events: auto; */
|
||||
/* 恢复图表区域事件 */
|
||||
/* min-height: 300px; */
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div ref="chartEl" :style="{ width, height }"></div>
|
||||
<div ref="chartEl" :style="{ width, height }" class="chart-container"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -22,10 +22,11 @@ const props = defineProps({
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '400px'
|
||||
default: '600px'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const chartEl = ref(null)
|
||||
let chartInstance = null
|
||||
|
||||
@ -43,50 +44,47 @@ const initChart = () => {
|
||||
title: {
|
||||
text: props.title,
|
||||
left: 'center',
|
||||
top: '0%',
|
||||
top: '5%',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
top: '7%',
|
||||
left: 'center'
|
||||
top: '15%',
|
||||
left: 'center',
|
||||
selectedMode: true,
|
||||
},
|
||||
selectedMode: 'single',
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
name: '部门使用次数',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
top: '20%',
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
borderRadius: 10
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center'
|
||||
},
|
||||
// label: {
|
||||
// show: false,
|
||||
// position: 'center'
|
||||
// },
|
||||
emphasis: {
|
||||
scale: true, // 启用放大效果
|
||||
scaleSize: 8, // 放大尺寸像素值
|
||||
itemStyle: {
|
||||
shadowBlur: 15, // 增加阴影效果
|
||||
shadowColor: 'rgba(0, 0, 0, 0.3)'
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 20, // 减小强调文字尺寸
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
formatter: '{b}\n{d}%' // 两行显示
|
||||
fontSize: 40,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
selectedOffset: 10, // 选中项偏移量
|
||||
labelLine: {
|
||||
show: false
|
||||
show: true
|
||||
},
|
||||
hoverOffset: 15, // 增加悬停偏移量
|
||||
still: false, // 允许悬浮动画
|
||||
silent: true, // 启用交互
|
||||
// 添加响应阈值配置
|
||||
hoverAnimationThreshold: 1, // 无论多小的区块都可交互
|
||||
selectedOffset: 10, // 选中项偏移量
|
||||
data: props.data
|
||||
}
|
||||
]
|
||||
@ -117,4 +115,14 @@ watch(() => props.data, () => {
|
||||
})
|
||||
}
|
||||
}, { deep: true })
|
||||
</script>
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
touch-action: manipulation;
|
||||
/* 优化移动端触控 */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
/* 移除点击高光 */
|
||||
}
|
||||
</style>
|
||||
@ -6,15 +6,32 @@
|
||||
</page-meta>
|
||||
<page-status :status="status">
|
||||
<view class="ai-creation">
|
||||
<view class="flex-1 min-h-0">
|
||||
<scroll-view scroll-y class="h-full">
|
||||
<VerticalPieChart :data="chartData4" title="部门使用次数" />
|
||||
<VerticalBarChart :data="chartData" title="模板使用人数" />
|
||||
<VerticalBarChart :data="chartData2" title="模板使用次数" />
|
||||
<VerticalBarChart :data="chartData3" title="个人使用次数" />
|
||||
</scroll-view>
|
||||
<view class="flex-1">
|
||||
<u-field @click="showCalendar = true" v-model="dateRange" :disabled="true" label="时间"
|
||||
placeholder="请选择时间范围" right-icon="arrow-down-fill">
|
||||
</u-field>
|
||||
<tabs :current="current" :swipeable="true" @change="handleChange" height="80" bar-width="60"
|
||||
:barStyle="{ bottom: '0' }">
|
||||
<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>
|
||||
<u-calendar v-model="showCalendar" :mode="mode" @change="changeCalendar"></u-calendar>
|
||||
</page-status>
|
||||
<tabbar />
|
||||
|
||||
@ -28,27 +45,55 @@ import VerticalBarChart from './_components/chart.vue'
|
||||
import VerticalPieChart from './_components/pie-chart.vue'
|
||||
import { PageStatusEnum } from '@/enums/appEnums'
|
||||
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 dateRange = ref(getDateRange())
|
||||
const showCalendar = ref(false)
|
||||
const mode = ref('range')
|
||||
const queryParams = ref({
|
||||
startTime: "2025-03-18 00:00:00",
|
||||
endTime: "2025-03-19 00:00:00",
|
||||
startTime: getDateRange().split(' ~ ')[0] + ' 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 chartData2 = ref([])
|
||||
const chartData3 = ref([])
|
||||
|
||||
const chartData4 = ref([
|
||||
{ name: '分类A', value: 335 },
|
||||
{ name: '分类B', value: 310 },
|
||||
{ name: '分类C', value: 234 }
|
||||
])
|
||||
const chartData4 = ref([])
|
||||
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
@ -61,6 +106,7 @@ const getData = async () => {
|
||||
chartData3.value = responseData.userUseTotalList.map((item: any) => ([item.name, item.total]))
|
||||
chartData4.value = responseData.companyTotalList.map((item: any) => ({ name: item.name, value: item.total }))
|
||||
|
||||
|
||||
status.value = PageStatusEnum.NORMAL
|
||||
} catch (error) {
|
||||
status.value = PageStatusEnum.ERROR
|
||||
@ -70,6 +116,14 @@ onLoad(() => {
|
||||
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 {
|
||||
height: 100%;
|
||||
// height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: linear-gradient(44.7deg, #eaffff 0%, #faf6ff 50%, #f2f3ff 63%, #eaffff 100%);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user