Skip to content

E
exhibition_backstage
提交 3e98ec35 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

完成首页部分数据

上级 f903a92c
隐藏空白字符变更
内嵌 并排
正在显示 包含 316 行增加 和 301 行删除
src/api/user.js
浏览文件 @ 3e98ec35
......@@ -67,3 +67,22 @@ export function getUserList(data) {
})
}
// 以用户行为统计排序分页查询资源
export function getListByPageSort(data) {
return request({
url: '/bizOptSort/mapListByPageSort',
method: 'post',
data
})
}
// 以用户行为统计排序分页查询资源
export function getBarMap(params) {
return request({
url: '/bizOptSort/getBarMap',
method: 'get',
params
})
}
src/views/home/config.js
浏览文件 @ 3e98ec35
......@@ -2,10 +2,9 @@ export const title = [{
prop: "name",
label: "名称",
columnAlign: 'center',
width:120
},
{
prop: "unit",
prop: "deptName",
label: "馆藏单位/展览单位",
columnAlign: 'center',
},
......@@ -15,19 +14,22 @@ export const title = [{
columnAlign: 'center',
},
{
prop: "dj",
prop: "browseCount",
label: "点击量",
columnAlign: 'center',
sortable:true
},
{
prop: "dz",
prop: "collectCount",
label: "点赞量",
columnAlign: 'center',
sortable:true
},
{
prop: "sc",
prop: "loveCount",
label: "收藏量",
columnAlign: 'center',
sortable:true
},
]
src/views/home/index.vue
浏览文件 @ 3e98ec35
......@@ -9,14 +9,19 @@
<el-card class="box-card" style="margin-top: 20px;">
<div slot="header" class="clearfix">
<div style="float: left;font-weight: bold;">精品展数据统计</div>
<el-radio-group v-model="radio" style="float: right;">
<el-radio :label="1">精品展</el-radio>
<el-radio-group v-model="currentSortPage" style="float: right;">
<el-radio :label="2">展览</el-radio>
<el-radio :label="3">文物</el-radio>
<el-radio :label="1">文物</el-radio>
<el-radio :label="4">精品展</el-radio>
<el-radio :label="3">虚拟展厅</el-radio>
</el-radio-group>
</div>
<TablePage :data="list.records" :tableTitle="tableTitle">
</TablePage>
<el-pagination style="margin: 16px 0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="Number(list.current)" :page-sizes="[10, 20, 50, 100]" :page-size="Number(list.size)"
layout="total, sizes, prev, pager, next, jumper" :total="Number(list.total)" class="pagination">
</el-pagination>
</el-card>
</el-tab-pane>
<el-tab-pane label="展览数据统计" name="amount">
......@@ -87,316 +92,304 @@
</template>
<script>
import { mapGetters } from 'vuex'
import TablePage from "@/components/Table/TablePage.vue";
import { title } from "./config";
import Echart from '@/components/Echarts' //引入echatrs组件
export default {
name: 'Home',
computed: {
...mapGetters([
'name'
]),
tableTitle() {
return title;
import { mapGetters } from 'vuex'
import TablePage from "@/components/Table/TablePage.vue";
import { title } from "./config";
import Echart from '@/components/Echarts' //引入echatrs组件
import { getListByPageSort, getBarMap } from '@/api/user'
export default {
name: 'Home',
components: {
TablePage, Echart,
},
},
components: {
TablePage, Echart,
},
data() {
return {
activeName: 'behavior',
radio: 1,
list: {
records: [
{
name: '神秘贵州',
unit: '贵州省地质博物馆',
regionName: '贵阳市',
dj: 100,
dz: 8,
sc: 7
},
{
name: '夜郎的疑问',
unit: '黔西南州博物馆',
regionName: '黔西南州',
dj: 99,
dz: 6,
sc: 7
},
{
name: '四渡赤水',
unit: '遵义博物馆',
regionName: '遵义市',
dj: 96,
dz: 4,
sc: 9
}
]
computed: {
...mapGetters([
'name'
]),
tableTitle() {
let tableTitle = title
switch (this.currentSortPage) {
case 2:
tableTitle[0].prop = 'title'
break;
default:
tableTitle[0].prop = 'name'
break;
}
return tableTitle;
},
options: null
}
},
mounted() {
this.getBehaviorData()
},
methods: {
getBehaviorData() {
var pie_color = ['#00A5B9', '#FFD71D', '#F76464', '#56A3FF', '#32D790', '#F4B561', '#7080DB', '#DF7A90',
'#3CC4EF', '#EF7F3C', '#EF3C81', '#0DBF8C', '#2F73C0', '#C55E18', '#C899FF', '#C6D727',
'#FF688F', '#87A0DC', '#00D9F7', '#A24EED'
];
var legendList = [];
var pieData = [{
name: 'A 农、林、牧、渔业',
value: 290
}, {
name: 'B 采矿业',
value: 40
}, {
name: 'C 制造业',
value: 320
}, {
name: 'D 电力、热力、燃气及水生产和供应业',
value: 540
}, {
name: 'E 建筑业',
value: 25
}, {
name: 'F 批发和零售业',
value: 90
}, {
name: 'G 交通运输、仓储和邮政业',
value: 450
}, {
name: 'H 住宿和餐饮业',
value: 120
}, {
name: 'I 信息传输、软件和信息技术服务业',
value: 288
}, {
name: 'J 金融业',
value: 344
}, {
name: 'K 房地产业',
value: 571
}, {
name: 'L 租赁和商务服务业',
value: 842
}, {
name: 'M 科学研究和技术服务业',
value: 120
}, {
name: 'N 水利、环境和公共设施管理业',
value: 430
}, {
name: 'O 居民服务、修理和其他服务业',
value: 403
}, {
name: 'Q 卫生和社会工作',
value: 600
}, {
name: 'R 文化、体育和娱乐业',
value: 787
}, {
name: 'S 公共管理、社会保障和社会组织',
value: 91
}, {
name: 'T 国际组织',
value: 34
}];
for (var i = 0; i < pieData.length; i++) {
legendList.push(pieData[i].name);
}
this.options = {
color: pie_color,
title: {
show: false,
text: '',
textStyle: {
color: '#333333',
fontSize: 16,
},
},
grid: {
show: false,
left: '2%',
right: '50%',
bottom: 0,
top: '2%',
containLabel: true
},
legend: {
bottom: '4%',
right: '10%',
orient: 'vertical',
width: 540,
height: 240,
padding: [14, 20],
backgroundColor: 'rgba(236,246,255,0.30)',
borderWidth: 1,
borderColor: '#E7F2FB',
borderRadius: 4,
icon: 'circle',
itemWidth: 8,
itemHeight: 8,
textStyle: {
color: '#333333',
fontSize: 12,
},
data: legendList,
},
xAxis: {
type: 'value',
gridIndex: 0,
name: '家',
nameTextStyle: {
color: '#9B9B9B',
fontSize: 14
},
axisLabel: {
color: '#727272',
fontSize: 14,
},
axisLine: {
show: true,
lineStyle: {
color: '#333333',
opacity: 0.35,
}
},
axisTick: {
show: true,
inside: true,
lineStyle: {
color: '#333333',
opacity: 0.35,
},
data() {
return {
activeName: 'behavior',
radio: 1,
list: {
records: [
{
name: '神秘贵州',
unit: '贵州省地质博物馆',
regionName: '贵阳市',
dj: 100,
dz: 8,
sc: 7
},
{
name: '夜郎的疑问',
unit: '黔西南州博物馆',
regionName: '黔西南州',
dj: 99,
dz: 6,
sc: 7
},
{
name: '四渡赤水',
unit: '遵义博物馆',
regionName: '遵义市',
dj: 96,
dz: 4,
sc: 9
}
},
splitLine: {
show: false
}
]
},
yAxis: {
type: 'category',
gridIndex: 0,
data: legendList,
inverse: true,
axisLabel: {
color: '#727272',
fontSize: 14,
},
axisLine: {
show: true,
lineStyle: {
options: null,
currentSortPage: 2,//1-文物；2-展览；3-虚拟展厅；4-精品展览，0-所有。默认0
}
},
watch: {
currentSortPage(value) {
this.currentSortPage = value
this.loadListByPageSort()
}
},
mounted() {
this.getBehaviorData()
this.loadListByPageSort()
// this.getBarData()
},
methods: {
async getBehaviorData() {
var pie_color = ['#00A5B9', '#FFD71D', '#F76464', '#56A3FF', '#32D790', '#F4B561', '#7080DB', '#DF7A90',
'#3CC4EF', '#EF7F3C', '#EF3C81', '#0DBF8C', '#2F73C0', '#C55E18', '#C899FF', '#C6D727',
'#FF688F', '#87A0DC', '#00D9F7', '#A24EED'
];
var legendList = [];
let res = await getBarMap()
const { allBrowseSortList, culturalRelicSortList, exhibitionSortList, virtualSortList } = res.data
let barListAll = []
allBrowseSortList.map(item => {
let obj = {}
if (item.data > 0) {
obj.name = item.name
obj.value = item.data
barListAll.push(obj)
}
})
// console.log('allBrowseSortList', allBrowseSortList);
console.log('barListAll', barListAll);
for (var i = 0; i < barListAll.length; i++) {
legendList.push(barListAll[i].name);
}
this.options = {
color: pie_color,
title: {
show: false,
text: '',
textStyle: {
color: '#333333',
opacity: 0.35,
}
},
axisTick: {
show: false
fontSize: 16,
},
},
splitLine: {
show: false
}
},
series: [{
name: '柱状图',
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0,
data: pieData,
label: {
tooltip: {
trigger: 'axis',
show: true,
position: 'right',
color: '#4A4A4A',
fontSize: 14,
},
barWidth: 20,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x1: 0,
y1: 1,
colorStops: [{
offset: 0,
color: '#FF9A91'
}, {
offset: 1,
color: '#F8B44F'
}],
global: false
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
barBorderRadius: [0, 10, 10, 0]
}
}, {
type: 'pie',
radius: ['10%', '36%'],
center: ['75%', '30%'],
data: pieData,
hoverAnimation: false,
label: {
show: true,
position: 'outside',
formatter: '{b}：{d}%',
},
zlevel: 2
}, {
name: '外圈',
type: 'pie',
radius: ['36%', '37.5%'],
center: ['75%', '30%'],
hoverAnimation: false,
itemStyle: {
color: 'rgb(21 132 214 / 0.1)',
grid: {
show: false,
left: '2%',
right: '50%',
bottom: 0,
top: '2%',
containLabel: true
},
emphasis: {
itemStyle: {
color: 'rgb(21 132 214 / 0.1)'
// legend: {
// bottom: '4%',
// right: '10%',
// orient: 'vertical',
// width: 540,
// height: 240,
// padding: [14, 20],
// backgroundColor: 'rgba(236,246,255,0.30)',
// borderWidth: 1,
// borderColor: '#E7F2FB',
// borderRadius: 4,
// icon: 'circle',
// itemWidth: 8,
// itemHeight: 8,
// textStyle: {
// color: '#333333',
// fontSize: 12,
// },
// data: legendList,
// },
xAxis: {
type: 'value',
gridIndex: 0,
name: '次',
nameTextStyle: {
color: '#9B9B9B',
fontSize: 14
},
axisLabel: {
color: '#727272',
fontSize: 14,
},
axisLine: {
show: true,
lineStyle: {
color: '#333333',
opacity: 0.35,
}
},
axisTick: {
show: true,
inside: true,
lineStyle: {
color: '#333333',
opacity: 0.35,
}
},
splitLine: {
show: false
}
},
labelLine: {
show: false
},
data: [{
value: 1
}],
zlevel: 1
}, {
name: '内圈',
type: 'pie',
radius: ['8.5%', '10%'],
center: ['75%', '30%'],
hoverAnimation: false,
itemStyle: {
color: 'rgb(21 132 214 / 0.1)',
yAxis: {
type: 'category',
gridIndex: 0,
data: legendList,
inverse: true,
axisLabel: {
color: '#727272',
fontSize: 14,
},
axisLine: {
show: true,
lineStyle: {
color: '#333333',
opacity: 0.35,
}
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
emphasis: {
series: [{
name: '浏览量',
type: 'bar',
xAxisIndex: 0,
yAxisIndex: 0,
data: barListAll,
label: {
show: true,
position: 'right', // 位置
color: '#303133',
fontSize: 14,
distance: 15, // 距离
formatter: '{c} 次' // 这里是数据展示的时候显示的数据
}, // 柱子上方的数值
barWidth: 20,
itemStyle: {
color: 'rgb(21 132 214 / 0.1)'
color: '#52A8FF',
normal: {
borderRadius: [0, 8, 8, 0],
color: function (params) {
// 定义一个颜色集合
let colorList = [
'#52A8FF',
'#00B389',
'#FFA940',
'#FF5A57',
'#29EFC4',
'#F8AEA4',
'#FFC53D',
'#009982',
'#C099FC',
'#F5855F',
];
// 对每个bar显示一种颜色
return colorList[params.dataIndex];
},
},
barBorderRadius: [0, 10, 10, 0]
}
},
labelLine: {
show: false
},
data: [{
value: 1
}],
zlevel: 1
}]
}
},]
}
},
// 加载下方点击量明细
async loadListByPageSort() {
const params = {
type: this.currentSortPage
}
let res = await getListByPageSort(params)
let data = res.data
switch (this.currentSortPage) {
case 1:
// 文物
this.list = data.culturalRelicPageVos
break;
case 2:
// 展览
this.list = data.exhibitionPageVos
break;
case 3:
// 虚拟展厅
this.list = data.virtualPageVos
break;
case 4:
// 精品展览
this.list = {
records: [],
size: 10,
current: 1
}
this.$message.info('精品展览明细正在开发中，敬请期待')
break;
}
// console.log(111, res);
},
async getBarData() {
let res = await getBarMap()
console.log(res);
},
// 改变页容量
handleSizeChange(value) {
this.list.size = value;
this.loadListByPageSort();
},
// 改变当前显示页
handleCurrentChange(value) {
this.list.current = value;
this.loadListByPageSort();
},
}
}
}
</script>
<style lang="scss" scoped>
.home {
padding: 16px;
}
</style>
.home {
padding: 16px;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论