OSCHINA-MIRROR/daidaibg-IofTV-Screen

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

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

Проект должен отображаться во весь экран (по F11).
В проекте некоторые области используют глобальную регистрацию, что увеличивает размер пакета. В реальных условиях рекомендуется использовать импорт по требованию.
Среда проекта: Vue-cli, DataV, Echarts, Webpack, Npm, Node, axios, mock.
Необходимо извлечь код из основной ветки master. Остальные ветки являются ветвями разработки.
Данные карт хранятся в каталоге public проекта и организованы по городам.

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

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

Проект демонстрации

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

https://www.daidaibg.com/bigscreen

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

Адрес GitHub

https://github.com/daidaibg/IofTV-Screen

Адрес Gitee

https://gitee.com/daidaibg/IofTV-Screen

Версия vue3+vite

Адрес GitHub

https://github.com/daidaibg/IofTV-Screen-Vue3

Адрес Gitee

https://gitee.com/daidaibg/IofTV-Screen-Vue3

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

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

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

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

Настройка

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

Описание изображения

Основные файлы

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

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

Установка

npm install

Запуск

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

Отмена имитации данных mock

После отмены подключите собственный интерфейс

// src\main.js файл
Удалите следующую строку, чтобы отключить mock.
require('./mock/mock')//использовать ли mock

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

Примечание

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

Применение

<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, его можно использовать напрямую без импорта.

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.

<ItemWrap
title="Я — заголовок"
>
   <div>Кто я?</div>
</ItemWrap>

Параметр	Описание	Значение по умолчанию	Тип	Возможные значения
title	Заголовок	-	string	-

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

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

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

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

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

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

Фильтр

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

{{10.23123|montionFilter }}

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

Группа QQ

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

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

Группа 2: 495755841