From 9e5caf43d7059cd5b28703b138e95b7f4df94699 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期五, 27 九月 2024 17:00:42 +0800
Subject: [PATCH] 首页图表
---
src/views/system/data-manage/data-detail/list.js | 62 +-
src/views/home/data-video/index.vue | 320 ++++++++++++++++
src/views/home/data-wrapper/index.vue | 17
src/views/home/data-face/index.vue | 336 +++++++++++++++++
src/views/home/data-car/index.vue | 335 +++++++++++++++++
src/views/system/check/result/detail/index.vue | 1
src/api/platform/home.js | 29 +
7 files changed, 1,066 insertions(+), 34 deletions(-)
diff --git a/src/api/platform/home.js b/src/api/platform/home.js
index 55c25fa..7198b74 100644
--- a/src/api/platform/home.js
+++ b/src/api/platform/home.js
@@ -1,5 +1,32 @@
import request from '@/utils/request'
+// 杩愮淮鐩戞帶鎶ヨ〃
+export function video(data) {
+ return request({
+ url: '/home/video',
+ method: 'get',
+ params: data
+ })
+}
+
+// 杩愮淮鐩戞帶鎶ヨ〃
+export function car(data) {
+ return request({
+ url: '/home/car',
+ method: 'get',
+ params: data
+ })
+}
+
+// 杩愮淮鐩戞帶鎶ヨ〃
+export function face(data) {
+ return request({
+ url: '/home/face',
+ method: 'get',
+ params: data
+ })
+}
+
// 杩愮淮鍏徃涓嬫媺
export function ywUnitList() {
return request({
@@ -57,4 +84,4 @@
method: 'get',
params: { category }
})
-}
\ No newline at end of file
+}
diff --git a/src/views/home/data-car/index.vue b/src/views/home/data-car/index.vue
new file mode 100644
index 0000000..c50f199
--- /dev/null
+++ b/src/views/home/data-car/index.vue
@@ -0,0 +1,335 @@
+<template>
+ <div class="data-chart-container">
+ <el-card class="data-card" :body-style="{ height: '100%' }">
+ <div class="card-content">
+ <div class="title-container">
+ <h1>杞﹁締鎶ヨ〃</h1>
+ <div class="select-container">
+ <el-select v-model="params.examineTag" placeholder="鑰冩牳鏍囩" @change="getChart" clearable>
+ <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </div>
+ <div>
+ <el-date-picker v-model="date" format="yyyy-MM" value-format="yyyy-MM" type="month" placeholder="閫夋嫨鏈堜唤"
+ @change="dateChange">
+ </el-date-picker>
+ </div>
+ </div>
+ <div class="chart-container">
+ <div id="chartContent" ref="chartContent"></div>
+ </div>
+ </div>
+ </el-card>
+ </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import {car} from "../../../api/platform/home";
+
+var chartDom = document.getElementById('main');
+var myChart = echarts.init(chartDom);
+var option;
+let observer = null;
+export default {
+ name: 'DataCar',
+ data() {
+ return {
+ date: '',
+ params: {
+ month: '',
+ },
+ options: [
+ {label: '鐪佸巺', value: 1},
+ {label: '鍏畨閮�', value: 2}
+ ],
+ dataList: [],
+ }
+ },
+ methods: {
+ dateChange() {
+ this.params.date = this.date;
+ this.getChart();
+ },
+ getChart() {
+ this.loading = true;
+ myChart.showLoading()
+ car(this.params).then(res => {
+ myChart = echarts.init(this.$refs.chartContent);
+ this.initChart(res.data);
+ this.observe();
+ })
+ },
+ groupByData(data) {
+ if (!data || data.length === 0) {
+ return this.getAllDay().map((item) => [item, []]);
+ }
+ const tempGroup = {};
+ data.forEach((item) => {
+ let {createDate} = item;
+ let tempTime = createDate.split('-');
+ createDate = tempTime[1] + '-' + tempTime[2];
+ if (!tempGroup[createDate]) {
+ tempGroup[createDate] = [];
+ }
+ tempGroup[createDate].push(item);
+ })
+ const tempArray = Object.entries(tempGroup).sort(([keyA], [keyB]) => new Date([keyA]) - new Date([keyB]));
+ return tempArray;
+ },
+ getAllDay() {
+ const currentDate = this.date.split('-');
+ const currentYear = currentDate[0];
+ const currentMonth = currentDate[1];
+ const daysInMonth = new Date(currentYear, currentMonth, 0).getDate();
+ const datesOfMonth = [];
+ for (var day = 1; day <= daysInMonth; day++) {
+ const formattedDate = currentMonth + '-' + (day.toString().padStart(2, '0'));
+ datesOfMonth.push(formattedDate);
+ }
+ return datesOfMonth;
+ },
+ initChart(data) {
+ const dataList = this.groupByData(data.list);
+ const baseLine = data.baseLine == null ? 0 : data.baseLine;
+ // 閫夋嫨杈冨ぇ鐨勫�间綔涓篩杞寸殑鏈�澶у��
+ var snapCount
+ if (!data.list || data.list.length === 0) {
+ snapCount = 0;
+ }else {
+ snapCount = data.list[data.list.length - 1].snapCount
+ }
+ const yMax = Math.max(snapCount, baseLine * 1.2);
+ const colors = ['#5470C6', '#66CC99', '#EE6666'];
+ option = {
+ color: colors,
+ tooltip: {
+ trigger: "axis", // 榧犳爣绉诲叆鍒版煴瀛愰噷闈㈠氨浼氭湁涓�涓彁绀猴紝榛樿鏄痠tem鏂瑰紡锛屽鏋滄湁澶氫釜鏌辩姸鍥撅紝鍫嗗湪涓�鍧梚tem灏变笉澶ソ浜嗭紝涓汉鍠滄axis鏂瑰紡鐨�
+ axisPointer: {
+ type: 'cross',
+ label:{
+ precision: 0
+ }
+ },
+ formatter: function (params) {
+ // 鍒涘缓涓�涓彉閲忔潵瀛樺偍鏈�缁堢殑 HTML 瀛楃涓�
+ var tooltipHtml = '';
+
+ // 棣栧厛锛屾坊鍔犲垎绫诲悕锛堟垨杞村�硷級鐨勬樉绀�
+ if (params.length > 0) {
+ tooltipHtml += "<div style='padding:0 12px;width:100%;height:24px;line-height:24px;'><p>" + params[0].name + "</p></div>";
+ }
+
+ var pointsHtml = params.map(function (item) {
+ // 浣跨敤 toLocaleString() 鏉ユ牸寮忓寲 value
+ var formattedValue = item.value? item.value.toLocaleString() : '-';
+ return `<div style="display: flex; align-items: center; font-size: 14px; padding: 0 12px; line-height: 24px;">
+ <span style="display: inline-block; margin-right: 5px; border-radius: 2px; width: 10px; height: 10px; background-color: ${item.color || '#ccc'};"></span>
+ <span style="margin-right: 10px;">${item.seriesName}</span>
+ <span style="font-weight: bold;display: inline-block; min-width: 60px; margin-left: auto; text-align: right;">${formattedValue}</span>
+ </div>`;
+ }).join('');
+ tooltipHtml = `${tooltipHtml}${pointsHtml}`;
+ tooltipHtml += `<div style="font-weight: bold; margin-top: 10px;padding:0 12px;">鎶撴媿閲忓弬鑰冨��: ${baseLine.toLocaleString()}</div>`;
+
+ return tooltipHtml;
+ }
+ },
+ grid: {
+ left: 10,
+ right: 0,
+ bottom: 0,
+ top: '20%',
+ containLabel: true
+ },
+ legend: {
+ data: ['鐐逛綅鍦ㄧ嚎', '鎶撴媿閲�']
+ },
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: {
+ alignWithLabel: true
+ },
+ data: dataList.map((item) => item[0]),
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: '鐐逛綅鏁�',
+ position: 'left',
+ alignTicks: true,
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: colors[0]
+ }
+
+ },
+ axisLabel: {
+ formatter: function (value) {
+ // 杩斿洖鏁存暟閮ㄥ垎锛屾垨浣跨敤鍏朵粬閫昏緫鏉ユ牸寮忓寲鏍囩
+ return Math.floor(value);
+ }
+ }
+ },
+ {
+ type: 'value',
+ name: '鎶撴媿閲�',
+ max: yMax,
+ min: 0,
+ position: 'right',
+ alignTicks: true,
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: colors[1]
+ }
+ },
+ axisLabel: {
+ formatter: function (value) {
+ // 杩斿洖鏁存暟閮ㄥ垎锛屾垨浣跨敤鍏朵粬閫昏緫鏉ユ牸寮忓寲鏍囩
+ return Math.floor(value);
+ }
+ }
+ }
+ ],
+ series: [
+ {
+ type: 'line',
+ yAxisIndex: 1,
+ markLine: {
+ symbol: 'none',
+ data: [
+ {
+ yAxis: baseLine, // 鑷畾涔変笅闄愬��
+ name: '鍙傝�冩姄鎷嶉噺', // 鍩哄噯绾垮悕绉�
+ label: { // 涓嶆樉绀哄熀鍑嗙嚎鍚嶇О
+ show: false,
+ },
+ lineStyle: {
+ type: 'dashed', // 鍩哄噯绾挎牱寮忎负铏氱嚎
+ color: '#b17063',
+ },
+ },
+ ],
+ },
+ },
+ {
+ name: '鐐逛綅鍦ㄧ嚎',
+ type: 'line',
+ yAxisIndex: 0,
+ color: colors[0],
+ tooltip: {
+ valueFormatter: function (value) {
+ return value;
+ }
+ },
+ data: data.list.map(item => {
+ return item['online'] ? item['online'] : null;
+ })
+ },
+ {
+ name: '鎶撴媿閲�',
+ type: 'bar',
+ yAxisIndex: 1,
+ color: colors[1],
+ tooltip: {
+ valueFormatter: function (value) {
+ return value;
+ }
+ },
+ data: data.list.map(item => {
+ return item['snapCount'] ? item['snapCount'] : null;
+ })
+ },
+ ]
+ };
+
+ myChart.setOption(option);
+ myChart.hideLoading();
+ },
+
+ // 鐩戝惉鍙樺寲
+ observe() {
+ if (!observer) {
+ observer = new ResizeObserver(entries => {
+ this.handleResize();
+ })
+ }
+ observer.observe(this.$refs.chartContent);
+ },
+ // 绐楀彛鍙樻崲
+ handleResize() {
+ if (myChart) {
+ myChart.resize();
+ }
+ }
+
+ },
+ mounted() {
+ const date = new Date();
+ const year = date.getFullYear();
+ const month = (date.getMonth() + 1) >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
+ this.date = year + '-' + month;
+ this.params.date = this.date;
+ this.getChart();
+ this.observe();
+ },
+ beforeDestroy() {
+ if (myChart) {
+ myChart.dispose();
+ observer.unobserve(this.$refs.chartContent);
+ }
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.data-chart-container {
+ height: 400px;
+ margin-bottom: 20px;
+
+ .data-card {
+ height: 100%;
+
+ .card-content {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ }
+ }
+}
+
+.title-container {
+ position: absolute;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ z-index: 2;
+
+ .more-button {
+ cursor: pointer;
+ font-size: 16px;
+ padding: 0 10px;
+ }
+}
+
+.chart-container {
+
+ width: 100%;
+ height: 100%;
+
+ #chartContent {
+ width: 100%;
+ height: 100%;
+ }
+}
+
+.select-container {
+ margin: 0 20px;
+ width: 180px;
+}
+</style>
diff --git a/src/views/home/data-face/index.vue b/src/views/home/data-face/index.vue
new file mode 100644
index 0000000..ae50412
--- /dev/null
+++ b/src/views/home/data-face/index.vue
@@ -0,0 +1,336 @@
+<template>
+ <div class="data-chart-container">
+ <el-card class="data-card" :body-style="{ height: '100%' }">
+ <div class="card-content">
+ <div class="title-container">
+ <h1>浜鸿劯鎶ヨ〃</h1>
+ <div class="select-container">
+ <el-select v-model="params.examineTag" placeholder="鑰冩牳鏍囩" @change="getChart" clearable>
+ <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </div>
+ <div>
+ <el-date-picker v-model="date" format="yyyy-MM" value-format="yyyy-MM" type="month" placeholder="閫夋嫨鏈堜唤"
+ @change="dateChange">
+ </el-date-picker>
+ </div>
+ </div>
+ <div class="chart-container">
+ <div id="chartContent" ref="chartContent"></div>
+ </div>
+ </div>
+ </el-card>
+ </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import {car, face} from "../../../api/platform/home";
+
+var chartDom = document.getElementById('main');
+var myChart = echarts.init(chartDom);
+var option;
+let observer = null;
+export default {
+ name: 'DataCar',
+ data() {
+ return {
+ date: '',
+ params: {
+ month: '',
+ },
+ options: [
+ {label: '鐪佸巺', value: 1},
+ {label: '鍏畨閮�', value: 2}
+ ],
+ dataList: [],
+ }
+ },
+ methods: {
+ dateChange() {
+ this.params.date = this.date;
+ this.getChart();
+ },
+ getChart() {
+ this.loading = true;
+ myChart.showLoading()
+ face(this.params).then(res => {
+ myChart = echarts.init(this.$refs.chartContent);
+ this.initChart(res.data);
+ this.observe();
+ })
+ },
+ groupByData(data) {
+ if (!data || data.length === 0) {
+ return this.getAllDay().map((item) => [item, []]);
+ }
+ const tempGroup = {};
+ data.forEach((item) => {
+ let {createDate} = item;
+ let tempTime = createDate.split('-');
+ createDate = tempTime[1] + '-' + tempTime[2];
+ if (!tempGroup[createDate]) {
+ tempGroup[createDate] = [];
+ }
+ tempGroup[createDate].push(item);
+ })
+ const tempArray = Object.entries(tempGroup).sort(([keyA], [keyB]) => new Date([keyA]) - new Date([keyB]));
+ return tempArray;
+ },
+ getAllDay() {
+ const currentDate = this.date.split('-');
+ const currentYear = currentDate[0];
+ const currentMonth = currentDate[1];
+ const daysInMonth = new Date(currentYear, currentMonth, 0).getDate();
+ const datesOfMonth = [];
+ for (var day = 1; day <= daysInMonth; day++) {
+ const formattedDate = currentMonth + '-' + (day.toString().padStart(2, '0'));
+ datesOfMonth.push(formattedDate);
+ }
+ return datesOfMonth;
+ },
+ initChart(data) {
+ const dataList = this.groupByData(data.list);
+ const baseLine = data.baseLine == null ? 0 : data.baseLine;
+ // 閫夋嫨杈冨ぇ鐨勫�间綔涓篩杞寸殑鏈�澶у��
+ var snapCount
+ if (!data.list || data.list.length === 0) {
+ snapCount = 0;
+ }else {
+ snapCount = data.list[data.list.length - 1].snapCount
+ }
+ const yMax = Math.max(snapCount, baseLine * 1.2);
+ const colors = ['#5470C6', '#66CC99', '#EE6666'];
+ option = {
+ color: colors,
+ tooltip: {
+ trigger: "axis", // 榧犳爣绉诲叆鍒版煴瀛愰噷闈㈠氨浼氭湁涓�涓彁绀猴紝榛樿鏄痠tem鏂瑰紡锛屽鏋滄湁澶氫釜鏌辩姸鍥撅紝鍫嗗湪涓�鍧梚tem灏变笉澶ソ浜嗭紝涓汉鍠滄axis鏂瑰紡鐨�
+ axisPointer: {
+ type: 'cross',
+ label:{
+ precision: 0
+ }
+ },
+ formatter: function (params) {
+ // 鍒涘缓涓�涓彉閲忔潵瀛樺偍鏈�缁堢殑 HTML 瀛楃涓�
+ var tooltipHtml = '';
+
+ // 棣栧厛锛屾坊鍔犲垎绫诲悕锛堟垨杞村�硷級鐨勬樉绀�
+ if (params.length > 0) {
+ tooltipHtml += "<div style='padding:0 12px;width:100%;height:24px;line-height:24px;'><p>" + params[0].name + "</p></div>";
+ }
+
+ var pointsHtml = params.map(function (item) {
+ // 浣跨敤 toLocaleString() 鏉ユ牸寮忓寲 value
+ var formattedValue = item.value? item.value.toLocaleString() : '-';
+ return `<div style="display: flex; align-items: center; font-size: 14px; padding: 0 12px; line-height: 24px;">
+ <span style="display: inline-block; margin-right: 5px; border-radius: 2px; width: 10px; height: 10px; background-color: ${item.color || '#ccc'};"></span>
+ <span style="margin-right: 10px;">${item.seriesName}</span>
+ <span style="font-weight: bold;display: inline-block; min-width: 60px; margin-left: auto; text-align: right;">${formattedValue}</span>
+ </div>`;
+ }).join('');
+ tooltipHtml = `${tooltipHtml}${pointsHtml}`;
+ tooltipHtml += `<div style="font-weight: bold; margin-top: 10px;padding:0 12px;">鎶撴媿閲忓弬鑰冨��: ${baseLine.toLocaleString()}</div>`;
+
+ return tooltipHtml;
+ }
+ },
+ grid: {
+ left: 10,
+ right: 0,
+ bottom: 0,
+ top: '20%',
+ containLabel: true
+ },
+ legend: {
+ data: ['鐐逛綅鍦ㄧ嚎', '鎶撴媿閲�']
+ },
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: {
+ alignWithLabel: true
+ },
+ data: dataList.map((item) => item[0]),
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: '鐐逛綅鏁�',
+ position: 'left',
+ alignTicks: true,
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: colors[0]
+ }
+ },
+
+ axisLabel: {
+ formatter: function (value) {
+ // 杩斿洖鏁存暟閮ㄥ垎锛屾垨浣跨敤鍏朵粬閫昏緫鏉ユ牸寮忓寲鏍囩
+ return Math.floor(value);
+ }
+ }
+
+ },
+ {
+ type: 'value',
+ name: '鎶撴媿閲�',
+ max: yMax,
+ min: 0,
+ position: 'right',
+ alignTicks: true,
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: colors[1]
+ }
+ },
+ axisLabel: {
+ formatter: function (value) {
+ // 杩斿洖鏁存暟閮ㄥ垎锛屾垨浣跨敤鍏朵粬閫昏緫鏉ユ牸寮忓寲鏍囩
+ return Math.floor(value);
+ }
+ }
+ }
+ ],
+ series: [
+ {
+ type: 'line',
+ yAxisIndex: 1,
+ markLine: {
+ symbol: 'none',
+ data: [
+ {
+ yAxis: baseLine, // 鑷畾涔変笅闄愬��
+ name: '鍙傝�冩姄鎷嶉噺', // 鍩哄噯绾垮悕绉�
+ label: { // 涓嶆樉绀哄熀鍑嗙嚎鍚嶇О
+ show: false,
+ },
+ lineStyle: {
+ type: 'dashed', // 鍩哄噯绾挎牱寮忎负铏氱嚎
+ color: '#b17063',
+ },
+ },
+ ],
+ },
+ },
+ {
+ name: '鐐逛綅鍦ㄧ嚎',
+ type: 'line',
+ yAxisIndex: 0,
+ color: colors[0],
+ tooltip: {
+ valueFormatter: function (value) {
+ return value;
+ }
+ },
+ data: data.list.map(item => {
+ return item['online'] ? item['online'] : null;
+ })
+ },
+ {
+ name: '鎶撴媿閲�',
+ type: 'bar',
+ yAxisIndex: 1,
+ color: colors[1],
+ tooltip: {
+ valueFormatter: function (value) {
+ return value;
+ }
+ },
+ data: data.list.map(item => {
+ return item['snapCount'] ? item['snapCount'] : null;
+ })
+ },
+ ]
+ };
+
+ myChart.setOption(option);
+ myChart.hideLoading();
+ },
+
+ // 鐩戝惉鍙樺寲
+ observe() {
+ if (!observer) {
+ observer = new ResizeObserver(entries => {
+ this.handleResize();
+ })
+ }
+ observer.observe(this.$refs.chartContent);
+ },
+ // 绐楀彛鍙樻崲
+ handleResize() {
+ if (myChart) {
+ myChart.resize();
+ }
+ }
+
+ },
+ mounted() {
+ const date = new Date();
+ const year = date.getFullYear();
+ const month = (date.getMonth() + 1) >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
+ this.date = year + '-' + month;
+ this.params.date = this.date;
+ this.getChart();
+ this.observe();
+ },
+ beforeDestroy() {
+ if (myChart) {
+ myChart.dispose();
+ observer.unobserve(this.$refs.chartContent);
+ }
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.data-chart-container {
+ height: 400px;
+ margin-bottom: 20px;
+
+ .data-card {
+ height: 100%;
+
+ .card-content {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ }
+ }
+}
+
+.title-container {
+ position: absolute;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ z-index: 2;
+
+ .more-button {
+ cursor: pointer;
+ font-size: 16px;
+ padding: 0 10px;
+ }
+}
+
+.chart-container {
+
+ width: 100%;
+ height: 100%;
+
+ #chartContent {
+ width: 100%;
+ height: 100%;
+ }
+}
+
+.select-container {
+ margin: 0 20px;
+ width: 180px;
+}
+</style>
diff --git a/src/views/home/data-video/index.vue b/src/views/home/data-video/index.vue
new file mode 100644
index 0000000..47febe7
--- /dev/null
+++ b/src/views/home/data-video/index.vue
@@ -0,0 +1,320 @@
+<template>
+ <div class="data-chart-container">
+ <el-card class="data-card" :body-style="{ height: '100%' }">
+ <div class="card-content">
+ <div class="title-container">
+ <h1>瑙嗛鎶ヨ〃</h1>
+ <div class="select-container">
+ <el-select v-model="params.examineTag" placeholder="鑰冩牳鏍囩" @change="getChart" clearable>
+ <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.value">
+ </el-option>
+ </el-select>
+ </div>
+ <div >
+ <el-date-picker v-model="date" format="yyyy-MM" value-format="yyyy-MM" type="month" placeholder="閫夋嫨鏈堜唤"
+ @change="dateChange">
+ </el-date-picker>
+ </div>
+ </div>
+ <div class="chart-container">
+ <div id="chartContent" ref="chartContent"></div>
+ </div>
+ </div>
+ </el-card>
+ </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import {video} from "../../../api/platform/home";
+var chartDom = document.getElementById('main');
+var myChart = echarts.init(chartDom);
+var option;
+let observer = null;
+export default {
+ name: 'DataVideo',
+ data() {
+ return {
+ date: '',
+ params: {
+ month: '',
+ },
+ options: [
+ {label: '鐪佸巺', value: 1},
+ {label: '鍏畨閮�', value: 2}
+ ],
+ dataList: [],
+ }
+ },
+ methods: {
+ dateChange() {
+ this.params.date = this.date;
+ this.getChart();
+ },
+ getChart() {
+ this.loading = true;
+ myChart.showLoading();
+ video(this.params).then(res => {
+ myChart = echarts.init(this.$refs.chartContent);
+ this.initChart(res.data);
+ this.observe();
+ })
+ },
+ groupByData(data) {
+ if (!data || data.length ===0) {
+ return this.getAllDay().map((item) => [item, []]);
+ }
+ const tempGroup = {};
+ data.forEach((item) => {
+ let {createDate} = item;
+ let tempTime = createDate.split('-');
+ createDate = tempTime[1] + '-' + tempTime[2];
+ if (!tempGroup[createDate]) {
+ tempGroup[createDate] = [];
+ }
+ tempGroup[createDate].push(item);
+ })
+ const tempArray = Object.entries(tempGroup).sort(([keyA], [keyB]) => new Date([keyA]) - new Date([keyB]));
+ return tempArray;
+ },
+ getAllDay() {
+ const currentDate = this.date.split('-');
+ const currentYear = currentDate[0];
+ const currentMonth = currentDate[1];
+ const daysInMonth = new Date(currentYear, currentMonth, 0).getDate();
+ const datesOfMonth = [];
+ for (var day = 1; day <= daysInMonth; day++) {
+ const formattedDate = currentMonth + '-' + (day.toString().padStart(2, '0'));
+ datesOfMonth.push(formattedDate);
+ }
+ return datesOfMonth;
+ },
+ initChart(data) {
+ const dataList = this.groupByData(data.list);
+ const baseLine = data.baseLine == null ? 0 : data.baseLine;
+ const colors = ['#5470C6', '#66CC99', '#EE6666'];
+ option = {
+ color: colors,
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label:{
+ precision: 0
+ }
+ },
+ formatter: function (params) {
+ // 鍒涘缓涓�涓彉閲忔潵瀛樺偍鏈�缁堢殑 HTML 瀛楃涓�
+ var tooltipHtml = '';
+
+ // 棣栧厛锛屾坊鍔犲垎绫诲悕锛堟垨杞村�硷級鐨勬樉绀�
+ if (params.length > 0) {
+ tooltipHtml += "<div style='padding:0 12px;width:100%;height:24px;line-height:24px;'><p>" + params[0].name + "</p></div>";
+ }
+
+ var pointsHtml = params.map(function (item) {
+ // 浣跨敤 toLocaleString() 鏉ユ牸寮忓寲 value
+ var formattedValue = item.value? item.value.toLocaleString() : '-';
+ return `<div style="display: flex; align-items: center; font-size: 14px; padding: 0 12px; line-height: 24px;">
+ <span style="display: inline-block; margin-right: 5px; border-radius: 2px; width: 10px; height: 10px; background-color: ${item.color || '#ccc'};"></span>
+ <span style="margin-right: 10px;">${item.seriesName}</span>
+ <span style="font-weight: bold;display: inline-block; min-width: 60px; margin-left: auto; text-align: right;">${formattedValue}</span>
+ </div>`;
+ }).join('');
+ tooltipHtml = `${tooltipHtml}${pointsHtml}`;
+ tooltipHtml += `<div style="font-weight: bold; margin-top: 10px;padding:0 12px;">褰曞儚姝ｅ父鍙傝�冨��: ${baseLine.toLocaleString()}</div>`;
+
+ return tooltipHtml;
+ }
+ },
+ grid: {
+ left: 10,
+ right: 0,
+ bottom: 0,
+ top: '20%',
+ containLabel: true
+ },
+ legend: {
+ data: ['鐐逛綅鍦ㄧ嚎', '褰曞儚瀹屾暣', '褰曞儚缂哄け']
+ },
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: {
+ alignWithLabel: true
+ },
+ data: dataList.map((item) => item[0]),
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: '褰曞儚鏁�',
+ position: 'right',
+ alignTicks: true,
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: colors[1]
+ }
+ },
+ axisLabel: {
+ formatter: function (value) {
+ // 杩斿洖鏁存暟閮ㄥ垎锛屾垨浣跨敤鍏朵粬閫昏緫鏉ユ牸寮忓寲鏍囩
+ return Math.floor(value);
+ }
+ }
+ },
+ {
+ type: 'value',
+ name: '鐐逛綅鏁�',
+ position: 'left',
+ alignTicks: true,
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: colors[0]
+ }
+ },
+ axisLabel: {
+ formatter: function (value) {
+ // 杩斿洖鏁存暟閮ㄥ垎锛屾垨浣跨敤鍏朵粬閫昏緫鏉ユ牸寮忓寲鏍囩
+ return Math.floor(value);
+ }
+ }
+ }
+ ],
+ series: [
+ {
+ yAxisIndex: 0,
+ type: 'line',
+ markLine: {
+ symbol: 'none',
+ data: [
+ {
+ yAxis: baseLine, // 鑷畾涔変笅闄愬��
+ name: '鍙傝�冨綍鍍忔甯告暟', // 鍩哄噯绾垮悕绉�
+ label: { // 涓嶆樉绀哄熀鍑嗙嚎鍚嶇О
+ show: false,
+ },
+ lineStyle: {
+ type: 'dashed', // 鍩哄噯绾挎牱寮忎负铏氱嚎
+ color: '#b17063',
+ },
+ },
+ ],
+ },
+ },
+ {
+ name: '褰曞儚瀹屾暣',
+ yAxisIndex: 0,
+ type: 'bar',
+ data: data.list.map(item => {
+ return item['integrityNum'];
+ })
+ },
+ {
+ name: '褰曞儚缂哄け',
+ type: 'bar',
+ yAxisIndex: 0,
+ data: data.list.map(item => {
+ return item['loseNum'];
+ })
+ },
+ {
+ name: '鐐逛綅鍦ㄧ嚎',
+ type: 'line',
+ yAxisIndex: 1,
+ data: data.list.map(item => {
+ return item['online'];
+ })
+ },
+ ]
+ };
+
+ option && myChart.setOption(option);
+ myChart.hideLoading();
+ },
+
+
+ // 鐩戝惉鍙樺寲
+ observe() {
+ if (!observer) {
+ observer = new ResizeObserver(entries => {
+ this.handleResize();
+ })
+ }
+ observer.observe(this.$refs.chartContent);
+ },
+ // 绐楀彛鍙樻崲
+ handleResize() {
+ if (myChart) {
+ myChart.resize();
+ }
+ }
+
+ },
+ mounted() {
+ const date = new Date();
+ const year = date.getFullYear();
+ const month = (date.getMonth() + 1) >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
+ this.date = year + '-' + month;
+ this.params.date = this.date;
+ this.getChart();
+ this.observe();
+ },
+ beforeDestroy() {b
+ if (myChart) {
+ myChart.dispose();
+ observer.unobserve(this.$refs.chartContent);
+ }
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.data-chart-container {
+ height: 400px;
+ margin-bottom: 20px;
+
+ .data-card {
+ height: 100%;
+
+ .card-content {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ }
+ }
+}
+
+.title-container {
+ position: absolute;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ z-index: 2;
+
+ .more-button {
+ cursor: pointer;
+ font-size: 16px;
+ padding: 0 10px;
+ }
+}
+
+.chart-container {
+
+ width: 100%;
+ height: 100%;
+
+ #chartContent {
+ width: 100%;
+ height: 100%;
+ }
+}
+
+.select-container {
+ margin: 0 20px;
+ width: 180px;
+}
+</style>
diff --git a/src/views/home/data-wrapper/index.vue b/src/views/home/data-wrapper/index.vue
index a424f12..6db217f 100644
--- a/src/views/home/data-wrapper/index.vue
+++ b/src/views/home/data-wrapper/index.vue
@@ -1,5 +1,14 @@
<template>
<div class="data-container">
+ <div>
+ <data-video></data-video>
+ </div>
+ <div>
+ <data-car></data-car>
+ </div>
+ <div>
+ <data-face></data-face>
+ </div>
<el-row :gutter="40">
<el-col :xs='24' :md="24" :sm="24" :lg="24" :xl="12">
<data-chart></data-chart>
@@ -26,6 +35,9 @@
import DataCheck from '../data-check/index.vue';
import WorkOrder from '../work-order/index.vue';
import DataChart from '../data-chart/index.vue';
+import DataVideo from '../data-video/index.vue';
+import DataCar from '../data-car/index.vue';
+import DataFace from '../data-face/index.vue';
export default {
name: 'DataWrapper',
components: {
@@ -34,7 +46,10 @@
DataCheck,
WorkOrder,
Examine,
- DataChart
+ DataChart,
+ DataVideo,
+ DataCar,
+ DataFace
}
}
</script>
diff --git a/src/views/system/check/result/detail/index.vue b/src/views/system/check/result/detail/index.vue
index c7507dd..e078471 100644
--- a/src/views/system/check/result/detail/index.vue
+++ b/src/views/system/check/result/detail/index.vue
@@ -376,7 +376,6 @@
dateChange() {
this.queryParams.date = this.date;
- console.log(this.queryParams);
this.getChart(this.queryParams.deptId);
}
diff --git a/src/views/system/data-manage/data-detail/list.js b/src/views/system/data-manage/data-detail/list.js
index 3bd813d..0915eae 100644
--- a/src/views/system/data-manage/data-detail/list.js
+++ b/src/views/system/data-manage/data-detail/list.js
@@ -339,7 +339,7 @@
label: '绾害寮傚父鏁�'
},
{
- label: '鍚堟牸鐜�'
+ label: '浠婃棩鍚堟牸鐜�'
},
]
}
@@ -671,7 +671,7 @@
label: '绾害寮傚父鏁�'
},
{
- label: '娉ㄥ唽鐜�'
+ label: '浠婃棩娉ㄥ唽鐜�'
},
]
}
@@ -701,7 +701,7 @@
],
},
{
- title: '鑰冩牳妗ｆ姣�',
+ title: '妗ｆ鑰冩牳姣�',
index: 'archives_rate',
columns: [
{
@@ -1003,7 +1003,7 @@
label: '绾害寮傚父鏁�'
},
{
- label: '鑰冩牳姣�'
+ label: '浠婃棩鑰冩牳姣�'
},
]
}
@@ -1165,7 +1165,7 @@
label: '璁惧鎬绘暟'
},
{
- label: '鍦ㄧ嚎鐜�'
+ label: '浠婃棩鍦ㄧ嚎鐜�'
},
]
}
@@ -1316,7 +1316,7 @@
label: '璁惧鎬绘暟'
},
{
- label: '鍦ㄧ嚎鐜�'
+ label: '浠婃棩鍦ㄧ嚎鐜�'
},
]
}
@@ -1408,7 +1408,7 @@
label: '寮傚父'
},
{
- label: '鍙敤鐜�'
+ label: '浠婃棩鍙敤鐜�'
},
]
}
@@ -1488,7 +1488,7 @@
label: '寮傚父'
},
{
- label: '鍙敤鐜�'
+ label: '浠婃棩鍙敤鐜�'
},
]
}
@@ -1965,7 +1965,7 @@
label: '璁惧鎬绘暟'
},
{
- label: '鍦ㄧ嚎鐜�'
+ label: '浠婃棩鍦ㄧ嚎鐜�'
},
]
}
@@ -2057,7 +2057,7 @@
label: '寮傚父'
},
{
- label: '鍙敤鐜�'
+ label: '浠婃棩閲嶇偣鍙敤鐜�'
},
]
}
@@ -2158,7 +2158,7 @@
label: 'osd鏃堕棿鏍囨敞閿欒鏁�'
},
{
- label: '鏍囨敞姝ｇ‘鐜�'
+ label: '浠婃棩鏍囨敞姝ｇ‘鐜�'
},
]
}
@@ -2253,7 +2253,7 @@
label: 'osd鏃堕棿鏍囨敞閿欒鏁�'
},
{
- label: '鏍℃椂姝ｇ‘鐜�'
+ label: '浠婃棩鏍℃椂姝ｇ‘鐜�'
},
]
}
@@ -2412,7 +2412,7 @@
label: '璁惧鎬绘暟'
},
{
- label: '鍦ㄧ嚎鐜�'
+ label: '浠婃棩鍦ㄧ嚎鐜�'
},
]
}
@@ -2623,7 +2623,7 @@
label: '鏁版嵁閲忓皯'
},
{
- label: '绋冲畾鎬�'
+ label: '浠婃棩绋冲畾鎬�'
},
]
}
@@ -2702,7 +2702,7 @@
label: '璁惧鎬绘暟'
},
{
- label: '鍦ㄧ嚎鐜�'
+ label: '浠婃棩鍦ㄧ嚎鐜�'
},
]
}
@@ -3011,7 +3011,7 @@
label: '绾害寮傚父鏁�'
},
{
- label: '涓�鑷寸巼'
+ label: '浠婃棩涓�鑷寸巼'
},
]
}
@@ -3105,7 +3105,7 @@
label: '绮惧害杩囦綆'
},
{
- label: '鍑嗙‘鐜�'
+ label: '浠婃棩鍑嗙‘鐜�'
},
]
}
@@ -3211,7 +3211,7 @@
icon: 'el-icon-truck',
dataList: [
{
- label: '瀹屾暣鎬�'
+ label: '浠婃棩瀹屾暣鎬�'
}
]
}
@@ -3303,7 +3303,7 @@
icon: 'el-icon-truck',
dataList: [
{
- label: '鍑嗙‘鎬�'
+ label: '浠婃棩鍑嗙‘鎬�'
}
]
}
@@ -3566,7 +3566,7 @@
label: '鏁版嵁閲忓皯'
},
{
- label: '鍑嗙‘鎬�'
+ label: '浠婃棩鍑嗙‘鎬�'
},
]
}
@@ -3679,7 +3679,7 @@
icon: 'el-icon-truck',
dataList: [
{
- label: '鍙婃椂鎬�'
+ label: '浠婃棩鍙婃椂鎬�'
}
]
}
@@ -3767,7 +3767,7 @@
icon: 'el-icon-truck',
dataList: [
{
- label: '鍙敤鎬�'
+ label: '浠婃棩鍙敤鎬�'
}
]
}
@@ -3891,7 +3891,7 @@
icon: 'el-icon-truck',
dataList: [
{
- label: '鍙敤鎬�'
+ label: '浠婃棩鍙敤鎬�'
}
]
}
@@ -3983,7 +3983,7 @@
label: '鏁版嵁閲忓皯'
},
{
- label: '绋冲畾鎬�'
+ label: '浠婃棩绋冲畾鎬�'
},
]
}
@@ -4055,7 +4055,7 @@
label: '璁惧鎬绘暟'
},
{
- label: '鍦ㄧ嚎鐜�'
+ label: '浠婃棩鍦ㄧ嚎鐜�'
},
]
}
@@ -4364,7 +4364,7 @@
label: '绾害寮傚父鏁�'
},
{
- label: '涓�鑷寸巼'
+ label: '浠婃棩涓�鑷寸巼'
},
]
}
@@ -4462,7 +4462,7 @@
label: '绮惧害杩囦綆'
},
{
- label: '鍑嗙‘鐜�'
+ label: '浠婃棩鍑嗙‘鐜�'
},
]
}
@@ -4526,7 +4526,7 @@
label: '绮惧害杩囦綆'
},
{
- label: '鍚堟牸鎬�'
+ label: '浠婃棩鍚堟牸鎬�'
},
]
}
@@ -4755,7 +4755,7 @@
label: '鏁版嵁閲忓皯'
},
{
- label: '鍑嗙‘鎬�'
+ label: '浠婃棩鍑嗙‘鎬�'
},
]
}
@@ -4978,7 +4978,7 @@
label: '鏁版嵁閲忓皯'
},
{
- label: '鍙婃椂鎬�'
+ label: '浠婃棩鍙婃椂鎬�'
},
]
}
@@ -5108,7 +5108,7 @@
icon: 'el-icon-truck',
dataList: [
{
- label: '鍙敤鎬�'
+ label: '浠婃棩鍙敤鎬�'
}
]
}
--
Gitblit v1.8.0