Skip to content

E
exhibition_page
提交 7fb03671 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

首页对接

上级 6da2b26e
隐藏空白字符变更
内嵌 并排
正在显示 包含 486 行增加 和 153 行删除
src/api/vitual.js
浏览文件 @ 7fb03671
......@@ -12,8 +12,19 @@ export function getVirtualList(data) {
export function getVirtualListById(data) {
return request({
url: '/bizVirtual/listById',
method: 'delete',
method: 'post',
data
})
}
// 获取推荐
export function getVrRecommend(params) {
return request({
url: '/bizVRecommend/list',
method: 'get',
params
})
}
src/components/Graph/Chart.vue 0 → 100644
浏览文件 @ 7fb03671
<!-- -->
<template>
<div :id="id" :data="data" />
</template>
<script>
export default {
// props: ['id', 'data'],
props: {
id: { type: String, default: null },
data: { type: Object, default: null },
activeName: { type: String, default: '异常事件' }
},
data() {
// 这里存放数据
return {
barChartGraph: null
}
},
watch: {
data: {
handler(newVal, oldVal) {
this.drawGraph(this.id, newVal)
},
deep: true
},
activeName(newValue, oldValue) {
if (newValue === 'event' || newValue === 'bridge' || newValue === 'flowMonitor') {
this.drawGraph(this.id, this.data)
}
}
},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
this.$nextTick(function() {
this.drawGraph(this.id, this.data)
})
},
beforeDestroy() {
if (self.barChartGraph) {
self.barChartGraph.clear()
}
},
// 方法集合
methods: {
drawGraph(id, data) {
const self = this
const myChart = document.getElementById(id)
self.barChartGraph = self.$echarts.init(myChart)
self.barChartGraph.setOption(data)
self.barChartGraph.resize()
window.addEventListener('resize', () => {
self.barChartGraph.resize()
})
}
}
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
src/components/Graph/Map.vue 0 → 100644
浏览文件 @ 7fb03671
<!-- -->
<template>
<div :id="id" />
</template>
<script>
export default {
// eslint-disable-next-line
props: {
id: {
type: String,
default: "",
},
data: {
type: Array,
default: () => [],
},
},
data() {
// 这里存放数据
return {
mapChart: null,
};
},
computed: {},
watch: {
data: {
handler(newVal, oldVal) {
this.drawGraph(this.id, newVal);
},
deep: true,
},
},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
this.drawGraph(this.id, this.data);
},
// 方法集合
methods: {
drawGraph(id, data) {
const self = this;
const myChart = document.getElementById(id);
self.mapChart = self.$echarts.init(myChart);
const options = {
tooltip: {
// 鼠标悬停提示内容
trigger: "axis", // 触发类型，默认数据触发，可选为：'axis' item
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "line", // 默认为直线，可选为：'line' | 'shadow'
label: "cross",
show: true,
},
},
grid: {
left: "17%",
right: "1%",
y: "7%", // y 偏移量
width: "auto", // 宽度
height: "69%", // 高度,
},
xAxis: {
type: "category",
boundaryGap: false,
data: xData,
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#206AA9",
},
},
axisLabel: {
interval: self.axisLabelInterval, // 坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
rotate: 38, // 调整数值改变倾斜的幅度（范围-90到90）
textStyle: {
color: "#AAC5E1", // 坐标的字体颜色
fontSize: 10,
},
},
},
yAxis: {
type: "value",
// max: 2000,
// interval: 500,
// minInterval: 500,
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#206AA9",
},
},
splitLine: {
lineStyle: {
color: "#206AA9",
type: "dashed",
},
},
axisLabel: {
textStyle: {
color: "#AAC5E1", // 坐标的字体颜色
fontSize: 10,
},
},
},
series: [
{
data: yData,
type: "line",
smooth: true,
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(82, 253, 247, 1)",
},
{
offset: 1,
color: "rgba(138, 255, 252, 0)",
},
]),
},
},
itemStyle: {
normal: {
color: "#52FDF7", // 改变折线点的颜色
lineStyle: {
color: "#52FDF7", // 改变折线颜色
},
},
},
},
],
};
self.lineChartGraph.setOption(options);
window.addEventListener("resize", () => {
self.lineChartGraph.resize();
});
},
}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
src/views/home/components/CulturalRelic.vue
浏览文件 @ 7fb03671
......@@ -13,10 +13,10 @@
<el-col
:span="6"
v-for="item in list1"
:key="item"
:key="item.crId"
class="container"
>
<img src="@/assets/imgs/test/relic.png" alt="" width="100%" />
<img :src="item.faceImageUrl" alt="" width="100%" />
</el-col>
</el-row>
</el-carousel-item>
......@@ -25,10 +25,10 @@
<el-col
:span="6"
v-for="item in list2"
:key="item"
:key="item.crId"
class="container"
>
<img src="@/assets/imgs/test/relic.png" alt="" width="100%" />
<img :src="item.faceImageUrl" alt="" width="100%" />
</el-col>
</el-row>
</el-carousel-item>
......@@ -42,21 +42,18 @@ import { getRecommendCr } from "@/api/culturalRelic";
export default {
data() {
return {
list1: [1, 2, 3, 4, 5, 6, 7, 8],
list2: [1, 2, 3, 4, 5, 6, 7, 8],
list1: [],
list2: [],
};
},
mounted() {
// this.loadList();
this.loadList();
},
methods: {
async loadList() {
const params = {
page: 1,
limit: 6,
};
let res = await getRecommendCr();
console.log(res);
this.list1 = res.data.slice(0, 8);
this.list2 = res.data.slice(-8);
},
},
};
......@@ -112,4 +109,7 @@ export default {
::v-deep .el-carousel__container {
height: 492px;
}
.el-carousel--horizontal{
overflow: hidden;
}
</style>
src/views/home/components/Display.vue
浏览文件 @ 7fb03671
......@@ -2,30 +2,60 @@
<template>
<div class="home-display">
<div class="title">展览</div>
<div class="wrapper">
<div class="content">
<div class="content-name">汉抚琴俑</div>
<div class="content-intro">
“琴、弦乐也，神农所作”。琴乃中国历代文人雅士所崇尚的传统乐器，至汉代更成为八音之首，并形成了一整套的演奏礼制。所谓“琴者，禁也”，即要求抚琴之人须于演奏之前淋浴净身、焚香礼拜，并且摒弃一切私欲杂念，做到琴人合一，以求天籁之音。可见古人对于琴何其器重！琴，作为极具张力的弹弦乐器，从娱神、娱人到自娱，要么以独奏形式出现，要么同竽、箫、鼓、钹等乐器组合演奏，成为中国古代音乐体系中，特别是汉代“弦歌”中既常见、且十分重要的一种演奏形式。这一点可以从同期汉画或汉墓陶俑中得以充分验证。抚琴俑作为汉俑名品，在海内外极负盛名，影响深远。
<transition name="el-fade-in-linear">
<div class="wrapper" v-show="currentItem.exhibitionId">
<div class="content">
<div class="content-name">{{ currentItem.title }}</div>
<div class="content-intro">
{{ currentItem.intro ? currentItem.intro : "" }}
</div>
</div>
<div class="img">
<img :src="currentItem.faceImageUrl" />
<div class="img-name">{{ currentItem.title }}</div>
</div>
<div class="pagination">
<ul>
<li
v-for="(item, index) in [1, 2, 3, 4]"
:key="index"
:class="currentPage == item ? 'active' : ''"
@click="handleChangePage(item)"
>
{{ item }}
</li>
</ul>
</div>
</div>
<div class="img">
<img src="@/assets/imgs/test/display1.png" alt="" />
<div class="img-name">汉抚琴俑</div>
</div>
<div class="pagination">
<ul>
<li
v-for="(item, index) in [1, 2, 3, 4]"
:key="index"
:class="currentPage == item ? 'active' : ''"
@click="handleChangePage(item)"
>
{{ item }}
</li>
</ul>
</div>
</div>
</transition>
<!-- <el-carousel indicator-position="none" :autoplay="false" arrow="never">
<el-carousel-item v-for="item in list" :key="item.exhibitionId">
<div class="wrapper">
<div class="content">
<div class="content-name">{{ item.title }}</div>
<div class="content-intro">
{{ item.intro ? item.intro : "" }}
</div>
</div>
<div class="img">
<img :src="item.faceImageUrl" />
<div class="img-name">{{ item.title }}</div>
</div>
<div class="pagination">
<ul>
<li
v-for="(item, index) in [1, 2, 3, 4]"
:key="index"
:class="currentPage == item ? 'active' : ''"
@click="handleChangePage(item)"
>
{{ item }}
</li>
</ul>
</div>
</div>
</el-carousel-item>
</el-carousel> -->
</div>
</template>
......@@ -35,7 +65,8 @@ export default {
data() {
return {
list: [],
currentPage:1
currentPage: 1,
currentItem: {},
};
},
mounted() {
......@@ -43,15 +74,16 @@ export default {
},
methods: {
async loadList() {
const params = {
page: 1,
limit: 6,
};
let res = await getRecommendDisplay();
this.list = res.data;
this.currentItem = this.list[0];
},
handleChangePage(page) {
this.currentPage = page;
// debugger
this.currentItem = null;
this.currentItem = this.list[page - 1];
},
handleChangePage(page){
this.currentPage =page
}
},
};
</script>
......@@ -65,16 +97,20 @@ export default {
align-items: center;
position: relative;
padding: 0 13%;
.title {
color: #fff;
margin-top: 70px;
margin-bottom: 90px;
font-family: "Alibaba PuHuiTi";
flex-basis: auto;
}
.wrapper {
display: flex;
width: 100%;
height: 100%;
position: relative;
flex: 1;
.content {
width: 800px;
.content-name {
......@@ -96,22 +132,28 @@ export default {
}
.img {
position: absolute;
top: 45%;
top: 20%;
// transform: translateY(-50%);
right: 13%;
}
.img-name {
display: flex;
justify-content: center;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #88754d;
right: 0;
width: 550px;
height: 480px;
img {
width: 100%;
}
.img-name {
display: flex;
justify-content: center;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #88754d;
}
}
.pagination {
position: absolute;
bottom: 80px;
right: 13%;
right: 0;
ul {
display: flex;
li {
......@@ -132,4 +174,18 @@ export default {
}
}
}
::v-deep .el-carousel {
width: 100%;
height: 100%;
}
::v-deep .el-carousel__container {
height: 100%;
}
::v-deep .el-carousel-item {
height: 100%;
position: relative;
}
::v-deep .el-carousel--horizontal {
overflow: hidden;
}
</style>
src/views/home/components/MuseumMap.vue
浏览文件 @ 7fb03671
......@@ -11,7 +11,7 @@
黔西南州博物馆位于兴义市桔山广场州民族文化中心二楼、三楼和四楼，隶属黔西南州文化广电旅游局，属正科级公益性文化事业单位。馆藏文物3949件（套），其中一级文物32件（套），二级文物15件（套），三级文物60件（套）。其中，抚琴俑、铜车马、摇钱树、连枝灯、提梁壶、一字格剑等已被列入国家精品文物名录。博物馆实际使用面积7240平方米，其中展厅面积2540平方米，文物库房面积858平方米，其他业务用房（临时展厅、文创展区、文物修复室、数据采集室、文物鉴定室、学术报告厅、观众休息区、文物技术保护室等）面积1930平方米，办公用房70平方米。馆内设有陈列展览部、社会教育部、文物保护部、考古发掘部、征集保管部、安全保卫部、文创研发部等部室。现有基本陈列《夜郎的疑问-黔西南州考古成果展》对公众免费开放，展览分道不相通、一州之主、汉之广大三部分。构思取材于司马迁《史记》记载的“夜郎自大”典故。展出文物涵盖前夜郎、夜郎、后夜郎三个时期，共计400余件（套），展览同步有二维、三维等文物数字化推送，日接待观众1000人次以内。
</div>
</div>
<div class="map"></div>
<div class="map" id="map"></div>
</div>
<!-- <div class="list">
<ul class="vertical-text">
......@@ -27,94 +27,143 @@
<script>
import * as echarts from "echarts";
import guizhou from "@/utils/common-data/guizhou.json";
import { getMuseumList } from "@/api/org";
export default {
name: "MuseumMap",
data() {
return {
test: ["测试测试测试", "测试测试测试", "测试测试测试"],
geoCoordMap: {
贵州省博物馆: [106.648151, 26.652269],
贵州省地质博物馆: [106.613655, 26.629013],
贵州省民族博物馆: [106.719404, 26.574244],
贵州民族民俗博物馆: [106.644855, 26.67912],
},
myChart: "",
distributionOptions: "",
};
},
mounted() {
// this.init();
// this.changeOptions();
this.init();
// this.initAnimate();
},
methods: {
init() {
echarts.registerMap("guizhou", guizhou);
let myChart = echarts.init(this.$refs.map);
let option = {
visualMap: {
show: false,
left: "right",
min: 500000,
max: 38000000,
inRange: {
color: ["#E3F1FC", "#B4E3FA", "#62C5F6", "#2998E8"],
},
text: ["High", "Low"],
calculable: true,
async changeOptions(name) {
const params = {
page: 1,
limit: 1000,
};
// 获取博物馆列表，并构造经纬度
// let res = await getMuseumList(params);
// res.data(item=>{
// return item.latitude && item.longitude
// })
// debugger;
// return;
// 经纬度数据
const seriesList = [
{
data: [
{ value: [106.648151, 26.652269] },
{ value: [106.613655, 26.629013] },
{ value: [106.719404, 26.574244] },
{ value: [106.644855, 26.67912] },
,
],
},
series: [
{
name: "guizhou",
type: "map",
roam: true,
map: "guizhou", //这里是你导入echarts的json文件
layoutCenter: ["50%", "70%"],
layoutSize: "100%",
label: {
//地图默认的文本属性
show: false,
color: "#2998E8",
{
data: [
{
value: [107.43, 28.56],
},
select: {
//选中的区域文本属性
label: {
color: "#2998E8",
},
itemStyle: {
color: "#3066ba",
],
},
// {
// data: [
// {
// value: [107.5, 27.76],
// },
// ],
// },
];
// 图标
const series = seriesList.map((v) => {
return {
type: "scatter", //配置显示方式为用户自定义
coordinateSystem: "geo",
data: v.data,
};
});
// options
this.distributionOptions = {
tooltip: {
// 提示框组件
show: true, // 显示提示框组件
trigger: "item", // 触发类型
triggerOn: "mousemove", // 出发条件
formatter: function (a) {
console.log(12, a);
},
},
series, // 打的那些点数据
geo: {
map: name || "china", // 引入地图 省份或者 国家
layoutCenter: ["50%", "50%"], //设置后left/right/top/bottom等属性无效
layoutSize: "45%",
roam: false, //关闭鼠标缩放和漫
zoom: 2,
label: {
normal: {
//静态的时候展示样式
show: true, //是否显示地图省份得名称
textStyle: {
color: "#fff",
fontSize: 10,
fontFamily: "Arial",
},
},
emphasis: {
//高亮的区域文本属性
itemStyle: {
areaColor: "#3066ba",
},
label: {
show: true,
textStyle: {
color: "#2998E8",
},
// 高亮状态下的样式
//动态展示的样式
color: "#fff",
},
},
itemStyle: {
// 地图区域的多边形 图形样式。
normal: {
borderColor: "#fff", // 边框颜色
areaColor: "#2759af", // 区域颜色
textStyle: {
// 文字颜色
color: "#fff",
},
// shadowBlur: 10, // 图形阴影的模糊大小
// shadowOffsetX: 10, // 阴影水平方向上的偏移距离。
},
zoom: 1.2,
textFixed: {
Alaska: [20, -20],
emphasis: {
areaColor: "#7b39e2",
color: "#fff",
},
data: guizhou.features.map((e) => {
let num = Math.round(Math.random() * Math.random() * 100000000);
return { name: e.properties.name, value: num };
}),
},
],
},
};
myChart.setOption(option);
myChart.on("click", function (params) {
console.log("点击位置", params.data);
});
},
initAnimate() {
var anime = require("animejs/lib/anime");
anime({
targets: ".blue",
translateX: 270,
delay: anime.stagger(100), // 每个元素的延迟增加100毫秒。
});
init() {
echarts.registerMap("guizhou", guizhou);
this.changeOptions("guizhou");
this.myChart = echarts.init(document.getElementById("map"));
this.myChart.setOption(this.distributionOptions);
// 上边应该都懂，下面就是创建了一个点击事件，目的是点击省份子区域的时候可以切换到省份地图，省份的json文件自己下载。
// this.myChart.on("click", (chinaParam) => {
// let code = provinces[provincesText.indexOf(chinaParam.name)] || 100000;
// this.getProvinceMapOpt(
// code,
// provincesName[provincesText.indexOf(chinaParam.name)]
// );
// });
window.onresize = () => {
this.myChart.resize();
};
},
},
};
......@@ -122,16 +171,14 @@ export default {
<style lang="scss" scoped>
.home-museum-map {
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding: 164px 13% 114px 13%;
padding: 70px 13% 114px 13%;
.title {
color: #333;
margin-top: 70px;
margin-bottom: 90px;
margin-bottom: 43px;
display: flex;
flex-direction: column;
align-items: center;
......@@ -148,6 +195,8 @@ export default {
}
.wrapper {
display: flex;
justify-content: space-between;
align-items: flex-end;
.content {
width: 26%;
.name {
......@@ -164,6 +213,11 @@ export default {
color: #333333;
}
}
.map {
width: 780px;
height: 580px;
}
}
}
</style>
\ No newline at end of file
src/views/home/components/Virtural.vue
浏览文件 @ 7fb03671
......@@ -12,10 +12,13 @@
class="bg"
width="100%"
/>
<div class="intro" v-if="list.records.length > 0">
<div class="name">{{ list.records[0].name }}</div>
<div class="deptName">{{ list.records[0].deptName }}</div>
<div class="entrance" @click="handleClick(list.records[0])">
<div class="intro" v-if="list.length > 0">
<div class="name">{{ list[0].name }}</div>
<div class="deptName">{{ list[0].deptName }}</div>
<div class="intro-content">
{{ list[0].intro }}
</div>
<div class="entrance" @click="handleClick(list[0])">
<span style="margin-right: 12px">点击进入</span>
<img src="@/assets/imgs/home/entrance.png" alt="" />
</div>
......@@ -24,7 +27,7 @@
<el-row :gutter="10">
<el-col
:span="8"
v-for="(item, index) in list.records"
v-for="(item, index) in list"
:key="index"
class="item"
@click.native="handleClick(item)"
......@@ -38,34 +41,23 @@
</template>
<script>
import { getVirtualList } from "@/api/vitual";
import { getVrRecommend } from "@/api/vitual";
export default {
data() {
return {
list: {
records: [],
size: 6,
current: 1,
total: 0,
},
list: [],
};
},
mounted() {
this.loadData();
},
methods: {
// TODO:后面替换成随机推荐
async loadData() {
var params = {
page: this.list.current,
limit: this.list.size,
};
let res = await getVirtualList(params);
let res = await getVrRecommend();
if (res.code == 0) {
this.list = res.data;
}
},
handleClick(item) {
window.open(item.url);
},
......@@ -77,7 +69,7 @@ export default {
.home-virtural {
display: flex;
flex-direction: column;
background-color: #fff;
.title {
display: flex;
flex-direction: column;
......@@ -105,24 +97,26 @@ export default {
position: absolute;
left: 13%;
top: 45px;
width: 323px;
font-family: "Alibaba PuHuiTi";
color: #ffffff;
.name {
margin-bottom: 27px;
font-size: 20px;
font-family: "Alibaba PuHuiTi";
font-weight: bold;
color: #ffffff;
}
.deptName {
font-size: 16px;
font-family: "Alibaba PuHuiTi";
color: #ffffff;
margin-bottom: 50px;
}
.intro-content {
width: 324px;
margin-bottom: 85px;
}
.entrance {
color: #fff;
font-size: 16px;
cursor: pointer;
font-family: "Alibaba PuHuiTi";
}
}
.virtual-items {
......
src/views/home/index.vue
浏览文件 @ 7fb03671
......@@ -58,6 +58,7 @@ export default {
.home {
display: flex;
flex-direction: column;
background-color: #fff;
.home-item {
height: 100vh;
width: 100%;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论