From b6fd39998f67f7fea48ac8b3be169dc6de3985b5 Mon Sep 17 00:00:00 2001
From: longyvfengyun <496960745@qq.com>
Date: 星期四, 28 九月 2023 14:41:51 +0800
Subject: [PATCH] 内容提交
---
src/views/home.vue | 108 +++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 102 insertions(+), 6 deletions(-)
diff --git a/src/views/home.vue b/src/views/home.vue
index fd64051..2d58b1d 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -4,13 +4,49 @@
import mapJson from "@/assets/mapJson/map_config";
import {FullScreen} from "@element-plus/icons-vue";
import BoxComponent from "@/components/boxComponent.vue";
+import HdwChart from "@/components/echarts/hdwChart.vue";
+import getGaugeOption from "@/components/echarts/options/gauge";
+import getRadiusBarOption from "@/components/echarts/options/radiusBar";
+import getHorizontalTechnologyOption from "@/components/echarts/options/horizontalTechnologyBar";
+import ChartBox from "@/components/chartBox.vue";
const isFullScreen = ref(false);
const mapStyle = ref({styleJson: mapJson});
+const boxGauge = ref(null);
+const boxBar = ref(null);
+
+const videoGauge = ref(null);
+const videoBar = ref(null);
+
+const battGauge = ref(null);
+const battBar = ref(null);
+
+const alarmBar = ref(null);
const changeScreenState = ()=>{
isFullScreen.value = !isFullScreen.value;
}
-onMounted(()=>{});
+onMounted(()=>{
+ const boxGaugeOption = getGaugeOption(10, 90, "浠婃棩鍦ㄧ嚎鐩掑瓙鏁�");
+ boxGauge.value.setOption(boxGaugeOption);
+
+ const boxBarOption = getRadiusBarOption();
+ boxBar.value.setOption(boxBarOption);
+
+ const videoGaugeOption = getGaugeOption(1, 500, "浠婃棩鍦ㄧ嚎鎽勫儚澶存暟");
+ videoGauge.value.setOption(videoGaugeOption);
+
+ const videoBarOption = getRadiusBarOption();
+ videoBar.value.setOption(videoBarOption);
+
+ const battGaugeOption = getGaugeOption(1, 500, "浠婃棩鍦ㄧ嚎鐢垫睜鏁�");
+ battGauge.value.setOption(videoGaugeOption);
+
+ const battBarOption = getRadiusBarOption();
+ battBar.value.setOption(videoBarOption);
+
+ const alarmBarOption = getHorizontalTechnologyOption();
+ alarmBar.value.setOption(alarmBarOption);
+});
</script>
<template>
@@ -48,17 +84,49 @@
<div class="text-value">0</div>
</div>
</el-col>
+ <el-col :span="12">
+ <div class="hdw-chart-box">
+ <hdw-chart ref="boxGauge"></hdw-chart>
+ </div>
+ </el-col>
</el-row>
</div>
<div class="content-inner-body">
-
+ <chart-box title="鏈�杩�7澶╁湪绾跨洅瀛愭暟">
+ <hdw-chart ref="boxBar"></hdw-chart>
+ </chart-box>
</div>
</div>
</box-component>
</div>
<div class="box-container-top">
<box-component>
-
+ <div class="box-content-inner-wrapper">
+ <div class="content-inner-header">
+ <el-row>
+ <el-col :span="12">
+ <div class="box-value-wrapper">
+ <div class="text-content">浠婃棩鍦ㄧ嚎鎽勫儚澶存暟:</div>
+ <div class="text-value">0</div>
+ </div>
+ <div class="box-value-wrapper">
+ <div class="text-content">鎽勫儚澶存�绘暟:</div>
+ <div class="text-value">0</div>
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div class="hdw-chart-box">
+ <hdw-chart ref="videoGauge"></hdw-chart>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+ <div class="content-inner-body">
+ <chart-box title="鏈�杩�7澶╁湪绾挎憚鍍忓ご鏁�">
+ <hdw-chart ref="videoBar"></hdw-chart>
+ </chart-box>
+ </div>
+ </div>
</box-component>
</div>
</div>
@@ -67,12 +135,37 @@
<div class="box-container">
<div class="box-container-top">
<box-component>
- <div class=""></div>
+ <div class="box-content-inner-wrapper">
+ <div class="content-inner-header">
+ <el-row>
+ <el-col :span="12">
+ <div class="box-value-wrapper">
+ <div class="text-content">浠婃棩鍦ㄧ數姹犳暟:</div>
+ <div class="text-value">0</div>
+ </div>
+ <div class="box-value-wrapper">
+ <div class="text-content">鐢垫睜鎬绘暟:</div>
+ <div class="text-value">0</div>
+ </div>
+ </el-col>
+ <el-col :span="12">
+ <div class="hdw-chart-box">
+ <hdw-chart ref="battGauge"></hdw-chart>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+ <div class="content-inner-body">
+ <chart-box title="鏈�杩�7澶╁湪绾跨數姹犳暟">
+ <hdw-chart ref="battBar"></hdw-chart>
+ </chart-box>
+ </div>
+ </div>
</box-component>
</div>
<div class="box-container-top">
<box-component>
-
+ <hdw-chart ref="alarmBar"></hdw-chart>
</box-component>
</div>
</div>
@@ -174,7 +267,7 @@
}
.box-value-wrapper {
- margin-bottom: 16px;
+ margin-bottom: 24px;
background: linear-gradient(to bottom, #0363f1, #033f8f, #0363f1);
white-space: nowrap;
color: #FFFFFF;
@@ -195,4 +288,7 @@
vertical-align: middle;
}
}
+.hdw-chart-box {
+ height: 150px;
+}
</style>
--
Gitblit v1.9.1