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

Проект основан на открытом исходном фреймворке **vue-big-screen** для **бегущей строки**.

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

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

- Среда проекта: Vue-cli, DataV, Echarts, Webpack, Npm, Node, axios, mock.

- Необходимо извлечь код из основной ветки master. Остальные ветки являются ветвями разработки.

- Данные карт хранятся в каталоге public проекта и организованы по городам.

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

1. [Официальная документация Vue](https://gitee.com/link?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Finstance.html).
2. [Официальная документация DataV](https://gitee.com/link?target=http%3A%2F%2Fdatav.jiaminghi.com%2Fguide%2F).
3. [Примеры echarts](https://gitee.com/link?target=https%3A%2F%2Fecharts.apache.org%2Fexamples%2Fzh%2Findex.html), [документация API echarts](https://gitee.com/link?target=https%3A%2F%2Fecharts.apache.org%2Fzh%2Fapi.html%23echarts).
4. [Официальный сайт mock.js](http://mockjs.com/examples.html).
5. [Официальный сайт axios](https://axios-http.com/).

**Демонстрация проекта**

![Проект демонстрации](https://www.daidaibg.com/bigscreen/a-img/home.png)

### Адрес предварительного просмотра проекта

[https://www.daidaibg.com/bigscreen](https://www.daidaibg.com/bigscreen)

### Адреса репозиториев проекта

**Адрес GitHub**

[https://github.com/daidaibg/IofTV-Screen](https://github.com/daidaibg/IofTV-Screen)

**Адрес Gitee**

[https://gitee.com/daidaibg/IofTV-Screen](https://gitee.com/daidaibg/IofTV-Screen)

### Версия vue3+vite

**Адрес GitHub**

[https://github.com/daidaibg/IofTV-Screen-Vue3](https://github.com/daidaibg/IofTV-Screen-Vue3)

**Адрес Gitee**

[https://gitee.com/daidaibg/IofTV-Screen-Vue3](https://gitee.com/daidaibg/IofTV-Screen-Vue3)

### С версии 1.1.0 используются адаптивные компоненты вместо mixin.

### Настройка прокрутки и адаптации

В проекте можно настроить прокрутку и содержимое, которое будет прокручиваться.

Чтобы настроить параметры, нажмите кнопку настройки в правом верхнем углу.

![Настройка](https://www.daidaibg.com/bigscreen/a-img/setting.png)

Можно выполнить следующие настройки, которые можно изменить или добавить в коде.

![Описание изображения](https://www.daidaibg.com/bigscreen/a-img/setting2.png)

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

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

### Установка
```npm
npm install   
```
### Запуск
```npm
npm start 
```

[Далее следуйте инструкциям для бегущей строки](https://gitee.com/MTrun/big-screen-vue-datav/tree/master#%E4%B8%89%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D)

https://gitee.com/MTrun/big-screen-vue-datav/tree/master#%E4%B8%89%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D

### Отмена имитации данных mock
После отмены подключите собственный интерфейс
```javascript
// src\main.js файл
Удалите следующую строку, чтобы отключить mock.
require('./mock/mock')//использовать ли mock
```

## Адаптивный масштабируемый компонент

### Примечание

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

### Применение

```vue
<template>
  <scale-screen width="1920" height="1080">
    <div>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
    </div>
  </scale-screen>
</template>

<script>
import ScaleScreen from 'scale-screen'

export default {
  name:'Demo',
  components:{
    VScaleScreen
  }
}
</script>
```
### API
| Атрибут         | Описание                                                         | Тип                             | Значение по умолчанию |
| -------------- | ---------------------------------------------------------------- | --------------------------------- | -------------------- |
| selfAdaption    | Выполнять ли адаптацию                                            | Boolean                          | true                 |
| width           | Ширина большого экрана                                            | `Number` or `String`             | 1920                  |
| height          | Высота большого экрана                                            | `Number` or `String`             | 1080                  |
| autoScale       | **Адаптивная конфигурация**

* Адаптивная конфигурация, если она задана как тип boolean, используется для запуска или отключения адаптивности. Если конфигурация задана в виде объекта, то:
    * если x равно true, то на оси x создаются поля;
    * если y равно true, то на оси y создаются поля.
* При включении fullScreen эта конфигурация становится недействительной.
| Boolean или {x:boolean,y:boolean} | true   |
|----------------------------------|--------|
| delay                             | 500    |
| fullScreen                        | false  |
| boxStyle                          | null   |
| wrapperStyle                      | null   |

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

Здесь собраны все компоненты, кроме панели навигации.

### 5.1 Сообщение

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

Примечание: в настоящее время компонент содержит только предупреждение и тип. Если требуются другие типы, их можно добавить в компонент самостоятельно.

Так как компонент зарегистрирован глобально в main.js, его можно использовать напрямую без импорта.
```js
this.$Message({
  text: res.msg,
  type: 'warning'
})
//или так
this.$Message.warning(res.msg)
```
| Параметр | Описание | Значение по умолчанию | Тип | Возможные значения |
|:--: | :------: | :-----: | :----: | :-----:|
| text | Текст сообщения | - | string | - |
| type | Тип окна сообщения | warning | string | warning |

### 5.2 Внешняя рамка

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

Можно изменить его в соответствии с вашими потребностями, изменив файл src\components\item-wrap\item-wrap.vue.

```vue
<ItemWrap
title="Я — заголовок"
>
   <div>Кто я?</div>
</ItemWrap>
```
| Параметр  | Описание | Значение по умолчанию |  Тип  | Возможные значения |
| :---: | :--: | :----: | :----: | :----:|
| title | Заголовок |   -    | string |   -   |

## Средняя карта

### Контроль видимости Южного Китая

**Изменение этого значения требует обновления страницы.**

Файл indexs/center-map.vue содержит переменную isSouthChinaSea, которая по умолчанию скрывает Южный Китай (false). Если установить значение true, Южный Китай будет отображаться.

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

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

### Фильтр

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

```vue
{{10.23123|montionFilter }}
```

## Коммуникация на большом экране (группа сообщений)

### Группа QQ

Номер группы QQ:

Группа 1: 713105837 (полная)

Группа 2: 495755841