部分更改

shuishen

2022-03-17 61ece754a673dfaa0930f8f3145e4e9e40eb0e6b

部分更改

 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
    // }]]
}

 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",

 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"
    ]
}

 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>

 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

 src/components/map/components/calender copy.vue

New file
@@ -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>

 src/components/map/components/calender.vue

New file
@@ -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>

 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({

 src/components/map/components/event-utils.js

New file
@@ -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++)
}

 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
            }
        }
    }
}

 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)