内容提交

longyvfengyun

2023-09-28 b6fd39998f67f7fea48ac8b3be169dc6de3985b5

 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>