update

src/views/generalEnvironmentMechanical/index.vue

@@ -16,7 +16,15 @@
                 </div>
 
             </div>
-            <div class="bottom-box"></div>
+            <div class="bottom-box">
+                <power style="width: 33%;height: 100%;box-sizing: border-box;" :title="powerTitle" :series="powerSeries"
+                    :listName="listName">
+                </power>
+                <div style="width: 33%;height: 100%;background: #bfb;">
+                </div>
+                <div style="width: 33%;height: 100%;background: #bfc;">
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -25,6 +33,7 @@
 import { onMounted, onUnmounted, reactive, ref } from 'vue'
 import header2 from '@/components/headerBox/header2.vue'
 import verticalNumLoop from './components/verticalNumLoop.vue'
+import power from './components/power.vue';
 import { getSafeWarningData, getpipeData } from "@/http/realtimeSecurity";
 import { getnoiseData } from "@/http/generalEnvironment";
 import { getHumitureData, getPmtenData, getPmtwoData } from "@/http/generalEnvironment";
@@ -59,9 +68,15 @@ const verticalType = {
     'FIRE': { icon: 'icon-weibiaoti1', title: t('messages.flameDetection'), unit: null },
     'noise': { icon: 'icon-shengyin', title: t('messages.noiseDetection'), unit: 'dB' },
 }
+/**用电量 */
+let listName = ref<string[]>()
+let powerTitle = t('messages.Powerto2023')
+let powerSeries = ref()
+
 
 let headerref = ref()
 let verticalList: any[] = reactive([])
+//获取传感器实时数据
 async function getSensorData() {
     let list = []
     const res: any = await Promise.all([
@@ -114,6 +129,59 @@ async function getSensorData() {
     store.setNewVerticalNum(handle_vertical)
 }
 
+async function getPower_data() {
+    const { data }: any = await getPowerData({ time: 1 })
+    listName.value = data.name
+
+
+    let series = []
+    data.listData.forEach(res => {
+        if (res.years == 2023) {
+            for (let key in res.month) {
+                series.push({
+                    name: key + '月',
+                    type: 'bar',
+                    stack: res.years,
+                    emphasis: {
+                        focus: 'coordinateSystem',
+                        label: {
+                            show: true,
+                            formatter: function (value, index) {
+                                return value.value.toLocaleString()
+                            }
+                        }
+                    },
+                    data: res.month[key]
+                })
+            }
+        }
+    })
+    //data0用于初始化计算的数据
+    let data0 = []
+
+    for (let i = 1; i <= data.name.length; i++) {
+        data0.push(0)
+    }
+
+    series.push(
+        {
+            name: '',
+            type: 'bar',
+            data: data0,
+            color: '#bbf',
+            stack: data.listData[1].years,
+            // barWidth: 30,
+            label: {
+                show: true,
+                position: 'right',
+                color: '#fff'
+            }
+        }
+    )
+    powerSeries.value = series
+
+}
+
 function getWebsocket(val) {
     headerref.value.HeadergetWebsocket(val)
     try {
@@ -166,7 +234,7 @@ function errWebsocket(val) {
 
 onMounted(() => {
     getSensorData()
-    
+    getPower_data()
     connectWebsocket(null, null, getWebsocket, errWebsocket);
 })
 </script>
@@ -177,12 +245,13 @@ onMounted(() => {
     width: 1920px;
     color: #20aec5;
     background-color: #100c2a;
+    box-sizing: border-box;
 }
 </style>
 <style scoped>
 .content {
     width: 1920px;
-    height: 980px;
+    height: 930px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -191,7 +260,7 @@ onMounted(() => {
 
 .top-box {
     width: 1920px;
-    height: 300px;
+    height: 290px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -199,7 +268,7 @@ onMounted(() => {
 
 .bottom-box {
     width: 1920px;
-    height: 670px;
+    height: 630px;
     display: flex;
     justify-content: space-between;
     align-items: center;