Merge branch 'dev-yjl' into 'shenzhen-dev'

修改中建四局数据渲染(双碳管理,监控设备大屏)

See merge request !44

src/assets/js/api/waterManage.js

@@ -29,4 +29,5 @@ export const selelctWaterMeterThresholdApi = data => post('xmgl/waterMeterThresh
 //   实时数据
 export  const selectWaterMeterStatisticsApi = data => post('xmgl/waterMeterMonthRecord/selectWaterMeterStatistics', data);
 export  const getCurrentMonthMeterRecordApi = data => post('xmgl/waterMeterMonthRecord/getCurrentMonthMeterRecord', data);
-export  const selectWaterRecordDetailPageListApi = data => post('xmgl/waterMeterRecordDetail/selectWaterRecordDetailPageList', data);
+export  const selectWaterRecordDetailPageListApi = data => post('xmgl/waterMeterRecordDetail/selectWaterRecordDetailPageList', data);
+

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

@@ -24,7 +24,9 @@ import echarts from 'echarts4'
 export default {
   components: { Card },
   data() {
-    return {}
+    return {
+      time1:'',
+    }
   },
   mounted() {
     this.containerEcharts()
@@ -131,23 +133,26 @@ export default {
   width: 100%;
   height: 100%;
   .DataTime {
+    cursor:pointer;
     margin-top: 10px;
-    margin-left: 75%;
+    margin-left: 72%;
     width: 210;
     height: 17px;
   }
   ::v-deep .el-date-editor--daterange.el-input__inner {
-    width: 210px;
+    cursor:pointer;
+    width: 235px;
     height: 30px;
     background-color: #182337;
     border: 1px solid #264b5e;
   }
   ::v-deep .el-range-input {
-    margin-left: 20px;
+    cursor:pointer;
     background-color: #182337;
     color: #6ee4f0;
   }
   ::v-deep .el-date-editor {
+    cursor:pointer;
     .el-range__icon {
       line-height: 23px;
       color: #6ee4f0;

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

@@ -3,10 +3,11 @@
     <div class="contentBox">
       <!-- 上结构 -->
       <div class="topWater">
-        <div class="waterDiv">用水</div>
+        <div   @click="select(1)" :class="index ==1?'electricDiv':'waterDiv'">用水</div>
-        <div class="electricDiv">用电</div>
+        <div  @click="select(2)" :class="index ==2?'electricDiv':'waterDiv'">用电</div>
         <div class="DateTime">
           <el-date-picker
+            v-model="time1"
             type="daterange"
             range-separator="-"
             start-placeholder="开始日期"
@@ -16,8 +17,12 @@
           ></el-date-picker>
         </div>
       </div>
-      <!-- 下echarts结构 -->
+      <!-- 暂无数据结构 -->
-      <div id="waterMain"></div>
+      <div id="waterMain" v-if="show"></div>
+      <div style="margin-top: 50px;" v-else>
+        <img style="margin: auto 190px;" src="@/assets/images/noData.png" alt="" />
+        <p style="text-align: center;">暂无数据</p>
+      </div>
     </div>
   </Card>
 </template>
@@ -25,16 +30,46 @@
 <script>
 import Card from '../components/Card.vue'
 import echarts from 'echarts4'
+import { getwaterMeterListApi, selectWaterMeterStatisticsApi, getCurrentMonthMeterRecordApi } from '@/assets/js/api/waterManage'
 export default {
   components: { Card },
   data() {
-    return {}
+    return {
+      index: 1,
+      time1:'',
+      show: true,
+      monthWaterList: '',
+      count: '',
+      waterMeter: '',
+      formInline: {
+        yearTime: '',
+        waterMeterNo: '',
+        projectSn: this.$store.state.projectSn
+      }
+    }
   },
   mounted() {
     this.wEacharts()
   },
   methods: {
-    wEacharts() {
+    //用水/用电按钮切换
+    select(i) {
+      this.index = i;
+    },
+     
+    //echart图表
+    async wEacharts() {  
+      const res = await getCurrentMonthMeterRecordApi(this.formInline)
+      this.waterMeter = res.result.waterMeter
+      if (this.waterMeter === null) {
+        this.show = false
+      }
+      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 })
+      console.log('res3', res3)
+
       // 基于准备好的dom，初始化echarts实例
       let waterEch = echarts.init(document.getElementById('waterMain'))
       let xData = (function() {
@@ -46,7 +81,6 @@ export default {
       })()
 
       let option = {
-      
         title: {
           x: '4%',
 
@@ -122,9 +156,9 @@ export default {
               }
             },
             axisLine: {
-               show:true,
+              show: true,
               lineStyle: {
-                 type:'dashed',
+                type: 'dashed'
               }
             },
             axisTick: {
@@ -170,12 +204,12 @@ export default {
             stack: '总量',
             barMaxWidth: 25,
             barGap: '10%',
-            symbol:'circle',
+            symbol: 'circle',
             itemStyle: {
               normal: {
                 color: '#6EE4F0',
-                lineStyle:{
+                lineStyle: {
-                  color:'#fff'
+                  color: '#fff'
                 },
                 label: {
                   show: false,
@@ -189,7 +223,7 @@ export default {
                 }
               }
             },
-            data: [709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078]
+            data: this.waterMeter
           },
 
           {
@@ -208,7 +242,7 @@ export default {
                 }
               }
             },
-            data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220]
+            data: this.count
           },
           {
             type: 'line',
@@ -219,8 +253,8 @@ export default {
               normal: {
                 color: '#fff',
                 barBorderRadius: 2,
-                lineStyle:{
+                lineStyle: {
-                  color:'#FFC303'
+                  color: '#FFC303'
                 },
                 label: {
                   show: false,
@@ -252,6 +286,7 @@ export default {
     height: 20%;
     display: flex;
     .waterDiv {
+      cursor:pointer;
       display: inline-block;
       // margin-top: 5px;
       // padding-top: 15px;
@@ -269,6 +304,7 @@ export default {
     }
 
     .electricDiv {
+      cursor:pointer;
       display: inline-block;
       // margin-top: 5px;
       // padding-top: 15px;
@@ -285,34 +321,43 @@ export default {
       font-size: 14px;
     }
     .DateTime {
+       cursor:pointer;
       flex: 1;
-      margin-left: 80px;
+      // margin-left: 80px;
       margin-top: 4px;
       ::v-deep .el-date-editor--daterange.el-input__inner {
-        width: 210px;
+        width: 230px;
         height: 30px;
         background-color: #182337;
         border: 1px solid #264b5e;
+        margin-left: 50px;
       }
       ::v-deep .el-range-input {
-        margin-left: 15px;
+         cursor:pointer;
+        margin-left: 13px;
         background-color: #182337;
         color: #6ee4f0;
       }
       ::v-deep .el-date-editor {
+         cursor:pointer;
         .el-range__icon {
+
           line-height: 20px;
           color: #6ee4f0;
-          margin-left: 10px;
         }
         .el-range-separator {
+           cursor:pointer;
           line-height: 20px;
           color: #757d88;
         }
         .el-range__close-icon {
+           cursor:pointer;
           color: #757d88;
           line-height: 20px;
         }
+        .el-range-separator{
+          margin-left: 10px;
+        }
       }
     }
   }

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

@@ -6,18 +6,18 @@
         <div class="leftWaterDiv">
           <div class="waterDiv">
             <span class="span1">本月用电</span>
-            <span class="numberStyle">2700</span>
+            <span class="numberStyle">{{realTimeData.monthUserWater}}</span>
             <span>kwh</span>
           </div>
 
           <div class="waterDiv">
             <span class="span2" id="spanes">用电超标值 </span>
-            <span class="numberStyle">2700</span>
+            <span class="numberStyle">{{realTimeData.exceedQuotaNum}}</span>
             <span >kwh</span>
           </div>
           <div class="waterDiv">
             <span class="span3">累计节约电量</span>
-            <span class="numberStyle">2700</span>
+            <span class="numberStyle">{{realTimeData.alarmNum}}</span>
             <span>kwh</span>
           </div>
         </div>
@@ -25,41 +25,99 @@
         <div class="rightWaterDiv">
           <div class="waterDiv">
             <span  class="span1">本月用水</span>
-            <span class="numberStyle">2700</span>
+            <span class="numberStyle">{{realTimeData.monthUserWater}}</span>
             <span>t</span>
           </div>
 
           <div class="waterDiv">
             <span class="span2">用水超标值</span>
-            <span class="numberStyle">2700</span>
+            <span class="numberStyle">{{realTimeData.exceedQuotaNum}}</span>
             <span>t</span>
           </div>
           <div class="waterDiv">
-            <span class="span3">累计节约水量</span>
+            <span class="span3">本月报警次数</span>
-            <span class="numberStyle">2700</span>
+            <span class="numberStyle">{{realTimeData.alarmNum}}</span>
             <span>t</span>
           </div>
         </div>
       </div>
       <!-- 年度节电趋势图 -->
-      <div id="bottomElectric"></div>
+      <div id="bottomElectric" v-if="show"></div>
+      <div v-else>
+      <img style="margin: auto 190px;" src="@/assets/images/noData.png" alt="">
+       <p style="text-align: center;">暂无数据</p >
+ </div>
     </div>
   </Card>
 </template>
 
 <script>
+// import {
+//   getwaterMeterListApi,selectWaterMeterStatisticsApi,
+//   getCurrentMonthMeterRecordApi,} from "@/assets/js/api/waterManage";
+
+import {getCurrentMonthMeterRecordApi,selectWaterMeterStatisticsApi} from'@/assets/js/api/electricDevManage'
 import Card from '../components/Card.vue'
 import echarts from 'echarts4'
 export default {
   components: { Card },
   data() {
-    return {}
+    // return {
+    //    realTimeData:{
+    //     alarmNum: 0,
+    //     currentWaterTonnage: 0,
+    //     exceedQuotaNum: 0,
+    //     monthUserWater: 0,
+    //     thresholdValue: 0
+    //   },
+    // }
+    return {
+      deviceIdArr:[],
+      show:true,
+      formInline: {
+        yearTime: "",
+        ammeterNo: "",
+        projectSn: this.$store.state.projectSn
+      },
+      realTimeData:{
+        alarmNum: 0,
+        currentWaterTonnage: 0,
+        exceedQuotaNum: 0,
+        monthUserWater: 0,
+        thresholdValue: 0,
+        ammeterL:'',
+        count:'',
+      },
+      gateStatus:''
+    };
   },
   mounted() {
     this.containerEcharts()
   },
   methods: {
-    containerEcharts() {
+  
+    async containerEcharts() {
+      const res= await getCurrentMonthMeterRecordApi(this.formInline)
+      if(res.result.ammeter===null){
+        this.show=false
+      }
+      this.ammeter=res.result.ammeter
+        this.count=res.result.count
+      const res1=await selectWaterMeterStatisticsApi(this.formInline)
+      console.log('res1',res1);
+     
+      if(res1.result.monthWaterList.length===0){
+        this.realTimeData.monthUserWater=0
+      }else{
+        this.realTimeData.monthUserWater=res1.result.monthWaterList
+      }
+
+      if(res1.result.alarmList.length===0){
+        this.realTimeData.alarmNum=0
+      }else{
+        this.realTimeData.alarmNum=res1.result.alarmList
+      }
+    
       // 基于准备好的dom，初始化echarts实例
       const day = echarts.init(document.getElementById('bottomElectric'))
       // 指定图表的配置项和数据
@@ -212,7 +270,7 @@ export default {
 
           {
             name: '本年度节电趋势图',
-            data: [55, 51, 61, 93, 56, 150, 44, 170, 90, 30, 40, 50],
+            data: this.ammeter,
             type: 'line',
             symbolSize: 0, //设置折线上圆点大小
             smooth: true, // 设置折线弧度

src/views/projectAdmin/fourEngin/components/videoPhotoTwo.vue

@@ -47,7 +47,7 @@
     </el-upload>
 
     <!-- 更换图片 -->
-    <div @mouseenter="showChangeImg = true" @mouseleave="showChangeImg = false" class="img">
+    <!-- <div @mouseenter="showChangeImg = true" @mouseleave="showChangeImg = false" class="img">
       <el-upload
         v-if="showChangeImg"
         class="changeImg"
@@ -61,7 +61,7 @@
         <span style="border: 1px solid #ffffff; padding: 5px">{{ $t('message.companyDiagram.changeImg') }}</span>
       </el-upload>
       <img v-if="show" class="imgStyle" :src="this.$store.state.FILEURL + imgUrl" alt />
-    </div>
+    </div> -->
   </div>
 </template>
 

src/views/projectAdmin/fourEngin/monitor/index.vue

@@ -1,21 +1,192 @@
 <template>
   <div class="monitor">
-    <!-- <div class="video" v-for="i in 12" :key="i"></div> -->
+    <Card title="监控设备列表" style="width: 14%; font-size: 15px !important">
-    <div class="left">
+      <!-- 左边列表 -->
-      <Left />
+      <div class="videoLeft">
-    </div>
+        <div class="videoList" v-if="dataType == 1">
-    <div class="right">
+          <!-- <vue-scroll>
-      <Right />
+              <ul v-if="devList.length > 0">
-    </div>
+                <li @click="changeVideo(item)" v-for="(item, index) in devList" :key="index">
+                  <img v-if="item.deviceType == 2" src="@/assets/images/icon-video2-white.png" />
+                  <img v-else src="@/assets/images/icon-video-white.png" />
+                  {{ item.videoName }}
+                </li>
+              </ul>
+              <div class="placeholderBox" v-else>
+                <img src="@/assets/images/noData2-dark.png" alt="" srcset="" />
+              </div>
+            </vue-scroll> -->
+          <el-tree
+            :data="dataList"
+            :props="defaultProps"
+            @node-click="changeVideo"
+          ></el-tree>
+        </div>
+        <div class="videoBox" v-else>
+          <vue-scroll>
+            <el-collapse v-model="activeNames" style="padding: 0 20px">
+              <el-collapse-item
+                :title="item.name"
+                :name="index"
+                v-for="(item, index) in devList"
+                :key="index"
+              >
+                <ul v-if="item.list.length > 0">
+                  <li
+                    @click="changeVideo(data)"
+                    v-for="(data, index2) in item.list"
+                    :key="index2"
+                  >
+                    <img
+                      v-if="data.deviceType == 2"
+                      src="@/assets/images/icon-video2-white.png"
+                    />
+                    <img v-else src="@/assets/images/icon-video-white.png" />
+                    {{ data.videoName }}
+                  </li>
+                </ul>
+              </el-collapse-item>
+            </el-collapse>
+          </vue-scroll>
+        </div>
+      </div>
+    </Card>
+
+    <!-- 右边视频 -->
+    <Card title="视频监控" style="width: 80%; margin-right: 40px">
+      <div class="videoTight">
+        <VideoModule
+          class="playVideoBox"
+          :type="'project'"
+          :value="selectList"
+          :displayBottomMod="false"
+          :winNumBer="9"
+          :autoplay="false"
+          :showCaptrue="false"
+          :showControl="false"
+          :showPlayback="false"
+          :xxx="7"
+        ></VideoModule>
+      </div>
+    </Card>
   </div>
 </template>
 
 <script>
-import Left from "./left.vue";
+// import Left from "./left.vue";
-import Right from "./right.vue"
+// import Right from "./right.vue"
+import {
+  selectProjectVideoListApi,
+  selectUserVideoListApi,
+} from "@/assets/js/api/equipmentCenter/cameraList";
+import Card from "../components/Card.vue";
+import VideoModule from "@/components/videoModule/videoModule.vue";
 export default {
-  components: { Left,Right},
+  components: { Card, VideoModule },
-}
+  data() {
+    return {
+      devList: [],
+      selectList: [],
+      dataType: 1,
+      activeNames: [0],
+      screens: {},
+      pluginType: "",
+      current: -1,
+      threeIndex: -1,
+      currentTwo: -1,
+      dataList: [
+        { videoName: "设备1", list: [] },
+        { videoName: "设备2", list: [] },
+        { videoName: "设备3", list: [] },
+        { videoName: "设备4", list: [] },
+      ],
+      defaultProps: {
+        children: "list",
+        label: "videoName",
+      },
+    };
+  },
+  mounted() {
+    // console.dir(window.parent)
+    // console.log(window.parent.document.getElementById("myFrame"), 12312313)
+    if (this.$store.state.userInfo.accountType != 6) {
+      this.loadData();
+    } else {
+      this.loadData2();
+    }
+  },
+  methods: {
+    changeVideo(item) {
+      console.log(item, "xxxxxxxxxx");
+      this.selectList = [item];
+      console.log("右边的值", this.selectList);
+    },
+    loadData() {
+      selectProjectVideoListApi({
+        projectSn: this.$store.state.projectSn,
+      }).then((res) => {
+        var DATA = res.result.videoList;
+
+        let dataList1 = [];
+        let dataList2 = [];
+        let dataList3 = [];
+        let dataList4 = [];
+        for (let index = 0; index < DATA.length; index++) {
+          const element = DATA[index];
+
+          if (element.videoName.includes("宜州天地")) {
+            dataList1.push(element);
+          } else if (element.videoName.includes("中银金融中心")) {
+            dataList2.push(element);
+          } else if (element.videoName.includes("桂林印刷厂")) {
+            dataList3.push(element);
+          } else {
+            dataList4.push(element);
+          }
+        }
+        this.dataList[0].list = dataList1;
+        this.dataList[1].list = dataList2;
+        this.dataList[2].list = dataList3;
+        this.dataList[3].list = dataList4;
+
+        console.log("视频的列表", this.dataList);
+        this.dataType = res.result.type;
+      });
+    },
+    loadData2() {
+      selectUserVideoListApi({
+        projectSn: this.$store.state.projectSn,
+        userId: this.$store.state.userInfo.userId,
+      }).then((res) => {
+        var DATA = res.result.videoList;
+        this.devList = DATA;
+        this.dataType = res.result.type;
+      });
+    },
+    showThree(a, b) {},
+    next2(item) {
+      //   this.secondId = item.id;
+      //   this.loadRigthtList();
+    },
+    next(index, $event, data, type) {
+      console.log("data", data);
+      this.currentTwo = -1;
+      //
+      if (this.current != index) {
+        this.threeIndex = -1;
+      }
+
+      this.threeData = [];
+      this.type = type;
+      this.parentid1 = data.id;
+      if (this.current == index) {
+        this.current = -1;
+      } else {
+        this.current = index;
+      }
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
@@ -23,13 +194,53 @@ export default {
   width: 100%;
   height: 100%;
   display: flex;
-  .left{
+  justify-content: space-between;
-    width: 15%;
+
-    box-sizing: border-box;
+  .textSize {
-    padding-right: 2%;
+    font-size: 15px !important;
   }
-  .right{
+  .videoLeft {
-    width: 85%;
+    width: 20%;
+    height: 100%;
+    .videoList {
+      margin-top: 20px;
+      margin-left: 20px;
+    }
   }
+  .videoTight {
+    width: 99%;
+    height: 90%;
+    margin-left: 9px;
+    margin-top: 4%;
+  }
+
+  ::v-deep .el-tree-node__expand-icon {
+    position: absolute;
+    right: -600%;
+    // color: red;
+    font-size: 16px;
+  }
+  ::v-deep .el-tree-node__label {
+    font-size: 16px;
+  }
+  ::v-deep .el-tree-node {
+    // color: #fff;
+    width: 200px;
+  }
+  ::v-deep .el-tree-node__content {
+    font-size: 15px;
+  }
+  ::v-deep .el-tree-node__children {
+    width: 300px;
+    color: #59bdc1 !important;
+  }
+  ::v-deep .el-tree-node__content {
+    color:#59bdc1  !important;
+
+    // color: #fff !important;
+    font-size: 20px;
+
+  }
+ 
 }
 </style>

src/views/projectAdmin/fourEngin/monitor/left.vue

@@ -1,4 +1,6 @@
 <template>
+    <!-- 此组件未引用 -->
+
   <Card title="监控设备列表">
     <vue-scroll class="treeList">
       <div style="padding-top: 10px">
@@ -84,6 +86,7 @@ export default {
   components: { Card },
   data() {
     return {
+        selectList:[],
       current: -1,
       threeIndex: -1,
       currentTwo: -1,

src/views/projectAdmin/fourEngin/monitor/right.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- 此组件未引用 -->
     <Card title="视频监控">
         <!-- <div class="top">
             <el-select size="mini" v-model="value1" placeholder="请选择">

src/views/projectAdmin/fourEngin/quality/leftMiddle.vue

@@ -5,21 +5,21 @@
         <div class="icon  temperature"></div>
         <div class="info">
           <div class="label">室内温度</div>
-          <div class="value"><span>26</span> ℃</div>
+          <div class="value"><span>{{ currentData.temperature }}</span> ℃</div>
         </div>
       </div>
       <div class="item">
         <div class="icon humidity"></div>
         <div class="info">
           <div class="label">室内湿度</div>
-          <div class="value"><span>26</span>%RH</div>
+          <div class="value"><span>{{ currentData.humidity }}</span>%RH</div>
         </div>
       </div>
       <div class="item">
         <div class="icon spray"></div>
         <div class="info">
           <div class="label">喷淋温度</div>
-          <div class="value"><span>26</span> 次</div>
+          <div class="value"><span>{{ currentData.currentDayAlarmNum }}</span> 次</div>
         </div>
       </div>
           <div class="btn">远程验收</div>
@@ -29,9 +29,74 @@
 </template>
 
 <script>
+import {
+   getstandardDevListApi,
+  selectStandardDevStatisticsBySnApi,
+} from "@/assets/js/api/markingRoom";
 import Card from '../components/Card.vue'
 export default {
-  components: { Card }
+  components: { Card },
+  data(){
+    return{
+      currentData: {
+        currentDayAlarmNum: 0,
+        humidity: 0,
+        sampleNum: 0,
+        temperature: 0,
+      },
+      searchSn:'',
+      devSn:'',
+    }
+  },
+   mounted() {
+    if (this.$store.state.projectSn) {
+      this.searchSn = this.$store.state.projectSn;
+      this.$nextTick(() => {
+        this.getDevList();
+      });
+    } else {
+      this.initData();
+    }
+  },
+  methods:{
+    //标养室管理数据
+     getRealTimeData() {
+      selectStandardDevStatisticsBySnApi({
+        projectSn: this.searchSn,
+        devSn: this.devSn,
+      }).then((res) => {
+        console.log('标养室数据',res);
+        this.currentData = res.result.currentData;
+      });
+    },
+    //获取设备列表--环境监测实时数据--下拉
+    getDevList() {
+      getstandardDevListApi({ projectSn: this.searchSn }).then((result) => {
+        console.log('列表', result)
+        this.devList = result.result;
+        if (result.result.length > 0) {
+          this.devSn = result.result[0].devSn;         
+          this.getRealTimeData();
+        }
+      });
+    },
+    //初始化数据
+    initData() {
+      this.searchSn = this.projectsn;
+      this.currentData = {
+        currentDayAlarmNum: 0,
+        humidity: 0,
+        sampleNum: 0,
+        temperature: 0,
+      };
+      this.devSn = "";
+      if (this.personnelTypeChart) {
+        this.personnelTypeChart.clear();
+      }
+
+      this.getDevList();
+    },
+  }
 }
 </script>