You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1607 lines
67 KiB
1607 lines
67 KiB
<template>
|
|
<!-- 旅游资源中心 -->
|
|
<div class="eb-container" ref="appRef">
|
|
<!-- 背景框 -->
|
|
<div class="bg">
|
|
<MainTitle :title="title"></MainTitle>
|
|
<div class="main">
|
|
<div class="top">
|
|
<div class="left" @click="leaderState = true">
|
|
<!-- 基本概况 -->
|
|
<div class="baseInfo">
|
|
<div class="title-box-samll">
|
|
<span>基本概况</span>
|
|
</div>
|
|
<div class="databox">
|
|
<div class="databox-top">
|
|
<div class="data-item">
|
|
<img
|
|
:src="
|
|
require('@/assets/screenView/jidinghe.png')
|
|
"
|
|
/>
|
|
<div class="content">
|
|
<span>馆藏文物</span>
|
|
<span>
|
|
{{ baseInfo.collectionNum }}
|
|
<font
|
|
style="
|
|
font-size: 14px;
|
|
margin-left: 2px;
|
|
"
|
|
>件</font
|
|
>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<img
|
|
:src="
|
|
require('@/assets/screenView/jidinghe.png')
|
|
"
|
|
/>
|
|
<div class="content">
|
|
<span>年接待游客</span>
|
|
<span>
|
|
{{ baseInfo.visitorsYear }}
|
|
<font
|
|
style="
|
|
font-size: 14px;
|
|
margin-left: 2px;
|
|
"
|
|
>人次</font
|
|
>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bottom-title">
|
|
<img
|
|
:src="
|
|
require('../../assets/screenView/keliuIcon.png')
|
|
"
|
|
/>
|
|
<span class="title">基础信息</span>
|
|
</div>
|
|
|
|
<div class="base">
|
|
<div class="data-item">
|
|
<img
|
|
:src="
|
|
require('@/assets/screenView/renkou.png')
|
|
"
|
|
/>
|
|
<div class="content">
|
|
<span>开馆时间(年)</span>
|
|
<span>
|
|
{{ baseInfo.openingYears }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<img
|
|
:src="
|
|
require('@/assets/screenView/xiaqu.png')
|
|
"
|
|
/>
|
|
<div class="content">
|
|
<span>投入资金(万元)</span>
|
|
<span>{{
|
|
baseInfo.investment
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<img
|
|
:src="
|
|
require('@/assets/screenView/renkou.png')
|
|
"
|
|
/>
|
|
<div class="content">
|
|
<span>占地面积(㎡)</span>
|
|
<span>{{
|
|
baseInfo.establishmentTime
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="data-item">
|
|
<img
|
|
:src="
|
|
require('@/assets/screenView/xiaqu.png')
|
|
"
|
|
/>
|
|
<div class="content">
|
|
<span>建筑面积(㎡)</span>
|
|
<span>{{
|
|
baseInfo.buildingArea
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom-title">
|
|
<img
|
|
:src="
|
|
require('../../assets/screenView/keliuIcon.png')
|
|
"
|
|
/>
|
|
<span class="title">展品分类</span>
|
|
</div>
|
|
<div class="peopleChart">
|
|
<div class="dataChart">
|
|
<div
|
|
class="pieChart"
|
|
id="pieChart"
|
|
></div>
|
|
<div class="pieContent">
|
|
<div
|
|
class="contentItem"
|
|
v-for="(
|
|
item, index
|
|
) in collectionProportion"
|
|
:key="index"
|
|
>
|
|
<div class="line">
|
|
<div
|
|
class="dataline"
|
|
:style="{
|
|
backgroundColor:
|
|
item.color,
|
|
}"
|
|
></div>
|
|
<div
|
|
class="defaultline"
|
|
></div>
|
|
</div>
|
|
<span class="name">{{
|
|
item.collectionName
|
|
}}</span>
|
|
<span class="num">{{
|
|
item.count
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="zhong" @click="changeVideo($event)">
|
|
<!-- 视频 -->
|
|
<div class="videoBox">
|
|
<LivePlayer
|
|
ref="livePlayer"
|
|
:poster="videoInfo.coverImage"
|
|
:videoUrl="videoUrl"
|
|
fluent
|
|
:autoplay="true"
|
|
:muted="false"
|
|
alt="正在加载中"
|
|
>
|
|
</LivePlayer>
|
|
</div>
|
|
<!-- 视频列表 -->
|
|
<vueSeamlessScroll
|
|
:data="tabData"
|
|
:class-option="vidoeListOption"
|
|
class="scrollBox"
|
|
>
|
|
<div class="activityBox">
|
|
<div
|
|
class="activityItem"
|
|
v-for="(item, index) in tabData"
|
|
:key="index"
|
|
:data-obj="JSON.stringify(item)"
|
|
>
|
|
<img :src="item.coverImage" />
|
|
<span>{{ item.title }}</span>
|
|
</div>
|
|
</div>
|
|
</vueSeamlessScroll>
|
|
</div>
|
|
<div class="right">
|
|
<!-- 来馆统计 -->
|
|
<div class="culturalDataInfo">
|
|
<div class="title-box-samll">
|
|
<span>来馆统计</span>
|
|
</div>
|
|
<div class="databox">
|
|
<div class="baseInfo">
|
|
<div class="data-item">
|
|
<img
|
|
:src="
|
|
require('@/assets/screenView/xiaqu.png')
|
|
"
|
|
/>
|
|
<div class="content">
|
|
<span>预约访问量(人)</span>
|
|
<span>{{
|
|
baseInfoT.platformVisits
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<img
|
|
:src="
|
|
require('@/assets/screenView/gendi.png')
|
|
"
|
|
/>
|
|
<div class="content">
|
|
<span>来馆总人次(人)</span>
|
|
<span>{{
|
|
baseInfoT.totalNumber
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<img
|
|
:src="
|
|
require('@/assets/screenView/hushu.png')
|
|
"
|
|
/>
|
|
<div class="content">
|
|
<span>今日来馆人数(人)</span>
|
|
<span>{{
|
|
baseInfoT.todayNumber
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="data-item">
|
|
<img
|
|
:src="
|
|
require('@/assets/screenView/renkou.png')
|
|
"
|
|
/>
|
|
<div class="content">
|
|
<span>本月来馆人数(人)</span>
|
|
<span>{{
|
|
baseInfoT.monthNumber
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bottom-title">
|
|
<img
|
|
:src="
|
|
require('../../assets/screenView/keliuIcon.png')
|
|
"
|
|
/>
|
|
<span class="title">活动举办统计</span>
|
|
</div>
|
|
|
|
<div class="barChart" id="barChart2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bottom">
|
|
<div class="left">
|
|
<!-- 博物馆藏品 -->
|
|
<div class="collection" @click="openModal($event)">
|
|
<div class="title-box-large" style="width: 100%">
|
|
<span>馆藏精品</span>
|
|
</div>
|
|
<vueSeamlessScroll
|
|
:data="collectionList"
|
|
:class-option="collectionOption"
|
|
class="scrollBox"
|
|
>
|
|
<div class="databox">
|
|
<div
|
|
class="dataItem"
|
|
v-for="(item, index) in collectionList"
|
|
:key="index"
|
|
:data-index="index"
|
|
>
|
|
<img :src="item.coverImage" :data-index="index" />
|
|
<span :data-index="index" class="name">{{
|
|
item.title
|
|
}}</span>
|
|
<span :data-index="index" class="time">{{
|
|
item.tagName
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</vueSeamlessScroll>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="borrowRead">
|
|
<div class="title-box-samll">
|
|
<span>博物馆资讯</span>
|
|
</div>
|
|
<div class="databox">
|
|
<div
|
|
style="width: 100%; height: 100%;"
|
|
@click="
|
|
openInfo($event, queryContentInfoList)
|
|
"
|
|
>
|
|
<vue-seamless-scroll
|
|
:data="queryContentInfoList"
|
|
:class-option="infoOption"
|
|
style="
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
"
|
|
>
|
|
<div class="list">
|
|
<div
|
|
class="info-item"
|
|
style="
|
|
display: flex;
|
|
overflow: hidden;
|
|
gap: 15px;
|
|
margin-bottom: 10px;
|
|
"
|
|
v-for="(
|
|
item, index
|
|
) in queryContentInfoList"
|
|
:key="index"
|
|
:data-index="index"
|
|
>
|
|
<img
|
|
:src="item.coverImage"
|
|
style="
|
|
width: 50%;
|
|
height: 120px;
|
|
"
|
|
:data-index="index"
|
|
/>
|
|
<div
|
|
style="
|
|
width: 50%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
"
|
|
:data-index="index"
|
|
>
|
|
<div
|
|
style="
|
|
font-size: 16px;
|
|
color: #fff;
|
|
"
|
|
class="title"
|
|
:data-index="index"
|
|
>
|
|
{{ item.title }}
|
|
</div>
|
|
<div
|
|
style="
|
|
margin-top: 10px;
|
|
font-size: 14px;
|
|
color: #c1c1c1;
|
|
"
|
|
:data-index="index"
|
|
>
|
|
{{ item.createTime }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<common-modal
|
|
v-model="imgTextModal"
|
|
@close="imgTextModal = false"
|
|
:title="info.title"
|
|
>
|
|
<modalDetail
|
|
:current-activity="info"
|
|
:imgTextModal="imgTextModal"
|
|
></modalDetail>
|
|
</common-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { useIndex } from "../../utils/utilsDramAdmin";
|
|
import MainTitle from "./components/MainTitle.vue";
|
|
import VideoPlay from "../common-components/common-video";
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
import * as echarts from "echarts";
|
|
import { echartsFocus, echartsClear } from "@/utils/autoEcharts";
|
|
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
|
|
import commonModal from "@/views/common-components/common-modal.vue";
|
|
import modalDetail from "./components/modalDetail.vue";
|
|
import LivePlayer from "@liveqing/liveplayer";
|
|
|
|
export default {
|
|
name: "MuseumBigDataScreen",
|
|
components: {
|
|
MainTitle,
|
|
VideoPlay,
|
|
vueSeamlessScroll,
|
|
modalDetail,
|
|
commonModal,
|
|
Swiper,
|
|
SwiperSlide,
|
|
directive,
|
|
LivePlayer,
|
|
},
|
|
data() {
|
|
return {
|
|
title: "翠屏博物馆大数据中心",
|
|
imgTextModal: false,
|
|
info: {},
|
|
collectionList: [],
|
|
videoUrl: "",
|
|
videoInfo: {},
|
|
leaderState: false, //基本概况弹窗
|
|
collectionState: false,
|
|
vidoeList: [],
|
|
isVideo: true,
|
|
baseInfo: {},
|
|
baseInfoT: {}, //真实数据
|
|
tabData: [],
|
|
tabDataList: [],
|
|
pltChannelId: "",
|
|
deviceId: "",
|
|
areaCode: window.$localStorage.getItem("areaCode"),
|
|
//博物馆重要通知
|
|
museumNotice: {},
|
|
//博物馆馆藏文物占比
|
|
collectionProportion: [],
|
|
noticeState: false,
|
|
currentCollect: {},
|
|
color: ["#205dcc", "#18f2c9", "#ffe381", "#1ce119"],
|
|
swiperOptions: {
|
|
on: {
|
|
slideChange: function () {
|
|
self.realIndex = this.realIndex;
|
|
},
|
|
},
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
},
|
|
centeredSlides: true,
|
|
// 设置点击箭头
|
|
navigation: {
|
|
nextEl: ".swiper-button-next",
|
|
prevEl: ".swiper-button-prev",
|
|
},
|
|
},
|
|
queryContentInfoList: [],
|
|
infoOption: {
|
|
step: 0.2, // 数值越大速度滚动越快
|
|
limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
collectionOption() {
|
|
return {
|
|
step: 0.2, // 数值越大速度滚动越快
|
|
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
direction: 2, // 0向下 1向上 2向左 3向右
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
|
};
|
|
},
|
|
vidoeListOption() {
|
|
return {
|
|
step: 0.2, // 数值越大速度滚动越快
|
|
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
direction: 2, // 0向下 1向上 2向左 3向右
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
|
};
|
|
},
|
|
},
|
|
mounted() {
|
|
const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
|
|
calcRate();
|
|
windowDraw();
|
|
|
|
this.queryBaseInfo(); //基础数据
|
|
this.queryCollectionProportion(); // 展品分类
|
|
this.queryCulturePerson(); // 来馆统计
|
|
this.queryActivityCount(); // 活动举办统计
|
|
|
|
this.getScreenVideo(); //查询摄像头
|
|
|
|
this.getAllAntique(); // 获取博物馆藏品
|
|
|
|
this.queryContentInfo(); //查询博物馆资讯
|
|
},
|
|
beforeDestroy() {
|
|
echartsClear();
|
|
},
|
|
methods: {
|
|
openModal(e){
|
|
let index = e.target.dataset.index
|
|
let data = this.collectionList[index]
|
|
this.info = data
|
|
this.imgTextModal = true
|
|
},
|
|
// 打开资讯
|
|
openInfo(e, list) {
|
|
let index = e.target.dataset.index;
|
|
let data = list[index];
|
|
if (data.contentType == "3") {
|
|
this.common.openWindow(data);
|
|
} else {
|
|
this.info = data;
|
|
this.imgTextModal = true;
|
|
}
|
|
},
|
|
// 查询博物馆资讯
|
|
queryContentInfo() {
|
|
this.$http
|
|
.post(
|
|
"/content/queryContentInfo",
|
|
this.common.request({
|
|
areaCode: "",
|
|
hasParent: "0",
|
|
page: 1,
|
|
typeCode: "BWGINFO",
|
|
pageSize: 10,
|
|
})
|
|
)
|
|
.then((res) => {
|
|
if (res.data.code === 200) {
|
|
this.queryContentInfoList = res.data.data.records;
|
|
}
|
|
});
|
|
},
|
|
queryCulturePerson() {
|
|
let params = {
|
|
areaCode: "2021030823390056",
|
|
page: 1,
|
|
pageSize: 10,
|
|
type: "museumCount",
|
|
};
|
|
this.$http
|
|
.post(
|
|
"/screen/getScreenSurveyPage",
|
|
this.common.request(params)
|
|
)
|
|
.then((res) => {
|
|
if (res.data.code === 200) {
|
|
const data = res.data.data.records;
|
|
if (data) {
|
|
this.baseInfoT = {
|
|
platformVisits: data[0].value,
|
|
totalNumber: data[1].value,
|
|
todayNumber: data[2].value,
|
|
monthNumber: data[3].value,
|
|
};
|
|
}
|
|
} else {
|
|
this.$Message.error("查询基础数据有误");
|
|
}
|
|
});
|
|
},
|
|
initBarChart2(data) {
|
|
let myChart = echarts.init(document.getElementById("barChart2"));
|
|
let option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "cross",
|
|
label: {
|
|
backgroundColor: "#6a7985",
|
|
},
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
axisLabel: {
|
|
margin: 10,
|
|
interval: 0,
|
|
color: "#ffffff",
|
|
textStyle: {
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
data: data.xData,
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "#35414c",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#ffffff",
|
|
textStyle: {
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
top: "15%",
|
|
bottom: "10%",
|
|
width: "87%",
|
|
height: "75%",
|
|
},
|
|
series: [
|
|
{
|
|
data: data.yData,
|
|
type: "bar",
|
|
barWidth: "16px",
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
1,
|
|
0,
|
|
0,
|
|
[
|
|
{
|
|
offset: 1,
|
|
color: "#4D3511",
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: "#F2B04E",
|
|
},
|
|
]
|
|
),
|
|
},
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
echartsFocus(myChart, data.xData.length);
|
|
},
|
|
initChartPie(data) {
|
|
let myChart = echarts.init(document.getElementById("pieChart"));
|
|
let total = 0;
|
|
data.forEach((item) => {
|
|
total += item.count;
|
|
});
|
|
var chartData = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
chartData.push({
|
|
value: data[i].count,
|
|
name: data[i].collectionName,
|
|
itemStyle: {
|
|
normal: {
|
|
shadowBlur: 20,
|
|
},
|
|
},
|
|
});
|
|
}
|
|
var seriesOption = [
|
|
{
|
|
name: "",
|
|
type: "pie",
|
|
clockWise: false,
|
|
radius: [45, 60],
|
|
avoidLabelOverlap: false,
|
|
legendHoverLink: false,
|
|
hoverOffset: 4,
|
|
label: {
|
|
show: true,
|
|
position: "center",
|
|
formatter: (item) => {
|
|
return `{percent|${Math.round(
|
|
(item.value / total) * 100
|
|
)}%}\n{sexName|${item.name}}`;
|
|
},
|
|
align: "center",
|
|
color: "#ffffff",
|
|
verticalAlign: "middle",
|
|
// 此处重点，字体大小设置为0
|
|
textStyle: {
|
|
fontSize: "0",
|
|
},
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
rich: {
|
|
percent: {
|
|
fontSize: 20,
|
|
color: "#fff",
|
|
},
|
|
sexName: {
|
|
fontSize: 10,
|
|
color: "#ccc",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
data: chartData,
|
|
},
|
|
];
|
|
let option = {
|
|
color: this.color,
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
toolbox: {
|
|
show: false,
|
|
},
|
|
series: seriesOption,
|
|
};
|
|
myChart.setOption(option);
|
|
echartsFocus(myChart, data.length);
|
|
},
|
|
changeVideo(e) {
|
|
if (e.target.className == "activityItem") {
|
|
const obj = JSON.parse(e.target.dataset.obj);
|
|
this.isVideo = true;
|
|
this.videoUrl = obj.url;
|
|
this.videoInfo = obj;
|
|
}
|
|
},
|
|
queryBaseInfo() {
|
|
let params = {
|
|
areaCode: "2021030823390056",
|
|
page: 1,
|
|
pageSize: 10,
|
|
type: "museumBaseInfo",
|
|
};
|
|
this.$http
|
|
.post(
|
|
"/screen/getScreenSurveyPage",
|
|
this.common.request(params)
|
|
)
|
|
.then((res) => {
|
|
if (res.data.code === 200) {
|
|
const data = res.data.data.records;
|
|
if (data) {
|
|
this.baseInfo = {
|
|
collectionNum: data[0].value,
|
|
visitorsYear: data[1].value,
|
|
openingYears: data[2].value,
|
|
investment: data[3].value,
|
|
establishmentTime: data[4].value,
|
|
buildingArea: data[5].value,
|
|
};
|
|
}
|
|
} else {
|
|
this.$Message.error("查询基础数据有误");
|
|
}
|
|
});
|
|
},
|
|
// 获取近半年活动数据
|
|
queryActivityCount() {
|
|
let params = {
|
|
areaCode: "2021030823390056",
|
|
page: 1,
|
|
pageSize: 10,
|
|
type: "museumActivityCount",
|
|
};
|
|
this.$http
|
|
.post(
|
|
"/screen/getScreenSurveyPage",
|
|
this.common.request(params)
|
|
)
|
|
.then((res) => {
|
|
if (res.data.code === 200) {
|
|
const data = res.data.data.records.reduce(
|
|
(acc, cur) => {
|
|
acc.xData.push(cur.label);
|
|
acc.yData.push(cur.value);
|
|
return acc;
|
|
},
|
|
{ xData: [], yData: [] }
|
|
);
|
|
this.initBarChart2(data);
|
|
} else {
|
|
this.$Message.error("查询基础数据有误");
|
|
}
|
|
});
|
|
},
|
|
//查询博物馆的馆藏文物分类
|
|
queryCollectionProportion() {
|
|
let params = {
|
|
areaCode: "2021030823390056",
|
|
page: 1,
|
|
pageSize: 10,
|
|
type: "museumType",
|
|
};
|
|
this.$http
|
|
.post(
|
|
"/screen/getScreenSurveyPage",
|
|
this.common.request(params)
|
|
)
|
|
.then(
|
|
(res) => {
|
|
if (res.data.code === 200) {
|
|
this.collectionProportion =
|
|
res.data.data.records.map((record) => ({
|
|
collectionName: record.label,
|
|
count: record.value,
|
|
color: this.color[
|
|
Math.floor(
|
|
Math.random() * this.color.length
|
|
)
|
|
],
|
|
}));
|
|
this.initChartPie(this.collectionProportion);
|
|
} else {
|
|
this.$Message.error("出错了");
|
|
}
|
|
},
|
|
(response) => {
|
|
this.$Message.error("出错了");
|
|
}
|
|
);
|
|
},
|
|
//获取博物馆藏品
|
|
getAllAntique() {
|
|
this.$http
|
|
.post(
|
|
"/content/queryContentInfo",
|
|
this.common.request({
|
|
areaCode: "2021030823390056",
|
|
hasChild: 1,
|
|
hasParent: 1,
|
|
page: 1,
|
|
pageSize: 100,
|
|
startAndEndDate: [],
|
|
typeCode: "COLLECTION",
|
|
})
|
|
)
|
|
.then(
|
|
(res) => {
|
|
if (res.data.code === 200) {
|
|
this.collectionList = res.data.data.records
|
|
this.collectionList.forEach(item => {
|
|
if (item.imageList) {
|
|
item.imageList = JSON.parse(item.imageList)
|
|
}
|
|
})
|
|
} else {
|
|
this.$Message.error("出错了");
|
|
}
|
|
},
|
|
(response) => {
|
|
this.$Message.error("出错了");
|
|
}
|
|
);
|
|
},
|
|
// 查询视频
|
|
getScreenVideo() {
|
|
let params = {
|
|
areaCode: "2021030823390056",
|
|
type: "museumMonitor",
|
|
};
|
|
this.$http
|
|
.post("/screen/getScreenVideoList", this.common.request(params))
|
|
.then(
|
|
(res) => {
|
|
if (res.data.code === 200) {
|
|
this.tabData = res.data.data.map((d) => ({
|
|
url: d.urlList,
|
|
title: d.title,
|
|
coverImage: d.coverImage,
|
|
}));
|
|
this.videoInfo = this.tabData[0];
|
|
this.videoUrl = this.tabData[0].url;
|
|
} else {
|
|
this.$Message.error("出错了");
|
|
}
|
|
},
|
|
(response) => {
|
|
this.$Message.error("出错了");
|
|
}
|
|
);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import "../../styles/pbStyle.less";
|
|
|
|
.eb-container {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
transform: scale(var(--scale)) translate(-50%, -50%);
|
|
transform-origin: 0 0;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
background-image: url("../../assets/screenView/bg.png");
|
|
background-size: 100%;
|
|
|
|
.bg {
|
|
width: 1920px;
|
|
height: 1056px;
|
|
position: relative;
|
|
background-image: url("../../assets/screenView/bg-box.png");
|
|
background-size: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.main {
|
|
width: 1804px;
|
|
height: 920px;
|
|
position: absolute;
|
|
margin: 0 auto;
|
|
top: 105px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.top {
|
|
width: 1804px;
|
|
height: 608px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
width: 462px;
|
|
height: 608px;
|
|
|
|
.baseInfo {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.min-title {
|
|
width: 462px;
|
|
height: 46px;
|
|
background-image: url("../../assets/screenView/minTitle462.png");
|
|
background-size: 100%;
|
|
background-color: rgba(29, 37, 47, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
span {
|
|
font-family: "YouSheBiaoTiHei";
|
|
font-size: 22px;
|
|
font-weight: 400;
|
|
line-height: 29px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
background: linear-gradient(
|
|
to top,
|
|
#5982b5,
|
|
#ecf4fe
|
|
);
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
margin-left: 44px;
|
|
}
|
|
}
|
|
|
|
.databox {
|
|
.content-pub-style(100%, calc(100% - 20px));
|
|
margin-top: 10px;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.databox-top {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.data-item {
|
|
flex: 1;
|
|
height: 74px;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 72px;
|
|
height: 72px;
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
height: 74px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin-left: 10px;
|
|
|
|
span:nth-child(1) {
|
|
font-family: "PingFang SC";
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
line-height: 28px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
color: #f2f6fa;
|
|
}
|
|
|
|
span:nth-child(2) {
|
|
font-family: "Furore";
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
line-height: 28px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom-title {
|
|
width: 412px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.title {
|
|
font-family: "YouSheBiaoTiHei";
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
text-align: left;
|
|
color: #d5e2f2;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.base {
|
|
width: 412px;
|
|
height: 120px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.data-item {
|
|
width: 188px;
|
|
height: 53px;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
|
|
img {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.content {
|
|
width: 130px;
|
|
height: 53px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-left: 10px;
|
|
|
|
span:nth-child(1) {
|
|
font-family: "PingFang SC";
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
text-align: left;
|
|
}
|
|
|
|
span:nth-child(2) {
|
|
font-family: "DIN";
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.peopleChart {
|
|
width: 390px;
|
|
height: 180px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.dataChart {
|
|
width: 390px;
|
|
height: 161px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.pieChart {
|
|
width: 136px;
|
|
height: 136px;
|
|
}
|
|
|
|
.pieContent {
|
|
width: 216px;
|
|
height: 126px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.contentItem {
|
|
width: 108px;
|
|
height: 55px;
|
|
display: flex;
|
|
margin-bottom: 20px;
|
|
flex-direction: column;
|
|
|
|
.line {
|
|
display: flex;
|
|
|
|
.dataline {
|
|
height: 4px;
|
|
width: 24px;
|
|
margin-right: 5px;
|
|
background-color: #19cd17;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.defaultline {
|
|
height: 4px;
|
|
width: 40px;
|
|
background-color: #1b424f;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
font-family: "PingFang SC";
|
|
font-size: 14px;
|
|
font-weight: 300;
|
|
line-height: 20px;
|
|
letter-spacing: 0em;
|
|
color: #909ba8;
|
|
text-align: left;
|
|
margin: 4px 0 2px;
|
|
}
|
|
|
|
.num {
|
|
font-family: "Furore";
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
line-height: 23px;
|
|
letter-spacing: 0em;
|
|
color: #ffffff;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.zhong {
|
|
width: 846px;
|
|
height: 608px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.videoBox {
|
|
width: 846px;
|
|
height: 479px;
|
|
}
|
|
|
|
.scrollBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-top: 5px;
|
|
overflow: hidden;
|
|
|
|
.activityBox {
|
|
height: 114px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.activityItem {
|
|
width: 176px;
|
|
height: 114px;
|
|
position: relative;
|
|
margin-right: 20px;
|
|
|
|
img {
|
|
width: 176px;
|
|
height: 114px;
|
|
pointer-events: none;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
span {
|
|
position: absolute;
|
|
display: block;
|
|
width: 100%;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
color: #fff;
|
|
bottom: 0;
|
|
left: 0;
|
|
font-size: 16px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
pointer-events: none;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-radius: 0 0 4px 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 462px;
|
|
height: 608px;
|
|
|
|
.culturalDataInfo {
|
|
width: 100%;
|
|
height: calc(100% - 120px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.min-title {
|
|
width: 462px;
|
|
height: 46px;
|
|
background-image: url("../../assets/screenView/minTitle462.png");
|
|
background-size: 100%;
|
|
background-color: rgba(29, 37, 47, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
span {
|
|
font-family: "YouSheBiaoTiHei";
|
|
font-size: 22px;
|
|
font-weight: 400;
|
|
line-height: 29px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
background: linear-gradient(
|
|
to top,
|
|
#5982b5,
|
|
#ecf4fe
|
|
);
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
margin-left: 44px;
|
|
}
|
|
}
|
|
|
|
.databox {
|
|
.content-pub-style(100%, calc(100% - 20px));
|
|
margin-top: 10px;
|
|
display: flex;
|
|
padding: 20px 0;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.baseInfo {
|
|
width: 412px;
|
|
height: 120px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.data-item {
|
|
width: 188px;
|
|
height: 53px;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
|
|
img {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.content {
|
|
width: 130px;
|
|
height: 53px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-left: 10px;
|
|
|
|
span:nth-child(1) {
|
|
font-family: "PingFang SC";
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
text-align: left;
|
|
}
|
|
|
|
span:nth-child(2) {
|
|
font-family: "DIN";
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom-title {
|
|
width: 412px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-top: 20px;
|
|
|
|
img {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.title {
|
|
font-family: "YouSheBiaoTiHei";
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
text-align: left;
|
|
color: #d5e2f2;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.barChart {
|
|
width: 412px;
|
|
height: calc(134px * 2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
width: 1804px;
|
|
height: 292px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
width: 1328px;
|
|
height: 292px;
|
|
|
|
.collection {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.min-title {
|
|
width: 1328px;
|
|
height: 46px;
|
|
//background-image: url("../../assets/screenView/miniTitle1328.png");
|
|
background-size: 100%;
|
|
background-color: rgba(29, 37, 47, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
span {
|
|
font-family: "YouSheBiaoTiHei";
|
|
font-size: 22px;
|
|
font-weight: 400;
|
|
line-height: 29px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
background: linear-gradient(
|
|
to top,
|
|
#5982b5,
|
|
#ecf4fe
|
|
);
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
margin-left: 44px;
|
|
}
|
|
}
|
|
|
|
.scrollBox {
|
|
.content-pub-style(100%, calc(100% - 10px));
|
|
margin-top: 10px;
|
|
overflow: hidden;
|
|
|
|
.databox {
|
|
height: 236px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.dataItem {
|
|
width: 230px;
|
|
height: 205px;
|
|
margin-right: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 230px;
|
|
height: 156px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.name {
|
|
font-family: "PingFang SC";
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 22px;
|
|
letter-spacing: 0em;
|
|
text-align: center;
|
|
color: #fff;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.time {
|
|
font-family: "PingFang SC";
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 17px;
|
|
letter-spacing: 0em;
|
|
text-align: center;
|
|
color: #a4a8ac;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 462px;
|
|
height: 392px;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
|
|
.borrowRead {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.min-title {
|
|
width: 462px;
|
|
height: 46px;
|
|
background-image: url("../../assets/screenView/minTitle462.png");
|
|
background-size: 100%;
|
|
background-color: rgba(29, 37, 47, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
span {
|
|
font-family: "YouSheBiaoTiHei";
|
|
font-size: 22px;
|
|
font-weight: 400;
|
|
line-height: 29px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
background: linear-gradient(
|
|
to top,
|
|
#5982b5,
|
|
#ecf4fe
|
|
);
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
margin-left: 44px;
|
|
}
|
|
}
|
|
|
|
.databox {
|
|
.content-pub-style(100%, calc(100% - 20px));
|
|
margin-top: 10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
padding: 10px;
|
|
|
|
.list {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.info-item {
|
|
width: 100%;
|
|
height: 120px;
|
|
position: relative;
|
|
margin-right: 20px;
|
|
|
|
.title {
|
|
display: -webkit-box;
|
|
/* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
|
|
-webkit-box-orient: vertical;
|
|
/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
|
|
text-overflow: ellipsis;
|
|
/* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.swiper-item {
|
|
padding-bottom: 10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.swiper-image {
|
|
max-height: 420px;
|
|
}
|
|
}
|
|
|
|
// 基本概况
|
|
.volunteerModalT {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
flex-direction: column;
|
|
// align-items: center;
|
|
margin-bottom: 10px;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 350px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.title {
|
|
width: 100%;
|
|
font-size: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.text {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.infoTitle {
|
|
width: 100%;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.infoBox {
|
|
width: 100%;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
</style>
|
|
|