Слияние кода завершено, страница обновится автоматически
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.
Связанные ссылки
Процесс запуска
http://localhost:4040 (порт можно настроить в файле config в папке index.js).Эффект демонстрации
| Файл | Описание |
|---|---|
| api | Файл http.js, содержащий каталог упаковки, инкапсулирует запросы Get Post и другие. |
| assets | Каталог статических ресурсов, в котором хранятся логотип и фоновые изображения. |
| assets / style.scss | Общий файл CSS, быстрый стиль проекта. |
| assets / index.scss | Файл CSS для интерфейса Index. |
| common/... | Глобальный код ECharts и гибкий плагин (адаптация к размеру экрана, настраиваемая модификация). |
| components/echart | Все диаграммы Echart (названные по местоположению). |
| locale |
Это перевод текста, предоставленного вами. Если у вас есть дополнительные вопросы или комментарии, пожалуйста, дайте мне знать. ### Многоязычные файлы, содержащие конфигурационные файлы на китайском и английском языках и компонент для выбора языка
Все диаграммы 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-big-screen за то, что он позволил быстро создать новый проект, опираясь на уже существующий.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )