Проектное описание

Стили

• Проект должен отображаться на весь экран (нажмите F11).

• В некоторых частях проекта используется глобальная регистрация, что увеличивает размер сборки. В реальном использовании рекомендуется использовать только по необходимости.

• Проектная среда: Vite, Echarts, pnpm, lodash, countup.js, axios, mock, Vue3, Pinia, Vue-router.

• Пожалуйста, клонируйте код ветки master, остальные ветки используются для разработки.

• В папке public проекта хранятся данные карт, разделенные по городам и районам.

Ссылки:

1. Официальная документация Vue
2. Примеры Echarts, API документация Echarts
3. Официальный сайт mock.js
4. Официальный сайт axios
5. countUp.js

Основные файлы| Файл | Функция/Задача |

| ----------------- | ------------------------------------------------------------ | | main.js | Основной файл, в котором импортируются ECharts/DataV и другие файлы | | utils | Функции для инструментов и миксинов | | views/home.vue | Основная структура проекта | | views/остальные файлы | Компоненты для различных областей интерфейса (названия соответствуют расположению) | | assets | Папка с статическими ресурсами, в которой хранятся логотипы и изображения фона | | assets/css/ | Общие CSS файлы, для быстрого изменения стилей проекта | | components/echart | Все графики ECharts (названия соответствуют расположению) | | common/... | Глобально упакованные ECharts и плагины flexible (для адаптации к размеру экрана, с возможностью кастомизации) | | api/api.js | Файл с упаковкой интерфейсов | | mock | Адреса для макетных данных |###

Инструкция по использованию

Установка

npm install   

Запуск

npm run dev

Отключение макетных данных

// src/main.ts файл
Просто закомментируйте следующие две строки.
import { mockXHR } from "@/mock/index";
mockXHR();

Общие компоненты

Упаковка отдельных компонентов, используемых в проекте, кроме компонентов для работы с тестами.

Компонент адаптивного масштабирования

Внимание

Использует метод Scale, автоматически добавляя overflow:hidden к родительскому элементу компонента.

Использование

<template>
  <scale-screen width="1920" height="1080">
    <div>
      содержимое
    </div>
  </scale-screen>
</template>

<script>
import ScaleScreen from 'scale-screen'

export default {
  name: 'Demo',
  components: {
    VScaleScreen
  }
}
</script>

API| Свойство | Описание | Тип | Значение по умолчанию |

| ---------------- | ------------------------------------------------------------ | -------------------------------- | ---------------------- | | selfAdaption | Включить или выключить адаптивное масштабирование | Boolean | true | | width | Ширина большого экрана | Number или String | 1920 | | height | Высота большого экрана | Number или String | 1080 | | autoScale | Настройки адаптивного масштабирования, если значение boolean, то включение или отключение адаптивного масштабирования, если объект, то если x=true, то отступ по оси x, если y=true, то отступ по оси y, при включении fullScreen настройка autoScale не применяется | Boolean или {x:boolean, y:boolean} | true | | delay | Задержка для предотвращения дребезга при изменении окна | Number | 500 | | fullScreen | Включить полное адаптивное масштабирование, при этом могут возникнуть растяжения, настройка autoScale не применяется, не рекомендуется включать без необходимости | Boolean | false | | boxStyle | Изменение стиля контейнера, например, цвет фона при центрировании, соответствует стандартному формату Vue двунаправленной привязки стиля | Object | null || wrapperStyle | Изменение стиля обертки, соответствует стандартному формату двунаправленной привязки стиля в Vue | Object | null |### Внешний обрамляющий контейнер

Поскольку внешний обрамляющий контейнер в моем проекте почти всегда одинаков, а также содержит заголовок, был создан этот компонент.

Измените его в соответствии с вашими требованиями, заменив внешний обрамляющий контейнер (src/components/item-wrap/item-wrap.vue).

<ItemWrap
    title="Это заголовок"
    >
       <div>Содержимое</div>
</ItemWrap>

CountUp Цифровой счетчик

Следующие параметры совпадают с параметрами конфигурации countup.js (same as countup.js properties)

Параметры

Следующие параметры являются уникальными для компонента (extension properties)| Имя | Тип | Значение по умолчанию | Описание | | :-----: | :--------------: | :--------------------: | :-------------------------: | | autoplay | Boolean | true | Автоматическое воспроизведение | | loop | Boolean | Number | false | Количество повторений, конечное число / бесконечный цикл | | delay | Number | 0 | Интервал между повторениями, в секундах |#### Слоты (slots)

События (events)| Имя | Описание | Возвращаемое значение |

| :-------: | :----------------------: | :-------------------------: | | @init | Инициализация CountUp завершена | CountUp экземпляр | | @finished | Счет завершен | - |#### Описание параметров конфигурации countup.js

interface CountUpOptions {
  startVal? : number // число для начала (0) начальное значение, по умолчанию 0
  decimalPlaces? : number // количество знаков после запятой (0) количество десятичных знаков
  duration? : number // длительность анимации в секундах (2) продолжительность анимации
  useGrouping? : boolean // пример: 1,000 против 1000 (true) использовать разделитель тысяч
  useEasing? : boolean // использовать плавное изменение (true) использовать плавное изменение, по умолчанию используется функция easeOutExpo
  smartEasingThreshold? : number // плавное изменение для больших чисел выше этого порога, если useEasing (999)
  smartEasingAmount? : number // количество плавного изменения для чисел выше порога (333)
  separator? : string // разделитель тысяч (',') разделитель тысяч
  decimal? : string // разделитель десятичных чисел ('.') разделитель десятичных чисел
  // easingFn: функция плавного изменения для анимации (easeOutExpo) функция плавного изменения
  easingFn? : (t: number, b: number, c: number, d: number) => number
  formattingFn? : (n: number) => string // эта функция форматирует результат функция форматирования результата
  prefix? : string // текст, добавляемый перед результатом префикс значения
  suffix? : string // текст, добавляемый после результата суффикс значения
  numerals? : string[] // замена символов чисел 0 - 9, например, заменить на [a, b, c, d, e, f, g, h, i, j]
  enableScrollSpy? : boolean // включить скролл-спай, когда цель находится в пределах видимости, начать анимацию при появлении цели в пределах видимости
  scrollSpyDelay? : number // задержка (мс) после появления цели в пределах видимости
}

```### Капсульные столбчатые диаграммы```#### Пропсы

|  Свойство  |   Описание   |      Тип       |          Возможные значения           | Значение по умолчанию  |
| :---------: | :----------: | :------------: | :------------------------------------: | :---------------------: |
|  data  |  Данные столбцов  | `Array<Object>` |   [Свойство data](#data-свойство)   |  `[]`   |
| config | Базовая конфигурация |     Object      | [Свойство config](#config-свойство) | `false` |

#### Свойство config

|   Свойство    |   Описание   |      Тип       | Возможные значения | Значение по умолчанию  |
| :------------: | :----------: | :------------: | :----------------: | :---------------------: |
|   unit    |   Единица измерения   |    `String`     |  ---   |  `''`   |
|  colors   |  Цвета колец  | `Array<String>` |  [1]   |   [2]   |
| showValue | Отображение значений |    `Boolean`    |  ---   | `false` |

#### Примечания к свойству config

[1] Поддерживаемые цвета: `hex|rgb|rgba|ключевые слова цветов`.

[2] По умолчанию используются цвета: `['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']`.

#### Свойство data

| Свойство  |   Описание   |   Тип   | Возможные значения | Значение по умолчанию |
| :--------: | :----------: | :-----: | :----------------: | :--------------------: |
| name  |  Название столбца  | `String` |  ---   |  ---   |
| value | Значение столбца | `Number` |  ---   |  ---   |

### Бесшовный скроллинг компонента

Просмотрите этот документ и оптимизируйте исходный код

[https://doc.wssio.com/opensource/vue3-seamless-scroll/](https://doc.wssio.com/opensource/vue3-seamless-scroll/)

## Центральная карта

### Управление видимостью Южно-Китайского моря

В зависимости от требований, **изменение этого значения требует перезагрузки страницы**В файле ```indexs/center-map.vue``` переменная ```isSouthChinaSea``` по умолчанию не отображает Южно-Китайское море (false). При значении ```true``` отображает Южно-Китайское море.

isSouthChinaSea: false, // по умолчанию Южно-Китайское море не отображается, установка значения true позволяет отображать его

## Глобальные параметры

### Фильтр

Фильтрация данных для обеспечения двух знаков после запятой.

```vue
{{10.23123 | motionFilter }}

• Схема vw vh: Способ реализации: Согласно размерам макета, px преобразуются в vw и vh с учетом пропорций. Преимущества: 1. Возможность динамического вычисления ширины и высоты графиков, шрифтов и т.д., что обеспечивает большую гибкость.

2. При несоответствии соотношения экрана и макета UI, не возникают белые полосы по краям. Недостатки: Каждый график требует отдельной настройки шрифтов, отступов и смещений, что усложняет процесс.