123

src/views/bim/bimHome/components/DeviceEvent.vue

@@ -67,8 +67,8 @@ const openDialog = () => {
 <style lang='scss' scoped>
 .deviceDiv {
     position: absolute;
-    // top: 410px;
+    top: 380px;
-    bottom: 40px;
+    
     right: 10px;
     width: 360px;
     // height: 460px;

src/views/bim/bimHome/components/DevicePie.vue

@@ -69,7 +69,7 @@ const openDialog = () => {
 <style lang='scss' scoped>
 .deviceDiv {
     position: absolute;
-    bottom: 40px;
+    top: 380px;
     right: 10px;
     width: 360px;
     height: 320px;

src/views/bim/bimHome/components/RealData.vue

@@ -61,8 +61,7 @@ const openDialog = () => {
 <style lang='scss' scoped>
 .deviceDiv {
     position: absolute;
-    // top: 410px;
+    top: 380px; 
-    bottom: 40px;
     right: 10px;
     width: 360px;
     display: flex;

src/views/components/Bar.vue

@@ -38,10 +38,9 @@ const getCharts = () => {
                 },
             },
             grid: {
-                left: '1%',
+                left: '12%',
-                right: '8%',
+                right: '4%',
-                bottom: '8%',
+                bottom: '5%'
-                containLabel: true
             },
             xAxis: [
                 {
@@ -69,19 +68,7 @@ const getCharts = () => {
             yAxis: [
                 {
                     type: 'category',
-                    data: ['漳州厂区', '武汉厂区', '3厂区', '2厂区', '4厂区', '5厂区'],
+                    data: ['漳州', '武汉', '3厂区', '2厂区', '4厂区', '5厂区'],
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            width: 0
-                        }
-                    },
-                    show: false,
-                    position: 'left',
-                },
-                {
-                    type: 'category',
-                    data: ['漳州厂区', '武汉厂区', '3厂区', '2厂区', '4厂区', '5厂区'],
                     axisLine: {
                         show: true,
                         lineStyle: {
@@ -101,6 +88,7 @@ const getCharts = () => {
                 {
                     name: '2023资产',
                     type: 'bar',
+                    barWidth: 36,
                     // xAxisIndex:1,
                     data: [182, 234, 290, 104, 131, 100],
                     itemStyle: {
@@ -118,6 +106,7 @@ const getCharts = () => {
                 {
                     name: '2022资产',
                     type: 'bar',
+                    barWidth: 16,
                     // xAxisIndex:1,
                     data: [193, 234, 310, 121, 134, 681],
                     itemStyle: {

src/views/components/xtBar.vue

@@ -0,0 +1,118 @@
+<template>
+    <dv-border-box-12 class="xt-bar-div">
+        <div id="xtbar">
+
+        </div>
+    </dv-border-box-12>
+</template>
+<script setup>
+import * as echarts from "echarts";
+onMounted(() => {
+    nextTick(() => {
+        getCharts();
+    })
+})
+
+const getCharts = () => {
+    var dom = document.getElementById("xtbar");
+    if (dom) {
+        // 手动移除该属性
+        dom.removeAttribute('_echarts_instance_')
+        var myChart = echarts.init(dom);
+        let option = {
+            title: {
+                text: ''
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                }
+            },
+            legend: {
+                textStyle: {
+                    color: "#ffff",
+                    fontFamily: "Alibaba PuHuiTi",
+                    fontSize: 14,
+                    fontWeight: 400,
+                },
+            },
+            grid: {
+                left: '15%',
+                right: '4%',
+                bottom: '5%'
+            },
+            xAxis: [
+                {
+                    type: 'value',
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            width: 1
+                        }
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff", //X轴字体颜色
+                            fontSize: "12", //X轴字体大小
+                        },
+                    },
+                    splitLine: {
+                        // 网格线
+                        show: false,
+                    },
+                    show: true,
+                    maxInterval: 50000  //值坐标最大的数值间隔 最小同样min
+                }
+            ],
+            yAxis: [
+                {
+                    type: 'category',
+                    data: ['0-40', '41-50', '51-60', '61-70', '71-80', '81-90', '91-100', '101-110', '111-120','120以上'],
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            width: 2
+                        }
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff", //X轴字体颜色
+                            fontSize: "12", //X轴字体大小
+                        },
+                    },
+                    position: 'left',
+                }
+            ],
+            series: [
+                {
+                    name: '系统数据分析',
+                    type: 'bar',
+                    barWidth: 16,
+                    // xAxisIndex:1,
+                    data: [182, 234, 290, 104, 131, 100],
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: true,
+                                textStyle: {
+                                    color: "#5470c6",
+                                },
+                                position: "right",
+                            },
+                        }
+                    }
+                }
+            ]
+        };
+
+        option && myChart.setOption(option);
+    }
+}
+</script>
+<style lang="scss" scoped>
+#xtbar {
+    width: 100%;
+    height:100%;
+}
+</style>

src/views/index.vue

@@ -13,6 +13,7 @@
       <Map></Map>
       <Pie></Pie>
       <Bar></Bar>
+      <xtBar></xtBar>
       <Device></Device>
       <Line></Line>
     </div>
@@ -23,6 +24,7 @@
 import Map from './components/Map.vue';
 import Pie from './components/Pie.vue';
 import Bar from './components/Bar.vue';
+import xtBar from './components/xtBar.vue';
 import Line from './components/Line.vue';
 import Device from './components/Device.vue';
 import useTagsViewStore from "@/store/modules/tagsView";
@@ -47,11 +49,12 @@ const gotoPage = (item) => {
 .home {
   .topMenu {
     width: 100%;
-    height: 80px;
+    height: 60px;
-    border: 1px solid #020c45;
+    // border: 1px solid #020c45;
     display: flex;
     align-items: center;
-    background: #3d5d9a; 
+    // background: #3d5d9a; 
+    background: #030e23;
     color: #fff;
     > div {
       width: 260px;
@@ -66,7 +69,7 @@ const gotoPage = (item) => {
   }
   .home-page {
     width:100%;
-    height: calc(100vh - 150px);
+    height: calc(100vh - 130px);
     background: #000000;
     position: relative;
     .map-div {
@@ -85,16 +88,24 @@ const gotoPage = (item) => {
     .bar-div {
       position: absolute;
       width: 400px;
-      height: 460px;
+      height: 98%;
       top: 10px;
       right: 10px;
       padding: 15px;
     }
+    .xt-bar-div {
+      position: absolute;
+      width: 400px;
+      height: 460px;
+      top: 370px;
+      left: 10px;
+      padding: 15px;
+    }
     .device-div {
       position: absolute;
-      bottom: 10px;
+      top: 10px;
-      left: 10px;
+      left: 420px;
-      width: 930px;
+      width: calc(100% - 840px);
       height: 200px;
       padding: 15px;
       // background: #b2cae0;
@@ -102,8 +113,8 @@ const gotoPage = (item) => {
     .line-div {
       position: absolute;
       bottom: 10px;
-      right: 10px;
+      left: 420px;
-      width: 930px;
+      width: calc(100% - 840px);
       height: 200px;
       padding: 15px;
       // background: #b2cae0;