From 61ece754a673dfaa0930f8f3145e4e9e40eb0e6b Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 17 Mar 2022 17:33:32 +0800
Subject: [PATCH] 部分更改
---
babel.config.js | 15
src/components/map/components/dimension.vue | 4
src/components/campusNav/index.vue | 4
package-lock.json | 102 +++++
public/index.html | 54 +-
src/main.js | 4
package.json | 11
src/components/map/index.vue | 426 +++++++++++++++++++++++
src/components/map/components/calender.vue | 260 ++++++++++++++
src/components/map/components/event-utils.js | 19 +
src/components/map/components/calender copy.vue | 165 +++++++++
11 files changed, 1,025 insertions(+), 39 deletions(-)
diff --git a/babel.config.js b/babel.config.js
index e955840..d4b2059 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,14 @@
module.exports = {
- presets: [
- '@vue/cli-plugin-babel/preset'
- ]
+ presets: [
+ '@vue/cli-plugin-babel/preset'
+ ]
+
+ // presets: ['@vue/app', {
+ // useBuiltIns: 'entry'
+ // }]
+
+ // presets: [['@babel/preset-env', {
+ // useBuiltIns: 'entry', // or "usage"
+ // corejs: 3
+ // }]]
}
diff --git a/package-lock.json b/package-lock.json
index eec6ee4..a1b9ee8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1120,6 +1120,103 @@
"resolved": "https://registry.nlark.com/@dvgis/dc-sdk/download/@dvgis/dc-sdk-2.5.0.tgz",
"integrity": "sha1-rUyY9+p1GUiPr0xA8TFenQnIsIk="
},
+ "@fullcalendar/common": {
+ "version": "5.10.1",
+ "resolved": "https://registry.npmjs.org/@fullcalendar/common/-/common-5.10.1.tgz",
+ "integrity": "sha512-EumKIJcQTvQdTs75/9dmeREFgjcRVWzqHJS1Xvlz5mNsmB+w9EINCHETRjChtAQg1WD/lTQyVj4sHsKO7vCMSw==",
+ "requires": {
+ "tslib": "^2.1.0"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+ "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+ }
+ }
+ },
+ "@fullcalendar/core": {
+ "version": "5.10.1",
+ "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-5.10.1.tgz",
+ "integrity": "sha512-8sVuC6ywXV+cxqsqTZaR1hgUqeyjVed20NyZ7lGW9AY0kma1GIEwLgqPS5Q6uVhHyin68lmgecKfJCwhxENE8w==",
+ "requires": {
+ "@fullcalendar/common": "~5.10.1",
+ "preact": "^10.0.5",
+ "tslib": "^2.1.0"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+ "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+ }
+ }
+ },
+ "@fullcalendar/daygrid": {
+ "version": "5.10.1",
+ "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-5.10.1.tgz",
+ "integrity": "sha512-sfUMP+rew0krsBffgNcWWKhBCiyytGfRKZJoc64E8ohX7VWjPcPZuB1xgO5U4wPLmNkT0rZiHoGeQGTXw1+ZKg==",
+ "requires": {
+ "@fullcalendar/common": "~5.10.1",
+ "tslib": "^2.1.0"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+ "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+ }
+ }
+ },
+ "@fullcalendar/interaction": {
+ "version": "5.10.1",
+ "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-5.10.1.tgz",
+ "integrity": "sha512-H1g1QeXg7yXtUcKmVtfg7uzm5R5ElFTvYniiXU+8kJda69IDg7Lee+Y7UDv5dvLb5/HxO86RhPVxRtcOQ8XdXw==",
+ "requires": {
+ "@fullcalendar/common": "~5.10.1",
+ "tslib": "^2.1.0"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+ "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+ }
+ }
+ },
+ "@fullcalendar/timegrid": {
+ "version": "5.10.1",
+ "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-5.10.1.tgz",
+ "integrity": "sha512-0O0m+JzFBlg8gxYr/rIjZViRlbndCtjZlDjjIylQHFBeWC32e3cpHEavKGbTIBLN8SDilUYAJnE21abSqC2G/w==",
+ "requires": {
+ "@fullcalendar/common": "~5.10.1",
+ "@fullcalendar/daygrid": "~5.10.1",
+ "tslib": "^2.1.0"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+ "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+ }
+ }
+ },
+ "@fullcalendar/vue": {
+ "version": "5.10.1",
+ "resolved": "https://registry.npmjs.org/@fullcalendar/vue/-/vue-5.10.1.tgz",
+ "integrity": "sha512-fzWa76ztn4w6pWUHDGQnedrWeHaBUQ3uTuGT3nM7jr3NOKdufAfzh8y4UHRFN2P2pIWpcEV3wji6DZcHmqhyYw==",
+ "requires": {
+ "@fullcalendar/core": "~5.10.1",
+ "tslib": "^2.1.0"
+ },
+ "dependencies": {
+ "tslib": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+ "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+ }
+ }
+ },
"@gar/promisify": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz",
@@ -10097,6 +10194,11 @@
"integrity": "sha1-RD9qIM7WSBor2k+oUypuVdeJoss=",
"dev": true
},
+ "preact": {
+ "version": "10.6.6",
+ "resolved": "https://registry.npmjs.org/preact/-/preact-10.6.6.tgz",
+ "integrity": "sha512-dgxpTFV2vs4vizwKohYKkk7g7rmp1wOOcfd4Tz3IB3Wi+ivZzsn/SpeKJhRENSE+n8sUfsAl4S3HiCVT923ABw=="
+ },
"prelude-ls": {
"version": "1.1.2",
"resolved": "https://registry.nlark.com/prelude-ls/download/prelude-ls-1.1.2.tgz",
diff --git a/package.json b/package.json
index 24cdd2a..9043760 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,11 @@
"dependencies": {
"@amap/amap-vue": "^1.4.0",
"@dvgis/dc-sdk": "^2.5.0",
+ "@fullcalendar/core": "^5.10.1",
+ "@fullcalendar/daygrid": "^5.10.1",
+ "@fullcalendar/interaction": "^5.10.1",
+ "@fullcalendar/timegrid": "^5.10.1",
+ "@fullcalendar/vue": "^5.10.1",
"axios": "^0.22.0",
"core-js": "^3.6.5",
"echarts": "^5.2.1",
@@ -29,6 +34,7 @@
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
+ "compression-webpack-plugin": "^5.0.1",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
@@ -38,8 +44,7 @@
"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",
"script-loader": "^0.7.2",
- "vue-template-compiler": "^2.6.11",
- "compression-webpack-plugin": "^5.0.1"
+ "vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
@@ -63,6 +68,6 @@
"browserslist": [
"> 1%",
"last 2 versions",
- "not dead"
+ "not ie <= 10"
]
}
diff --git a/public/index.html b/public/index.html
index dc5f88b..f6947a3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,37 +2,37 @@
<html lang="">
<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
- <link rel="icon" href="<%= BASE_URL %>favicon.ico">
- <title>智慧校区大数据三维可视化平台</title>
- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
- <!-- 高德定位 -->
- <!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=9c4b1a0ce88821775605e726073c52b5"> -->
- </script>
- <!-- ip -->
- <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
- <!-- 语音播放 -->
- <!-- <script src="http://cdn.javanx.cn/wp-content/themes/lensnews2.2/js/jquery.min.js?ver=3.1.1"></script> -->
- <!-- 高德地图路线规划 -->
- <!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=4b3e1db3211054ce5b466407cbb9d221"></script> -->
- <script type="text/javascript">
- window._AMapSecurityConfig = {
- securityJsCode: "92f88e76912e27c49f501f542a794a26",
- }
- </script>
- <!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e664359e1c66f0f26476ac1c0884edad">
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <title>智慧校区大数据三维可视化平台</title>
+ <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+ <!-- 高德定位 -->
+ <!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=9c4b1a0ce88821775605e726073c52b5">
+ </script> -->
+ <!-- ip -->
+ <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
+ <!-- 语音播放 -->
+ <!-- <script src="http://cdn.javanx.cn/wp-content/themes/lensnews2.2/js/jquery.min.js?ver=3.1.1"></script> -->
+ <!-- 高德地图路线规划 -->
+ <!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=4b3e1db3211054ce5b466407cbb9d221"></script> -->
+ <script type="text/javascript">
+ window._AMapSecurityConfig = {
+ securityJsCode: "92f88e76912e27c49f501f542a794a26",
+ }
+ </script>
+ <!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e664359e1c66f0f26476ac1c0884edad">
</script> -->
</head>
<body>
- <noscript>
- <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
- Please enable it to continue.</strong>
- </noscript>
- <div id="app"></div>
- <!-- built files will be auto injected -->
+ <noscript>
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+ Please enable it to continue.</strong>
+ </noscript>
+ <div id="app"></div>
+ <!-- built files will be auto injected -->
</body>
</html>
\ No newline at end of file
diff --git a/src/components/campusNav/index.vue b/src/components/campusNav/index.vue
index f694b78..d53c866 100644
--- a/src/components/campusNav/index.vue
+++ b/src/components/campusNav/index.vue
@@ -429,7 +429,7 @@
polyline.setStyle({
width: 3,
material: new global.DC.PolylineTrailMaterialProperty({
- color: global.DC.Color.RED,
+ color: global.DC.Color.GREEN,
speed: 10
}),
clampToGround: true
@@ -513,7 +513,7 @@
polyline.setStyle({
width: 3,
material: new global.DC.PolylineTrailMaterialProperty({
- color: global.DC.Color.RED,
+ color: global.DC.Color.GREEN,
speed: 10
}),
clampToGround: true
diff --git a/src/components/map/components/calender copy.vue b/src/components/map/components/calender copy.vue
new file mode 100644
index 0000000..efca26b
--- /dev/null
+++ b/src/components/map/components/calender copy.vue
@@ -0,0 +1,165 @@
+
+<template>
+ <div class="demo-app">
+ <div class="demo-app-sidebar">
+ <div class="demo-app-sidebar-section">
+ <h2>说明</h2>
+ <ul>
+ <li>选择日期后，系统会提示您创建一个新事件</li>
+ <li>拖放和调整事件大小</li>
+ <li>单击某个事件，可以删除该事件</li>
+ </ul>
+ </div>
+ <div class="demo-app-sidebar-section">
+ <label>
+ <input
+ type="checkbox"
+ :checked="calendarOptions.weekends"
+ @change="handleWeekendsToggle"
+ />
+ 切换周末
+ </label>
+ </div>
+ <div class="demo-app-sidebar-section">
+ <h2>All Events ({{ currentEvents.length }})</h2>
+ <ul>
+ <li v-for="event in currentEvents" :key="event.id">
+ <b>{{ event.startStr }}</b>
+ <i>{{ event.title }}</i>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div class="demo-app-main">
+ <FullCalendar class="demo-app-calendar" :options="calendarOptions">
+ <template v-slot:eventContent="arg">
+ <b>{{ arg.timeText }}</b>
+ <i>{{ arg.event.title }}</i>
+ </template>
+ </FullCalendar>
+ </div>
+ </div>
+</template>
+
+<script>
+import FullCalendar from '@fullcalendar/vue'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import { INITIAL_EVENTS, createEventId } from './event-utils'
+export default {
+ components: {
+ FullCalendar // make the <FullCalendar> tag available
+ },
+ data: function () {
+ return {
+ calendarOptions: {
+ plugins: [
+ dayGridPlugin,
+ timeGridPlugin,
+ interactionPlugin // needed for dateClick
+ ],
+ headerToolbar: {
+ left: 'prev,next today',
+ center: 'title',
+ right: 'dayGridMonth,timeGridWeek,timeGridDay'
+ },
+ initialView: 'dayGridMonth',
+ initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
+ editable: true,
+ selectable: true,
+ selectMirror: true,
+ dayMaxEvents: true,
+ weekends: true,
+ select: this.handleDateSelect,
+ eventClick: this.handleEventClick,
+ eventsSet: this.handleEvents
+ /* you can update a remote database when these fire:
+ eventAdd:
+ eventChange:
+ eventRemove:
+ */
+ },
+ currentEvents: []
+ }
+ },
+ methods: {
+ handleWeekendsToggle () {
+ this.calendarOptions.weekends = !this.calendarOptions.weekends // update a property
+ },
+ handleDateSelect (selectInfo) {
+ const title = prompt('Please enter a new title for your event')
+ const calendarApi = selectInfo.view.calendar
+ calendarApi.unselect() // clear date selection
+ if (title) {
+ calendarApi.addEvent({
+ id: createEventId(),
+ title,
+ start: selectInfo.startStr,
+ end: selectInfo.endStr,
+ allDay: selectInfo.allDay
+ })
+ }
+ },
+ handleEventClick (clickInfo) {
+ if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
+ clickInfo.event.remove()
+ }
+ },
+ handleEvents (events) {
+ this.currentEvents = events
+ }
+ }
+}
+</script>
+
+<style lang='scss'>
+h2 {
+ margin: 0;
+ font-size: 16px;
+}
+ul {
+ margin: 0;
+ padding: 0 0 0 1.5em;
+}
+li {
+ margin: 1.5em 0;
+ padding: 0;
+}
+b {
+ /* used for event dates/times */
+ margin-right: 3px;
+}
+.demo-app {
+ position: fixed;
+ top: 60px;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 999;
+ width: 100%;
+ height: 80%;
+ display: flex;
+ font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
+ font-size: 14px;
+ background: #fff;
+}
+.demo-app-sidebar {
+ width: 300px;
+ line-height: 1.5;
+ background: #eaf9ff;
+ border-right: 1px solid #d3e2e8;
+}
+.demo-app-sidebar-section {
+ padding: 2em;
+}
+.demo-app-main {
+ flex-grow: 1;
+ padding: 3em;
+}
+.fc {
+ /* the calendar root */
+ max-width: 1100px;
+ margin: 0 auto;
+}
+</style>
diff --git a/src/components/map/components/calender.vue b/src/components/map/components/calender.vue
new file mode 100644
index 0000000..763b66d
--- /dev/null
+++ b/src/components/map/components/calender.vue
@@ -0,0 +1,260 @@
+<template>
+ <div class="calender-box">
+ <div class="header">活动</div>
+ <div class="content">
+ <full-calendar ref="fullCalendar" style="height: 100%" :options="calendarOptions"></full-calendar>
+ </div>
+ </div>
+</template>
+
+<script>
+
+import FullCalendar from '@fullcalendar/vue'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import timeGridPlugin from '@fullcalendar/timegrid'
+// import '@fullcalendar/core/main.css'
+import '@fullcalendar/daygrid/main.css'
+
+export default {
+ name: 'calender',
+ components: {
+ FullCalendar
+ },
+ data () {
+ return {
+ calendarOptions: {
+ // timeGridPlugin 可显示每日时间段
+ height: 600,
+ plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin], // 引用的插件
+ // 日历头部按钮位置
+ headerToolbar: {
+ left: 'prev,next today',
+ center: 'title',
+ right: 'dayGridMonth,timeGridWeek,timeGridDay'
+ // right: 'dayGridMonth,dayGridWeek,dayGrid'
+ // right: 'agendaWeek,dayGridWeek,dayGrid'
+ },
+ // 日历头部按钮位置
+ buttonText: {
+ // 设置按钮
+ today: '今天',
+ month: '月',
+ week: '周',
+ day: '天'
+ },
+ initialView: 'dayGridMonth', // 设置默认显示月，可选周、日
+ locale: 'zh-cn', // 设置语言
+ firstDay: '1', // 设置一周中显示的第一天是周几，周日是0，周一是1，以此类推
+ weekNumberCalculation: 'ISO', // 与firstDay配套使用
+ eventColor: '#2196f3', // 修改日程背景色
+ timeGridEventMinHeight: '20', // 设置事件的最小高度
+ aspectRatio: '1.5', // 设置日历单元格宽高比
+ displayEventTime: true, // 是否显示事件时间
+ allDaySlot: false, // 周、日视图时，all-day不显示
+ eventLimit: true, // 设置月日程，与all-day slot 的最大显示数量，超过的通过弹窗展示
+ eventTimeFormat: {
+ hour: 'numeric',
+ minute: '2-digit',
+ hour12: false
+ },
+ slotLabelFormat: {
+ hour: '2-digit',
+ minute: '2-digit',
+ 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'
+ }
+ ], // 日程数组
+ // 事件
+ editable: true, // 是否可以进行（拖动、缩放）修改
+ eventStartEditable: true, // Event日程开始时间可以改变，默认为true，若为false,则表示开始结束时间范围不能拉伸，只能拖拽
+ eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认为true,若为false，则表示开始结束时间范围不能拉伸，只能拖拽
+ selectable: true, // 是否可以选中日历格
+ selectMirror: true,
+ selectMinDistance: 0, // 选中日历格的最小距离
+ weekends: true,
+ navLinks: true, // 天链接
+ selectHelper: false,
+ selectEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认为true，允许
+ dayMaxEvents: true,
+ dateClick: this.handleDateClick, // 日期点击
+ eventsSet: this.handleEvents, // 事件点击
+ eventClick: this.handleEventClick, // 日程点击信息展示
+ eventDrop: this.handleEventDrop, // 日程拖动事件
+ eventResize: this.eventResize, // 日程缩放事件
+ select: this.handleDateSelect,
+ customButtons: {
+ prev: { // this overrides the prev button
+ text: 'PREV',
+ click: () => {
+ this.prev()
+ }
+ },
+ next: { // this overrides the next button
+ text: 'PREV',
+ click: () => {
+ this.next()
+ }
+ },
+ today: {
+ text: '今天',
+ click: () => {
+ this.today()
+ }
+ }
+ }
+ }
+ }
+ },
+
+ mounted () {
+ this.calendarApi = this.$refs.fullCalendar.getApi()
+ },
+
+ methods: {
+ prev () {
+ this.calendarApi.prev()
+ },
+ // 切换下一个按钮事件
+ next () {
+ this.calendarApi.next()
+ },
+ // 点击今天按钮
+ today () {
+ this.calendarApi.today()
+ },
+ // 日程保存
+ saveEvent (val) {
+ const eventsArr = this.calendarOptions.events
+ try {
+ if (eventsArr.length === 0) {
+ eventsArr.push(val)
+ } else {
+ eventsArr.forEach((item, index, eventsArr) => {
+ // 若为修改日程
+ if (item.eventID === val.eventID) {
+ throw new Error(index)
+ }
+ })
+ // 若为新增日程
+ eventsArr.push(val)
+ }
+ } catch (e) {
+ // 若为修改日程
+ eventsArr.splice(e.message, 1, val)
+ }
+ },
+ // 日程删除
+ deleteEvent (val) {
+ const eventsArr = this.calendarOptions.events
+ try {
+ eventsArr.forEach((item, index, eventsArr) => {
+ if (item.eventID === val) {
+ throw new Error(index)
+ }
+ })
+ } catch (e) {
+ // 删除指定日程
+ eventsArr.splice(parseInt(e.message), 1)
+ }
+ },
+ // 日程事件点击
+ handleEvents (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
+ }
+ },
+ // 日程点击信息展示
+ handleEventClick (info) {
+ console.log('handleEventClick.info:', info)
+ info.el.style.borderColor = 'red'
+ this.$refs.eventDialogue.openDialog('view', info)
+ },
+ // 日程事件触发
+ eventClick (info) {
+ console.log('eventClick.info:', info)
+ info.el.style.borderColor = 'red'
+ },
+ // 日程拖动事件
+ handleEventDrop (info) {
+ 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
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.calender-box {
+ position: absolute;
+ z-index: 99;
+ background: #fff;
+ width: 960px;
+ height: 660px;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+
+ .header {
+ padding: 0 10px;
+ line-height: 40px;
+ background: #2196f3;
+ color: #fff;
+ font-size: 18px;
+ }
+
+ .content {
+ margin-top: 10px;
+ padding: 0 10px 10px 10px;
+ height: calc(100% - 50px);
+ }
+}
+.read-all-day {
+ background: red;
+ color: green;
+}
+</style>
diff --git a/src/components/map/components/dimension.vue b/src/components/map/components/dimension.vue
index 278c2b3..93556d6 100644
--- a/src/components/map/components/dimension.vue
+++ b/src/components/map/components/dimension.vue
@@ -856,10 +856,10 @@
global.viewer.on(global.DC.SceneEventType.CAMERA_CHANGED, that.mapCameraEvent)
tileset.off(global.DC.MouseEventType.CLICK, that.tilesetClick)
tilesetLayer.removeOverlay(tileset)
- global.viewer.remove(tilesetLayer)
+ tilesetLayer.show = false
+ global.viewer.removeLayer(tilesetLayer)
tileset = null
tilesetLayer = null
- tilesetLayer.show = false
that.createdLayers()
baseMapLayer = global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
diff --git a/src/components/map/components/event-utils.js b/src/components/map/components/event-utils.js
new file mode 100644
index 0000000..51a0722
--- /dev/null
+++ b/src/components/map/components/event-utils.js
@@ -0,0 +1,19 @@
+let eventGuid = 0
+const todayStr = new Date().toISOString().replace(/T.*$/, '') // YYYY-MM-DD of today
+
+export const INITIAL_EVENTS = [
+ {
+ id: createEventId(),
+ title: 'All-day event',
+ start: todayStr
+ },
+ {
+ id: createEventId(),
+ title: 'Timed event',
+ start: todayStr + 'T12:00:00'
+ }
+]
+
+export function createEventId () {
+ return String(eventGuid++)
+}
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 77fa98f..891ef09 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -31,6 +31,8 @@
<dimension />
+ <!-- <calender /> -->
+
<left-nav ref="leftNav"></left-nav>
<mapPopup />
@@ -56,6 +58,7 @@
import mapPopup from './components/mapPopup.vue'
import campusBuildingSearch from './components/campusBuildingSearch.vue'
import dimension from './components/dimension.vue'
+import calender from './components/calender.vue'
export default {
name: 'mapBox',
@@ -63,6 +66,7 @@
mapPopup,
campusBuildingSearch,
dimension
+ // calender
},
data () {
return {
@@ -224,7 +228,24 @@
preserveDrawingBuffer: true
}
}
+ }).setOptions({
+ // showAtmosphere: false, 大气层
+ showMoon: true, // 月亮
+ showSun: true, // 太阳
+ skyBox: {
+ show: true
+ }
})
+
+ const chartLayer = new global.DC.ChartLayer('busLayer').addTo(global.viewer)
+
+ chartLayer.setOption(that.busPathsInit())
+
+ // global.viewer.scene.backgroundColor = global.DC.Namespace.Cesium.Color.fromBytes(245, 244, 238)
+
+ global.viewer.use(new global.DC.Weather())
+ global.viewer.weather.cloud.enable = true
+ global.viewer.weather.cloud.rotateAmount = 0.02
that.$store.commit('SET_VIEWEREXIST', true)
@@ -531,6 +552,411 @@
mapClick (e) {
this.$refs.campusNavRoute.shortcutShow(e)
this.$refs.campusBuildingSearch.shortcutShow(e)
+ },
+ busPathsInit (e) {
+ var chinaGeoCoordMap = {
+ 黑龙江: [127.9688, 45.368],
+ 内蒙古: [110.3467, 41.4899],
+ 吉林: [125.8154, 44.2584],
+ 南昌市: [115.8716, 28.7436],
+ 北京市: [116.4551, 40.2539],
+ 辽宁: [123.1238, 42.1216],
+ 河北: [114.4995, 38.1006],
+ 天津: [117.4219, 39.4189],
+ 山西: [112.3352, 37.9413],
+ 陕西: [109.1162, 34.2004],
+ 甘肃: [103.5901, 36.3043],
+ 宁夏: [106.3586, 38.1775],
+ 青海: [101.4038, 36.8207],
+ 新疆: [87.9236, 43.5883],
+ 西藏: [91.11, 29.97],
+ 四川: [103.9526, 30.7617],
+ 重庆: [108.384366, 30.439702],
+ 山东: [117.1582, 36.8701],
+ 河南: [113.4668, 34.6234],
+ 江苏: [118.8062, 31.9208],
+ 安徽: [117.29, 32.0581],
+ 湖北: [114.3896, 30.6628],
+ 浙江: [119.5313, 29.8773],
+ 福建: [119.4543, 25.9222],
+ 江西: [116.0046, 28.6633],
+ 湖南: [113.0823, 28.2568],
+ 贵州: [106.6992, 26.7682],
+ 云南: [102.9199, 25.4663],
+ 广东: [113.12244, 23.009505],
+ 广西: [108.479, 23.1152],
+ 海南: [110.3893, 19.8516],
+ 上海: [121.4648, 31.2891]
+ }
+ var chinaDatas = [
+ [
+ {
+ name: '黑龙江',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '内蒙古',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '吉林',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '辽宁',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '河北',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '天津',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '山西',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '陕西',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '甘肃',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '宁夏',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '青海',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '新疆',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '西藏',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '四川',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '重庆',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '山东',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '河南',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '江苏',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '安徽',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '湖北',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '浙江',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '福建',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '江西',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '湖南',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '贵州',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '广西',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ],
+ [
+ {
+ name: '海南',
+ value: 0,
+ price: 100,
+ num: 2
+ }
+ ]
+ ]
+ var convertData = function (data) {
+ var res = []
+ for (var i = 0; i < data.length; i++) {
+ var dataItem = data[i]
+ // console.log('dataItem',dataItem) //第二个数据
+ var fromCoord = [115.8716, 28.7436]
+ var toCoord = chinaGeoCoordMap[dataItem[0].name]
+ // console.log('toCoord',toCoord);//第一个地址
+ if (fromCoord && toCoord) {
+ res.push([
+ {
+ coord: fromCoord,
+ value: dataItem[0].value
+ },
+ {
+ coord: toCoord,
+ dataItem: dataItem
+ }
+ ])
+ }
+ }
+ return res
+ }
+ var series = []
+ ;[['南昌市', chinaDatas]].forEach(function (item, i) {
+ series.push(
+ {
+ type: 'lines',
+ coordinateSystem: 'GLMap',
+ zlevel: 2,
+ effect: {
+ show: true,
+ period: 4, // 箭头指向速度，值越小速度越快
+ trailLength: 0.1, // 特效尾迹长度[0,1]值越大，尾迹越长重
+ symbol: 'circle', // 箭头图标
+ symbolSize: 6, // 图标大小
+ color: '#fff'
+ },
+ lineStyle: {
+ normal: {
+ width: 2, // 尾迹线条宽度
+ opacity: 0.5, // 尾迹线条透明度
+ curveness: 0.4, // 尾迹线条曲直度
+ color: function (params) {
+ return '#01a901'
+ }
+ },
+ color: 'green'
+ },
+ data: convertData(item[1])
+ },
+ {
+ type: 'effectScatter',
+ coordinateSystem: 'GLMap',
+ zlevel: 2,
+ rippleEffect: {
+ // 涟漪特效
+ period: 4, // 动画时间，值越小速度越快
+ brushType: 'fill', // 波纹绘制方式 stroke, fill
+ scale: 2.2 // 波纹圆环最大限制，值越大波纹越大
+ },
+
+ // 括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
+ // symbol: 'none',
+ symbol: 'circle',
+ symbolSize: function (val) {
+ return 5 // 圆环大小
+ },
+ itemStyle: {
+ normal: {
+ show: false,
+ // color: '#f00'
+ color: function (params) {
+ // 圆环显示文字
+ // console.log('redName',redName)
+
+ return '#ffa022'
+ },
+ borderWidth: 0,
+ shadowColor: '#b5e8fa', // 发光🉐效果
+ shadowBlur: 4
+ }
+ },
+ tooltip: {
+ // show:false,
+ trigger: 'item',
+ backgroundColor: 'rgba(8, 18, 42, 0.85)',
+ borderColor: '#040616',
+ showDelay: 0,
+ hideDelay: 0,
+ enterable: true,
+ transitionDuration: 0,
+ extraCssText: 'z-index:100',
+ formatter: function (params, ticket, callback) {
+ // 根据业务自己拓展要显示的内容
+ // console.log('params--2',params)
+ let res = ''
+ const name = params.data.dataItem[0].name
+ const price = params.data.dataItem[0].price
+ const num = params.data.dataItem[0].num
+ res =
+ "<div style='color:#fff;padding:10px;'><span>南昌->" +
+ name +
+ '</span><br/><span>均价：' +
+ price +
+ '</span><br/><span>线路数：' +
+ num +
+ '</span></div>'
+ return res
+ }
+ },
+ data: item[1].map(function (dataItem) {
+ // console.log('dataItem',dataItem[0]);
+ return {
+ dataItem: dataItem,
+ name: dataItem[0].name,
+ value: chinaGeoCoordMap[dataItem[0].name].concat([
+ dataItem[0].value
+ ])
+ }
+ })
+ },
+ // 被攻击点
+ {
+ type: 'scatter',
+ coordinateSystem: 'geo',
+ zlevel: 1,
+ rippleEffect: {
+ period: 4,
+ brushType: 'stroke',
+ scale: 4
+ },
+
+ symbol: 'circle',
+ color: 'rgba(128, 220, 251, .6)',
+ symbolSize: 20,
+ data: [
+ {
+ name: item[0],
+ value: chinaGeoCoordMap[item[0]].concat([10])
+ }
+ ]
+ }
+ )
+ })
+
+ return {
+ animation: false,
+ GLMap: {},
+ series: series
+ }
}
}
}
diff --git a/src/main.js b/src/main.js
index 664febd..e7c0257 100644
--- a/src/main.js
+++ b/src/main.js
@@ -26,7 +26,7 @@
import DC from '@dvgis/dc-sdk/dist/dc.base.min' // 基础包
import DcCore from '@dvgis/dc-sdk/dist/dc.core.min' // 核心包
-// import DcChart from '@dvgis/dc-sdk/dist/dc.chart.min' // chart包
+import DcChart from '@dvgis/dc-sdk/dist/dc.chart.min' // chart包
// import DcMapv from '@dvgis/dc-sdk/dist/dc.mapv.min' // mapv包
import '@dvgis/dc-sdk/dist/dc.core.min.css'
@@ -60,7 +60,7 @@
DC.use(DcCore) // 安装DC核心库
-// DC.use(DcChart) // 安装DC图标库，使用前确保echarts为全局函数
+DC.use(DcChart) // 安装DC图标库，使用前确保echarts为全局函数
// DC.use(DcMapv) // 安装Mapv库
Vue.use(ElementUI)
--
Gitblit v1.9.3