修复bug
This commit is contained in:
parent
203bb50212
commit
89c23cae2c
@ -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'
|
||||||
|
|
||||||
|
|||||||
@ -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)
|
||||||
|
|
||||||
|
|||||||
@ -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; */
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@ -118,3 +116,13 @@ watch(() => props.data, () => {
|
|||||||
}
|
}
|
||||||
}, { deep: true })
|
}, { deep: true })
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.chart-container {
|
||||||
|
touch-action: manipulation;
|
||||||
|
/* 优化移动端触控 */
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
/* 移除点击高光 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -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%);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user