|
|
@@ -31,6 +31,20 @@
|
|
|
ref="chartRef"
|
|
|
style="width: 100%; height: 400px; margin-top: 20px"
|
|
|
></div>
|
|
|
+ <!-- 轮播显示器 -->
|
|
|
+ <ul
|
|
|
+ class="carousel"
|
|
|
+ @mouseenter="pauseCarousel"
|
|
|
+ @mouseleave="resumeCarousel"
|
|
|
+ >
|
|
|
+ <li
|
|
|
+ v-for="(item, idx) in totalPages"
|
|
|
+ :key="idx"
|
|
|
+ @click="goToPage(idx)"
|
|
|
+ >
|
|
|
+ <i :class="{ active: idx === currentPage }"></i>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="11">
|
|
|
@@ -392,6 +406,15 @@
|
|
|
year: '2025',
|
|
|
auditType: '山西省公立幼儿园教育成本监审',
|
|
|
searchKeyword: '',
|
|
|
+ // 轮播相关变量
|
|
|
+ chart: null,
|
|
|
+ chartTimer: null,
|
|
|
+ currentPage: 0,
|
|
|
+ pageSize: 9,
|
|
|
+ totalPages: 0,
|
|
|
+ allCategories: [],
|
|
|
+ allCompletedData: [],
|
|
|
+ allInProgressData: [],
|
|
|
newsList: [
|
|
|
{
|
|
|
content: '依据定价管理规范，全面开展《山西省定价目录》修订工作',
|
|
|
@@ -482,16 +505,144 @@
|
|
|
return day === 0 || day === 6 // 周日或周六为周末
|
|
|
},
|
|
|
initChart() {
|
|
|
- const chart = echarts.init(this.$refs.chartRef)
|
|
|
- let data = [
|
|
|
- { value: 10, name: '输配电' },
|
|
|
- { value: 5, name: '燃气' },
|
|
|
- { value: 20, name: '交通运输' },
|
|
|
- { value: 15, name: '供热' },
|
|
|
- { value: 30, name: '托育服务' },
|
|
|
- { value: 25, name: '养老服务' },
|
|
|
- { value: 40, name: '文化旅游' },
|
|
|
+ // 保存图表实例到组件实例中
|
|
|
+ this.chart = echarts.init(this.$refs.chartRef)
|
|
|
+
|
|
|
+ // 初始化数据
|
|
|
+ this.initChartData()
|
|
|
+
|
|
|
+ // 初始加载第一页数据
|
|
|
+ this.updateChartData()
|
|
|
+
|
|
|
+ // 设置定时器，每5秒切换一页数据
|
|
|
+ this.chartTimer = setInterval(() => {
|
|
|
+ this.currentPage =
|
|
|
+ this.totalPages > 1 ? (this.currentPage + 1) % this.totalPages : 0
|
|
|
+ this.updateChartData()
|
|
|
+ }, 5000)
|
|
|
+
|
|
|
+ // 监听窗口大小变化
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ this.chart.resize()
|
|
|
+ })
|
|
|
+
|
|
|
+ // 组件销毁时清除定时器
|
|
|
+ this.$once('hook:beforeDestroy', () => {
|
|
|
+ if (this.chartTimer) {
|
|
|
+ clearInterval(this.chartTimer)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 初始化图表数据
|
|
|
+ initChartData() {
|
|
|
+ // 扩展数据，确保有足够的数据用于轮播
|
|
|
+ this.allCategories = [
|
|
|
+ { name: '输配电' },
|
|
|
+ { name: '燃气' },
|
|
|
+ { name: '交通运输' },
|
|
|
+ { name: '供热' },
|
|
|
+ { name: '托育服务' },
|
|
|
+ { name: '养老服务' },
|
|
|
+ { name: '文化旅游' },
|
|
|
+ { name: '教育服务' },
|
|
|
+ { name: '医疗服务' },
|
|
|
+ { name: '供水服务' },
|
|
|
+ { name: '公共交通' },
|
|
|
+ { name: '殡葬服务' },
|
|
|
+ { name: '有线电视' },
|
|
|
+ { name: '停车收费' },
|
|
|
+ { name: '景区门票' },
|
|
|
+ { name: '垃圾处理' },
|
|
|
+ { name: '公共租赁' },
|
|
|
+ { name: '污水处理' },
|
|
|
]
|
|
|
+
|
|
|
+ // 已办和在办的完整数据
|
|
|
+ this.allCompletedData = [
|
|
|
+ 45, 38, 42, 39, 43, 48, 46, 44, 47, 52, 49, 51, 43, 40, 55, 37, 41,
|
|
|
+ 50,
|
|
|
+ ]
|
|
|
+ this.allInProgressData = [
|
|
|
+ 18, 25, 16, 22, 20, 17, 19, 21, 24, 18, 23, 20, 25, 19, 17, 22, 24,
|
|
|
+ 16,
|
|
|
+ ]
|
|
|
+
|
|
|
+ // 每页显示9个数据
|
|
|
+ this.pageSize = 9
|
|
|
+ this.currentPage = 0
|
|
|
+ this.totalPages = Math.ceil(this.allCategories.length / this.pageSize)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 跳转到指定页面
|
|
|
+ goToPage(index) {
|
|
|
+ if (index >= 0 && index < this.totalPages) {
|
|
|
+ // 清除现有定时器
|
|
|
+ if (this.chartTimer) {
|
|
|
+ clearInterval(this.chartTimer)
|
|
|
+ }
|
|
|
+ // 更新当前页
|
|
|
+ this.currentPage = index
|
|
|
+ this.updateChartData()
|
|
|
+ // 重新设置定时器
|
|
|
+ this.resumeCarousel()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 暂停轮播
|
|
|
+ pauseCarousel() {
|
|
|
+ if (this.chartTimer) {
|
|
|
+ clearInterval(this.chartTimer)
|
|
|
+ this.chartTimer = null
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 恢复轮播
|
|
|
+ resumeCarousel() {
|
|
|
+ if (!this.chartTimer && this.totalPages > 1) {
|
|
|
+ this.chartTimer = setInterval(() => {
|
|
|
+ this.currentPage = (this.currentPage + 1) % this.totalPages
|
|
|
+ this.updateChartData()
|
|
|
+ }, 5000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 更新图表数据的方法
|
|
|
+ updateChartData(
|
|
|
+ categories = null,
|
|
|
+ completedData = null,
|
|
|
+ inProgressData = null
|
|
|
+ ) {
|
|
|
+ if (!this.chart) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ let currentCategories, currentCompletedData, currentInProgressData
|
|
|
+
|
|
|
+ // 如果提供了新数据，则使用新数据
|
|
|
+ if (categories && completedData && inProgressData) {
|
|
|
+ currentCategories = categories
|
|
|
+ currentCompletedData = completedData
|
|
|
+ currentInProgressData = inProgressData
|
|
|
+ } else {
|
|
|
+ // 否则使用当前页的数据
|
|
|
+ const startIndex = this.currentPage * this.pageSize
|
|
|
+ const endIndex = Math.min(
|
|
|
+ startIndex + this.pageSize,
|
|
|
+ this.allCategories.length
|
|
|
+ )
|
|
|
+
|
|
|
+ currentCategories = this.allCategories.slice(startIndex, endIndex)
|
|
|
+ currentCompletedData = this.allCompletedData.slice(
|
|
|
+ startIndex,
|
|
|
+ endIndex
|
|
|
+ )
|
|
|
+ currentInProgressData = this.allInProgressData.slice(
|
|
|
+ startIndex,
|
|
|
+ endIndex
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
const option = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
@@ -510,13 +661,12 @@
|
|
|
top: '20%',
|
|
|
left: '3%',
|
|
|
right: '4%',
|
|
|
- bottom: '2%', // 增加底部空间以容纳滚动条和旋转的标签
|
|
|
+ bottom: '2%',
|
|
|
containLabel: true,
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- data: data.map((item) => item.name),
|
|
|
- // 启用滚动条
|
|
|
+ data: currentCategories.map((item) => item.name),
|
|
|
axisLabel: {
|
|
|
interval: 0,
|
|
|
rotate: 0,
|
|
|
@@ -525,7 +675,6 @@
|
|
|
alignWithLabel: true,
|
|
|
},
|
|
|
boundaryGap: true,
|
|
|
- // 滚动配置
|
|
|
scrollBar: {
|
|
|
show: true,
|
|
|
height: 10,
|
|
|
@@ -539,7 +688,7 @@
|
|
|
name: '已办',
|
|
|
type: 'bar',
|
|
|
barWidth: '10%',
|
|
|
- data: [45, 38, 42, 39, 43, 48, 46, 44, 47, 52, 49, 51],
|
|
|
+ data: currentCompletedData,
|
|
|
itemStyle: {
|
|
|
color: '#1890ff',
|
|
|
},
|
|
|
@@ -548,36 +697,34 @@
|
|
|
name: '在办',
|
|
|
type: 'bar',
|
|
|
barWidth: '10%',
|
|
|
- data: [18, 25, 16, 22, 20, 17, 19, 21, 24, 18, 23, 20],
|
|
|
+ data: currentInProgressData,
|
|
|
itemStyle: {
|
|
|
color: '#ff9c6e',
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
}
|
|
|
- chart.setOption(option)
|
|
|
- window.addEventListener('resize', () => {
|
|
|
- chart.resize()
|
|
|
- })
|
|
|
- },
|
|
|
- loadMoreNews() {
|
|
|
- // 跳转通知公告页面
|
|
|
- this.$router.push('/personal/notice')
|
|
|
- },
|
|
|
- handleOp(type, row) {
|
|
|
- this.$message.info(`执行【${type}】操作：${row.task}`)
|
|
|
- },
|
|
|
- searchMemo() {
|
|
|
- this.$message.info(`搜索备忘录，关键词：${this.searchKeyword}`)
|
|
|
- },
|
|
|
- hasEventOnDate(date) {
|
|
|
- // 检查指定日期是否有备忘录事件
|
|
|
- return this.memoList.some((item) => item.time === date.substring(5))
|
|
|
- },
|
|
|
- addMemo() {
|
|
|
- this.$message.info('添加新备忘录')
|
|
|
+
|
|
|
+ this.chart.setOption(option, true)
|
|
|
},
|
|
|
},
|
|
|
+ loadMoreNews() {
|
|
|
+ // 跳转通知公告页面
|
|
|
+ this.$router.push('/personal/notice')
|
|
|
+ },
|
|
|
+ handleOp(type, row) {
|
|
|
+ this.$message.info(`执行【${type}】操作：${row.task}`)
|
|
|
+ },
|
|
|
+ searchMemo() {
|
|
|
+ this.$message.info(`搜索备忘录，关键词：${this.searchKeyword}`)
|
|
|
+ },
|
|
|
+ hasEventOnDate(date) {
|
|
|
+ // 检查指定日期是否有备忘录事件
|
|
|
+ return this.memoList.some((item) => item.time === date.substring(5))
|
|
|
+ },
|
|
|
+ addMemo() {
|
|
|
+ this.$message.info('添加新备忘录')
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -805,4 +952,33 @@
|
|
|
font-weight: 500;
|
|
|
color: #606266;
|
|
|
}
|
|
|
+ .carousel {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ li {
|
|
|
+ list-style: none;
|
|
|
+ margin: 0 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: transform 0.2s ease;
|
|
|
+ &:hover {
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ display: inline-block;
|
|
|
+ width: 12px;
|
|
|
+ height: 8px;
|
|
|
+ background-color: #e0e0e0;
|
|
|
+ border-radius: 50%;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ i.active {
|
|
|
+ background-color: #409eff;
|
|
|
+ width: 24px;
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
cb_luzhixia