Один, описание проекта

• Фронтенд разработан с использованием vue + DataV + echarts.
• Архитектура серверной части построена на spring boot + xxl-jod для обработки периодических задач. В качестве базы данных используется mysql.
• Интегрированы четыре типа больших экранов данных, перестроена главная страница, через которую можно выбирать различные типы больших экранов данных для просмотра.
• Проект требует полноэкранного отображения (нажмите F11).
• Часть проекта использует глобальную регистрацию, что увеличивает размер пакета. При практическом использовании рекомендуется использовать импорт по требованию.
• Среда проекта: vue-cli-3.0, webpack-4.0, npm-6.13, node-v12.16, java-1.8.
• Для дальнейшей модернизации проекта необходимо иметь некоторые базовые знания о vue, такие как компоненты, маршрутизация и базовый синтаксис.
• Демонстрационный адрес: http://www.pwriter.top:8082/ бэкенд не запущен.

Ссылки для ознакомления:

1. Официальная документация DataV (рекомендуется просмотреть перед использованием).
2. Примеры echarts, официальная документация echarts — характеристики.
3. Официальная документация Vue.
4. Официальный сайт xxl-job.

Два, структура проекта

Описание структуры

Три, использование

1. Как запустить фронтенд-проект

   • Необходимо заранее установить nodejs и npm, после загрузки проекта запустить npm/cnpm install в главном каталоге проекта для загрузки зависимостей, затем использовать vue-cli или напрямую использовать команду npm run serve, чтобы запустить проект. После запуска проекта необходимо вручную перейти в полноэкранный режим (нажать F11).

2. Как запустить бэкенд-проект

   • Бэкенд-проект использует xxl-job для выполнения периодических задач, конечно, вы также можете использовать встроенный планировщик spring boot, такой как аннотация @Scheduled. Необходимо изменить адрес службы xxl-job в файле конфигурации ниже.

   

   • Проект интегрирует исходный код xxl-job, сначала запустите xxl-job-admin, обратите внимание, что вам нужно локально установить xxl-job-core с помощью maven. Подробные инструкции по использованию xxl-job см. на официальном сайте автора.

3. Как динамически отображать графики

   • В файле components/echart, например, функция drawPie() является функцией рендеринга, а echartData — это данные, которые необходимо динамически визуализировать. Когда внешние данные передаются через props, мы можем использовать метод watch() для отслеживания изменений. Как только данные изменятся, вызовите this.drawPie(), чтобы вызвать внутреннюю функцию .setOption, и повторно визуализируйте график.

// Здесь находится дочерний компонент

props: ["listData"],
watch: {
  listData(newValue) {
     this.echartData= newValue;
     this.drawPie();
   },
  },
methods: {
  drawPie() {
    .....
    'Имя узла для рендеринга'.setOption(option);
  }
 }

4. Конфигурация CORS
   • Обычно серверы фронтенда и бэкенда находятся на разных адресах. При вызове бэкенд-интерфейса из фронтенда возникает проблема CORS. Конфигурация CORS находится в store/vue-store.js, где подробно описаны параметры конфигурации. Если требуется дополнительная конфигурация, обратитесь к информации о маршрутизации на официальном сайте Vue.

export default new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    modules: {},
    dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        // Адрес прокси-сервера бэкенда, настройка после testIp, последующие страницы будут указывать на http://127.0.0.1:8085
        proxyTable: {
            '/api': {
                target: 'http://127.0.0.1:8085',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        // Различные настройки сервера разработки
        host: 'localhost', // может быть перезаписан process.env.HOST
        port: 8085, // может быть перезаписано process.env.PORT, если порт занят, будет выбран свободный
        autoOpenBrowser: false,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
        devtool: 'cheap-module-eval-source-map',
    }

})

5. Настройка интерфейса фронтенда

• Чтобы упростить управление вызовами интерфейсов, был извлечён класс конфигурации, как показано на рисунке ниже.

  

  let resquest = "/api";

Соответствует конфигурации proxyTable в vue-store.js /api, которая будет сопоставлена с путём интерфейса бэкенда.

![Конфигурация CORS](https://images.gitee.com/uploads/images/2020/0702/155645_baa3e1a9_464076.png "Экранный снимок.png")

• На данный момент только один интерфейс связан с бэкендом в epidemic-screen.vue, и его можно расширить в соответствии с вашими потребностями в будущем.

  methods: {
      cancelLoading() {
          setTimeout(() => {
              this.loading = false;
          }, 2000);
      },
  
      // Вызов интерфейса для получения данных
      fetchList() {
          getListAPI().then(res => {

Рамка создаётся с помощью компонентов, которые есть в DataV: 

```html
<dv-border-box-1></dv-border-box-1>
<dv-border-box-2></dv-border-box-2>
...

Нужно найти соответствующие элементы в папке views и заменить их. Более подробную информацию можно получить на официальном сайте DavaV.

Как поменять график

Перейдите в папку components/echart и измените файлы так, чтобы они соответствовали нужному виду графика. Вы можете посмотреть примеры на официальном сайте echarts.