中建四局 -双碳管理页面图片更换

src/views/projectAdmin/fourEngin/carbon/centerBottom.vue

@@ -1,8 +1,7 @@
 <template>
   <Card title="建材碳排放">
     <div class="containerBox">
-      <img src="./image/img5.png" alt="">
+      <img src="./image/centerBottomImage.png" alt="" />
-
     </div>
   </Card>
 </template>
@@ -14,7 +13,7 @@ export default {
   components: { Card },
   data() {
     return {
-      time1:'',
+      time1: ''
     }
   },
   mounted() {
@@ -30,17 +29,17 @@ export default {
           // text: '日报表'
           // subtext: '单位：条'
         },
-         
+
         tooltip: {
           trigger: 'axis',
-          top:'20%',
+          top: '20%',
           axisPointer: {
             // 坐标轴指示器，坐标轴触发有效
             type: 'line'
             // 默认为直线，可选为：'line' | 'shadow'
           }
         },
-         grid: {
+        grid: {
           // 图表距离边框的距离，可用百分比和数字（px）配置
           top: '15%',
           left: '2%',
@@ -50,15 +49,28 @@ export default {
         },
 
         xAxis: {
-         boundaryGap: false,
+          boundaryGap: false,
           type: 'category',
           boundaryGap: false,
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+          data: [
+            '1月',
+            '2月',
+            '3月',
+            '4月',
+            '5月',
+            '6月',
+            '7月',
+            '8月',
+            '9月',
+            '10月',
+            '11月',
+            '12月'
+          ],
           axisLabel: {
             color: '#fff'
           },
           splitLine: { lineStyle: { color: '#D0FFF6', type: 'dashed' } }, //x轴
-           axisTick: {
+          axisTick: {
             show: false
           },
           axisLine: {
@@ -76,21 +88,21 @@ export default {
               color: '#fff'
             },
             //  axisLine: { show: true, lineStyle: { color: '#D0FFF6' } },
-            splitLine: { 
+            splitLine: {
-              lineStyle:{ 
+              lineStyle: {
-                color: 'rgba(255, 255, 255,0.3)', type: 'dashed'
+                color: 'rgba(255, 255, 255,0.3)',
-                 },
+                type: 'dashed'
-              }, // 除x轴的横轴
-              axisTick:{
-                show:false
-              },
-              axisLine:{
-                show:true,
-                lineStyle:{
-                  type:'dashed'
-                }
               }
-            
+            }, // 除x轴的横轴
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                type: 'dashed'
+              }
+            }
           }
         ],
         series: [
@@ -121,32 +133,32 @@ export default {
 .containerBox {
   width: 100%;
   height: 100%;
-  img{
+  img {
     width: 98%;
     height: 92%;
     margin: 13px 0 0 14px;
   }
   .DataTime {
-    cursor:pointer;
+    cursor: pointer;
     margin-top: 10px;
     margin-left: 72%;
     width: 210;
     height: 17px;
   }
   ::v-deep .el-date-editor--daterange.el-input__inner {
-    cursor:pointer;
+    cursor: pointer;
     width: 235px;
     height: 30px;
     background-color: #182337;
     border: 1px solid #264b5e;
   }
   ::v-deep .el-range-input {
-    cursor:pointer;
+    cursor: pointer;
     background-color: #182337;
     color: #6ee4f0;
   }
   ::v-deep .el-date-editor {
-    cursor:pointer;
+    cursor: pointer;
     .el-range__icon {
       line-height: 23px;
       color: #6ee4f0;

src/views/projectAdmin/fourEngin/carbon/centerTop.vue

@@ -1,7 +1,7 @@
 <template>
   <Card title="项目碳排放趋势">
     <div class="containerBox">
-      <img src="./image/imgFour.png" alt>
+      <img src="./image/centerTopImage.png" alt />
     </div>
   </Card>
 </template>
@@ -70,7 +70,7 @@ export default {
     getDevList() {
       console.log('环境下拉列表进来了吗--------')
       environmentDevList({ projectSn: this.$store.state.projectSn }).then(
-        result => {
+        (result) => {
           console.log('环境监测下拉列表', result)
           this.devList = result.result
           if (result.result.length > 0) {
@@ -100,7 +100,7 @@ export default {
         projectSn: this.projectSn,
         deviceId: this.currentDevDetail.deviceId
       }
-      selectDustNoiseDataApi(data).then(res => {
+      selectDustNoiseDataApi(data).then((res) => {
         // console.log(res)
         this.dustData_24 = res.result
         this.createdEcharts2()
@@ -111,7 +111,7 @@ export default {
       let data = {
         projectSn: this.projectSn
       }
-      selectNewEnvironmentAlarmListApi(data).then(res => {
+      selectNewEnvironmentAlarmListApi(data).then((res) => {
         if (res.code == 200) {
           this.alarmList = res.result
         }
@@ -122,14 +122,16 @@ export default {
         projectSn: this.$store.state.projectSn,
         operateType: operateType,
         deviceId: deviceId
-      }).then(res => {
+      }).then((res) => {
         this.sprayDevList = res.result
       })
     },
     getSprayDevList() {
-      sprayDevListApi({ projectSn: this.$store.state.projectSn }).then(res => {
+      sprayDevListApi({ projectSn: this.$store.state.projectSn }).then(
-        this.sprayDevList = res.result
+        (res) => {
-      })
+          this.sprayDevList = res.result
+        }
+      )
     },
     /** 查询 */
     handleQuery() {
@@ -172,7 +174,7 @@ export default {
         projectSn: this.projectSn,
         deviceId: this.currentDevDetail.deviceId
       }
-      selectDustNoiseDataApi(data).then(res => {
+      selectDustNoiseDataApi(data).then((res) => {
         // console.log(res)
         this.dustData_24 = res.result
         this.createdEcharts2()
@@ -185,7 +187,7 @@ export default {
         projectSn: this.$store.state.projectSn
       }
       console.log(data)
-      getRealTimeDustNoiseDataApi(data).then(res => {
+      getRealTimeDustNoiseDataApi(data).then((res) => {
         if (res.code == 200) {
           console.log('获取环境设备详情数据------', res.result)
           if (res.result != null) {
@@ -212,7 +214,7 @@ export default {
       })
     },
     //展示数据/视频播放切换
-    change: function(index) {
+    change: function (index) {
       console.log(111)
       this.number = index
     },

src/views/projectAdmin/fourEngin/carbon/leftCenter.vue

@@ -1,13 +1,17 @@
 <template>
   <Card title="用水用电碳排放图">
     <div class="containerBox">
-      <img src="./image/img2.png" alt="">
+      <img src="./image/leftCenterImage.png" alt="" />
     </div>
   </Card>
 </template>
 
 <script>
-import { environmentDevList, environmentAlarmList, environmentAlarmTypeList } from '@/assets/js/api/environmentManage'
+import {
+  environmentDevList,
+  environmentAlarmList,
+  environmentAlarmTypeList
+} from '@/assets/js/api/environmentManage'
 
 import Card from '../components/Card.vue'
 export default {
@@ -243,19 +247,27 @@ export default {
       this.getList()
     },
     getDevice() {
-      environmentDevList({ projectSn: this.$store.state.projectSn }).then(result => {
+      environmentDevList({ projectSn: this.$store.state.projectSn }).then(
-        if (result.success) {
+        (result) => {
-          this.deviceIdArr = result.result
+          if (result.success) {
-          console.log('get设备列表', this.deviceIdArr)
+            this.deviceIdArr = result.result
+            console.log('get设备列表', this.deviceIdArr)
+          }
         }
-      })
+      )
     },
     getList() {
       let timeObj = {
         startTime: this.time ? this.time[0] : '',
         endTime: this.time ? this.time[1] : ''
       }
-      environmentAlarmList(Object.assign(this.pagInfo, { projectSn: this.$store.state.projectSn }, timeObj)).then(result => {
+      environmentAlarmList(
+        Object.assign(
+          this.pagInfo,
+          { projectSn: this.$store.state.projectSn },
+          timeObj
+        )
+      ).then((result) => {
         if (result.success) {
           this.List = result.result.records
           this.pagInfo.total = result.result.total
@@ -264,7 +276,7 @@ export default {
       })
     },
     getEnvironmentAlarmTypeList() {
-      environmentAlarmTypeList().then(result => {
+      environmentAlarmTypeList().then((result) => {
         if (result.success) this.alarmTypeIdArr = result.result
       })
     },
@@ -295,12 +307,11 @@ export default {
 .containerBox {
   width: 103%;
   height: 320px;
-  img{
+  img {
     width: 72%;
     height: 81%;
     margin-top: 40px;
     margin-left: 73px;
-
   }
   .titleTxt {
     font-size: 18px;

src/views/projectAdmin/fourEngin/carbon/leftTop.vue

@@ -2,7 +2,7 @@
   <Card title="总碳排放">
     <!-- 环境监测 -->
     <div class="contentBox">
-      <img src="./image/img1.png" alt="">
+      <img src="./image/leftTopImage.png" alt="" />
     </div>
   </Card>
 </template>
@@ -18,7 +18,7 @@ export default {
 
 <style lang="less" scoped>
 .contentBox {
-  img{
+  img {
     width: 80%;
     height: 70%;
     margin: 30px 0 0 40px;
@@ -38,17 +38,16 @@ export default {
       margin-top: 25px;
       width: 100%;
       height: 80%;
-    }   
+    }
     .text {
-margin-left: 15px;
+      margin-left: 15px;
-     margin-top: -20px;
+      margin-top: -20px;
       width: 100%;
       height: 20%;
       text-align: center;
       .ps {
         font-size: 12px;
       }
-      
     }
   }
 }

src/views/projectAdmin/fourEngin/carbon/rightBottom.vue

@@ -1,7 +1,7 @@
 <template>
   <Card title="分区域碳排放图">
     <div class="contentBox">
-      <img src="./image/img3.png" alt="">
+      <img src="./image/leftBottomImg.png" alt="" />
     </div>
   </Card>
 </template>
@@ -9,13 +9,17 @@
 <script>
 import Card from '../components/Card.vue'
 import echarts from 'echarts4'
-import { getwaterMeterListApi, selectWaterMeterStatisticsApi, getCurrentMonthMeterRecordApi } from '@/assets/js/api/waterManage'
+import {
+  getwaterMeterListApi,
+  selectWaterMeterStatisticsApi,
+  getCurrentMonthMeterRecordApi
+} from '@/assets/js/api/waterManage'
 export default {
   components: { Card },
   data() {
     return {
       index: 1,
-      time1:'',
+      time1: '',
       show: true,
       monthWaterList: '',
       count: '',
@@ -33,11 +37,11 @@ export default {
   methods: {
     //用水/用电按钮切换
     select(i) {
-      this.index = i;
+      this.index = i
     },
-     
+
     //echart图表
-    async wEacharts() {  
+    async wEacharts() {
       const res = await getCurrentMonthMeterRecordApi(this.formInline)
       this.waterMeter = res.result.waterMeter
       if (this.waterMeter === null) {
@@ -46,12 +50,14 @@ export default {
       this.count = res.result.count
       const res2 = await selectWaterMeterStatisticsApi(this.formInline)
       this.monthWaterList = res2.result.monthWaterList
-      const res3 = await getwaterMeterListApi({ projectSn: this.$store.state.projectSn })
+      const res3 = await getwaterMeterListApi({
+        projectSn: this.$store.state.projectSn
+      })
       console.log('res3', res3)
 
       // 基于准备好的dom，初始化echarts实例
       let waterEch = echarts.init(document.getElementById('waterMain'))
-      let xData = (function() {
+      let xData = (function () {
         let data = []
         for (let i = 1; i < 13; i++) {
           data.push(i + '月')
@@ -196,7 +202,7 @@ export default {
                     color: '#fff'
                   },
                   position: 'inside',
-                  formatter: function(p) {
+                  formatter: function (p) {
                     return p.value > 0 ? p.value : ''
                   }
                 }
@@ -215,7 +221,7 @@ export default {
                 label: {
                   show: false,
                   position: 'inside',
-                  formatter: function(p) {
+                  formatter: function (p) {
                     return p.value > 0 ? p.value : ''
                   }
                 }
@@ -238,13 +244,16 @@ export default {
                 label: {
                   show: false,
                   position: 'bottom',
-                  formatter: function(p) {
+                  formatter: function (p) {
                     return p.value > 0 ? p.value : ''
                   }
                 }
               }
             },
-            data: [1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298]
+            data: [
+              1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865,
+              4298
+            ]
           }
         ]
       }
@@ -260,95 +269,93 @@ export default {
   padding-top: 20px;
   width: 100%;
   height: 100%;
-  img{
+  img {
     width: 92%;
     height: 153%;
     margin-left: 13px;
-}
   }
-  .topWater {
+}
-    width: 100%;
+.topWater {
-    height: 20%;
+  width: 100%;
-    display: flex;
+  height: 20%;
-    .waterDiv {
+  display: flex;
-      cursor:pointer;
+  .waterDiv {
-      display: inline-block;
+    cursor: pointer;
-      // margin-top: 5px;
+    display: inline-block;
-      // padding-top: 15px;
+    // margin-top: 5px;
-      width: 80px;
+    // padding-top: 15px;
-      height: 35px;
+    width: 80px;
-      text-align: center;
+    height: 35px;
-      background-image: url(../assets/images/common/bg_water.png);
+    text-align: center;
-      background-repeat: no-repeat;
+    background-image: url(../assets/images/common/bg_water.png);
-      background-size: 100%;
+    background-repeat: no-repeat;
-      font-size: 16px;
+    background-size: 100%;
-      line-height: 38px;
+    font-size: 16px;
-      margin: 0 10px 0 0;
+    line-height: 38px;
-      color: #fff;
+    margin: 0 10px 0 0;
-      font-size: 14px;
+    color: #fff;
-    }
+    font-size: 14px;
+  }
 
-    .electricDiv {
+  .electricDiv {
-      cursor:pointer;
+    cursor: pointer;
-      display: inline-block;
+    display: inline-block;
-      // margin-top: 5px;
+    // margin-top: 5px;
-      // padding-top: 15px;
+    // padding-top: 15px;
-      width: 80px;
+    width: 80px;
-      height: 35px;
+    height: 35px;
-      text-align: center;
+    text-align: center;
-      background-image: url(../assets/images/common/num_bg.png);
+    background-image: url(../assets/images/common/num_bg.png);
-      background-repeat: no-repeat;
+    background-repeat: no-repeat;
-      background-size: 100%;
+    background-size: 100%;
-      font-size: 16px;
+    font-size: 16px;
-      line-height: 38px;
+    line-height: 38px;
-      margin: 0 10px 0 0;
+    margin: 0 10px 0 0;
-      color: #fff;
+    color: #fff;
-      font-size: 14px;
+    font-size: 14px;
+  }
+  .DateTime {
+    cursor: pointer;
+    flex: 1;
+    // margin-left: 80px;
+    margin-top: 4px;
+    ::v-deep .el-date-editor--daterange.el-input__inner {
+      width: 230px;
+      height: 30px;
+      background-color: #182337;
+      border: 1px solid #264b5e;
+      margin-left: 50px;
     }
-    .DateTime {
+    ::v-deep .el-range-input {
-       cursor:pointer;
+      cursor: pointer;
-      flex: 1;
+      margin-left: 13px;
-      // margin-left: 80px;
+      background-color: #182337;
-      margin-top: 4px;
+      color: #6ee4f0;
-      ::v-deep .el-date-editor--daterange.el-input__inner {
+    }
-        width: 230px;
+    ::v-deep .el-date-editor {
-        height: 30px;
+      cursor: pointer;
-        background-color: #182337;
+      .el-range__icon {
-        border: 1px solid #264b5e;
+        line-height: 20px;
-        margin-left: 50px;
-      }
-      ::v-deep .el-range-input {
-         cursor:pointer;
-        margin-left: 13px;
-        background-color: #182337;
         color: #6ee4f0;
       }
-      ::v-deep .el-date-editor {
+      .el-range-separator {
-         cursor:pointer;
+        cursor: pointer;
-        .el-range__icon {
+        line-height: 20px;
-
+        color: #757d88;
-          line-height: 20px;
+      }
-          color: #6ee4f0;
+      .el-range__close-icon {
-        }
+        cursor: pointer;
-        .el-range-separator {
+        color: #757d88;
-           cursor:pointer;
+        line-height: 20px;
-          line-height: 20px;
+      }
-          color: #757d88;
+      .el-range-separator {
-        }
+        margin-left: 10px;
-        .el-range__close-icon {
-           cursor:pointer;
-          color: #757d88;
-          line-height: 20px;
-        }
-        .el-range-separator{
-          margin-left: 10px;
-        }
       }
     }
   }
-  #waterMain {
+}
-    width: 100%;
+#waterMain {
-    height: 100%;
+  width: 100%;
-  }
+  height: 100%;
-
+}
 </style>

src/views/projectAdmin/fourEngin/carbon/rightCenter.vue

@@ -1,8 +1,7 @@
 <template>
   <Card title="施工碳排放">
     <div class="contentBox">
-      <img src="./image/img7.png" alt="">
+      <img src="./image/rightCenterImage.png" alt="" />
-
     </div>
   </Card>
 </template>
@@ -12,7 +11,10 @@
 //   getwaterMeterListApi,selectWaterMeterStatisticsApi,
 //   getCurrentMonthMeterRecordApi,} from "@/assets/js/api/waterManage";
 
-import {getCurrentMonthMeterRecordApi,selectWaterMeterStatisticsApi} from'@/assets/js/api/electricDevManage'
+import {
+  getCurrentMonthMeterRecordApi,
+  selectWaterMeterStatisticsApi
+} from '@/assets/js/api/electricDevManage'
 import Card from '../components/Card.vue'
 import echarts from 'echarts4'
 export default {
@@ -28,52 +30,51 @@ export default {
     //   },
     // }
     return {
-      deviceIdArr:[],
+      deviceIdArr: [],
-      show:true,
+      show: true,
       formInline: {
-        yearTime: "",
+        yearTime: '',
-        ammeterNo: "",
+        ammeterNo: '',
         projectSn: this.$store.state.projectSn
       },
-      realTimeData:{
+      realTimeData: {
         alarmNum: 0,
         currentWaterTonnage: 0,
         exceedQuotaNum: 0,
         monthUserWater: 0,
         thresholdValue: 0,
-        ammeterL:'',
+        ammeterL: '',
-        count:'',
+        count: ''
       },
-      gateStatus:''
+      gateStatus: ''
-    };
+    }
   },
   mounted() {
     this.containerEcharts()
   },
   methods: {
-  
     async containerEcharts() {
-      const res= await getCurrentMonthMeterRecordApi(this.formInline)
+      const res = await getCurrentMonthMeterRecordApi(this.formInline)
-      if(res.result.ammeter===null){
+      if (res.result.ammeter === null) {
-        this.show=false
+        this.show = false
       }
-      this.ammeter=res.result.ammeter
+      this.ammeter = res.result.ammeter
-        this.count=res.result.count
+      this.count = res.result.count
-      const res1=await selectWaterMeterStatisticsApi(this.formInline)
+      const res1 = await selectWaterMeterStatisticsApi(this.formInline)
-      console.log('res1',res1);
+      console.log('res1', res1)
-     
+
-      if(res1.result.monthWaterList.length===0){
+      if (res1.result.monthWaterList.length === 0) {
-        this.realTimeData.monthUserWater=0
+        this.realTimeData.monthUserWater = 0
-      }else{
+      } else {
-        this.realTimeData.monthUserWater=res1.result.monthWaterList
+        this.realTimeData.monthUserWater = res1.result.monthWaterList
       }
 
-      if(res1.result.alarmList.length===0){
+      if (res1.result.alarmList.length === 0) {
-        this.realTimeData.alarmNum=0
+        this.realTimeData.alarmNum = 0
-      }else{
+      } else {
-        this.realTimeData.alarmNum=res1.result.alarmList
+        this.realTimeData.alarmNum = res1.result.alarmList
       }
-    
+
       // 基于准备好的dom，初始化echarts实例
       const day = echarts.init(document.getElementById('bottomElectric'))
       // 指定图表的配置项和数据
@@ -136,7 +137,7 @@ export default {
           orient: 'horizontal', //图例布局方式：水平 'horizontal' 、垂直 'vertical'
           x: 'left', // 横向放置位置，选项：'center'、'left'、'right'、'number'（横向值 px）
           y: '-2%', // 纵向放置位置，选项：'top'、'bottom'、'center'、'number'（纵向值 px）
-           itemGap: 90,
+          itemGap: 90,
           data: ['本年度节电趋势图', '本年度节水趋势图'],
           textStyle: {
             //图例文字的样式
@@ -156,7 +157,20 @@ export default {
         xAxis: {
           boundaryGap: false,
           type: 'category',
-          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+          data: [
+            '1月',
+            '2月',
+            '3月',
+            '4月',
+            '5月',
+            '6月',
+            '7月',
+            '8月',
+            '9月',
+            '10月',
+            '11月',
+            '12月'
+          ],
           axisLabel: {
             color: '#fff'
           },
@@ -169,16 +183,16 @@ export default {
         },
 
         yAxis: {
-          type:'value',
+          type: 'value',
-         // scale:true,
+          // scale:true,
-          min:0, // 配置 Y 轴刻度最小值
+          min: 0, // 配置 Y 轴刻度最小值
-          max:200,  // 配置 Y 轴刻度最大值
+          max: 200, // 配置 Y 轴刻度最大值
           splitNumber: 7, // 配置 Y 轴数值间隔
-         // boundaryGap : [ 0.2, 0.2 ],
+          // boundaryGap : [ 0.2, 0.2 ],
           splitLine: {
             show: true,
             lineStyle: {
-              type: 'dashed',   
+              type: 'dashed',
               color: 'rgba(255, 255, 255,0.3)'
             }
           },
@@ -187,12 +201,12 @@ export default {
           },
           axisLine: {
             show: true,
-            lineStyle:{
+            lineStyle: {
-              type:'dashed'
+              type: 'dashed'
             }
           },
           axisLabel: {
-            formatter: function() {
+            formatter: function () {
               return ''
             }
           }
@@ -202,8 +216,8 @@ export default {
           {
             name: '本年度节水趋势图',
             data: [23, 51, 61, 13, 66, 18, 90, 120, 17, 10, 83, 29],
-            textStyle:{
+            textStyle: {
-              fontSize:10
+              fontSize: 10
             },
             type: 'line',
             symbolSize: 0, //设置折线上圆点大小
@@ -263,7 +277,7 @@ export default {
   align-items: center;
   flex-wrap: wrap;
   font-size: 14px;
-  img{
+  img {
     width: 92%;
     height: 90%;
     margin-top: -37px;
@@ -273,7 +287,7 @@ export default {
     justify-content: space-between;
     width: 100%;
     height: 37%;
-    margin:15px 0px 20px 10px;
+    margin: 15px 0px 20px 10px;
     // margin-top: 5px;
     .leftWaterDiv,
     .rightWaterDiv {
@@ -287,7 +301,7 @@ export default {
         margin-right: 20px;
         .numberStyle {
           display: inline-block;
-         // margin-top: 5px;
+          // margin-top: 5px;
           // padding-top: 15px;
           width: 80px;
           height: 35px;
@@ -305,17 +319,15 @@ export default {
           color: #6ee4f0;
           font-size: 14px;
         }
-        .span1{
+        .span1 {
           margin-right: 26px;
         }
-        .span2{
+        .span2 {
           margin-right: 14px !important;
         }
-        .span3{
+        .span3 {
           padding-right: 5px;
         }
-        
-       
       }
     }
   }