From 369b82a3d81afe2f0574e2c44fd0a2918516b433 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 24 Mar 2022 08:47:24 +0800
Subject: [PATCH] 日历部分调整，视频部分调整，专题部分调整
---
src/components/orgNavBar/index.vue | 97 +++
src/components/playVideo/index.vue | 73 ++
src/pcLayout/index.vue | 4
src/pcviews/specialmap/celebrate.vue | 548 ++++++++++++++++++-
src/styles/pcpage/calender.scss | 62 ++
package-lock.json | 23
src/components/map/index.vue | 9
src/components/playVideo/index copy.vue | 197 +++++++
src/components/map/components/calender.vue | 585 ++++++++++++++++++--
src/styles/pcpage/dc-ui.scss | 4
public/img/icon/school-celebrate.png | 0
src/pcviews/specialmap/welcome.vue | 2
src/components/leftNav/index.vue | 45 +
src/styles/pcpage/index.scss | 1
package.json | 3
src/store/getters.js | 7
src/components/map/components/mapPopup.vue | 9
src/store/modules/viewer.js | 4
18 files changed, 1,544 insertions(+), 129 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index eef5d35..4bb0bc4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1352,6 +1352,11 @@
}
}
},
+ "@popperjs/core": {
+ "version": "2.11.4",
+ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.4.tgz",
+ "integrity": "sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg=="
+ },
"@soda/friendly-errors-webpack-plugin": {
"version": "1.8.0",
"resolved": "https://registry.nlark.com/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.8.0.tgz",
@@ -6830,6 +6835,11 @@
"integrity": "sha1-aXJy45kTVuQMPKxWanTu9oF1ZTE=",
"dev": true
},
+ "hls.js": {
+ "version": "1.1.5",
+ "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.1.5.tgz",
+ "integrity": "sha512-mQX5TSNtJEzGo5HPpvcQgCu+BWoKDQM6YYtg/KbgWkmVAcqOCvSTi0SuqG2ZJLXxIzdnFcKU2z7Mrw/YQWhPOA=="
+ },
"hmac-drbg": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/hmac-drbg/download/hmac-drbg-1.0.1.tgz",
@@ -8589,6 +8599,11 @@
"requires": {
"minimist": "^1.2.5"
}
+ },
+ "moment": {
+ "version": "2.29.1",
+ "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+ "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
},
"move-concurrently": {
"version": "1.0.1",
@@ -12302,6 +12317,14 @@
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
"dev": true
},
+ "tippy.js": {
+ "version": "6.3.7",
+ "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+ "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+ "requires": {
+ "@popperjs/core": "^2.9.0"
+ }
+ },
"tmp": {
"version": "0.0.33",
"resolved": "https://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz?cache=0&sync_timestamp=1592843137359&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftmp%2Fdownload%2Ftmp-0.0.33.tgz",
diff --git a/package.json b/package.json
index 7470b78..30d1fd8 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,10 @@
"core-js": "^3.6.5",
"echarts": "^5.2.1",
"element-ui": "^2.15.6",
+ "hls.js": "^1.1.5",
"lodash": "^4.17.21",
+ "moment": "^2.29.1",
+ "tippy.js": "^6.3.7",
"vue": "^2.6.11",
"vue-axios": "^3.3.7",
"vue-router": "^3.5.2",
diff --git a/public/img/icon/school-celebrate.png b/public/img/icon/school-celebrate.png
new file mode 100644
index 0000000..14c49df
--- /dev/null
+++ b/public/img/icon/school-celebrate.png
Binary files differ
diff --git a/src/components/leftNav/index.vue b/src/components/leftNav/index.vue
index 561d102..e643fbc 100644
--- a/src/components/leftNav/index.vue
+++ b/src/components/leftNav/index.vue
@@ -39,7 +39,8 @@
computed: {
...mapGetters([
'closeMapClick', // 关闭地图点击，防止新增标签误触
- 'addIconsLayerIconPopup' // 传送关闭编辑窗口，刷新标签数据
+ 'addIconsLayerIconPopup', // 传送关闭编辑窗口，刷新标签数据
+ 'calenderShow'
])
},
data () {
@@ -77,14 +78,14 @@
checked: '/img/leftnav/monitor-checked.png',
layer: 'leftMonitorLayer'
},
- // {
- // flag: false,
- // label: '活动',
- // img: '/img/leftnav/activity.png',
- // normal: '/img/leftnav/activity.png',
- // checked: '/img/leftnav/activity-checked.png',
- // layer: 'leftActivityLayer'
- // },
+ {
+ flag: false,
+ label: '活动',
+ img: '/img/leftnav/activity.png',
+ normal: '/img/leftnav/activity.png',
+ checked: '/img/leftnav/activity-checked.png',
+ layer: 'leftActivityLayer'
+ },
// {
// flag: false,
// label: 'AED',
@@ -123,6 +124,19 @@
if (!this.addIconsLayerIconPopup) {
this.reself()
}
+ },
+ calenderShow: {
+ handler (newData, oldData) {
+ if (newData == false) {
+ this.leftNavData.forEach(item => {
+ if (item.label == '活动') {
+ item.flag = false
+ item.img = item.normal
+ }
+ })
+ }
+ },
+ immediate: true
}
},
methods: {
@@ -196,10 +210,18 @@
item.flag = !item.flag
if (item.flag == true) {
item.img = item.checked
- LeftNavLayer[item.layer].show = true
} else {
item.img = item.normal
- LeftNavLayer[item.layer].show = false
+ }
+
+ if (item.label == '活动') {
+ this.$store.commit('SET_CALENDERSHOW', item.flag)
+ } else {
+ if (item.flag == true) {
+ LeftNavLayer[item.layer].show = true
+ } else {
+ LeftNavLayer[item.layer].show = false
+ }
}
},
initialize () {
@@ -484,7 +506,6 @@
)
]
})
- // console.log(value, "see");
this.$store.dispatch('setOurDataInPoput', value)
this.$store.dispatch('pcFlyView', {
jd: value.lng,
diff --git a/src/components/map/components/calender.vue b/src/components/map/components/calender.vue
index 763b66d..2e35d8a 100644
--- a/src/components/map/components/calender.vue
+++ b/src/components/map/components/calender.vue
@@ -1,6 +1,15 @@
<template>
<div class="calender-box">
- <div class="header">活动</div>
+ <div class="header">
+ <img class="celebrate deblurring" src="/img/icon/school-celebrate.png" alt />
+ 校园活动
+ <img
+ @click="closeCurrent"
+ class="close deblurring"
+ src="/img/navicon/close.png"
+ alt
+ />
+ </div>
<div class="content">
<full-calendar ref="fullCalendar" style="height: 100%" :options="calendarOptions"></full-calendar>
</div>
@@ -16,11 +25,378 @@
// import '@fullcalendar/core/main.css'
import '@fullcalendar/daygrid/main.css'
+import moment from 'moment'
+import tippy from 'tippy.js'
+import 'tippy.js/dist/tippy.css'
+import 'tippy.js/themes/light-border.css'
+// const getTime = (time) => {
+// const datetime = new Date(time)
+// const year = datetime.getFullYear()
+
+// const month = datetime.getMonth()
+// const date = datetime.getDate()
+// const hour = datetime.getHours()
+// const minute = datetime.getMinutes()
+// const second = datetime.getSeconds()
+
+// const result1 = year +
+// '-' +
+// ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
+// '-' +
+// ((date + 1) < 10 ? '0' + date : date) +
+// ' ' +
+// ((hour + 1) < 10 ? '0' + hour : hour) +
+// ':' +
+// ((minute + 1) < 10 ? '0' + minute : minute) +
+// ':' +
+// ((second + 1) < 10 ? '0' + second : second)
+
+// const result2 = year +
+// '-' +
+// ((month + 1) >= 10 ? (month + 1) : '0' + (month + 1)) +
+// '-' +
+// ((date + 1) < 10 ? '0' + date : date)
+
+// const result = {
+// hasTime: result1,
+// withoutTime: result2
+// }
+
+// return result
+// }
+
+const timeEvents = [{
+ id: '92963',
+ title: '文化素质教育讲座：逻辑的现实性意义——大学生为何需要逻辑学？',
+ start: '2022-03-25T18:30:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '本科生院',
+ url2: 'http://today.hit.edu.cn/event/2022/03/23/92963',
+ color: '#337ab7'
+},
+{
+ id: '92944',
+ title: '青年教师交流发展论坛之对话“青椒“第二期',
+ start: '2022-03-23T13:30:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '人事处',
+ url2: 'http://today.hit.edu.cn/event/2022/03/22/92944',
+ color: '#337ab7'
+},
+{
+ id: '92862',
+ title: '国际组织实习项目线上宣讲会预告',
+ start: '2022-03-22T18:30:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '学工处',
+ url2: 'http://today.hit.edu.cn/event/2022/03/20/92862',
+ color: '#337ab7'
+},
+{
+ id: '92769',
+ title: '文化素质教育讲座：物理与创新漫谈',
+ start: '2022-03-20T18:30:00',
+ end: null,
+ location: null,
+ category:
+ '讲座报告',
+ department: '本科生院',
+ url2: 'http://today.hit.edu.cn/event/2022/03/15/92769',
+ color: '#337ab7'
+},
+{
+ id: '92763',
+ title: '马克思主义学院“世界大变局与疫情交织背景下的时代盛会”两会专题讲座预告',
+ start: '2022-03-18T18:30:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '马克思主义学院',
+ url2: 'http://today.hit.edu.cn/event/2022/03/15/92763',
+ color: '#337ab7'
+},
+{
+ id: '92736',
+ title: '青年教师交流发展论坛之对话“青椒”第一期',
+ start: '2022-03-17T12:00:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '人事处',
+ url2: 'http://today.hit.edu.cn/event/2022/03/14/92736',
+ color: '#337ab7'
+},
+{
+ id: '92733',
+ title: '【因斯图们交流会】仪器学院研究生微沙龙第三十六期活动——关注心理健康',
+ start: '2022-03-16T18:00:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '仪器科学与工程学院',
+ url2: 'http://today.hit.edu.cn/event/2022/03/14/92733',
+ color: '#337ab7'
+},
+{
+ id: '92653',
+ title: '仪器学院寒假政务实习分享交流会',
+ start: '2022-03-12T18:00:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '仪器科学与工程学院',
+ url2: 'http://today.hit.edu.cn/event/2022/03/11/92653',
+ color: '#337ab7'
+},
+{
+ id: '92624',
+ title: '文化素质教育讲座：“核”你有约',
+ start: '2022-03-18T18:30:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '本科生院',
+ url2: 'http://today.hit.edu.cn/event/2022/03/10/92624',
+ color: '#337ab7'
+},
+{
+ id: '92500',
+ title: '德累斯顿工业大学硕士团审项目介绍及校友经验分享',
+ start: '2022-03-12T18:30:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '国际合作部',
+ url2: 'http://today.hit.edu.cn/event/2022/03/07/92500',
+ color: '#337ab7'
+},
+{
+ id: '92496',
+ title: '德国亚琛工业大学4+2项目招生宣讲会',
+ start: '2022-03-10T19:00:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '国际合作部',
+ url2: 'http://today.hit.edu.cn/event/2022/03/07/92496',
+ color: '#337ab7'
+},
+{
+ id: '92358',
+ title: '【生科青年说第3期】博士生郑善亮关于iASPP与内质网Ca2+稳态的研究分享',
+ start: '2022-03-02T18:30:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '生命科学与技术学院',
+ url2: 'http://today.hit.edu.cn/event/2022/03/02/92358',
+ color: '#337ab7'
+},
+{
+ id: '92313',
+ title: '文化素质教育讲座：从物理，到“悟理”——对科技、文化与人生的若干思考',
+ start: '2022-03-02T18:30:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+
+ department: '本科生院',
+ url2: 'http://today.hit.edu.cn/event/2022/02/28/92313',
+ color: '#337ab7'
+},
+{
+ id: '92026',
+ title: '【career讲坛】公职系列“银行校招考情介绍备考指导”讲座',
+ start: '2022-01-18T19:00:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '学工处',
+ url2: 'http://today.hit.edu.cn/event/2022/01/15/92026',
+ color: '#337ab7'
+}, {
+ id: '91997',
+ title: '伦敦国王学院Kawal Rhode教授线上学术讲座',
+ start: '2022-01-20T18:30:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '医学与健康学院',
+ url2: 'http://today.hit.edu.cn/event/2022/01/11/91997',
+ color: '#337ab7'
+}, {
+ id: '91982',
+ title: '【career讲坛】公职系列“人民银行考情介绍备考指导”讲座',
+ start: '2022-01-11T19:00:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '学工处',
+ url2: 'http://today.hit.edu.cn/event/2022/01/09/91982',
+ color: '#337ab7'
+}, {
+ id: '91879',
+ title: '“全驱系统方法---诞生背景、优越性及展望”段广仁院士报告通知',
+ start: '2021-12-29T15:30:18',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '科工院',
+ url2: 'http://today.hit.edu.cn/event/2021/12/29/91879',
+ color: '#337ab7'
+}, {
+ id: '91825',
+ title: '【生科青年说第2期】博士生徐珍媚关于G蛋白偶联受体结构与功能的研究分享',
+ start: '2021-12-30T18:30:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '生命科学与技术学院',
+ url2: 'http://today.hit.edu.cn/event/2021/12/26/91825',
+ color: '#337ab7'
+},
+
+{
+ id: '91817',
+ title: '美国大学生数学建模竞赛经验分享会（第二期）',
+ start: '2021-12-26T15:00:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '数学学院',
+ url2: 'http://today.hit.edu.cn/event/2021/12/25/91817',
+ color: '#337ab7'
+},
+{
+ id: '91758',
+ title: '第六届国际青年学者神舟论坛机电分论坛学术报告通知',
+ start: '2021-12-23T19:00:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '机电学院',
+ url2: 'http://today.hit.edu.cn/event/2021/12/23/91758',
+ color: '#337ab7'
+},
+{
+ id: '91737',
+ title: '【新百年 睿思无界】哈尔滨工业大学建筑学院2021学术月——专题系列讲座',
+ start: '2021-12-22T19:00:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '建筑学院',
+ url2: 'http://today.hit.edu.cn/event/2021/12/22/91737',
+ color: '#337ab7'
+},
+{
+ id: '91731',
+ title: '第六届国际青年学者神舟论坛化工与化学分论坛学术报告通知',
+ start: '2021-12-26T08:00:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '化工化学学院',
+ url2: 'http://today.hit.edu.cn/event/2021/12/22/91731',
+ color: '#337ab7'
+},
+{
+ id: '91708',
+ title: '【Career讲坛】公职系列“军队文职考情介绍及备考”讲座预告',
+ start: '2021-12-22T18:00:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '学工处',
+ url2: 'http://today.hit.edu.cn/event/2021/12/21/91708',
+ color: '#337ab7'
+},
+{
+ id: '91696',
+ title: '【新百年 睿思无界】哈尔滨工业大学建筑学院2021学术月——专题系列讲座',
+ start: '2021-12-20T19:00:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '建筑学院',
+ url2: 'http://today.hit.edu.cn/event/2021/12/20/91696',
+ color: '#337ab7'
+}, {
+ id: '91678',
+ title: '预告| 第六届哈尔滨工业大学国际青年学者神舟论坛-电气工程及自动化学院分论坛学术报告通知',
+ start: '2021-12-21T08:00:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '电气工程及自动化学院',
+ url2: 'http://today.hit.edu.cn/event/2021/12/20/91678',
+ color: '#337ab7'
+},
+{
+ id: '91655',
+ title: '【从炘创新讲坛】特邀报告第2期：《数学分析》课程学习的点滴体会（多元积分学部分）',
+ start: '2021-12-20T14:00:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '数学学院',
+ url2: 'http://today.hit.edu.cn/event/2021/12/19/91655',
+ color: '#337ab7'
+}, {
+ id: '91645',
+ title: '哈尔滨工业大学国际青年学者神舟论坛宇航分论坛学术报告会',
+ start: '2021-12-21T14:00:00',
+ end: null,
+ location: null,
+ category: '会议',
+ department: '航天学院',
+ url2: 'http://today.hit.edu.cn/event/2021/12/17/91645',
+ color: '#f0ad4e'
+}, {
+ id: '91621',
+ title: '【Career讲坛】公职系列“国考、省考、选调生考情介绍及备考”讲座预告',
+ start: '2021-12-18T15:00:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '学工处',
+ url2: 'http://today.hit.edu.cn/event/2021/12/17/91621',
+ color: '#337ab7'
+}, {
+ id: '91552',
+ title: '【预告】美国大学生数学建模竞赛经验分享',
+ start: '2021-12-19T15:00:00',
+ end: null,
+ location: null,
+ category: '讲座报告',
+ department: '数学学院',
+ url2: 'http://today.hit.edu.cn/event/2021/12/14/91552',
+ color: '#337ab7'
+}, {
+ id: '91548',
+ title: '“炘火•学知”讲师团开展《数学分析》考前知识梳理',
+ start: '2021-12-14T19:00:00',
+ end: null,
+ location: null,
+ category: '其它',
+ department: '数学学院',
+ url2: 'http://today.hit.edu.cn/event/2021/12/14/91548',
+ color: '#996600'
+}]
+
export default {
name: 'calender',
+
components: {
FullCalendar
},
+
data () {
return {
calendarOptions: {
@@ -50,9 +426,10 @@
eventColor: '#2196f3', // 修改日程背景色
timeGridEventMinHeight: '20', // 设置事件的最小高度
aspectRatio: '1.5', // 设置日历单元格宽高比
- displayEventTime: true, // 是否显示事件时间
+ displayEventTime: false, // 是否显示事件时间
allDaySlot: false, // 周、日视图时，all-day不显示
eventLimit: true, // 设置月日程，与all-day slot 的最大显示数量，超过的通过弹窗展示
+ // eventLimitText: '更多',
eventTimeFormat: {
hour: 'numeric',
minute: '2-digit',
@@ -64,45 +441,72 @@
meridiem: false,
hour12: false // 设置时间为24小时制
},
- events: [
- {
- id: 1,
- title: '09:30~11:30 小破孩',
- start: '2022-03-11', // 事件开始时间必须
- end: '2022-03-20', // 事件结束事件，可选
- allDay: false, // 是否为全天事件，可选
- // color: '#f08f00',
- // textColor: '#000',
- className: 'read-all-day'
- },
- {
- id: 3,
- title: '09:30~11:30 小1破孩',
- start: '2022-03-11',
- end: '2022-03-20',
- color: '#f08f01'
- },
- {
- id: 2,
- title: '9:30~14:30 项目会议',
- start: '2022-03-21',
- end: '2022-03-25',
- color: '#6bb377'
- }
- ], // 日程数组
+
+ // 日程函数
+ events (time, callback) {
+ // const startTime = getTime(time.start).withoutTime
+ // const endTime = getTime(time.end).withoutTime
+
+ const events = []
+
+ timeEvents.forEach(item => {
+ events.push({
+ id: item.id,
+ title: item.title,
+ start: moment(item.start).format('YYYY-MM-DD HH:mm:ss'), // 事件开始时间必须
+ // end: item.endTime, // 事件结束事件，可选
+ // allDay: item.allDay, // 是否为全天事件，可选
+ color: item.color,
+ textColor: '#fff'
+ // className: item.className
+ })
+ })
+
+ callback(events)
+ },
+
+ // [
+ // {
+ // id: 1,
+ // title: '09:30~11:30 小破孩',
+ // start: '2022-03-11', // 事件开始时间必须
+ // end: '2022-03-20', // 事件结束事件，可选
+ // allDay: false, // 是否为全天事件，可选
+ // // color: '#f08f00',
+ // // textColor: '#000',
+ // className: 'read-all-day'
+ // },
+ // {
+ // id: 3,
+ // title: '09:30~11:30 小1破孩',
+ // start: '2022-03-11',
+ // end: '2022-03-20',
+ // color: '#f08f01'
+ // },
+ // {
+ // id: 2,
+ // title: '9:30~14:30 项目会议',
+ // start: '2022-03-21',
+ // end: '2022-03-25',
+ // color: '#6bb377'
+ // }
+ // ]
+
// 事件
- editable: true, // 是否可以进行（拖动、缩放）修改
- eventStartEditable: true, // Event日程开始时间可以改变，默认为true，若为false,则表示开始结束时间范围不能拉伸，只能拖拽
- eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认为true,若为false，则表示开始结束时间范围不能拉伸，只能拖拽
- selectable: true, // 是否可以选中日历格
- selectMirror: true,
+ editable: false, // 是否可以进行（拖动、缩放）修改
+ eventStartEditable: false, // Event日程开始时间可以改变，默认为true，若为false,则表示开始结束时间范围不能拉伸，只能拖拽
+ eventDurationEditable: false, // Event日程的开始结束时间距离是否可以改变，默认为true,若为false，则表示开始结束时间范围不能拉伸，只能拖拽
+ selectable: false, // 是否可以选中日历格
+ selectMirror: false,
selectMinDistance: 0, // 选中日历格的最小距离
weekends: true,
+ weekMode: 'liquid', // 在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。
navLinks: true, // 天链接
selectHelper: false,
selectEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认为true，允许
- dayMaxEvents: true,
+ dayMaxEvents: false,
dateClick: this.handleDateClick, // 日期点击
+ eventMouseEnter: this.handleEventMouseEnter,
eventsSet: this.handleEvents, // 事件点击
eventClick: this.handleEventClick, // 日程点击信息展示
eventDrop: this.handleEventDrop, // 日程拖动事件
@@ -110,21 +514,21 @@
select: this.handleDateSelect,
customButtons: {
prev: { // this overrides the prev button
- text: 'PREV',
- click: () => {
- this.prev()
+ // text: 'PREV',
+ click: (e) => {
+ this.prev(e)
}
},
next: { // this overrides the next button
- text: 'PREV',
+ // text: 'PREV',
click: () => {
this.next()
}
},
today: {
text: '今天',
- click: () => {
- this.today()
+ click: (e) => {
+ this.today(e)
}
}
}
@@ -137,15 +541,16 @@
},
methods: {
- prev () {
+
+ prev (e) {
this.calendarApi.prev()
},
// 切换下一个按钮事件
- next () {
+ next (e) {
this.calendarApi.next()
},
// 点击今天按钮
- today () {
+ today (e) {
this.calendarApi.today()
},
// 日程保存
@@ -185,27 +590,64 @@
},
// 日程事件点击
handleEvents (info) {
- console.log('handleEvents.info:', info)
+ // console.log('handleEvents.info:', info)
// this.currentEvents = events
},
handleWeekendsToggle () {
- console.log('handleWeekendsToggle')
this.calendarOptions.weekends = !this.calendarOptions.weekends
},
// 日期点击
handleDateClick (selectInfo) {
- if (confirm('您是否要在【' + selectInfo.dateStr + '】添加一个新的事件？')) {
- // 父组件直接调用子组件方法
- this.$refs.eventDialogue.openDialog('add')
- // 父组件直接修改子组件变量
- // this.$refs['eventDialogue'].dialogVisible = true
- }
+
+ // if (confirm('您是否要在【' + selectInfo.dateStr + '】添加一个新的事件？')) {
+ // // 父组件直接调用子组件方法
+ // this.$refs.eventDialogue.openDialog('add')
+ // // 父组件直接修改子组件变量
+ // // this.$refs['eventDialogue'].dialogVisible = true
+ // }
+
},
// 日程点击信息展示
handleEventClick (info) {
- console.log('handleEventClick.info:', info)
- info.el.style.borderColor = 'red'
- this.$refs.eventDialogue.openDialog('view', info)
+ // console.log('handleEventClick.info:', info)
+ // info.el.style.borderColor = 'red'
+ // this.$refs.eventDialogue.openDialog('view', info)
+ },
+ handleDateSelect (startDate, endDate, allDay, jsEvent, view) {
+ console.log(startDate, endDate, allDay, jsEvent, view)
+ },
+ handleEventMouseEnter (info) {
+ const col = info.event.borderColor
+ const eve = info.event._def.extendedProps
+ const category = info.event._def.extendedProps.category
+
+ tippy(info.el, {
+ // content:"<div style='width: 280px;background-color:#FAFAFA;padding:5px;font-size:14px;z-index:99999'>" +
+ // "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议名称：" + info.event.title+"</div>" +
+ // "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议类型："+eve.type+"</div>" +
+ // "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议时间："+eve.times+"</div>" +
+ // "<div style='color: #666666;overflow: hidden;'><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议状态："+eve.status+"</div>" +
+ // "</div>",
+ content: `<div style='width: 260px;background-color:#FAFAFA;padding:5px;font-size:14px;z-index:99999;'>
+ <div style='display:flex;color: #666666;overflow: hidden;' class="${eve.category == 1 ? 'hidden' : ''}">
+ <div><span style='display:inline-block;width:6px;height:6px;background-color:${col};border-radius:50%;margin:0 5px;'></span>活动名称： </div>
+ <div style="width:161px;white-space:normal;overflow: auto;table-layout:fixed; word-break: break-all; height:auto;display:inner-block">${info.event.title}</div>
+ </div>
+
+ </div>`,
+ // <div style='color: #666666;overflow: hidden;' class="${eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议类型：${eve.type}</div>
+ // <div style='color: #666666;overflow: hidden;' class="${eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议时间：${eve.times}</div>
+ // <div style='color: #666666;overflow: hidden;' class="${eve.category == 1 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>会议状态：${eve.status}</div>
+ // <div style='color: #666666;overflow: hidden;' class="${eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>年份：${eve.year}</div>
+ // <div style='color: #666666;overflow: hidden;' class="${eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>领域角色：${eve.depRoleName}</div>
+ // <div style='color: #666666;overflow: hidden;' class="${eve.category == 0 ? 'hidden' : ''}"><span style='display:inline-block;width:6px;height:6px;background-color:#318DDE;border-radius:50%;margin:0 5px;'></span>姓名：${eve.name}</div>
+ theme: 'light-border', // 主题选取
+ // trigger: 'click', //触发类型
+ interactive: true, // 可交互的
+ placement: 'top-start', // 悬浮框位置
+ allowHTML: true, // 是否允许html文本
+ zIndex: 99999
+ })
},
// 日程事件触发
eventClick (info) {
@@ -214,13 +656,16 @@
},
// 日程拖动事件
handleEventDrop (info) {
- this.$refs.eventDialogue.eventFormModel.start = info.event.start
- this.$refs.eventDialogue.eventFormModel.end = info.event.end
+ // this.$refs.eventDialogue.eventFormModel.start = info.event.start
+ // this.$refs.eventDialogue.eventFormModel.end = info.event.end
},
// 日程缩放事件
eventResize (info) {
- this.$refs.eventDialogue.eventFormModel.start = info.event.start
- this.$refs.eventDialogue.eventFormModel.end = info.event.end
+ // this.$refs.eventDialogue.eventFormModel.start = info.event.start
+ // this.$refs.eventDialogue.eventFormModel.end = info.event.end
+ },
+ closeCurrent () {
+ this.$store.commit('SET_CALENDERSHOW', false)
}
}
}
@@ -238,13 +683,33 @@
right: 0;
bottom: 0;
margin: auto;
+ border-radius: 10px;
+ overflow: hidden;
+ box-shadow: 0 0 4px 2px #dddddd;
.header {
+ position: relative;
padding: 0 10px;
line-height: 40px;
background: #2196f3;
color: #fff;
font-size: 18px;
+ .celebrate {
+ width: 20px;
+ height: 20px;
+ vertical-align: middle;
+ }
+ .close {
+ position: absolute;
+ right: 10px;
+ top: 0;
+ left: auto;
+ bottom: 0;
+ margin: auto;
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+ }
}
.content {
@@ -252,9 +717,5 @@
padding: 0 10px 10px 10px;
height: calc(100% - 50px);
}
-}
-.read-all-day {
- background: red;
- color: green;
}
</style>
diff --git a/src/components/map/components/mapPopup.vue b/src/components/map/components/mapPopup.vue
index e89003f..f9ae8a9 100644
--- a/src/components/map/components/mapPopup.vue
+++ b/src/components/map/components/mapPopup.vue
@@ -219,7 +219,10 @@
/>
</div>
<div class="content">
- <video :src="monitorUrl" controls autoplay></video>
+ <play-video
+ :sourceUrl="monitorUrl"
+ @playStatus="changePlayStatus"
+ ></play-video>
</div>
</div>
</div>
@@ -1087,6 +1090,10 @@
this.$store.commit('SET_MONITORPOPUP', false)
},
+ changePlayStatus (status) { // 获取子组件的播放状态
+ console.log(status)
+ },
+
audioPlay () {
if (this.audioFlag == false) {
this.audioMsg.text = this.audioSource
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index f59faf6..77c4c38 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -31,7 +31,7 @@
<dimension />
- <!-- <calender /> -->
+ <calender v-if="calenderShow" />
<left-nav ref="leftNav"></left-nav>
@@ -65,8 +65,8 @@
components: {
mapPopup,
campusBuildingSearch,
- dimension
- // calender
+ dimension,
+ calender
},
data () {
return {
@@ -158,7 +158,8 @@
'campusNavFlag',
'orgNavBarFlag',
'arcNavBarFlag',
- 'searchPopupFlag'
+ 'searchPopupFlag',
+ 'calenderShow'
])
},
mounted () {
diff --git a/src/components/orgNavBar/index.vue b/src/components/orgNavBar/index.vue
index c750100..99e1e32 100644
--- a/src/components/orgNavBar/index.vue
+++ b/src/components/orgNavBar/index.vue
@@ -9,7 +9,13 @@
</template>
<template slot="public-box-content">
<ul>
- <li v-for="(item, index) in orgNavBarList" :key="index" @click="mapPopup(item)">
+ <li
+ @mouseover="flickerStart(item, item.navTitle)"
+ @mouseout="flickerEnd(item, item.navTitle)"
+ v-for="(item, index) in orgNavBarList"
+ :key="index"
+ @click="mapPopup(item)"
+ >
<img :src="item.icon" alt />
<span>{{ item.navTitle }}</span>
</li>
@@ -20,6 +26,8 @@
<script>
import { mapGetters } from 'vuex'
+
+let currentOrgLayer = null
export default {
name: 'OrgNavBar',
@@ -47,7 +55,47 @@
'orgNavBarTitle'
])
},
+ watch: {
+ orgNavBarList: {
+ handler (newData, oldData) {
+ if (newData.length > 0) {
+ currentOrgLayer = new global.DC.HtmlLayer('currentOrgLayer')
+ global.viewer.addLayer(currentOrgLayer)
+
+ newData.forEach((item, index) => {
+ const divIcon = new global.DC.DivIcon(
+ new global.DC.Position(Number(item.longitude), Number(item.latitude), 0),
+ `
+ <div class="tag-entitys-box">
+ <div class="tag-content">
+ ${item.navTitle}
+ </div>
+ <div class="tag-angle-content">
+ <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
+ </div>
+ </div>
+ `
+ )
+
+ divIcon.attr.name = item.navTitle
+
+ currentOrgLayer.addOverlay(divIcon)
+ })
+ } else {
+ this.removeLayer()
+ }
+ },
+ immediate: true
+ }
+ },
methods: {
+ removeLayer () {
+ if (currentOrgLayer != null) {
+ global.viewer.removeLayer(currentOrgLayer)
+ currentOrgLayer = null
+ }
+ },
+
mapPopup (item) {
this.$store.commit('CLEAR_ALL', null)
@@ -120,6 +168,53 @@
this.$store.commit('SET_DETAILSPOPUP', false)
this.$store.commit('SET_PANORAMAPOPUP', false)
this.$store.commit('SET_MONITORPOPUP', false)
+ this.removeLayer()
+ },
+ flickerStart (param, name) {
+ const layerIcon = currentOrgLayer.getOverlaysByAttr('name', name)
+
+ currentOrgLayer.removeOverlay(layerIcon[0])
+
+ const divIcon = new global.DC.DivIcon(
+ new global.DC.Position(Number(param.longitude), Number(param.latitude), 0),
+ `
+ <div class="tag-entitys-box layer-entity-animation">
+ <div class="tag-content">
+ ${param.navTitle}
+ </div>
+ <div class="tag-angle-content">
+ <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
+ </div>
+ </div>
+ `
+ )
+
+ divIcon.attr.name = param.navTitle
+
+ currentOrgLayer.addOverlay(divIcon)
+ },
+ flickerEnd (param, name) {
+ const layerIcon = currentOrgLayer.getOverlaysByAttr('name', name)
+
+ currentOrgLayer.removeOverlay(layerIcon[0])
+
+ const divIcon = new global.DC.DivIcon(
+ new global.DC.Position(Number(param.longitude), Number(param.latitude), 0),
+ `
+ <div class="tag-entitys-box">
+ <div class="tag-content">
+ ${param.navTitle}
+ </div>
+ <div class="tag-angle-content">
+ <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
+ </div>
+ </div>
+ `
+ )
+
+ divIcon.attr.name = param.navTitle
+
+ currentOrgLayer.addOverlay(divIcon)
}
}
}
diff --git a/src/components/playVideo/index copy.vue b/src/components/playVideo/index copy.vue
new file mode 100644
index 0000000..69eeaa7
--- /dev/null
+++ b/src/components/playVideo/index copy.vue
@@ -0,0 +1,197 @@
+<template>
+ <div class="ali-player">
+ <div class="main">
+ <div class="video-center">
+ <div v-if="!sourceUrls && !loadingVideo" class="tips">请选择视频源</div>
+ <div v-if="waiting" class="tips">获取视频中，请稍等...</div>
+ <div
+ v-if="!hls"
+ class="video"
+ v-loading="loadingVideo"
+ style="background-color: #0c0b0b"
+ ></div>
+ <video
+ v-show="hls"
+ id="publicVideo"
+ v-loading="loadingVideo"
+ controls
+ class="video"
+ ref="publicVideo"
+ style="background-color: #0c0b0b"
+ ></video>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import Hls from 'hls.js'
+export default {
+ name: 'playVideo',
+ components: {},
+ props: {
+ sourceUrl: {
+ type: String,
+ default: ''
+ },
+ height: {
+ type: String,
+ default: '550px'
+ }
+ },
+ data () {
+ return {
+ hls: null,
+ sourceUrls: this.sourceUrl, // 如果不赋值，在加载组件时会报错
+ loadingVideo: false,
+ waiting: false,
+ reloadPlayTime: null // 当视频流获取超时定时器
+ }
+ },
+ computed: {
+
+ },
+ watch: {
+ sourceUrl: {
+ handler (newVal, oldVal) {
+ console.log(newVal, 465)
+ if (this.reloadPlayTime) { // 重新播放或者播放新视频时，清空定时器
+ console.log('清空定时器...')
+ this.videoPause()
+ clearTimeout(this.reloadPlayTime)
+ }
+ if (newVal && newVal !== oldVal) {
+ this.waiting = true
+ this.sourceUrls = newVal
+ this.playVideo()
+ }
+ },
+ // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
+ immediate: true
+ }
+
+ },
+ created () { },
+ mounted () {
+ },
+ methods: {
+ playVideo () {
+ this.$nextTick(() => {
+ this.loadingVideo = false
+ })
+ if (Hls.isSupported()) {
+ this.hls = new Hls()
+ this.hls.loadSource(this.sourceUrls)
+ this.hls.attachMedia(this.$refs.publicVideo)
+
+ this.hls.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
+ // console.log(event, data);
+ this.loadingVideo = false
+ this.waiting = false
+ this.$emit('playStatus', true) // 当点位存在播放地址时，可以截图
+ console.log('playing...')
+ this.$refs.publicVideo.play()
+ /* playSetTime = setTimeout(()=>{
+ clearTimeout(this.reloadPlayTime);
+ },3000) */
+ // 当正在播放时，取消定时器
+ })
+ const timerArr = []
+ let delay = 5000
+ this.hls.on(Hls.Events.ERROR, (event, data) => {
+ delay += 1000
+ console.log(event, data)
+ if (data.type === 'networkError') { // 网络故障
+ console.log('网络故障了...')
+ this.reloadPlayTime = setTimeout(() => {
+ this.$message.warning('获取视频失败，请重新播放...')
+ this.sourceUrls = ''
+ this.loadingVideo = false
+ this.waiting = false
+ this.disabledShot = true
+ this.$emit('playStatus', false)
+ this.videoPause()
+ // 监听出错事件
+ }, delay)
+ timerArr.push(this.reloadPlayTime)
+
+ if (timerArr.length > 1) {
+ // 当视频播放中无法播放时，会多次执行Hls.Events.ERROR，因此需要处理一下定时器触发问题
+ for (let i = 1; i < timerArr.length; i++) {
+ clearTimeout(timerArr[i])
+ timerArr.splice(i, 1)
+ }
+ }
+ console.log(timerArr)
+ } else if (data.type === 'mediaError') { // 推流失败
+ // console.log("播放流断了....");
+ }
+ })
+ } else if (this.$refs.publicVideo.canPlayType('application/vnd.apple.mpegurl')) {
+ /* this.$refs.video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
+ this.$refs.video.addEventListener('loadedmetadata',function() {
+ this.$refs.video.play();
+ }); */
+ }
+ },
+ // 停止流
+ videoPause () {
+ if (this.hls) {
+ this.$refs.publicVideo.pause()
+ this.hls.destroy()
+ this.hls = null
+ }
+ }
+ },
+ beforeDestroy () {
+ clearTimeout(this.reloadPlayTime)
+ this.hls = null
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.ali-player {
+ width: 460px;
+ height: 320px;
+ .main {
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ color: #ffffff;
+ .video-center {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ .name {
+ position: absolute;
+ left: 50%;
+ top: -20px;
+ font-size: 18px;
+ -webkit-transform: translateX(-50%);
+ transform: translateX(-50%);
+ }
+ .tips {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+ z-index: 9999;
+ opacity: 0.79;
+ }
+ }
+ }
+ #publicVideo {
+ width: 100%;
+ height: 100%;
+ object-fit: fill;
+ opacity: 0.79;
+ }
+ .video {
+ width: 100%;
+ height: 100%;
+ opacity: 0.79;
+ }
+}
+</style>
diff --git a/src/components/playVideo/index.vue b/src/components/playVideo/index.vue
new file mode 100644
index 0000000..5810736
--- /dev/null
+++ b/src/components/playVideo/index.vue
@@ -0,0 +1,73 @@
+<template>
+ <div id="video-box">
+ <video id="hlsVideo" ref="hlsVideo" controls preload="true"></video>
+ </div>
+</template>
+
+<script>
+import Hls from 'hls.js'
+export default {
+ name: 'playVideo',
+ data () {
+ return {
+ hls: ''
+ }
+ },
+ methods: {
+ destroyHls: function () {
+ if (this.hls) {
+ this.$refs.hlsVideo.pause()
+ this.hls.destroy()
+ this.hls = null
+ }
+ },
+ loadVideoFn: function () {
+ if (Hls.isSupported()) {
+ this.hls = new Hls()
+ this.hls.loadSource('http://171.34.197.243:786/devimages/streaming/examples/bipbop_4x3/gear2/prog_index.m3u8') // CCTV1直播源
+ this.hls.attachMedia(this.$refs.hlsVideo)
+ this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
+ console.log('加载成功')
+ this.$refs.hlsVideo.play()
+ })
+ this.hls.on(Hls.Events.ERROR, (event, data) => {
+ // console.log(event, data);
+ // 监听出错事件
+ console.log('加载失败')
+ })
+ }
+ }
+ },
+ computed: {
+
+ },
+
+ created: function () {
+ const _this = this
+ _this.$once('hook:beforeDestroy', () => {
+ _this.destroyHls()
+ })
+ },
+
+ mounted () {
+ const _this = this
+ _this.loadVideoFn()
+ },
+
+ watch: {
+ },
+
+ components: {
+
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+#hlsVideo {
+ width: 460px;
+ height: 320px;
+ border: none;
+ object-fit: fill;
+}
+</style>
diff --git a/src/pcLayout/index.vue b/src/pcLayout/index.vue
index d8580eb..f13219a 100644
--- a/src/pcLayout/index.vue
+++ b/src/pcLayout/index.vue
@@ -70,8 +70,8 @@
<template slot="title">
<i class="custom-icon menu-ztdt"></i> 专题地图
</template>
- <!-- <el-menu-item index="/pcLayout/default/specialmap/celebrate">校区庆</el-menu-item> -->
- <el-menu-item index="/pcLayout/default/specialmap/welcome">校区迎新</el-menu-item>
+ <el-menu-item index="/pcLayout/default/specialmap/welcome?name=校庆">校庆</el-menu-item>
+ <el-menu-item index="/pcLayout/default/specialmap/welcome?name=校区迎新">校区迎新</el-menu-item>
</el-submenu>
<el-submenu index="tool">
diff --git a/src/pcviews/specialmap/celebrate.vue b/src/pcviews/specialmap/celebrate.vue
index 67cdcee..72995a9 100644
--- a/src/pcviews/specialmap/celebrate.vue
+++ b/src/pcviews/specialmap/celebrate.vue
@@ -1,52 +1,514 @@
-/* * @Author: Morpheus * @Name: 校区庆 * @Date: 2021-11-15 17:14:47 * @Last
-Modified by: Morpheus * @Last Modified time: 2022-01-05 14:05:59 */
+/* * @Author: Morpheus * @Name: 校区迎新 * @Date: 2021-11-15 17:14:47 * @Last
+Modified by: Morpheus * @Last Modified time: 2022-01-26 10:51:24 */
<template>
- <div>
- <service-nav-bar
- :title="title"
- :arcCode="code"
- :headerLog="headerLog"
- ></service-nav-bar>
- </div>
+ <div>
+ <div class="welcome-container">
+ <div class="header">
+ <div class="title">
+ {{ title }}
+ <a href="javascript:void(0);" title="全景浏览">
+ <img
+ @click="panoramaPlay"
+ class="panorama-control deblurring"
+ src="/img/icon/panorama.png"
+ alt
+ />
+ </a>
+ <a href="javascript:void(0);" title="语音介绍">
+ <img
+ @click="audioPlay"
+ class="audio-control deblurring"
+ :src="audioImgUrl"
+ alt
+ />
+ </a>
+ <a href="javascript:void(0);" title="关闭">
+ <img
+ @click="closeModel"
+ class="close-box deblurring"
+ src="/img/navicon/close.png"
+ alt
+ />
+ </a>
+ </div>
+ </div>
+ <div class="content-box">
+ <div class="img-exhibition">
+ <div class="content">
+ <el-carousel :interval="5000" arrow="always" height="300px">
+ <el-carousel-item v-for="item in list" :key="item">
+ <el-image :src="item" :preview-src-list="[item]"></el-image>
+ </el-carousel-item>
+ </el-carousel>
+ </div>
+ </div>
+ <div class="organizer">主办：{{ sponsor }}</div>
+ <div class="undertake">承办：{{ undertake }}</div>
+ <div class="time-box">时间：{{ time }}</div>
+ <div class="text-introduce">
+ <div class="title">相关介绍：</div>
+ <div class="content">
+ <p v-text="introduce"></p>
+ </div>
+ </div>
+ <div class="panorama-box" v-show="panoramaShow">
+ <div class="title">
+ 全景浏览
+ <a href="javascript:void(0);" title="关闭">
+ <img
+ @click="(panoramaShow = false), (panoramaUrl = '')"
+ class="close-box"
+ src="/img/navicon/close.png"
+ alt
+ />
+ </a>
+ </div>
+ <div class="content">
+ <iframe
+ style="width: 100%; height: 100%"
+ :src="panoramaUrl"
+ frameborder="0"
+ ></iframe>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
-import { mapGetters } from "vuex";
+import { getWelcome } from '@/api/pc/public/specialmap'
+import { mapGetters } from 'vuex'
+
+let pathLayer = null
+let pointLayer = null
export default {
- data() {
- return {
- title: "圈存机",
- code: 6,
- headerLog: "/img/icon/service-qcj.png",
- };
- },
- created() {
- if (this.orgNavBarFlag == true) {
- this.$store.commit("SET_ORGNAVBARTITLE", "");
- this.$store.commit("SET_ORGNAVBARLIST", []);
- this.$store.commit("SET_ORGNAVBARFLAG", false);
- }
- if (this.arcNavBarFlag == true) {
- this.$store.commit("SET_ARCNAVBARTITLE", "");
- this.$store.commit("SET_ARCNAVBARCODE", "");
- this.$store.commit("SET_ARCNAVBARFLAG", false);
- }
- },
- computed: {
- ...mapGetters([
- // 校区内导航的显示关闭
- "orgNavBarFlag",
- "arcNavBarFlag",
- ]),
- },
- methods: {
- closeModel() {
- this.$store.dispatch("delVisitedViews", this.$route);
- this.$router.push("/pcLayout/default");
+ data () {
+ return {
+ time: '',
+ sponsor: '',
+ undertake: '',
+ title: '',
+ introduce: '',
+ list: [],
+ pathList: [],
+ pointNameList: [],
+ pointList: [],
+ panoramaUrlOne: '',
+ panoramaUrl: '',
+ audioSource: '',
+ audioFlag: false,
+ audioCourse: false,
+ audioSynth: null,
+ audioMsg: null,
+ panoramaShow: false,
+ audioImgUrl: '/img/icon/start-video.png'
+ }
},
- },
-};
+ created () { },
+ mounted () {
+ var that = this
+
+ this.audioSynth = window.speechSynthesis
+
+ this.audioMsg = new window.SpeechSynthesisUtterance()
+
+ this.audioMsg.onend = function () {
+ // this.audioSynth.cancel();
+ that.audioFlag = false
+ that.audioCourse = false
+ that.audioImgUrl = '/img/icon/close-video.png'
+ }
+ this.getData()
+
+ window.onbeforeunload = e => { // 刷新时弹出提示
+ this.audioSynth.cancel()
+ }
+ },
+ computed: {
+ ...mapGetters([
+ // 校区内导航的显示关闭
+ 'campusNavFlag',
+ 'orgNavBarFlag',
+ 'arcNavBarFlag'
+ ])
+ },
+ methods: {
+ getData () {
+ getWelcome({ hdname: '校区迎新' }).then((res) => {
+ var result = res.data.data
+ this.title = result.hdname
+ this.time = result.time
+ this.sponsor = result.sponsor
+ this.undertake = result.undertake
+ this.panoramaUrl = result.panoramaurl
+ this.panoramaUrlOne = result.panoramaurl
+ this.introduce = result.context
+ this.audioSource = result.context
+
+ this.audioPlay()
+
+ this.list = result.tpurl.split(',')
+ this.pointNameList = result.addressname.split(',')
+ this.pointList = result.address.split(';')
+
+ var a = result.lx.split(';')
+
+ a.forEach((item) => {
+ var b = item.split('(')
+ var c = b[1].substr(0, b[1].length - 1)
+ var d = c.split(',')
+ var j = []
+ d.forEach((it) => {
+ var e = it.split(' ')
+ var f = e.join(',')
+ j.push(f)
+ })
+ var k = j.join(';')
+ this.pathList.push(k)
+ })
+
+ pathLayer = new global.DC.VectorLayer('pathLayer')
+ global.viewer.addLayer(pathLayer)
+
+ pointLayer = new global.DC.HtmlLayer('pointLayer')
+ global.viewer.addLayer(pointLayer)
+
+ this.pathList.forEach((item) => {
+ this.drawPolyline(item)
+ })
+
+ this.pointList.forEach((item, index) => {
+ this.drawPoint(item.split(','), this.pointNameList[index])
+ })
+ if (this.pointList.length > 0) {
+ this.$store.dispatch('pcMoveView', {
+ viewer: global.viewer,
+ jd: +this.pointList[0].split(',')[0] - 0.0005,
+ wd: this.pointList[0].split(',')[1]
+ })
+ } else {
+ this.$store.dispatch('pcMoveView', {
+ viewer: global.viewer,
+ jd: +this.pathList[0].split(';')[0].split(',')[0] - 0.0005,
+ wd: this.pathList[0].split(';')[0].split(',')[1]
+ })
+ }
+ })
+ },
+ drawPolyline (item) {
+ const polyline = new global.DC.Polyline(item)
+
+ polyline.setStyle({
+ width: 6,
+ arcType: true,
+ material: new global.DC.PolylineImageTrailMaterialProperty({
+ color: global.DC.Namespace.Cesium.Color.fromBytes(10, 255, 10),
+ speed: 60,
+ image: '/img/icon/right.png',
+ repeat: { x: 320, y: 1 }
+ }),
+ clampToGround: true
+ })
+
+ pathLayer.addOverlay(polyline)
+ },
+ drawPoint (item, name) {
+ const divIcon = new global.DC.DivIcon(
+ new global.DC.Position(Number(item[0]), Number(item[1]), 0),
+ `
+ <div class="point-entitys-box">
+ <div class="point-logo">
+ <img src="/img/icon/activity.png">
+ </div>
+ <div class="point-title">
+ ${name}
+ </div>
+ </div>
+ `
+ )
+ pointLayer.addOverlay(divIcon)
+ },
+ audioPlay () {
+ if (this.audioFlag == false) {
+ this.audioMsg.text = this.audioSource
+ this.audioSynth.speak(this.audioMsg)
+ this.audioFlag = true
+ this.audioCourse = true
+ this.audioImgUrl = '/img/icon/start-video.png'
+ } else {
+ if (this.audioCourse == true) {
+ this.audioSynth.pause()
+ this.audioCourse = false
+ this.audioImgUrl = '/img/icon/close-video.png'
+ } else {
+ this.audioSynth.resume()
+ this.audioCourse = true
+ this.audioImgUrl = '/img/icon/start-video.png'
+ }
+ }
+ },
+
+ closeModel () {
+ global.viewer.removeLayer(pathLayer)
+ global.viewer.removeLayer(pointLayer)
+
+ this.audioSynth.cancel()
+ this.audioFlag = false
+ this.audioCourse = false
+
+ this.$store.dispatch('delVisitedViews', this.$route)
+ this.$router.push('/pcLayout/default')
+ },
+
+ panoramaPlay () {
+ this.panoramaShow = true
+ this.panoramaUrl = this.panoramaUrlOne
+ }
+ },
+ destroyed () {
+ this.audioSynth.cancel()
+ global.viewer.removeLayer(pathLayer)
+ global.viewer.removeLayer(pointLayer)
+ // console.log("关闭", "see1");
+ }
+}
</script>
-<style></style>
+<style lang="scss" scope>
+.welcome-container {
+ padding: 10px;
+ position: fixed;
+ top: 132px;
+ left: 132px;
+ width: 480px;
+ height: 720px;
+ background: rgba(40, 187, 240, 0.7);
+ border-radius: 10px;
+ color: #fff;
+ border: 1px solid #29baf1;
+ box-shadow: 0 0 10px 2px #29baf1;
+
+ .header {
+ margin-bottom: 10px;
+ height: 36px;
+ line-height: 36px;
+ text-align: center;
+ position: relative;
+ background: #29baf1;
+
+ .title {
+ .panorama-control {
+ position: absolute;
+ top: 0;
+ right: 56px;
+ bottom: 0;
+ left: auto;
+ margin: auto;
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+ }
+
+ .audio-control {
+ position: absolute;
+ top: 0;
+ right: 32px;
+ bottom: 0;
+ left: auto;
+ margin: auto;
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+ }
+
+ .close-box {
+ position: absolute;
+ top: 0;
+ right: 8px;
+ bottom: 0;
+ left: auto;
+ margin: auto;
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+ }
+ }
+ }
+
+ .content-box {
+ padding: 0 16px;
+ height: calc(100% - 36px);
+
+ & > div {
+ margin-bottom: 10px;
+ }
+
+ & > div:last-child {
+ margin-bottom: 0px;
+ }
+
+ .text-introduce {
+ height: calc(100% - 458px);
+
+ .title {
+ position: relative;
+ padding-left: 24px;
+ height: 36px;
+ line-height: 36px;
+
+ &::before {
+ position: absolute;
+ top: 12px;
+ left: 0;
+ width: 0;
+ height: 6px;
+ border: 6px solid #fff;
+ box-sizing: border-box;
+ box-shadow: 0px 0px 4px 1px #fff;
+ border-radius: 50%;
+ content: '';
+ }
+ }
+
+ .content {
+ height: calc(100% - 36px);
+
+ p {
+ height: 100%;
+ text-indent: 2em;
+ font-size: 16px;
+ letter-spacing: 2px;
+ line-height: 24px;
+ overflow-y: auto;
+ }
+ }
+ }
+
+ .organizer,
+ .undertake,
+ .time-box {
+ padding-left: 24px;
+ position: relative;
+
+ height: 36px;
+ line-height: 36px;
+
+ &::before {
+ position: absolute;
+ top: 12px;
+ left: 0px;
+ width: 0;
+ height: 6px;
+ border: 6px solid #fff;
+ box-sizing: border-box;
+ box-shadow: 0px 0px 4px 1px #fff;
+ border-radius: 50%;
+ content: '';
+ }
+ }
+
+ .panorama-box {
+ padding: 10px;
+ margin: auto !important;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 10;
+ width: 560px;
+ height: 406px;
+ background: rgba(40, 187, 240, 0.7);
+ border-radius: 10px;
+ color: #fff;
+ border: 1px solid #29baf1;
+ box-shadow: 0 0 10px 2px #29baf1;
+
+ .title {
+ margin-bottom: 10px;
+ height: 36px;
+ line-height: 36px;
+ text-align: center;
+ position: relative;
+ background: #29baf1;
+
+ .panorama-control {
+ position: absolute;
+ top: 0;
+ right: 56px;
+ bottom: 0;
+ left: auto;
+ margin: auto;
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+ }
+
+ .audio-control {
+ position: absolute;
+ top: 0;
+ right: 32px;
+ bottom: 0;
+ left: auto;
+ margin: auto;
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+ }
+
+ .close-box {
+ position: absolute;
+ top: 0;
+ right: 8px;
+ bottom: 0;
+ left: auto;
+ margin: auto;
+ width: 16px;
+ height: 16px;
+ cursor: pointer;
+ }
+ }
+
+ .content {
+ padding: 0 10px;
+ height: calc(100% - 46px);
+
+ .iframe {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+
+ .img-exhibition {
+ height: 300px;
+
+ .content {
+ .el-image {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ // width: 100%;
+ height: 100%;
+
+ img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+ }
+ }
+}
+</style>
diff --git a/src/pcviews/specialmap/welcome.vue b/src/pcviews/specialmap/welcome.vue
index 72995a9..3834019 100644
--- a/src/pcviews/specialmap/welcome.vue
+++ b/src/pcviews/specialmap/welcome.vue
@@ -136,7 +136,7 @@
},
methods: {
getData () {
- getWelcome({ hdname: '校区迎新' }).then((res) => {
+ getWelcome({ hdname: this.$route.query.name }).then((res) => {
var result = res.data.data
this.title = result.hdname
this.time = result.time
diff --git a/src/store/getters.js b/src/store/getters.js
index 28da5f1..673170c 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -21,8 +21,8 @@
dimensionData: (state) => state.mobile.dimensionData, // 维度镜头数据
perspectiveControl: (state) => state.mobile.perspectiveControl, /// 视角控制：高度、角度 ()=>{}
audioState: (state) => state.mobile.audioState, // 文字转语音状态
- // areaLayer: (state) => state.mobile.areaLayer, //
- // areaLayerSelect: (state) => state.mobile.select, //
+ // areaLayer: (state) => state.mobile.areaLayer, //
+ // areaLayerSelect: (state) => state.mobile.select, //
isOpenDrawALine: (state) => state.mobile.isOpenDrawALine, // 是否开启路线
isendPosition: (state) => state.mobile.isendPosition, // 路线导航终点数据改变
@@ -61,6 +61,7 @@
...navigation,
...search,
viewerExist: (state) => state.viewer.viewerExist,
+ calenderShow: (state) => state.viewer.calenderShow,
twoOrThree: (state) => state.viewer.twoOrThree,
popupBgUrl: (state) => state.popupParams.popupBgUrl,
pupupQRUrl: (state) => state.popupParams.pupupQRUrl,
@@ -91,4 +92,4 @@
addIconsLayerIconPopup: (state) => state.popupParams.addIconsLayerIconPopup, // 自定义标签编辑窗口
addIconsLayerIconPosition: (state) => state.popupParams.addIconsLayerIconPosition // 自定义标签编辑窗口
}
-export default getters
\ No newline at end of file
+export default getters
diff --git a/src/store/modules/viewer.js b/src/store/modules/viewer.js
index 4e59d2b..f8e2e63 100644
--- a/src/store/modules/viewer.js
+++ b/src/store/modules/viewer.js
@@ -1,6 +1,7 @@
const viewer = {
state: {
viewerExist: false,
+ calenderShow: false,
visitedViews: [],
cachedViews: [],
twoOrThree: '三 维'
@@ -9,6 +10,9 @@
SET_VIEWEREXIST (state, viewerExist) {
state.viewerExist = viewerExist
},
+ SET_CALENDERSHOW (state, calenderShow) {
+ state.calenderShow = calenderShow
+ },
SET_TWOORTHREE (state, twoOrThree) {
state.twoOrThree = twoOrThree
},
diff --git a/src/styles/pcpage/calender.scss b/src/styles/pcpage/calender.scss
new file mode 100644
index 0000000..8bd0478
--- /dev/null
+++ b/src/styles/pcpage/calender.scss
@@ -0,0 +1,62 @@
+.calender-box {
+ .fc-toolbar-chunk {
+ button {
+ background: #2196f3;
+ border-color: #969696;
+ box-shadow: none !important;
+ }
+ }
+
+ .fc .fc-button-primary:disabled {
+ background: #969696;
+ border-color: #969696;
+ }
+
+ .fc .fc-button-primary:hover {
+ background: #116cb2 !important;
+ border-color: #969696 !important;
+ }
+
+ .fc .fc-button-primary:not(:disabled):active,
+ .fc .fc-button-primary:not(:disabled).fc-button-active {
+ background: #116cb2 !important;
+ border-color: #969696 !important;
+ }
+
+ .fc-event-title {
+ text-overflow: ellipsis !important;
+ }
+
+}
+
+
+
+.red-all-day {
+ background: rgb(255, 0, 0);
+ color: white;
+}
+
+.green-all-day {
+ background: rgb(69, 255, 69);
+ color: white;
+}
+
+.yellow-all-day {
+ background: rgb(173, 69, 0);
+ color: white;
+}
+
+.orange-all-day {
+ background: rgb(255, 175, 25);
+ color: white;
+}
+
+.blue-all-day {
+ background: rgb(9, 157, 255);
+ color: white;
+}
+
+.pink-all-day {
+ background: rgb(170, 42, 63);
+ color: white;
+}
\ No newline at end of file
diff --git a/src/styles/pcpage/dc-ui.scss b/src/styles/pcpage/dc-ui.scss
index 2edbdb0..56b2ea2 100644
--- a/src/styles/pcpage/dc-ui.scss
+++ b/src/styles/pcpage/dc-ui.scss
@@ -42,6 +42,10 @@
}
+.layer-entity-animation {
+ animation: moveLayerIcon 1s linear infinite;
+}
+
@keyframes moveLayerIcon {
0% {
transform: translateY(0px);
diff --git a/src/styles/pcpage/index.scss b/src/styles/pcpage/index.scss
index e17093b..4f43e47 100644
--- a/src/styles/pcpage/index.scss
+++ b/src/styles/pcpage/index.scss
@@ -1,4 +1,5 @@
@import './campus-nav.scss';
+@import './calender.scss';
@import './element-ui.scss';
@import './dc-ui.scss';
--
Gitblit v1.9.3