Skip to content

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

文物和展览增加批量操作；文物修改批量导入且待审核的为不可编辑

上级 96d55cfe
隐藏空白字符变更
内嵌 并排
正在显示 包含 846 行增加 和 638 行删除
src/components/Table/TablePage.vue
浏览文件 @ a07d7ad2
......@@ -9,7 +9,6 @@
empty-text="暂无数据"
:highlight-current-row="true"
@selection-change="handleSelectionChange"
@current-change="handleCurrentChange"
v-bind="$attrs"
>
<el-table-column v-if="needExpand" type="expand">
......@@ -18,7 +17,12 @@
<slot name="expand" :scope="scope.$index"></slot>
</template>
</el-table-column>
<el-table-column v-if="hasMultiSelection" type="selection" width="55" />
<el-table-column
v-if="hasMultiSelection"
:selectable="getSelectableData"
type="selection"
width="55"
/>
<el-table-column type="index" width="50" label="序号" align="center">
</el-table-column>
<el-table-column
......@@ -109,42 +113,51 @@
export default {
name: "TablePage",
props: {
// 表格数据
data: {
type: Array,
default: () => [],
},
// 表头项
tableTitle: {
type: Array,
default: () => [],
},
// 操作项
operates: {
type: Object,
default: () => ({}),
},
hasSelection: {
type: Boolean,
default: false,
},
// 是否需要多选框
hasMultiSelection: {
type: Boolean,
default: false,
},
// 是否需要展开
needExpand: {
type: Boolean,
default: false,
},
// 获取多选中的可被选择项目
selectableFuction: {
type: Function,
},
},
// 继承所有父组件的内容
inheritAttrs: true,
methods: {
// 多选操作
handleSelectionChange(val) {
if (this.hasMultiSelection) {
this.$emit("handleSelectionChange", val);
}
},
handleCurrentChange(val) {
if (this.hasSelection) {
this.$emit("handleCurrentChange", val);
// 获取多选中的可被选择项目，true则可被选择
getSelectableData(row, rowIndex) {
if (this.selectableFuction) {
return this.selectableFuction(row, rowIndex);
} else {
return true;
}
},
},
......
src/utils/bizCommon.js
浏览文件 @ a07d7ad2
......@@ -20,6 +20,20 @@ const bizCommon = {
callback()
}
},
/**
* 业务中的批量删除
* @param {Promise} request 删除的请求
* @param {Array} ids 删除的id集合
* @param {Function} callback 回调函数，一般是loaddata
*/
async multiDelete(request, ids, callback) {
const params = ids
const res = await request(params)
if (res.code == 0) {
Message.success('删除成功！')
callback()
}
},
}
export default bizCommon
\ No newline at end of file
src/views/culturalRelic/configs/list.js
浏览文件 @ a07d7ad2
import perms from './perms'
// 文物分页的配置
export const passedTitle = [{
prop: "name",
......@@ -38,12 +39,12 @@ export const passedTitle = [{
// columnAlign: 'center',
// },
{
prop: "deptName",
label: "馆藏单位",
columnAlign: 'center',
showOverFlowToolTip: true,
},
// {
// prop: "deptName",
// label: "馆藏单位",
// columnAlign: 'center',
// showOverFlowToolTip: true,
// },
// {
// prop: "regionName",
// label: "所属地",
......@@ -101,18 +102,18 @@ export const passedTitle = [{
columnAlign: 'center', sortable: true
},
{
prop: "sourceWay",
label: "来源方式",
columnAlign: 'center',
showOverFlowToolTip: true,
},
// {
// prop: "sourceWay",
// label: "来源方式",
// columnAlign: 'center',
// showOverFlowToolTip: true,
// },
{
prop: "remark",
label: "备注",
columnAlign: 'center',
},
// {
// prop: "remark",
// label: "备注",
// columnAlign: 'center',
// },
// directory 文件夹
......@@ -232,12 +233,6 @@ export const unPassedTitle = [{
label: "审核状态",
columnAlign: 'center',
},
{
prop: "checkRemark",
label: "审核意见",
columnAlign: 'center',
showOverFlowToolTip: true,
},
{
prop: "remark",
label: "备注",
......@@ -255,36 +250,45 @@ export const operates = {
label: "操作",
titleAlign: "center",
columnAlign: "center",
width: "260px",
width: "240px",
}
// 预览按钮
export const previewButton = {
type: 'view',
title: '详情',
perms: 'bizCulturalRelic:list'
perms: perms.detail
}
// 编辑按钮
export const editButton = {
type: 'edit',
title: '编辑',
perms: 'bizCulturalRelic:update'
perms: perms.update
}
// 编辑禁用按钮
// 删除禁用按钮
export const deleteDisabledButton = {
type: 'delete',
title: '删除',
perms: perms.delete,
disabled: true
}
// 更新禁用按钮
export const editDisabledButton = {
type: 'edit',
title: '编辑',
perms: 'bizCulturalRelic:update',
perms: perms.update,
disabled: true
}
// 编辑按钮
// 删除按钮
export const deleteButton = {
type: 'delete',
title: '删除',
perms: 'bizCulturalRelic:delete'
perms: perms.delete
}
......
src/views/culturalRelic/configs/perms.js 0 → 100644
浏览文件 @ a07d7ad2
// 权限code 请勿删除！！！
const perms = {
add: 'bizCulturalRelic:add',
update: 'bizCulturalRelic:update',
delete: 'bizCulturalRelic:delete',
list: 'bizCulturalRelic:list',
detail: 'bizCulturalRelic:detail',
}
export default perms
\ No newline at end of file
src/views/culturalRelic/index.vue
浏览文件 @ a07d7ad2
......@@ -8,42 +8,66 @@
/>
<div class="tools">
<div class="tools-item">
<el-button
<PermissionButton
button
size="mini"
type="primary"
@click.native="handleOperation({ type: 'downloadTemplate' })"
icon="el-icon-download"
:disabled="loading"
:perms="perms.add"
style="margin-right: 16px"
>
下载导入模板</el-button
下载导入模板</PermissionButton
>
<el-button
<PermissionButton
button
size="mini"
type="primary"
@click.native="handleOperation({ type: 'viewImportRecord' })"
icon="el-icon-document"
plain
:perms="perms.add"
style="margin-right: 16px"
>
查看导入记录</el-button
查看导入记录</PermissionButton
>
<PermissionButton
button
size="mini"
type="danger"
@click.native="handleOperation({ type: 'multiDelete' })"
icon="el-icon-delete"
plain
:perms="perms.delete"
:disabled="isMultiDisabled"
>
批量删除</PermissionButton
>
</div>
<div class="tools-item">
<el-button
<PermissionButton
button
size="mini"
type="primary"
@click.native="handleOperation({ type: 'add' })"
icon="el-icon-plus"
:perms="perms.add"
style="margin-right: 16px"
>
添加</el-button
添加</PermissionButton
>
<el-button
<PermissionButton
button
:perms="perms.add"
size="mini"
type="success"
@click.native="handleOperation({ type: 'multiAdd' })"
icon="el-icon-upload"
>
批量导入</el-button
批量导入</PermissionButton
>
</div>
</div>
......@@ -56,6 +80,9 @@
:data="getCurrentList().records"
:tableTitle="getTitle"
:operates="operates"
:selectableFuction="selectableFuction"
hasMultiSelection
@handleSelectionChange="handleSelectionChange"
>
<template v-slot:sourceWay="{ scope }">
<DictText
......@@ -88,12 +115,7 @@
<img
:src="$getFullUrl(scope.faceImagePressUrl || scope.faceImageUrl)"
alt="暂无图片"
style="
cursor: pointer;
width: 80px;
height: 80px;
object-fit: contain;
"
style="cursor: pointer; height: 50px; object-fit: contain"
@click="handelPreviewImages(scope.faceImageUrl)"
/>
</template>
......@@ -153,8 +175,10 @@ import {
editButton,
deleteButton,
editDisabledButton,
deleteDisabledButton,
searchConfig,
} from "./configs/list";
import perms from "./configs/perms";
import {
getCulturalRelicListPerTemp,
getCulturalRelicListPer,
......@@ -182,6 +206,7 @@ export default {
},
data() {
return {
perms, //权限code,很重要
// （存放两份数据的目的是为了防止切换的时候分页被重置）
//最终表
list: {
......@@ -215,6 +240,7 @@ export default {
bizType: "biz_cultural_relic", //业务类型，文物、展览等biz_cultural_relic——文物，biz_exhibition——展览，如果是文物和展览批量上传必填，抠图不用填
uploadUrl: process.env.VUE_APP_BASE_API + "/bizImport/importZip", //上传的地址，必填
},
multipleSelection: [], //批量选择的数组
};
},
watch: {
......@@ -222,6 +248,7 @@ export default {
tabActive(value) {
this.resetPage();
this.loadData();
this.multipleSelection = [];
},
},
computed: {
......@@ -239,16 +266,24 @@ export default {
},
getOperations(row) {
return (row) => {
const { checkStatus, batchNum } = row;
const isApprovaling = checkStatus == 0;
const isMultiAdd = batchNum && batchNum > 0;
if (this.tabActive == "passed") {
return [previewButton, deleteButton];
} else if (row.checkStatus == 0) {
// 审核中的禁用编辑
} else if (isApprovaling) {
// 审核中的禁用编辑和删除
return [previewButton, editDisabledButton, deleteDisabledButton];
} else if (isMultiAdd) {
return [previewButton, editDisabledButton, deleteButton];
} else {
return [previewButton, editButton, deleteButton];
}
};
},
isMultiDisabled() {
return this.multipleSelection.length === 0;
},
},
async created() {
this.loadData();
......@@ -319,33 +354,8 @@ export default {
async handleOperation(value, row) {
switch (value.type) {
case "add":
this.form = {
name: "", //名称
type: "", //类别（字典值）
level: "", //文物级别（字典值）
textureType: "", //质地（字典值）
detailSize: "", // 具体尺寸
years: "", //年代
num: 1, //数量
deptId: "", //收藏馆id——新增传当前用户的deptId
intro: "", //馆藏介绍
literature: "", //关联文献。id1,id2,id3
// directory:'',// 文件夹（字母或者数字命名）
// regionCode:'',//所属地（分号分隔的编号）——传当前用户的regionCode
sourceWay: "", //来源方式
sayExplain: "", //讲解词文件。文件id
status: 1, //上下架状态(0-下架，1-上架）
// flag3d:'',//是否有3D图片（字典值：1-有；0-无）
themeWord: "", //主题词
url3d: "", //3durl链接
remark: "", //备注
audios: "", //音频文件（文件id）
images: "", //图片文件（文件id，多个以逗号隔开）
videos: "", //视频文件（文件id）
};
this.$refs.InfoEditDialog.visible = true;
this.add(row);
break;
case "view":
this.view(row);
break;
......@@ -367,8 +377,55 @@ export default {
case "viewImportRecord":
this.viewImport();
break;
case "multiDelete":
this.multiDelete();
break;
}
},
add(row) {
this.form = {
name: "", //名称
type: "", //类别（字典值）
level: "", //文物级别（字典值）
textureType: "", //质地（字典值）
detailSize: "", // 具体尺寸
years: "", //年代
num: 1, //数量
deptId: "", //收藏馆id——新增传当前用户的deptId
intro: "", //馆藏介绍
literature: "", //关联文献。id1,id2,id3
// directory:'',// 文件夹（字母或者数字命名）
// regionCode:'',//所属地（分号分隔的编号）——传当前用户的regionCode
sourceWay: "", //来源方式
sayExplain: "", //讲解词文件。文件id
status: 1, //上下架状态(0-下架，1-上架）
// flag3d:'',//是否有3D图片（字典值：1-有；0-无）
themeWord: "", //主题词
url3d: "", //3durl链接
remark: "", //备注
audios: "", //音频文件（文件id）
images: "", //图片文件（文件id，多个以逗号隔开）
videos: "", //视频文件（文件id）
};
this.$refs.InfoEditDialog.visible = true;
},
// 获取多选中的可被选择项目，true则可被选择
selectableFuction(row, rowIndex) {
// 除了审核中的，其他状态都可以删除
const isApproval = 0;
if (row.checkStatus !== isApproval) {
return true;
}
},
// 批量删除
multiDelete() {
const ids = this.multipleSelection.map((item) => {
return item.crId;
});
const request = this.getCurrentDeleteRequest();
const callback = this.loadData;
this.$bizCommon.multiDelete(request, ids, callback);
},
async view(row) {
if (!row) {
return;
......
src/views/display/configs/list.js
浏览文件 @ a07d7ad2
import perms from "./perms";
export const searchConfig = [
{
prop: "title",
......@@ -269,21 +270,21 @@ export const operates = {
export const previewButton = {
type: 'view',
title: '预览',
perms: 'bizCulturalRelic:list'
perms: perms.list
}
// 编辑按钮
export const editButton = {
type: 'edit',
title: '编辑',
perms: 'bizCulturalRelic:update'
perms: perms.update
}
// 编辑禁用按钮
export const editDisabledButton = {
type: 'edit',
title: '编辑',
perms: 'bizCulturalRelic:update',
perms: perms.update,
disabled: true
}
......@@ -291,38 +292,5 @@ export const editDisabledButton = {
export const deleteButton = {
type: 'delete',
title: '删除',
perms: 'bizCulturalRelic:delete'
}
// // 临时表
// export const operationsTemp = [
// // {
// // type: "view",
// // title: "预览",
// // perms: "bizExhibition:list"
// // },
// {
// type: "edit",
// title: "编辑",
// perms: 'bizExhibition:update'
// },
// {
// type: "delete",
// title: "删除",
// perms: 'bizExhibition:delete'
// },
// ];
// // 最终表
// export const operations = [
// // {
// // type: "edit",
// // title: "编辑",
// // perms: 'bizExhibition:update'
// // },
// {
// type: "delete",
// title: "删除",
// perms: 'bizExhibition:delete'
// },
// ];
perms: perms.delete
}
\ No newline at end of file
src/views/display/configs/perms.js 0 → 100644
浏览文件 @ a07d7ad2
// 权限code 请勿删除！！！
const perms = {
add: 'bizExhibition:add',
update: 'bizExhibition:update',
delete: 'bizExhibition:delete',
list: 'bizExhibition:list',
}
export default perms
\ No newline at end of file
src/views/display/index.vue
浏览文件 @ a07d7ad2
......@@ -5,24 +5,44 @@
</div>
<div class="tools">
<div class="tools-item">
<el-button
<PermissionButton
button
:disabled="loading"
size="mini"
type="primary"
@click.native="handleOperation({ type: 'downloadTemplate' })"
icon="el-icon-download"
:perms="perms.add"
style="margin-right: 16px"
>
下载导入模板</el-button
下载导入模板</PermissionButton
>
<el-button
<PermissionButton
button
type="primary"
size="mini"
@click.native="handleOperation({ type: 'viewImportRecord' })"
icon="el-icon-document"
plain
:perms="perms.add"
style="margin-right: 16px"
>
查看导入记录</PermissionButton
>
查看导入记录</el-button
<PermissionButton
button
type="danger"
size="mini"
@click.native="handleOperation({ type: 'multiDelete' })"
icon="el-icon-delete"
plain
:perms="perms.delete"
style="margin-right: 16px"
:disabled="isMultiDisabled"
>
批量删除</PermissionButton
>
</div>
<div class="tools-item">
......@@ -33,7 +53,8 @@
size="mini"
@click.native="handleOperation({ type: 'add' })"
icon="el-icon-plus"
style="margin-right: 10px"
:perms="perms.add"
style="margin-right: 16px"
>添加</PermissionButton
>
<PermissionButton
......@@ -43,6 +64,8 @@
size="mini"
@click.native="handleOperation({ type: 'multiAdd' })"
icon="el-icon-upload"
:perms="perms.add"
style="margin-right: 16px"
>整量导入</PermissionButton
>
</div>
......@@ -56,6 +79,9 @@
:data="getCurrentList().records"
:tableTitle="getTitle"
:operates="operates"
hasMultiSelection
:selectableFuction="selectableFuction"
@handleSelectionChange="handleSelectionChange"
>
<template v-slot:status="{ scope }">
<el-popconfirm
......@@ -177,6 +203,7 @@ import { getToken } from "@/utils/auth";
import { importZip } from "@/utils/file";
import boutiqueTool from "@/utils/boutique";
import { searchConfig } from "./configs/list";
import perms from "./configs/perms";
export default {
components: {
InfoEditDialog,
......@@ -187,6 +214,7 @@ export default {
},
data() {
return {
perms,
// （存放两份数据的目的是为了防止切换的时候分页被重置）
//最终表
list: {
......@@ -246,6 +274,7 @@ export default {
bizType: "biz_exhibition", //业务类型，文物、展览等biz_cultural_relic——文物，biz_exhibition——展览，如果是文物和展览批量上传必填，抠图不用填
uploadUrl: process.env.VUE_APP_BASE_API + "/bizImport/importZip", //上传的地址，必填
},
multipleSelection: [],
};
},
computed: {
......@@ -283,6 +312,9 @@ export default {
getTitle() {
return this.tabActive == "passed" ? this.passedTitle : this.unPassedTitle;
},
isMultiDisabled() {
return this.multipleSelection.length === 0;
},
},
async created() {
......@@ -309,6 +341,7 @@ export default {
tabActive(value) {
this.resetPage();
this.loadData();
this.multipleSelection = [];
},
},
methods: {
......@@ -400,8 +433,28 @@ export default {
case "viewImportRecord":
this.$appCommon.openDialog(this, "ImportRecordDialog");
break;
case "multiDelete":
this.multiDelete();
break;
}
},
// 获取多选中的可被选择项目，true则可被选择
selectableFuction(row, rowIndex) {
// 除了审核中的，其他状态都可以删除
const isApproval = 0;
if (row.checkStatus !== isApproval) {
return true;
}
},
// 批量删除
multiDelete() {
const ids = this.multipleSelection.map((item) => {
return item.exhibitionId;
});
const request = this.getCurrentDeleteRequest();
const callback = this.loadData;
this.$bizCommon.multiDelete(request, ids, callback);
},
// 预览展览
async handleView(row) {
......
src/views/home/index.vue
浏览文件 @ a07d7ad2
......@@ -4,100 +4,141 @@
<el-tab-pane label="用户行为数据统计" name="behavior">
<el-card>
<div slot="header" class="clearfix">
<div style="float: left;">
<div style="float: left">
<CustomTitle title="综合点击率Top20" />
</div>
</div>
<div style="height: 500px;">
<Echart :options="allOptions" id="可选" height='100%' width="100%" v-if="allOptions"></Echart>
<div style="height: 500px">
<Echart
:options="allOptions"
id="可选"
height="100%"
width="100%"
v-if="allOptions"
></Echart>
</div>
</el-card>
<el-card style="margin-top: 20px;">
<el-card style="margin-top: 20px">
<div slot="header" class="clearfix">
<div style="float: left;font-weight: bold;">
<div style="float: left; font-weight: bold">
<CustomTitle title="各类排名Top5" />
</div>
</div>
<el-row>
<el-col :span="12">
<div style="height: 250px;">
<Echart :options="displayOptions" height='100%' width="100%" v-if="displayOptions"></Echart>
<div style="height: 250px">
<Echart
:options="displayOptions"
height="100%"
width="100%"
v-if="displayOptions"
></Echart>
</div>
</el-col>
<el-col :span="12">
<div style="height: 250px;">
<Echart :options="crOptions" height='100%' width="100%" v-if="crOptions"></Echart>
<div style="height: 250px">
<Echart
:options="crOptions"
height="100%"
width="100%"
v-if="crOptions"
></Echart>
</div>
</el-col>
</el-row>
<!-- <el-row> -->
<!-- <el-col :span="12">
<div style="height: 250px;">
<Echart :options="virtualOptions" height='100%' width="100%" v-if="virtualOptions"></Echart>
</div>
</el-col> -->
<!-- <el-col :span="12">
<Echart :options="options" height='100%' width="100%" v-if="options"></Echart>
</el-col> -->
<!-- </el-row> -->
</el-card>
<el-card class="box-card" style="margin-top: 20px;">
<el-card class="box-card" style="margin-top: 20px">
<div slot="header" class="clearfix">
<div style="float: left;font-weight: bold;">
<div style="float: left; font-weight: bold">
<CustomTitle title="展览/文物数据统计明细" />
</div>
<el-radio-group v-model="currentSortPage" style="float: right;">
<el-radio-group v-model="currentSortPage" style="float: right">
<el-radio :label="2">展览</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">
<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">
<!-- <h3>展览数据</h3> -->
<el-card>
<div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
<div
slot="header"
style="
display: flex;
justify-content: space-between;
align-items: center;
"
>
<CustomTitle title="展览数量统计" />
<el-radio-group v-model="displayRadio" style="float: right;">
<el-radio-group v-model="displayRadio" style="float: right">
<el-radio :label="1">按地区</el-radio>
<el-radio :label="2">按博物馆</el-radio>
<el-radio :label="3">按类型</el-radio>
</el-radio-group>
</div>
<CombinationChart ref="displayChart" v-if="activeName=='amount'" :pieData="displayAmountData" />
<CombinationChart
ref="displayChart"
v-if="activeName == 'amount'"
:pieData="displayAmountData"
/>
</el-card>
<el-card style="margin-top:20px ;">
<div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
<el-card style="margin-top: 20px">
<div
slot="header"
style="
display: flex;
justify-content: space-between;
align-items: center;
"
>
<CustomTitle title="文物数量统计" />
<el-radio-group v-model="crRadio" style="float: right;">
<el-radio-group v-model="crRadio" style="float: right">
<el-radio :label="1">按地区</el-radio>
<el-radio :label="2">按博物馆</el-radio>
<el-radio :label="3">按类型</el-radio>
<el-radio :label="4">按年代</el-radio>
</el-radio-group>
</div>
<CombinationChart ref="crChart" v-if="activeName=='amount'" :pieData="crAmountData" />
<CombinationChart
ref="crChart"
v-if="activeName == 'amount'"
:pieData="crAmountData"
/>
</el-card>
<el-card style="margin-top:20px ;">
<div slot="header" style="display: flex;justify-content: space-between; align-items: center;">
<el-card style="margin-top: 20px">
<div
slot="header"
style="
display: flex;
justify-content: space-between;
align-items: center;
"
>
<CustomTitle title="虚拟展厅数量统计" />
<el-radio-group v-model="virtualRadio" style="float: right;">
<el-radio-group v-model="virtualRadio" style="float: right">
<el-radio :label="1">按地区</el-radio>
<el-radio :label="2">按博物馆</el-radio>
</el-radio-group>
</div>
<CombinationChart ref="virtualChart" v-if="activeName=='amount'" :pieData="virtualAmountData" />
<CombinationChart
ref="virtualChart"
v-if="activeName == 'amount'"
:pieData="virtualAmountData"
/>
</el-card>
</el-tab-pane>
</el-tabs>
......@@ -105,580 +146,616 @@
</template>
<script>
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'
import { getCulturalRelicStatistic } from '@/api/culturalRelic'
import { getExhibitionStatistic } from '@/api/display'
import { getVirtualStatistic } from '@/api/vitual'
import CombinationChart from './components/CombinationChart'
import CustomTitle from './components/CustomTitle'
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";
import { getCulturalRelicStatistic } from "@/api/culturalRelic";
import { getExhibitionStatistic } from "@/api/display";
import { getVirtualStatistic } from "@/api/vitual";
import CombinationChart from "./components/CombinationChart";
import CustomTitle from "./components/CustomTitle";
export default {
name: 'Home',
components: {
TablePage, Echart, CombinationChart, CustomTitle
export default {
name: "Home",
components: {
TablePage,
Echart,
CombinationChart,
CustomTitle,
},
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;
},
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;
},
data() {
return {
activeName: "behavior",
displayRadio: 1,
crRadio: 1,
virtualRadio: 1,
list: {
records: [],
current: 1,
size: 10,
},
allOptions: null,
displayOptions: null,
crOptions: null,
virtualOptions: null,
currentSortPage: 2, //1-文物；2-展览；3-虚拟展厅；4-精品展览，0-所有。默认0
displayAmountData: null,
crAmountData: null,
virtualAmountData: null,
};
},
watch: {
currentSortPage(value) {
this.currentSortPage = value;
this.loadListByPageSort();
},
data() {
return {
activeName: 'behavior',
displayRadio: 1,
crRadio: 1,
virtualRadio: 1,
list: {
records: [
],
current: 1,
size: 10
},
allOptions: null,
displayOptions: null,
crOptions: null,
virtualOptions: null,
currentSortPage: 2,//1-文物；2-展览；3-虚拟展厅；4-精品展览，0-所有。默认0
displayAmountData: null,
crAmountData: null,
virtualAmountData: null,
activeName(value) {
if (value == "amount") {
if (this.displayPieData == null) {
this.getDisplayAmountData();
}
if (this.crAmountData == null) {
this.getCrAmountData();
}
if (this.crAmountData == null) {
this.getVirtualAmountData();
}
}
},
watch: {
currentSortPage(value) {
this.currentSortPage = value
this.loadListByPageSort()
},
activeName(value) {
if (value == 'amount') {
if (this.displayPieData == null) {
this.getDisplayAmountData()
}
if (this.crAmountData == null) {
this.getCrAmountData()
}
if (this.crAmountData == null) {
this.getVirtualAmountData()
}
}
},
displayRadio() {
this.getDisplayAmountData()
},
crRadio() {
this.getCrAmountData()
},
virtualRadio() {
this.getVirtualAmountData()
},
displayRadio() {
this.getDisplayAmountData();
},
mounted() {
this.getBehaviorData()
this.loadListByPageSort()
crRadio() {
this.getCrAmountData();
},
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'
];
let barListAll = []
var legendList = [];
let displaySource = [] //展览的数据集
let virtualSource = []//虚拟展的数据集
let crSource = []//文物的数据集
let res = await getBarMap()
const { allBrowseSortList, culturalRelicSortList, exhibitionSortList, virtualSortList } = res.data
allBrowseSortList.map(item => {
let obj = {}
// if (item.data > 0) {
obj.name = item.name
obj.value = item.data
barListAll.push(obj)
// }
})
culturalRelicSortList.map(item => {
let obj = {
"name": item.name,
"浏览量": item.browseCount,
"收藏量": item.collectCount,
"点赞量": item.loveCount
}
crSource.push(obj)
})
virtualRadio() {
this.getVirtualAmountData();
},
},
mounted() {
this.getBehaviorData();
this.loadListByPageSort();
},
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",
];
let barListAll = [];
var legendList = [];
let displaySource = []; //展览的数据集
let virtualSource = []; //虚拟展的数据集
let crSource = []; //文物的数据集
let res = await getBarMap();
const {
allBrowseSortList,
culturalRelicSortList,
exhibitionSortList,
virtualSortList,
} = res.data;
allBrowseSortList.map((item) => {
let obj = {};
// if (item.data > 0) {
obj.name = item.name;
obj.value = item.data;
barListAll.push(obj);
// }
});
culturalRelicSortList.map((item) => {
let obj = {
name: item.name,
浏览量: item.browseCount,
收藏量: item.collectCount,
点赞量: item.loveCount,
};
crSource.push(obj);
});
exhibitionSortList.map(item => {
let obj = {
"name": item.name,
"浏览量": item.browseCount,
"收藏量": item.collectCount,
"点赞量": item.loveCount
}
displaySource.push(obj)
})
exhibitionSortList.map((item) => {
let obj = {
name: item.name,
浏览量: item.browseCount,
收藏量: item.collectCount,
点赞量: item.loveCount,
};
displaySource.push(obj);
});
virtualSortList.map(item => {
let obj = {
"name": item.name,
"浏览量": item.browseCount,
"收藏量": item.collectCount,
"点赞量": item.loveCount
}
virtualSource.push(obj)
})
virtualSortList.map((item) => {
let obj = {
name: item.name,
浏览量: item.browseCount,
收藏量: item.collectCount,
点赞量: item.loveCount,
};
virtualSource.push(obj);
});
for (var i = 0; i < barListAll.length; i++) {
legendList.push(barListAll[i].name);
}
this.allOptions = {
color: pie_color,
title: {
show: false,
text: '',
textStyle: {
color: '#333333',
fontSize: 16,
},
for (var i = 0; i < barListAll.length; i++) {
legendList.push(barListAll[i].name);
}
this.allOptions = {
color: pie_color,
title: {
show: false,
text: "",
textStyle: {
color: "#333333",
fontSize: 16,
},
tooltip: {
trigger: 'axis',
show: true,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
},
tooltip: {
trigger: "axis",
show: true,
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
grid: [{
},
grid: [
{
show: false,
left: '2%',
right: '10%',
left: "2%",
right: "10%",
bottom: 0,
top: '2%',
containLabel: true
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',
],
// 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: '次',
name: "次",
nameTextStyle: {
color: '#9B9B9B',
fontSize: 14
color: "#9B9B9B",
fontSize: 14,
},
axisLabel: {
color: '#727272',
color: "#727272",
fontSize: 14,
},
axisLine: {
show: true,
lineStyle: {
color: '#333333',
color: "#333333",
opacity: 0.35,
}
},
},
axisTick: {
show: true,
inside: true,
lineStyle: {
color: '#333333',
color: "#333333",
opacity: 0.35,
}
},
},
splitLine: {
show: false
show: false,
},
show: false
}],
yAxis: [{
type: 'category',
show: false,
},
],
yAxis: [
{
type: "category",
gridIndex: 0,
data: legendList,
inverse: true,
axisLabel: {
color: '#727272',
color: "#727272",
fontSize: 14,
},
axisLine: {
show: true,
lineStyle: {
color: '#333333',
color: "#333333",
opacity: 0.35,
}
},
},
axisTick: {
show: false
show: false,
},
splitLine: {
show: false
}
}],
series: [{
name: '浏览量',
type: 'bar',
show: false,
},
},
],
series: [
{
name: "浏览量",
type: "bar",
xAxisIndex: 0,
yAxisIndex: 0,
data: barListAll,
label: {
show: true,
position: 'right', // 位置
color: '#303133',
position: "right", // 位置
color: "#303133",
fontSize: 14,
distance: 15, // 距离
formatter: '{c} 次' // 这里是数据展示的时候显示的数据
formatter: "{c} 次", // 这里是数据展示的时候显示的数据
}, // 柱子上方的数值
barWidth: 20,
itemStyle: {
color: '#52A8FF',
color: "#52A8FF",
normal: {
borderRadius: [0, 8, 8, 0],
color: function (params) {
// 定义一个颜色集合
let colorList = [
'#52A8FF',
'#00B389',
'#FFA940',
'#FF5A57',
'#29EFC4',
'#F8AEA4',
'#FFC53D',
'#009982',
'#C099FC',
'#F5855F',
"#52A8FF",
"#00B389",
"#FFA940",
"#FF5A57",
"#29EFC4",
"#F8AEA4",
"#FFC53D",
"#009982",
"#C099FC",
"#F5855F",
];
// 对每个bar显示一种颜色
return colorList[params.dataIndex];
},
},
barBorderRadius: [0, 10, 10, 0]
}
},]
}
this.crOptions = {
title: {
text: '文物排行Top5',
left: '5%',
top: '15',
textStyle: {
fontWeight: '400',
color: '#000',
fontSize: 14,
barBorderRadius: [0, 10, 10, 0],
},
},
legend: { "top": "10", right: "60" },
tooltip: {},
color: ['#5470c6', '#73c0de', '#fac858', '#ee6666', '#91cc75'],
dataset: {
dimensions: ['name', '浏览量', '收藏量', '点赞量',],
source: crSource,
],
};
this.crOptions = {
title: {
text: "文物排行Top5",
left: "5%",
top: "15",
textStyle: {
fontWeight: "400",
color: "#000",
fontSize: 14,
},
xAxis: {
type: 'category',
axisLabel: {
rotate: -18,
color: '#606266',
interval: 0,
margin: 20,
align: 'center',
textStyle: {
fontSize: 10
}
}
},
legend: { top: "10", right: "60" },
tooltip: {},
color: ["#5470c6", "#73c0de", "#fac858", "#ee6666", "#91cc75"],
dataset: {
dimensions: ["name", "浏览量", "收藏量", "点赞量"],
source: crSource,
},
xAxis: {
type: "category",
axisLabel: {
rotate: -18,
color: "#606266",
interval: 0,
margin: 20,
align: "center",
textStyle: {
fontSize: 10,
},
},
yAxis: {},
series: [
{
type: 'bar',
barWidth: '10',
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
yAxis: {},
series: [
{
type: "bar",
barWidth: "10",
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
{
type: 'bar',
barWidth: '10',
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
{
type: "bar",
barWidth: "10",
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
{
type: 'bar',
barWidth: '10',
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
{
type: "bar",
barWidth: "10",
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
],
};
this.displayOptions = {
title: {
text: '展览排行Top5',
left: '5%',
top: '15',
textStyle: {
fontWeight: '400',
color: '#000',
fontSize: 14,
},
},
tooltip: {},
color: ['#5470c6', '#73c0de', '#fac858', '#ee6666', '#91cc75'],
dataset: {
dimensions: ['name', '浏览量', '收藏量', '点赞量',],
source: displaySource,
],
};
this.displayOptions = {
title: {
text: "展览排行Top5",
left: "5%",
top: "15",
textStyle: {
fontWeight: "400",
color: "#000",
fontSize: 14,
},
xAxis: {
type: 'category', axisLabel: {
rotate: -18,
color: '#606266',
interval: 0,
margin: 20,
align: 'center',
textStyle: {
fontSize: 10
}
}
},
tooltip: {},
color: ["#5470c6", "#73c0de", "#fac858", "#ee6666", "#91cc75"],
dataset: {
dimensions: ["name", "浏览量", "收藏量", "点赞量"],
source: displaySource,
},
xAxis: {
type: "category",
axisLabel: {
rotate: -18,
color: "#606266",
interval: 0,
margin: 20,
align: "center",
textStyle: {
fontSize: 10,
},
},
yAxis: {},
series: [
{
type: 'bar',
barWidth: '10',
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
yAxis: {},
series: [
{
type: "bar",
barWidth: "10",
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
{
type: 'bar',
barWidth: '10',
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
{
type: "bar",
barWidth: "10",
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
{
type: 'bar',
barWidth: '10',
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
{
type: "bar",
barWidth: "10",
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
// {
// type: 'bar',
// barWidth: '10%',
// itemStyle: {
// normal: {
// barBorderRadius: 6,
// },
// },
// },
],
};
this.virtualOptions = {
// legend: { "top": "20", right: "60" },
title: {
text: '虚拟展排行TOP5',
left: '5%',
top: '15',
textStyle: {
fontWeight: '400',
color: '#000',
fontSize: 14,
},
},
tooltip: {},
color: ['#5470c6', '#73c0de', '#fac858', '#ee6666', '#91cc75'],
dataset: {
dimensions: ['name', '浏览量', '收藏量', '点赞量',],
source: virtualSource,
// {
// type: 'bar',
// barWidth: '10%',
// itemStyle: {
// normal: {
// barBorderRadius: 6,
// },
// },
// },
],
};
this.virtualOptions = {
// legend: { "top": "20", right: "60" },
title: {
text: "虚拟展排行TOP5",
left: "5%",
top: "15",
textStyle: {
fontWeight: "400",
color: "#000",
fontSize: 14,
},
xAxis: {
type: 'category', axisLabel: {
rotate: -18,
color: '#606266',
interval: 0,
margin: 20,
align: 'center',
textStyle: {
fontSize: 10
}
}
},
tooltip: {},
color: ["#5470c6", "#73c0de", "#fac858", "#ee6666", "#91cc75"],
dataset: {
dimensions: ["name", "浏览量", "收藏量", "点赞量"],
source: virtualSource,
},
xAxis: {
type: "category",
axisLabel: {
rotate: -18,
color: "#606266",
interval: 0,
margin: 20,
align: "center",
textStyle: {
fontSize: 10,
},
},
yAxis: {},
series: [
{
type: 'bar',
barWidth: '10',
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
yAxis: {},
series: [
{
type: "bar",
barWidth: "10",
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
{
type: 'bar',
barWidth: '10',
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
{
type: "bar",
barWidth: "10",
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
{
type: 'bar',
barWidth: '10',
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
{
type: "bar",
barWidth: "10",
itemStyle: {
normal: {
barBorderRadius: 6,
},
},
],
};
},
// 获取行为数据明细
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 getDisplayAmountData() {
const params = {
statisticWord: this.displayRadio
}
let res = await getExhibitionStatistic(params)
let data = res.data.exhibitionByRegion || res.data.exhibitionByDept || res.data.exhibitionByType
this.displayAmountData = data || []
},
},
],
};
},
// 获取行为数据明细
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 getCrAmountData() {
const params = {
statisticWord: this.crRadio
}
let res = await getCulturalRelicStatistic(params)
let data = res.data.culturalByRegion || res.data.culturalByDept || res.data.culturalByType || res.data.culturalByYears
this.crAmountData = data || []
},
// 获取展览数量统计图数据
async getDisplayAmountData() {
const params = {
statisticWord: this.displayRadio,
};
let res = await getExhibitionStatistic(params);
let data =
res.data.exhibitionByRegion ||
res.data.exhibitionByDept ||
res.data.exhibitionByType;
this.displayAmountData = data || [];
},
// 获取虚拟展览数量统计统计图数据
async getVirtualAmountData() {
const params = {
statisticWord: this.virtualRadio
}
let res = await getVirtualStatistic(params)
// console.log(res);
let data = res.data.virtualByRegion || res.data.virtualByDept
this.virtualAmountData = data || []
},
// 获取文物数量统计图数据
async getCrAmountData() {
const params = {
statisticWord: this.crRadio,
};
let res = await getCulturalRelicStatistic(params);
let data =
res.data.culturalByRegion ||
res.data.culturalByDept ||
res.data.culturalByType ||
res.data.culturalByYears;
this.crAmountData = data || [];
},
// 改变页容量
handleSizeChange(value) {
this.list.size = value;
this.loadListByPageSort();
},
// 获取虚拟展览数量统计统计图数据
async getVirtualAmountData() {
const params = {
statisticWord: this.virtualRadio,
};
let res = await getVirtualStatistic(params);
// console.log(res);
let data = res.data.virtualByRegion || res.data.virtualByDept;
this.virtualAmountData = data || [];
},
// 改变当前显示页
handleCurrentChange(value) {
this.list.current = value;
this.loadListByPageSort();
},
// 改变页容量
handleSizeChange(value) {
this.list.size = value;
this.loadListByPageSort();
},
}
}
// 改变当前显示页
handleCurrentChange(value) {
this.list.current = value;
this.loadListByPageSort();
},
},
};
</script>
<style lang="scss" scoped>
.home {
padding: 16px;
}
.home {
padding: 16px;
}
.el-tabs--card {
height: calc(100vh - 110px);
/* overflow-y: auto; */
}
.el-tabs--card {
height: calc(100vh - 110px);
/* overflow-y: auto; */
}
.el-tab-pane {
height: calc(100vh - 110px);
overflow-y: auto;
}
</style>
\ No newline at end of file
.el-tab-pane {
height: calc(100vh - 110px);
overflow-y: auto;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论