楼宇监控模块图形

src/api/screen/service.js

@@ -449,6 +449,14 @@ export function airOverview() {
   })
 }
 
+// 定额指标
+export function getTarget() {
+  return request({
+    url: '/large/first/getTarget',
+    method: 'get'
+  })
+}
+
 
 // 办公用电分项
 export function useElectricity() {

src/components/Echarts/StackedPieChart3D.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="three" style="width: 65%;height: 300px;"></div>
-  
+
 </template>
 
 <script>
@@ -20,12 +20,12 @@ export default {
     props:["IntionList"],
 
   name: "StackedPieChart3D",
-  
+
   data() {
       return {
         greenIntionList:{},
           pie3dChart: null,
-          index: 0, 
+          index: 0,
           colorsCopy: ['#14B852', '#6063AE', '#F9DE64', '#AF68E6', '#bee5fb', '#2B8EF3'],
           devDistribution: [
               {
@@ -38,27 +38,34 @@ export default {
               },
               {
                   "name": "常规电能",
-                  "value":20,
+                  "value":0,
                   "percent": 22.2,
                   "id": 1,
-                  "y": 20,
+                  "y": 0,
                   "h": 27
               }
           ]
       }
   },
-  
+
   mounted() {
      //绿电比例
      this.greenElectricity();
-      this.pie3d()
+     this.pie3d()
   },
   methods: {
        //绿电比例
      greenElectricity() {
             greenElectricity(this.$props.appOrg).then((res) => {
         if (Number(res.code) === 200) {
-          this.greenIntionList=res.data; 
+          this.greenIntionList=res.data;
+
+        //   this.devDistribution[0].value=res.data.grennEnergy
+        //   this.devDistribution[0].y=res.data.grennEnergy
+        //   this.devDistribution[1].value=res.data.publicEnergy
+        //   this.devDistribution[1].y=res.data.publicEnergy
+        //   this.pie3d()
+
         }
       });
     },
@@ -151,7 +158,7 @@ export default {
               credits: {
                   enabled: false, //不显示LOGO
               },
-              tooltip: { 
+              tooltip: {
                   backgroundColor: "#0A1F4C88",
                   borderColor: "#0A1F4C88",
                   style: {                      // 文字内容相关样式
@@ -203,7 +210,7 @@ export default {
               let points = self.pie3dChart.series[0].points
               points.forEach((e) => {
                   e.graphic.attr({
-                      translateY: -e.shapeArgs.ran, 
+                      translateY: -e.shapeArgs.ran,
                   })
                   e.graphic.side1.attr({
                       translateY: -e.shapeArgs.ran,

src/components/Echarts/cylinderChart.vue

@@ -0,0 +1,177 @@
+<template>
+    <div :class="className" :style="{height:height,width:width}" />
+  </template>
+  
+  <script>
+  import echarts from 'echarts'
+  
+  require('echarts/theme/macarons') // echarts theme
+  import resize from './mixins/resize'
+  
+  
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '290px'
+      },
+      chartData: {
+        type: Array,
+        required: true
+      },
+      legend: {
+        type: Object,
+        // eslint-disable-next-line vue/require-valid-default-prop
+        default(){
+          return {
+            right: 20,
+            top: 0,
+            itemWidth: 8, // 设置图例标记的宽度
+            itemHeight: 8, // 设置图例标记的高度
+            textStyle:{
+              color:'#FFF',
+            }
+          }
+        },
+      },
+      grid: {
+        type: Object,
+        // eslint-disable-next-line vue/require-valid-default-prop
+        default(){
+          return {
+            top: 30,
+            left: '2%',
+            right: '2%',
+            bottom: '3%',
+            containLabel: true
+          }
+        },
+      },
+      xAxis: {
+        type: Object,
+        // eslint-disable-next-line vue/require-valid-default-prop
+        default(){
+          return {
+  
+          }
+        }
+      },
+  
+      yColor:{
+        type:String,
+        default:'#FFF'
+      },
+      lColor:{
+        type:String,
+        default:'#333'
+      },
+      showDataZoom:{
+        type:Boolean,
+        default:false
+      },
+      position: {
+        type: String,
+        default: "right",
+      },
+      yAxis: {
+        type: Object,
+        default(){
+          return {
+              type: 'value',
+              axisTick: {
+                show: false
+              },
+              axisLabel: {
+                formatter: '{value}',
+                color:'#FFF'
+              },
+              axisLine: {
+                  show: false // 这里设置为false即可去掉Y轴线
+              },
+              splitLine:{
+                  show:false
+              },
+              splitArea:false
+            }
+        }
+      },
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    watch: {
+      chartData: {
+        deep: true,
+        handler(val) {
+          this.initChart(val)
+        }
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initChart(this.chartData)
+      })
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart(data) {
+        var that = this;
+        this.chart = echarts.init(this.$el, 'macarons')
+        this.chart.setOption({
+          title: {
+            text: '',
+            left: 'right',
+            top: 20
+          },
+          animation: true,
+          tooltip: {
+            show: true
+          },
+          grid: this.grid,
+          xAxis: this.xAxis,
+          yAxis: this.yAxis,
+          legend: this.legend,
+          dataZoom: [{
+            type: 'slider', // 滑动条
+            show: this.showDataZoom, // 开启
+            xAxisIndex: [0],
+            left: '50px', // 滑动条位置
+            bottom: '0px'
+          }, // X轴内置滑动
+          {
+            type: 'inside', // 内置滑动，随鼠标滚轮展示
+            xAxisIndex: [0],
+          }],
+          series: this.chartData
+        })
+        //点击事件
+        this.chart.on('click',function(params){
+          if (params.componentType === 'series') {
+            var dataIndex = params.dataIndex;
+            that.$emit('clickBar',dataIndex)
+            // 在这里处理点击事件
+            // 例如：弹出框显示更多信息等
+          }
+        })
+      }
+    }
+  }
+  </script>
+  

src/views/screen/building/cameraData.vue

@@ -394,16 +394,22 @@ export default {
           //  background: url("../../../../assets/images/main/menu_chooe.png") no-repeat;
         }
   }
-      //左边菜单
+            //左边菜单
+            .rightList1:after {
+              content: '';
+              width: 33%;
+            }
       .rightList1{
       display: flex;
       flex-wrap: wrap;
       padding: 10px 0px 0px 0px;
       justify-content: space-between;
+
       .left-list{
           display: flex;
           align-items: center;
           margin-bottom: 15px;
+
           img{
             display: block;
             width:42px;

src/views/screen/building/cameraDataDialog.vue

@@ -191,20 +191,83 @@
               <div class="content-title">
                 <span class="title">定额指标</span>
               </div>
-              <div class="content-Image"></div>
-              <!-- <div class="charts-cont"> 
+              <!-- <div class="content-Image"></div> -->
+               <div class="pedestrianBox">
+                  <div class="docWs">
+                    <div class="yinBor"></div>
+                    <div style="margin-left: 8px;">引导值</div>
+                  </div>
+                  <div class="docWs1">
+                    <div class="jiBOX"></div>
+                    <div style="margin-left: 8px;">基准值</div>
+                  </div>
+                  <div class="docWs2">
+                    <div class="yuBox"></div>
+                    <div style="margin-left: 8px;">约束值</div>
+                  </div>
+                  <div class="docWs3">
+                    <div class="shiBox"></div>
+                    <div style="margin-left: 8px;">实际进度</div>
+                  </div>
+               </div>
+              <div class="charts-cont"> 
                 <bar-chart
-                   :chart-data="buildingAreaBarData"
-                   :x-axis="buildingAreaBarAxis"
-                   :yAxis="buildingAreaBarYaxis"
-                   :legend="buildingAreaBarLegend"
-                   :grid="barGrid"
-                    y-color="#FFF"
-                    l-color="#FFF"
-                    width="520px"
-                    height="140px"
+                :chart-data="pedestrianFlowBarData"
+                :x-axis="pedestrianFlowBarAxis"
+                :y-axis="pedestrianFlowBarYaxis"
+                y-color="#FFF"
+                l-color="#FFF"
+                width="515px"
+                height="70px"
+                      />
+                </div> 
+                <bar-chart
+                :chart-data="waterFlowBarData"
+                :x-axis="waterFlowBarAxis"
+                :y-axis="waterFlowBarYaxis"
+                y-color="#FFF"
+                l-color="#FFF"
+                width="515px"
+                height="70px"
                       />
-                </div>   -->
+                <bar-chart
+                :chart-data="comprehensiveFlowBarData"
+                :x-axis="comprehensiveFlowBarAxis"
+                :y-axis="comprehensiveFlowBarYaxis"
+                y-color="#FFF"
+                l-color="#FFF"
+                width="515px"
+                height="70px"
+                      /> 
+                <bar-chart
+                :chart-data="perCapitaFlowBarData"
+                :x-axis="perCapitaFlowBarAxis"
+                :y-axis="perCapitaFlowBarYaxis"
+                y-color="#FFF"
+                l-color="#FFF"
+                width="515px"
+                height="70px"
+                      />
+                <bar-chart
+                :chart-data="powerFlowBarData"
+                :x-axis="powerFlowBarAxis"
+                :y-axis="powerFlowBarYaxis"
+                y-color="#FFF"
+                l-color="#FFF"
+                width="515px"
+                height="70px"
+                      />                         
+                 <bar-chart
+                :chart-data="exhaustFlowBarData"
+                :x-axis="exhaustFlowBarAxis"
+                :y-axis="exhaustFlowBarYaxis"
+                y-color="#FFF"
+                l-color="#FFF"
+                width="515px"
+                height="70px"
+                      />  
+                
+                
             </div>
           </div>
   
@@ -505,7 +568,7 @@
   import echarts from "echarts";
   import 'echarts-gl';
   import {
-    powerAndWaterMonth,airOverview,useElectricity,carbon,energyYear,powerYear,waterYear,greenElectricity
+    powerAndWaterMonth,airOverview,getTarget,useElectricity,carbon,energyYear,powerYear,waterYear,greenElectricity
   } from "@/api/screen/service";
   
   export default {
@@ -549,6 +612,30 @@
           },
         },
         greenIntionList:{},
+        //单位建筑面积电耗
+      pedestrianFlowBarData: [],
+      pedestrianFlowBarAxis: {},
+      pedestrianFlowBarYaxis: {},
+        //单位建筑面积水耗
+        waterFlowBarData: [],
+        waterFlowBarAxis: {},
+        waterFlowBarYaxis: {},
+        //单位建筑面积综合能耗
+        comprehensiveFlowBarData: [],
+        comprehensiveFlowBarAxis: {},
+        comprehensiveFlowBarYaxis: {},
+        //人均水耗
+        perCapitaFlowBarData: [],
+        perCapitaFlowBarAxis: {},
+        perCapitaFlowBarYaxis: {},
+        //人均电耗
+        powerFlowBarData: [],
+        powerFlowBarAxis: {},
+        powerFlowBarYaxis: {},
+        //人均综合能耗
+        exhaustFlowBarData: [],
+        exhaustFlowBarAxis: {},
+        exhaustFlowBarYaxis: {},
         // 碳排放量月度变化趋势图
         lineData: [],
         // 年度累计综合能耗
@@ -695,102 +782,7 @@
         },
         splitArea:false
       },
-      buildingAreaBarData: [
-        {
-          name: "",
-          type: "bar",
-          stack: "a",
-          itemStyle: {
-            color: "#9E6539",
-            borderWidth: 3,
-            borderColor: "#94380E",
-            //barBorderRadius: [0, 0, 0, 0], // 统一设置四个角的圆角大小
-          },
-          barWidth:20,
-          data: [10, 30, 30],
-        },
-        {
-              name: "",
-              type: "bar",
-              stack: "a",
-              itemStyle: {
-                color: "#3375A2",
-                borderWidth: 3,
-                borderColor: "#4999D0",
-                //barBorderRadius: [5, 5, 0, 0], // 统一设置四个角的圆角大小
-              },
-              barWidth: 20,
-              data: [18,50,20],
-            },
-            {
-              name: "",
-              type: "bar",
-              stack: "a",
-              itemStyle: {
-                color: "#0D5F4B",
-                borderWidth: 3,
-                borderColor: "#00B179",
-                //barBorderRadius: [5, 5, 0, 0], // 统一设置四个角的圆角大小
-              },
-              barWidth: 20,
-              data: [15,80,40],
-            },
-            {
-              name: "约束值",
-              type: "bar",
-              symbolOffset: [40, 0],
-              stack: "b",
-              itemStyle: {
-                color: "#FBF43F",
-                borderWidth: 3,
-                borderColor: "#FBF43F",
-                //barBorderRadius: [5, 5, 0, 0], // 统一设置四个角的圆角大小
-              },
-              barWidth: 2,
-              data: [13,20,25],
-            },
-        
-      ],
-      buildingAreaBarYaxis: {
-        type: "category",
-        data: [],
-        axisLabel: {
-          color: "white", // 设置横坐标轴字体颜色为红色
-        },
-        axisLine: {
-          show: false,
-        },
-        axisTick: {
-          show: false,
-        },
-        splitArea: false,
-      },
-      buildingAreaBarAxis: {
-        type: "value",
-        boundaryGap: [0, 0.01],
-        name: "",
-        nameTextStyle: {
-          color: "#fff",
-        },
-        axisLine: {
-          lineStyle: {
-            color: "#465A64",
-          },
-        },
-        axisLabel: {
-          color: "white", // 设置横坐标轴字体颜色为红色
-        },
-        splitLine: {
-          show: false,
-        },
-        axisTick: {
-          show: false,
-        },
-        splitArea: false,
-      },
-      buildingAreaBarLegend: {
-        show: false,
-      },
+
       barGrid: {
         top: 10,
         left: "2%",
@@ -807,6 +799,8 @@
       this.powerAndWaterMonth();
       //空气概况
       this.airOverview();
+        //单位建筑面积电耗
+    this.getTarget();
       //用电分项
       this.useElectricity();
       // 碳排放量月度变化趋势图
@@ -841,6 +835,706 @@
         }
       });
     },
+   
+        //单位建筑面积电耗
+        getTarget() {
+          getTarget(this.$props.appOrg).then((res) => {
+        if (Number(res.code) === 200) {
+          this.pedestrianFlowBarData = [
+            {
+              name: '',
+              type: "bar",
+              stack: "a",
+             
+              itemStyle: {
+                color: '#2C5466',
+                borderColor: '#2D82B6', // 边框颜色
+                borderWidth: 2,
+                borderType: 'solid',
+              },
+              barWidth: 30,
+              data: [res.data[0].guideValue],
+            },
+            {
+              name: '',
+              type: "bar",
+              stack: "a",
+              itemStyle: {
+                color: '#754F38',
+                borderColor: '#A54110', // 边框颜色
+                
+                borderWidth: 2,
+                borderType: 'solid',
+              },
+              barWidth: 30,
+              data: [res.data[0].tieValue],
+            },
+            {
+              name: '',
+              type: "bar",
+              stack: "a",
+              itemStyle: {
+                color: '#4B532A',
+                borderColor: '#9D8B3A', // 边框颜色
+                borderWidth: 2,
+                borderType: 'solid',
+              },
+              barWidth: 30,
+              data: [res.data[0].datumValue],
+            },
+            {
+              name: '',
+              type: "bar",
+              stack: "b",
+              barGap:"-85%",
+              itemStyle: {
+                color: '#00F0FF',
+              },
+              barWidth: 2,
+              data: [res.data[0].value],
+            },
+          ];
+          this.pedestrianFlowBarYaxis = [
+            {
+              type: "category",
+              data: ["单位建筑面积电耗(kW·h/m²)"],
+              axisLabel: {
+                show: true,
+                inside: true,
+                interval: 0,
+                splitNumber: 50,
+                textStyle: {
+                  color: '#ffffff',
+                  verticalAlign: 'bottom',
+                  fontSize: 16,
+                  align: 'left',
+                  padding: [0, 0, 20, -5]
+                }
+              },
+            axisLine: {
+            show: false
+          },
+          // 去除刻度线
+          axisTick: {
+            show: false
+          }
+          },
+          {
+            type: "category",
+            data: [res.data[0].value],
+            axisLabel: {
+              show: true,
+              inside: true,
+              interval: 0,
+              splitNumber: 50,
+              textStyle: {
+                color: '#00F0FF',
+                verticalAlign: 'bottom',
+                fontSize: 16,
+                align: 'right',
+                padding: [0, 0, 20, -5]
+         }
+       },
+            axisLine: {
+            show: false
+          },
+          // 去除刻度线
+          axisTick: {
+            show: false
+          }
+          },
+     ] 
+          
+          this.pedestrianFlowBarAxis = {
+            max: res.data[0].total,// 设置最大值是多少
+            splitNumber: 3,// 设置分几段显示
+            type: 'value',
+          show: false,
+          
+          minorSplitLine: {
+            show: false
+          }
+          };
+          //单位建筑面积水耗 
+          this.waterFlowBarData = [
+            {
+              name: '',
+              type: "bar",
+              stack: "a",
+             
+              itemStyle: {
+                color: '#2C5466',
+                borderColor: '#2D82B6', // 边框颜色
+                borderWidth: 2,
+                borderType: 'solid',
+              },
+              barWidth: 30,
+              data: [res.data[1].guideValue],
+            },
+            {
+              name: '',
+              type: "bar",
+              stack: "a",
+              itemStyle: {
+                color: '#754F38',
+                borderColor: '#A54110', // 边框颜色
+                
+                borderWidth: 2,
+                borderType: 'solid',
+              },
+              barWidth: 30,
+              data: [res.data[1].tieValue],
+            },
+            {
+              name: '',
+              type: "bar",
+              stack: "a",
+              itemStyle: {
+                color: '#4B532A',
+                borderColor: '#9D8B3A', // 边框颜色
+                borderWidth: 2,
+                borderType: 'solid',
+              },
+              barWidth: 30,
+              data: [res.data[1].datumValue],
+            },
+            {
+              name: '',
+              type: "bar",
+              stack: "b",
+              barGap:"-85%",
+              itemStyle: {
+                color: '#00F0FF',
+              },
+              barWidth: 2,
+              data: [res.data[1].value],
+            },
+          ];
+          this.waterFlowBarYaxis = [
+            {
+              type: "category",
+              data: ["单位建筑面积水耗(kW·h/m²)"],
+              axisLabel: {
+                show: true,
+                inside: true,
+                interval: 0,
+                splitNumber: 50,
+                textStyle: {
+                  color: '#ffffff',
+                  verticalAlign: 'bottom',
+                  fontSize: 16,
+                  align: 'left',
+                  padding: [0, 0, 20, -5]
+                }
+              },
+            axisLine: {
+            show: false
+          },
+          // 去除刻度线
+          axisTick: {
+            show: false
+          }
+          },
+          {
+            type: "category",
+            data: [res.data[1].value],
+            axisLabel: {
+              show: true,
+              inside: true,
+              interval: 0,
+              splitNumber: 50,
+              textStyle: {
+                color: '#00F0FF',
+                verticalAlign: 'bottom',
+                fontSize: 16,
+                align: 'right',
+                padding: [0, 0, 20, -5]
+         }
+       },
+            axisLine: {
+            show: false
+          },
+          // 去除刻度线
+          axisTick: {
+            show: false
+          }
+          },
+     ]        
+          this.waterFlowBarAxis = {
+            max: res.data[1].total,// 设置最大值是多少
+            splitNumber: 3,// 设置分几段显示
+            type: 'value',
+          show: false,
+          
+          minorSplitLine: {
+            show: false
+          }
+          };
+          //单位建筑面积综合能耗
+          this.comprehensiveFlowBarData = [
+            {
+              name: '',
+              type: "bar",
+              stack: "a",
+             
+              itemStyle: {
+                color: '#2C5466',
+                borderColor: '#2D82B6', // 边框颜色
+                borderWidth: 2,
+                borderType: 'solid',
+              },
+              barWidth: 30,
+              data: [res.data[2].guideValue],
+            },
+            {
+              name: '',
+              type: "bar",
+              stack: "a",
+              itemStyle: {
+                color: '#754F38',
+                borderColor: '#A54110', // 边框颜色
+                
+                borderWidth: 2,
+                borderType: 'solid',
+              },
+              barWidth: 30,
+              data: [res.data[2].tieValue],
+            },
+            {
+              name: '',
+              type: "bar",
+              stack: "a",
+              itemStyle: {
+                color: '#4B532A',
+                borderColor: '#9D8B3A', // 边框颜色
+                borderWidth: 2,
+                borderType: 'solid',
+              },
+              barWidth: 30,
+              data: [res.data[2].datumValue],
+            },
+            {
+              name: '',
+              type: "bar",
+              stack: "b",
+              barGap:"-85%",
+              itemStyle: {
+                color: '#00F0FF',
+              },
+              barWidth: 2,
+              data: [res.data[2].value],
+            },
+          ];
+          this.comprehensiveFlowBarYaxis = [
+            {
+              type: "category",
+              data: ["单位建筑面积综合能耗(kW·h/m²)"],
+              axisLabel: {
+                show: true,
+                inside: true,
+                interval: 0,
+                splitNumber: 50,
+                textStyle: {
+                  color: '#ffffff',
+                  verticalAlign: 'bottom',
+                  fontSize: 16,
+                  align: 'left',
+                  padding: [0, 0, 20, -5]
+                }
+              },
+            axisLine: {
+            show: false
+          },
+          // 去除刻度线
+          axisTick: {
+            show: false
+          }
+          },
+          {
+            type: "category",
+            data: [res.data[2].value],
+            axisLabel: {
+              show: true,
+              inside: true,
+              interval: 0,
+              splitNumber: 50,
+              textStyle: {
+                color: '#00F0FF',
+                verticalAlign: 'bottom',
+                fontSize: 16,
+                align: 'right',
+                padding: [0, 0, 20, -5]
+         }
+       },
+            axisLine: {
+            show: false
+          },
+          // 去除刻度线
+          axisTick: {
+            show: false
+          }
+          },
+     ]        
+          this.comprehensiveFlowBarAxis = {
+            max: res.data[2].total,// 设置最大值是多少
+            splitNumber: 3,// 设置分几段显示
+            type: 'value',
+          show: false,
+          
+          minorSplitLine: {
+            show: false
+          }
+          };
+           //人均水耗
+           this.perCapitaFlowBarData = [
+            {
+              name: '',
+              type: "bar",
+              stack: "a",
+             
+              itemStyle: {
+                color: '#2C5466',
+                borderColor: '#2D82B6', // 边框颜色
+                borderWidth: 2,
+                borderType: 'solid',
+              },
+              barWidth: 30,
+              data: [res.data[4].guideValue],
+            },
+            {
+              name: '',
+              type: "bar",
+              stack: "a",
+              itemStyle: {
+                color: '#754F38',
+                borderColor: '#A54110', // 边框颜色
+                
+                borderWidth: 2,
+                borderType: 'solid',
+              },
+              barWidth: 30,
+              data: [res.data[4].tieValue],
+            },
+            {
+              name: '',
+              type: "bar",
+              stack: "a",
+              itemStyle: {
+                color: '#4B532A',
+                borderColor: '#9D8B3A', // 边框颜色
+                borderWidth: 2,
+                borderType: 'solid',
+              },
+              barWidth: 30,
+              data: [res.data[4].datumValue],
+            },
+            {
+              name: '',
+              type: "bar",
+              stack: "b",
+              barGap:"-85%",
+              itemStyle: {
+                color: '#00F0FF',
+              },
+              barWidth: 2,
+              data: [res.data[4].value],
+            },
+          ];
+          this.perCapitaFlowBarYaxis = [
+            {
+              type: "category",
+              data: ["人均水耗(kW·h/m²)"],
+              axisLabel: {
+                show: true,
+                inside: true,
+                interval: 0,
+                splitNumber: 50,
+                textStyle: {
+                  color: '#ffffff',
+                  verticalAlign: 'bottom',
+                  fontSize: 16,
+                  align: 'left',
+                  padding: [0, 0, 20, -5]
+                }
+              },
+            axisLine: {
+            show: false
+          },
+          // 去除刻度线
+          axisTick: {
+            show: false
+          }
+          },
+          {
+            type: "category",
+            data: [res.data[4].value],
+            axisLabel: {
+              show: true,
+              inside: true,
+              interval: 0,
+              splitNumber: 50,
+              textStyle: {
+                color: '#00F0FF',
+                verticalAlign: 'bottom',
+                fontSize: 16,
+                align: 'right',
+                padding: [0, 0, 20, -5]
+         }
+       },
+            axisLine: {
+            show: false
+          },
+          // 去除刻度线
+          axisTick: {
+            show: false
+          }
+          },
+       ]        
+        this.perCapitaFlowBarAxis = {
+          max: res.data[4].total,// 设置最大值是多少
+          splitNumber: 3,// 设置分几段显示
+          type: 'value',
+          show: false,
+          
+          minorSplitLine: {
+            show: false
+          }
+          };
+           //人均电耗
+           this.powerFlowBarData = [
+            {
+              name: '',
+              type: "bar",
+              stack: "a",
+             
+              itemStyle: {
+                color: '#2C5466',
+                borderColor: '#2D82B6', // 边框颜色
+                borderWidth: 2,
+                borderType: 'solid',
+              },
+              barWidth: 30,
+              data: [res.data[3].guideValue],
+            },
+            {
+              name: '',
+              type: "bar",
+              stack: "a",
+              itemStyle: {
+                color: '#754F38',
+                borderColor: '#A54110', // 边框颜色
+                
+                borderWidth: 2,
+                borderType: 'solid',
+              },
+              barWidth: 30,
+              data: [res.data[3].tieValue],
+            },
+            {
+              name: '',
+              type: "bar",
+              stack: "a",
+              itemStyle: {
+                color: '#4B532A',
+                borderColor: '#9D8B3A', // 边框颜色
+                borderWidth: 2,
+                borderType: 'solid',
+              },
+              barWidth: 30,
+              data: [res.data[3].datumValue],
+            },
+            {
+              name: '',
+              type: "bar",
+              stack: "b",
+              barGap:"-85%",
+              itemStyle: {
+                color: '#00F0FF',
+              },
+              barWidth: 2,
+              data: [res.data[3].value],
+            },
+          ];
+          this.powerFlowBarYaxis = [
+            {
+              type: "category",
+              data: ["人均电耗(kW·h/m²)"],
+              axisLabel: {
+                show: true,
+                inside: true,
+                interval: 0,
+                splitNumber: 50,
+                textStyle: {
+                  color: '#ffffff',
+                  verticalAlign: 'bottom',
+                  fontSize: 16,
+                  align: 'left',
+                  padding: [0, 0, 20, -5]
+                }
+              },
+            axisLine: {
+            show: false
+          },
+          // 去除刻度线
+          axisTick: {
+            show: false
+          }
+          },
+          {
+            type: "category",
+            data: [res.data[3].value],
+            axisLabel: {
+              show: true,
+              inside: true,
+              interval: 0,
+              splitNumber: 50,
+              textStyle: {
+                color: '#00F0FF',
+                verticalAlign: 'bottom',
+                fontSize: 16,
+                align: 'right',
+                padding: [0, 0, 20, -5]
+         }
+       },
+            axisLine: {
+            show: false
+          },
+          // 去除刻度线
+          axisTick: {
+            show: false
+          }
+          },
+       ]        
+        this.powerFlowBarAxis = {
+          max: res.data[3].total,// 设置最大值是多少
+          splitNumber: 3,// 设置分几段显示
+          type: 'value',
+          show: false,
+          
+          minorSplitLine: {
+            show: false
+          }
+          };
+           //人均综合能耗
+           this.exhaustFlowBarData = [
+            {
+              name: '',
+              type: "bar",
+              stack: "a",
+             
+              itemStyle: {
+                color: '#2C5466',
+                borderColor: '#2D82B6', // 边框颜色
+                borderWidth: 2,
+                borderType: 'solid',
+              },
+              barWidth: 30,
+              data: [res.data[5].guideValue],
+            },
+            {
+              name: '',
+              type: "bar",
+              stack: "a",
+              itemStyle: {
+                color: '#754F38',
+                borderColor: '#A54110', // 边框颜色
+                
+                borderWidth: 2,
+                borderType: 'solid',
+              },
+              barWidth: 30,
+              data: [res.data[5].tieValue],
+            },
+            {
+              name: '',
+              type: "bar",
+              stack: "a",
+              itemStyle: {
+                color: '#4B532A',
+                borderColor: '#9D8B3A', // 边框颜色
+                borderWidth: 2,
+                borderType: 'solid',
+              },
+              barWidth: 30,
+              data: [res.data[5].datumValue],
+            },
+            {
+              name: '',
+              type: "bar",
+              stack: "b",
+              barGap:"-85%",
+              itemStyle: {
+                color: '#00F0FF',
+              },
+              barWidth: 2,
+              data: [res.data[5].value],
+            },
+          ];
+          this.exhaustFlowBarYaxis = [
+            {
+              type: "category",
+              data: ["人均综合能耗(kW·h/m²)"],
+              axisLabel: {
+                show: true,
+                inside: true,
+                interval: 0,
+                splitNumber: 50,
+                textStyle: {
+                  color: '#ffffff',
+                  verticalAlign: 'bottom',
+                  fontSize: 16,
+                  align: 'left',
+                  padding: [0, 0, 20, -5]
+                }
+              },
+            axisLine: {
+            show: false
+          },
+          // 去除刻度线
+          axisTick: {
+            show: false
+          }
+          },
+          {
+            type: "category",
+            data: [res.data[5].value],
+            axisLabel: {
+              show: true,
+              inside: true,
+              interval: 0,
+              splitNumber: 50,
+              textStyle: {
+                color: '#00F0FF',
+                verticalAlign: 'bottom',
+                fontSize: 16,
+                align: 'right',
+                padding: [0, 0, 20, -5]
+         }
+       },
+            axisLine: {
+            show: false
+          },
+          // 去除刻度线
+          axisTick: {
+            show: false
+          }
+          },
+       ]        
+        this.exhaustFlowBarAxis = {
+          max: res.data[5].total,// 设置最大值是多少
+          splitNumber: 3,// 设置分几段显示
+          type: 'value',
+          show: false,
+          
+          minorSplitLine: {
+            show: false
+          }
+          };
+        } else {
+
+        }
+      });
+    },
 
     
     //办公用电分项
@@ -2013,6 +2707,54 @@
           //  background: url("../../../../assets/images/main/menu_chooe.png") no-repeat;
         }
   }
+  .pedestrianBox{
+    display: flex;
+    color: #ffffff;
+    cursor: pointer;
+    margin: 15px 0 10px 9px;
+    .docWs{
+      display: flex;
+    align-items: center;
+    .yinBor{
+      width: 15px;
+    height: 15px;
+    background: #2C5466;
+    border: 2px solid #2D82B6;
+    }
+    }
+    .docWs1{
+      display: flex;
+    align-items: center;
+    margin-left: 25px;
+    .jiBOX{
+      width: 15px;
+    height: 15px;
+    background: #754F38;
+    border: 2px solid #A54110;
+    }
+    }
+    .docWs2{
+      display: flex;
+    align-items: center;
+    margin-left: 25px;
+    .yuBox{
+      width: 15px;
+    height: 15px;
+    background: #4B532A;
+    border: 2px solid #9D8B3A;
+    }
+    }
+    .docWs3{
+      display: flex;
+    align-items: center;
+    margin-left: 25px;
+    .shiBox{
+      width: 15px;
+    height: 3px;
+    background: #00f0ff;
+    }
+    }
+  }
     .table-cont .fir {
       width: 20%;
       text-align: left;

src/views/screen/building/energyRateDialog.vue

@@ -215,7 +215,8 @@
                     </transition>
 
                   </div>
-                  <div class="num" @click="abnormalClick(1)" @mouseenter="macShow = true">48<span class="unit">kWh</span></div>
+                  <div class="num" @click="abnormalClick(1)" @mouseenter="macShow = true">48<span
+                      class="unit">kWh</span></div>
                 </div>
               </div>
             </div>
@@ -494,14 +495,22 @@
                       <span class="title">23层生活水箱、消防水箱</span>
                     </div>
                     <!-- 水箱 -->
-                    <div class="leftTank"></div>
+                    <!-- <div class="leftTank"></div> -->
+                    <div class="content">
+                      <cylinder-Chart :chart-data="waterData" :x-axis="waterAxis" :yAxis="waterYAxis" y-color="#FFF"
+                        l-color="#FFF" width="100%" height="200px" />
+                    </div>
                   </div>
                   <div class="ocBox">
                     <div class="water-cont">
-                      <span class="title">负二层生活水箱</span>
+                       <span class="title">负二层生活水箱</span>
                     </div>
                     <!-- 水箱 -->
-                    <div class="rightTank"></div>
+                    <!-- <div class="rightTank"></div> -->
+                    <div class="content">
+                      <cylinder-Chart :chart-data="fireData" :x-axis="fireAxis" :yAxis="fireYAxis" y-color="#FFF"
+                        l-color="#FFF" width="100%" height="200px" />
+                    </div>
                   </div>
                 </div>
 
@@ -520,6 +529,7 @@
 import LineChart from "@/components/Echarts/LineChart";
 import PieChart from "@/components/Echarts/PieChart";
 import BarChart from "@/components/Echarts/BarChart.vue";
+import CylinderChart from "@/components/Echarts/cylinderChart.vue";
 import echarts from "echarts";
 import {
 
@@ -534,6 +544,7 @@ export default {
     BarChart,
     PieChart,
     LineChart,
+    CylinderChart
   },
   props: {
     appOrg: {
@@ -543,6 +554,10 @@ export default {
   },
   data() {
     return {
+      xData2: ['柴油存储', '汽油存储'],
+      data1: [40, 50],
+      data2: [100, 100],
+      barWidth: 100,
       macShow: false,
       lineLegend: {
         top: 0,
@@ -554,13 +569,22 @@ export default {
           color: "#FFF",
         },
       },
+      // 二十三层生活水箱丶消防水箱
+      waterData: [],
+      waterAxis: {},
+      waterYAxis: {},
+      // 负二层生活水箱丶消防水箱
+        // 二十三层生活水箱丶消防水箱
+      fireData: [],
+      fireAxis: {},
+      fireYAxis: {},
       //楼宇每月用电量
       yearLineData: [],
       //楼宇今日总用电量
       buildLineData: [],
       //告警事件的历史统计
       giveLineData: [],
-      //配电室重要抽屉负荷情况
+      //配电室重要回路负荷情况
       barData: [],
       barAxis: {},
       barYAxis: {},
@@ -640,6 +664,7 @@ export default {
     };
   },
   created() {
+
     //楼宇每月用电量
     this.handleYearData()
 
@@ -649,7 +674,10 @@ export default {
     this.handleBar();
     //告警事件的历史统计
     this.handleAlarmData()
-
+    //23层水箱
+    this.handleWaterData()
+     //23层水箱
+     this.handleFireData()
     //月用电量信息
     this.powerForMonth();
     //资源信息
@@ -661,6 +689,758 @@ export default {
 
   },
   methods: {
+    // 二十三层生活水箱丶消防水箱
+    handleWaterData() {
+      this.waterData = [
+        //三个最底下的圆片
+        {
+          name: '',
+          zlevel: 1,
+          type: 'pictorialBar',
+          symbolSize: [60, 25], //圆环宽度
+          symbolOffset: [0, 10],
+          z: 12,
+          itemStyle: {
+            opacity: 1,
+            color: function (params) {
+              var a = params.name.slice(0, 2);
+              if (a === '生活') {
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: '#1893BF' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#1893BF' // 100% 处的颜色
+                    }
+                  ],
+                  false
+                );
+              } else if (a === '消防') {
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: '#CCC147' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#CCC147' // 100% 处的颜色
+                    }
+                  ],
+                  false
+                );
+              }
+            }
+          },
+          tooltip: {
+            show: false
+          },
+          data: [1, 1, 1, 1, 1]
+        },
+
+        //下半截柱状图(中间部分)
+        {
+          name: '',
+          type: 'bar',
+          barWidth: 60,
+          zlevel: 1,
+          barGap: '-100%',
+
+          itemStyle: {
+            //lenged文本
+            opacity: 1,
+            color: function (params) {
+              var a = params.name.slice(0, 2);
+
+              if (a === '生活') {
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: '#1893BF' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#1893BF' // 100% 处的颜色
+                    }
+                  ],
+                  false
+                );
+              } else if (a === '消防') {
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: '#CCC147' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#CCC147' // 100% 处的颜色
+                    }
+                  ],
+                  false
+                );
+              }
+            }
+          },
+          data: [5.5, 4,]
+        },
+        //中间刻度的圆形
+        {
+          name: '', //头部
+          type: 'pictorialBar',
+          zlevel: 1,
+          symbolSize: [60, 25], //顶部刻度的圆形
+          symbolOffset: [0, -10],
+          z: 12,
+          symbolPosition: 'end',
+
+          itemStyle: {
+            color: '#D0612C',
+            opacity: 0.5,
+            borderColor: '#DF3914', // 边框颜色
+            borderWidth: 3,
+            borderType: 'dashed',
+            borderDashOffset: 1
+          },
+          tooltip: {
+            show: false
+          },
+          data: [3, 3,]
+        },
+         //中间刻度的延长线
+         {
+          name: '', //头部
+          type: 'pictorialBar',
+          zlevel: 1,
+          symbolSize: [138, 1], //顶部刻度的圆形
+          symbolOffset: [5, 0],
+          z: 12,
+          symbolPosition: 'end',
+
+          itemStyle: {
+            color: '#D0612C',
+            opacity: 0.3,
+            borderColor: '#DF3914', // 边框颜色
+            borderWidth: 1,
+            borderType: 'dashed',
+            borderDashOffset: 1
+          },
+          tooltip: {
+            show: false
+          },
+            //显示当前数值
+            label: {
+            normal: {
+              show: true,
+              position: 'top',
+              padding:[0,0,0,135], //调整左右位置
+              formatter: function (params) {
+                // 只显示第一个数据的名称
+                if (params.dataIndex === 0) {
+                    return '3M告警线'
+                } else {
+                    return ''; // 其他数据不显示名称
+                }
+            },
+              // "formatter": "{c}M告警线",
+              fontSize: 12,
+              fontWeight: 'bold',
+              color: '#DF3914'
+            }
+          },
+          symbolPosition: 'end',
+          data: [3, 3,]
+        },
+
+        //底部外面刻度的圆形
+        {
+          name: '', //头部
+          type: 'pictorialBar',
+          symbolSize: [78, 45], //顶部刻度的圆形
+          symbolOffset: [0, -25],
+          z: 12,
+          symbolPosition: 'end',
+          itemStyle: {
+            color: '#0E3A60',
+            opacity: 0.6,
+            borderColor: '#2E87DE', // 边框颜色
+            borderWidth: 3,
+            borderType: 'solid',
+
+          },
+          tooltip: {
+            show: false
+          },
+          data: [0.1, 0.1,]
+        },
+        //顶部刻度的圆形
+        {
+          name: '', //头部
+          zlevel: 1,
+          type: 'pictorialBar',
+          symbolSize: [60, 25], //顶部刻度的圆形
+          symbolOffset: [0, -10],
+          z: 12,
+          symbolPosition: 'end',
+          itemStyle: {
+            color: '#0E3A60',
+            opacity: 0.6,
+            borderColor: '#2E87DE', // 边框颜色
+            borderWidth: 3,
+            borderType: 'dashed',
+            borderDashOffset: 1
+          },
+          data: [7, 7,]
+        },
+
+        //刻度值处的圆形图标
+        {
+          name: '',
+          zlevel: 1,
+          type: 'pictorialBar',
+          symbolSize: [60, 25],
+          symbolOffset: [0, -10],
+          z: 12,
+          itemStyle: {
+            opacity: 1,
+            color: function (params) {
+              var a = params.name.slice(0, 2);
+              if (a === '生活') {
+
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: '#1893BF' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#26B3EA' // 100% 处的颜色
+
+                    }
+                  ],
+                  false
+                );
+              } else if (a === '消防') {
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: '#E1D929' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#F8EE20' // 100% 处的颜色
+                    }
+                  ],
+                  false
+                );
+              }
+            }
+          },
+          //显示当前数值
+          label: {
+            normal: {
+              show: true,
+              position: 'insideTop',
+              "formatter": "{c}M",
+              fontSize: 15,
+              fontWeight: 'bold',
+              color: '#ffffff'
+            }
+          },
+          symbolPosition: 'end',
+          data: [5.5, 4,]
+        },
+
+        //最外层柱状体宽度、颜色设置
+        {
+          name: '',
+          type: 'bar',
+          barWidth: 60,
+          barGap: '-100%',
+          z: 0,
+          itemStyle: {
+            // color: '#0A2932',
+            // 使用 linear-gradient 设置渐变色
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: '#0F3644' // 渐变色的开始颜色
+                }, {
+                    offset: 1,
+                    color: '#194972' // 渐变色的结束颜色
+                }]),
+            opacity: 0.5
+          },
+          data: [7, 7]
+        }
+
+      ];
+      this.waterAxis = {
+        data: ['生活水箱', '消防水箱'],
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          show: false
+        },
+        axisLabel: {
+          interval: 0,
+          textStyle: {
+            color: '#fff',
+            fontSize: 16
+          },
+          margin: 30 //刻度标签与轴线之间的距离。
+        }
+      };
+      this.waterYAxis = {
+
+        name: "",
+        min: 0,
+        max: 7,
+        type: 'value',
+
+        interval: 7,// 指定刻度间隔
+        nameTextStyle: {
+          color: "#fff",
+        },
+        splitArea: {
+          show: false // 这里设置为false即可去掉Y轴的背景色
+        },
+        // 坐标轴在grid区域中的分隔线
+        splitLine: {
+          show: false,
+
+        },
+        axisTick: {
+          inside: true,
+          show: true, // 显示刻度线
+          lineStyle: {
+            color: "#fff",
+            opacity: 0.5,
+          },
+
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#fff",
+            opacity: 0.5,
+          },
+        },
+        axisLabel: {
+          inside: true,
+          formatter:'{value}M',
+
+          textStyle: {
+            color: '#68CDE9',
+            fontSize: 12,
+          },
+        },
+
+      }
+    },
+     // 负二层生活水箱
+     handleFireData() {
+      this.fireData = [
+        //三个最底下的圆片
+        {
+          name: '',
+          zlevel: 1,
+          type: 'pictorialBar',
+          symbolSize: [60, 25], //圆环宽度
+          symbolOffset: [0, 10],
+          z: 12,
+          itemStyle: {
+            opacity: 1,
+            color: function (params) {
+              var a = params.name.slice(0, 5);
+              if (a === '生活水箱一') {
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: '#1893BF' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#1893BF' // 100% 处的颜色
+                    }
+                  ],
+                  false
+                );
+              } else if (a === '生活水箱二') {
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: '#1893BF' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#1893BF' // 100% 处的颜色
+                    }
+                  ],
+                  false
+                );
+              }
+            }
+          },
+          tooltip: {
+            show: false
+          },
+          data: [1, 1, 1, 1, 1]
+        },
+
+        //下半截柱状图(中间部分)
+        {
+          name: '',
+          type: 'bar',
+          barWidth: 60,
+          zlevel: 1,
+          barGap: '-100%',
+          itemStyle: {
+            //lenged文本
+            opacity: 1,
+            color: function (params) {
+              var a = params.name.slice(0, 5);
+
+              if (a === '生活水箱一') {
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: '#1893BF' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#1893BF' // 100% 处的颜色
+                    }
+                  ],
+                  false
+                );
+              } else if (a === '生活水箱二') {
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: '#1893BF' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#1893BF' // 100% 处的颜色
+                    }
+                  ],
+                  false
+                );
+              }
+            }
+          },
+          data: [4, 6,]
+        },
+        //中间刻度的圆形
+        {
+          name: '', //头部
+          type: 'pictorialBar',
+          zlevel: 1,
+          symbolSize: [60, 25], //顶部刻度的圆形
+          symbolOffset: [0, -10],
+          z: 12,
+          symbolPosition: 'end',
+          itemStyle: {
+            color: '#D0612C',
+            opacity: 0.5,
+            borderColor: '#DF3914', // 边框颜色
+            borderWidth: 3,
+            borderType: 'dashed',
+            borderDashOffset: 1
+          },
+          tooltip: {
+            show: false
+          },
+          data: [3, 3,]
+        },
+         //中间刻度的延长线
+         {
+          name: '', //头部
+          type: 'pictorialBar',
+          zlevel: 1,
+          symbolSize: [138, 1], //顶部刻度的圆形
+          symbolOffset: [5, 0],
+          z: 12,
+          symbolPosition: 'end',
+
+          itemStyle: {
+            color: '#D0612C',
+            opacity: 0.3,
+            borderColor: '#DF3914', // 边框颜色
+            borderWidth: 1,
+            borderType: 'dashed',
+            borderDashOffset: 1
+          },
+          tooltip: {
+            show: false
+          },
+            //显示当前数值
+            label: {
+            normal: {
+              show: true,
+              position: 'top',
+              padding:[0,0,0,135], //调整左右位置
+              formatter: function (params) {
+                // 只显示第一个数据的名称
+                if (params.dataIndex === 0) {
+                    return '3M告警线'
+                } else {
+                    return ''; // 其他数据不显示名称
+                }
+            },
+              // "formatter": "{c}M告警线",
+              fontSize: 12,
+              fontWeight: 'bold',
+              color: '#DF3914'
+            }
+          },
+          symbolPosition: 'end',
+          data: [3, 3,]
+        },
+
+        //底部外面刻度的圆形
+        {
+          name: '', //头部
+          type: 'pictorialBar',
+          symbolSize: [78, 45], //顶部刻度的圆形
+          symbolOffset: [0, -25],
+          z: 12,
+          symbolPosition: 'end',
+          itemStyle: {
+            color: '#0E3A60',
+            opacity: 0.6,
+            borderColor: '#2E87DE', // 边框颜色
+            borderWidth: 3,
+            borderType: 'solid',
+            borderDashOffset: 1
+          },
+          tooltip: {
+            show: false
+          },
+          data: [0.1, 0.1,]
+        },
+        //顶部刻度的圆形
+        {
+          name: '', //头部
+          zlevel: 2,
+          type: 'pictorialBar',
+          symbolSize: [60, 25], //顶部刻度的圆形
+          symbolOffset: [0, -10],
+          z: 12,
+          symbolPosition: 'end',
+          itemStyle: {
+            color: '#0E3A60',
+            opacity: 0.6,
+            borderColor: '#2E87DE', // 边框颜色
+            borderWidth: 3,
+            borderType: 'dashed',
+            borderDashOffset: 1
+          },
+          data: [7, 7,]
+        },
+
+        //刻度值处的圆形图标
+        {
+          name: '',
+          zlevel: 1,
+          type: 'pictorialBar',
+          symbolSize: [60, 25],
+          symbolOffset: [0, -10],
+          z: 12,
+          itemStyle: {
+            opacity: 1,
+            color: function (params) {
+              var a = params.name.slice(0, 5);
+              if (a === '生活水箱一') {
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: '#1893BF' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#26B3EA' // 100% 处的颜色
+                    }
+                  ],
+                  false
+                );
+              } else if (a === '生活水箱二') {
+                return new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: '#1893BF' // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#26B3EA' // 100% 处的颜色
+                    }
+                  ],
+                  false
+                );
+              }
+            }
+          },
+          //显示当前数值
+          label: {
+            normal: {
+              show: true,
+              position: 'insideTop',
+              "formatter": "{c}M",
+              fontSize: 15,
+              fontWeight: 'bold',
+              color: '#ffffff'
+            }
+          },
+          symbolPosition: 'end',
+          data: [4, 6,]
+        },
+
+        //最外层柱状体宽度、颜色设置
+        {
+          name: '',
+          type: 'bar',
+          barWidth: 60,
+          barGap: '-100%',
+          z: 0,
+          itemStyle: {
+            // color: '#0A2932',
+            // 使用 linear-gradient 设置渐变色
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                    offset: 0,
+                    color: '#0F3644' // 渐变色的开始颜色
+                }, {
+                    offset: 1,
+                    color: '#194972' // 渐变色的结束颜色
+                }]),
+            opacity: 0.5
+          },
+          data: [7, 7]
+        }
+      ];
+      this.fireAxis = {
+        data: ['生活水箱一', '生活水箱二'],
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          show: false
+        },
+        axisLabel: {
+          interval: 0,
+          textStyle: {
+            color: '#fff',
+            fontSize: 16
+          },
+          margin: 30 //刻度标签与轴线之间的距离。
+        }
+      };
+      this.fireYAxis = {
+
+        name: "",
+        min: 0,
+        max: 7,
+        type: 'value',
+
+        interval: 7,// 指定刻度间隔
+        nameTextStyle: {
+          color: "#fff",
+        },
+        splitArea: {
+          show: false // 这里设置为false即可去掉Y轴的背景色
+        },
+        // 坐标轴在grid区域中的分隔线
+        splitLine: {
+          show: false,
+
+        },
+        axisTick: {
+          inside: true,
+          show: true, // 显示刻度线
+          lineStyle: {
+            color: "#fff",
+            opacity: 0.5,
+          },
+
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#fff",
+            opacity: 0.5,
+          },
+        },
+        axisLabel: {
+          inside: true,
+          formatter:'{value}M',
+          textStyle: {
+            color: '#68CDE9',
+            fontSize: 12,
+          },
+        },
+
+      }
+    },
     //楼宇每月用电量
     handleYearData() {
       this.yearLineData = [
@@ -2050,8 +2830,7 @@ export default {
   }
 
   .fade-grow-enter,
-  .fade-grow-leave-to
-    {
+  .fade-grow-leave-to {
     opacity: 0;
     transform: scale(0);
   }

src/views/screen/building/main.vue

@@ -42,9 +42,159 @@
         alt=""
       />
       <img
-        v-if="showLocal"
+        v-if="showLocal && curBodex == 0"
         class="build"
-        src="@/assets/images/layers.png"
+        src="@/assets/images/layers23.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 1"
+        class="build"
+        src="@/assets/images/layers22.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 2"
+        class="build"
+        src="@/assets/images/layers21.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 3"
+        class="build"
+        src="@/assets/images/layers20.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 4"
+        class="build"
+        src="@/assets/images/layers19.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 5"
+        class="build"
+        src="@/assets/images/layers18.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 6"
+        class="build"
+        src="@/assets/images/layers17.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 7"
+        class="build"
+        src="@/assets/images/layers16.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 8"
+        class="build"
+        src="@/assets/images/layers15.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 9"
+        class="build"
+        src="@/assets/images/layers14.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 10"
+        class="build"
+        src="@/assets/images/layers13.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 11"
+        class="build"
+        src="@/assets/images/layers12.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 12"
+        class="build"
+        src="@/assets/images/layers11.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 13"
+        class="build"
+        src="@/assets/images/layers10.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 14"
+        class="build"
+        src="@/assets/images/layers9.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 15"
+        class="build"
+        src="@/assets/images/layers8.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 16"
+        class="build"
+        src="@/assets/images/layers7.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 17"
+        class="build"
+        src="@/assets/images/layers6.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 18"
+        class="build"
+        src="@/assets/images/layers5.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 19"
+        class="build"
+        src="@/assets/images/layers4.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 20"
+        class="build"
+        src="@/assets/images/layers3.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 21"
+        class="build"
+        src="@/assets/images/layers2.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 22"
+        class="build"
+        src="@/assets/images/layers1.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 23"
+        class="build"
+        src="@/assets/images/layers-1.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 24"
+        class="build"
+        src="@/assets/images/layers-2.png"
+        alt=""
+      />
+      <img
+        v-if="showLocal && curBodex == 25"
+        class="build"
+        src="@/assets/images/layers-3.png"
         alt=""
       />
       <!-- 楼层按钮 -->
@@ -60,7 +210,7 @@
                :class="['model1', 1 == curBodex ? 'cur' : '']"
               @click="chooseBox(1, 'showLocal')"
             >
-              22 层
+              22层
             </div>
             <div
              :class="['model1', 2 == curBodex ? 'cur' : '']"
@@ -200,6 +350,12 @@
             >
               B2层
             </div>
+            <div
+              :class="['model1', 25 == curBodex ? 'cur' : '']"
+              @click="chooseBox(25, 'showLocal')"
+            >
+              B3层
+            </div>
           </div>
        </div>
       <!-- 返回按钮 -->
@@ -429,7 +585,7 @@ export default {
       this.curBodex = index;
       this.showMap = false;
       this.showLocal = true;
-      this.leftNav=false;
+      // this.leftNav=false;
       this.showBack=true
       // this.showBox = this.Boxtabs[index].tab;
     },
@@ -482,7 +638,7 @@ export default {
       this.showBack = false;
       this.showMap = true;
       this.showLocal = false;
-      this.leftNav=true;
+      // this.leftNav=true;
       this.curBodex=30
       // this.curDeep = 1;
       // if (this.curDeep <= 1) {
@@ -663,7 +819,7 @@ export default {
       z-index: 10;
       .leftNav{
 
-             margin: 15px 0px 0px 15px;
+             margin: 10px 0px 0px 15px;
        .model1 {
           width: 65px;
           height: 32px;
@@ -725,6 +881,7 @@ export default {
       }
 
       .bottom-right {
+        margin-right: 50px;
         .back {
           width: 34px;
           height: 30px;