OSCHINA-MIRROR/suzong-data-big-screen

Data.Big.Screen

Big Data Screen, визуализация данных для больших экранов

Введение

Программное обеспечение на основе Vue, Element-UI, Webpack, Echart от Baidu, Vue-Amap от Gaode Map и других технологий.

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

Проект требует полноэкранного отображения (нажмите F11 для полного просмотра).

В настоящее время файлы названы в соответствии с простой географической областью, но могут быть переименованы в соответствии со спецификой бизнеса.

Включает в себя вложенные компоненты таблиц и поиска Element, которые позволяют вызывать родительские компоненты и передавать значения.

Добавлена интеграция с Gaode Map, которая позволяет реализовать отслеживание объектов в будущем.

Если вам нравится этот проект, вы можете поставить ему «звезду», чтобы получать обновления в первую очередь. Спасибо!

История обновлений

История обновлений: нажмите здесь, чтобы просмотреть

Будущие обновления: хранилище Vue, фреймворк iview, обработка токенов, интерфейс входа в систему и т. д.

Уже обновлено: HTTP-запросы axios (уже интегрированы), Vue-i18n многоязычная поддержка (уже интегрирована) и т.д.

Окружение проекта

Построен с использованием webpack, без использования ESLint для управления кодом (невозможно дружественное отладчик). Модульные тесты и e2e тесты не установлены.

Используемые пакеты:

— «vue»: "^2.6.11", — "axios": "^0.21.1", — "element-ui": "^2.15.1", — "@jiaminghi/data-view": "^2.7.3", — "echarts": "^4.6.0", — "vue-amap": "^0.5.10", — "vue-i18n": "^8.24.3", — "js-cookie": "^2.2.1".

Пакеты сборки:

— webpack: "^3.6.0", — webpack-dev-server: "^2.9.1" (не используется webpack 4.0, потому что webpack 4.0 и webpack-dev-сервер были разделены, необходимо установить webpack-dev-сервер отдельно).

Npm: 7.7.6, Node: v14.16.0 (v12.0.0+ также возможно), npm>= 3.0.0, node>= 6.0.0.

Связанные ссылки

Официальная документация Vue [https://cn.vuejs.org/v2/guide/]
Официальная документация Element [https://element.eleme.cn/#/zh-CN/component/installation]
Официальная документация DataV [http://datav.jiaminghi.com/guide/]
Примеры Echarts [https://echarts.apache.org/examples/zh/index.html]
Документация API Echarts [https://echarts.apache.org/zh/api.html#echarts]
Vue-amap Vue2.x и компоненты Gaode [https://elemefe.github.io/vue-amap/#/]
Gaode Map [https://lbs.amap.com/]
Документация vue-i18n [https://kazupon.github.io/vue-i18n/zh/]
Адрес проекта Gitee [https://gitee.com/suzong/data-big-screen]

Процесс запуска

Необходимо установить: VSCode, npm или yarn.
Перейдите в корневой каталог, загрузите зависимости, запустите npm install или yarn install, затем запустите npm run dev или yarn run dev.
Доступ к браузеру: http://localhost:4040 (порт можно настроить в файле config в папке index.js).
Автор предпочитает использовать yarn, который кажется немного быстрее. Установка пакета npm — это npm install имя пакета, а yarn — yarn add имя пакета.

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

Файл	Описание
api	Файл http.js, содержащий каталог упаковки, инкапсулирует запросы Get Post и другие.
assets	Каталог статических ресурсов, в котором хранятся логотип и фоновые изображения.
assets / style.scss	Общий файл CSS, быстрый стиль проекта.
assets / index.scss	Файл CSS для интерфейса Index.
common/...	Глобальный код ECharts и гибкий плагин (адаптация к размеру экрана, настраиваемая модификация).
components/echart	Все диаграммы Echart (названные по местоположению).
locale

Это перевод текста, предоставленного вами. Если у вас есть дополнительные вопросы или комментарии, пожалуйста, дайте мне знать. ### Многоязычные файлы, содержащие конфигурационные файлы на китайском и английском языках и компонент для выбора языка

router — функция маршрутизатора;
store — функция хранилища, хранит данные, сохранённые в Local Storage на стороне клиента;
utils — функции утилит и mixins-функции и т. д.;
views/index.vue — основная структура проекта;
views/остальные файлы — компоненты для различных областей интерфейса (названы по местоположению);
main.js — основной файл, импортирует файлы Echart и DataV.

Упаковка компонентов визуализации диаграмм

Все диаграммы ECharts создаются с помощью упакованного компонента common/echart/index.vue. Диаграммы уже отслеживают изменения данных и экрана и могут динамически отображать данные и размер диаграмм. В модуле отслеживания окон маленького и большого размера используется функция устранения дребезга для управления частотой обновления и экономии производительности браузера.

Проект имеет предустановленный стиль диаграмм ECharts, адрес файла: common/echart/theme.json.

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

Параметр	Тип	Назначение
id	String	Уникальный идентификатор, узел визуализации диаграммы (необязательный, используется $el)
className	String	Имя класса стиля (необязательно)
options	Object	Конфигурация ECharts (обязательно)
height	String	Высота диаграммы (рекомендуется)
width	String	Ширина диаграммы (рекомендуется)

Динамическая визуализация диаграмм

Пример динамической визуализации диаграмм находится в каталоге components. Каждый компонент диаграммы отвечает за получение и обработку данных, а файл chart отвечает за отслеживание и визуализацию данных.

Основная логика файла chart:

<template>
  <div>
    <Echart :options="options" id="id" height="height" width="width" ></Echart>
  </div>
</template>

<script>
// Импорт упакованного компонента
import Echart from '@/common/echart'
export default {
  // Определение конфигурационных данных
  data(){ return { options: {}}},
  // Объявление компонентов
  components: { Echart},
  // Получение данных
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  // Отслеживание, также можно использовать вычисляемые свойства для реализации этой функции
  watch: {
    cdata: {
      handler (newData) {
        this.options ={
          // Здесь пишется конфигурация ECharts
        }
      },
      // Немедленное отслеживание
      immediate: true,
      // Глубокое отслеживание
      deep: true
    }
  }
};
</script>

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

Повторно используемый компонент диаграммы — это модуль «пропускная способность задач и достижение целей», две диаграммы похожи, разница заключается в цвете и основных данных визуализации. Нужно только передать соответствующий уникальный идентификатор и стиль, а затем присвоить значение в повторно используемом компоненте components/echart/center/centerChartRate.

Например, в месте вызова views/center.vue определите данные и передайте их компоненту:

// Вызов компонента
<span>Пропускная способность задачи сегодня</span>
<centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />

<span>Достижение цели задачи сегодня</span>
<centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />

...
import centerChart from "@/components/echart/center/centerChartRate";

data() {
  return {
    rate: [
      {
        id: "centerRate1",
        tips: 60,
        ...
      },
      {
        id: "centerRate2",
        tips: 40,
        colorData: {
          ...
        }
      }
    ]
  }
}

Изменение границ

Границы используют компоненты, предоставляемые DataV, нужно только найти соответствующее местоположение в каталоге views и заменить его. Конкретные типы см. на официальном сайте DataV. Например:

<dv-border-box-1></dv-border-box-1>
<dv-border-box-2></dv-border-box-2>
<dv-border-box-3></dv-border-box-3>

Замена диаграмм

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

Решение адаптивности с использованием миксинов

Миксины используются для решения проблемы адаптации диаграмм к изменениям размера экрана. Функция находится в файле utils/resizeMixins.js, применяется к упакованному компоненту визуализации диаграмм common/echart/index.vue, основное внимание уделяется внедрению функций в this.chart.

Адаптация экрана

Этот проект использует гибкий плагин, изменяя значение rem для адаптации. Исходный дизайн — 1920 пикселей. Диапазон адаптации: от 1366 до 2560 пикселей. Этот проект был адаптирован в соответствии с реальной ситуацией, и небольшой экран (например, ширина 1366 пикселей) требует ручной замены некоторых динамических компонентов, таких как «динамический компонент изменения текста», который влияет на макет, на обычные узлы.

// Файл flexible находится в common/flexible.js, изменённая часть выглядит следующим образом
function refreshRem() {
  var width = docEl.getBoundingClientRect().width;
  // Минимум 1366px, максимум адаптируется к 2560px
  if (width / dpr < 1366) {
    width = 1366 * dpr;
  } else if (width / dpr > 2560) {
    width = 2560 * dpr;
  }
  // Исходный проект — 1920px, я установил 24 равных части, так что 1rem равен 80px
  var rem = width / 24;
  docEl.style.fontSize = rem + 'px';
  flexible.rem = win.rem = rem;
}

Многоязычность

Внедрение vue-i18n для достижения многоязычности, внедрение js-cookie для хранения языковой среды.
Настройка соответствующего текста в en.js и zh.js в папке src/locale/.
Реализация экземпляра i18n в src/locale/index.js и импорт en.js и zh.js вместе с пакетом китайского и английского языков elementui.
Импорт src/locale/index.js в main.js и добавление его в экземпляр Vue.
Файлы языкового хранилища находятся в src/store/language.js, а метод хранения языковых файлов cookie — в src/utils/lang.js.
Используйте {{$t('index.title')}} в HTML. ### 👀 Вызов API

Посмотрите на обёртку в файле src/api/http.js.
Поддерживает запросы POST и GET с обработкой токена.

💐 Остальные примечания

Сохраните как есть, поставьте звёздочку для последующего использования.

🔊 👉 Особая благодарность

Спасибо проекту vue-big-screen за то, что он позволил быстро создать новый проект, опираясь на уже существующий.