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

修改中建四局（双碳管理页面）实时数据设备渲染、预警列表

See merge request !49

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

@@ -6,17 +6,35 @@
     </div>
     <div class="right3">
       <div class="dropDown" v-show="0 === number">     
-        
+         <!-- <el-select >
-         <el-select v-model="Equipment" >
          <el-option
        v-for="(item,index) in devList"
        :key="index"
-       @click="realTimeMonitor(item)"
+       @click="realTimeMonitor(item)">
-      :label="item.label"
-      :value="item.value">
     </el-option>
-  </el-select>
+  </el-select> -->
-  
+    <el-popover placement="bottom" width="70" trigger="click">
+            <ul class="devList">
+              <li
+                :class="{ active: item.deviceId == currentDevDetail.deviceId }"
+                v-for="(item, index) in devList"
+                :key="index"
+                @click="realTimeMonitor(item)"
+              >
+                {{ item.deviceName }}
+              </li>
+            </ul>
+            <p class="greenBtn selectDev" slot="reference">
+              <img
+                v-for="item in 4"
+                :key="item"
+                :class="'arrow' + item"
+                class="arrow"
+              />
+              {{ currentDevDetail.deviceName }}
+              <i class="el-icon-arrow-down"></i>
+            </p>
+          </el-popover>
       </div>
       <div v-show="0 === number" ref="centerChart" class="centerChart" id="right2"></div>
       <div class="right4" v-show="1 === number">
@@ -32,8 +50,14 @@
 <script>
 import videoPhoto from '@/views/projectAdmin/fourEngin/components/videoPhotoTwo'
 // import centerTops from '@/views/projectAdmin/jlw/envirManage/centerTop'
-import { environmentDevList } from '@/assets/js/api/environmentManage'
+import {
-import { getRealTimeDustNoiseDataApi } from '@/assets/js/api/environmentManage'
+  environmentDevList,
+  selectNewEnvironmentAlarmListApi,
+  getRealTimeDustNoiseDataApi,
+  getAirQualityStatisticsApi,sprayDevListApi,
+  selectDustNoiseDataApi,getWeatherDataApi,getCurrentDayAirQualityApi,
+  sprayOperateDataApi
+} from "@/assets/js/api/environmentManage";
 import echarts from 'echarts4'
 export default {
   components: {
@@ -41,26 +65,12 @@ export default {
   },
   data() {
     return {
-       options: 
-       [
-        {
-          value: '设备一',
-          label: '设备一'
-        }, 
-        {
-          value: '设备二',
-          label: '设备二'
-        }, 
-        {
-          value: '设备三',
-          label: '设备三'
-        }, 
 
-        ],
-        Equipment: '设备一',
       number: 0,
       devList: [],
       currentDevDetail: {},
+      sprayDevList:[],
+       alarmList: [],
       onlineDevNum: 0,
       offlineDevNum: 0,
       realTimeDustNoiseDataTime: null, //圆形图实时刷新计时器
@@ -81,43 +91,83 @@ export default {
       }
     }
   },
+  created(){
+   this.getDevList()
+  },
+
   mounted() {
     this.createCenterChart()
     this.getRealTimeDustNoiseData()
     this.realTimeMonitor()
+    // this.getDevList()
     // this.$nextTick(() => {
     //   this.getDevList();
     // });
   },
   methods: {
+   
+  //获取环境设备列表--环境监测实时数据--下拉
     getDevList() {
-      environmentDevList({ projectSn: this.$store.state.projectSn }).then(result => {
+      console.log('环境下拉列表进来了吗--------');
-        console.log('列表', result)
+      environmentDevList({ projectSn: this.$store.state.projectSn }).then(
-        this.devList = result.result
+        (result) => {
-        console.log(this.devList)
+          console.log('环境监测下拉列表', result)
-        if (result.result.length > 0) {
+          this.devList = result.result;
-          this.currentDevDetail = result.result[0]
+          if(result.result.length>0){
-
+            this.currentDevDetail = result.result[0];
-          this.$emit('custClick', this.currentDevDetail)
-
-          this.offlineDevNum = 0
-          this.onlineDevNum = 0
-          this.devList.forEach(element => {
-            if (element.isClosed == 2) {
-              this.offlineDevNum++
-            } else {
-              this.onlineDevNum++
-            }
-          })
-          this.getRealTimeDustNoiseData()
-          // this.realTimeDustNoiseDataTime = setInterval( () => {
             // this.getRealTimeDustNoiseData();
-          // },5000)
+            // this.selectDustNoiseData();
-          // this.selectDustNoiseData();  近24H
+          }else{
-        } else {
             // this.createCenterChart();
           }
+
+
+        }
+      );
+    },
+
+      //近24小时数据
+    selectDustNoiseData() {
+      var now = new Date();
+      var yy = now.getFullYear(); //年
+      var mm = now.getMonth() + 1; //月
+      var dd = now.getDate(); //日
+      var time = yy + "-";
+      if (mm < 10) time += "0";
+      time += mm + "-";
+      if (dd < 10) time += "0";
+      time += dd;
+      let data = {
+        searchDate:time,
+        projectSn:this.projectSn,
+        deviceId: this.currentDevDetail.deviceId,
+      }
+      selectDustNoiseDataApi(data).then(res=>{
+        // console.log(res)
+        this.dustData_24=res.result
+        this.createdEcharts2();
       })
+    },
+      //获取报警列表
+    getAlarmList() {
+      let data = {
+        projectSn: this.projectSn,
+      };
+      selectNewEnvironmentAlarmListApi(data).then((res) => {
+        if (res.code == 200) {
+          this.alarmList = res.result;
+        }
+      });
+    },
+     sprayOperate(deviceId,operateType){
+      sprayOperateDataApi({ projectSn: this.$store.state.projectSn,operateType:operateType,deviceId:deviceId }).then((res) => {
+        this.sprayDevList=res.result
+      });
+    },
+     getSprayDevList(){
+      sprayDevListApi({ projectSn: this.$store.state.projectSn }).then((res) => {
+        this.sprayDevList=res.result
+      });
     },
     /** 查询 */
     handleQuery() {
@@ -127,19 +177,44 @@ export default {
     },
     // // 切换设备
     realTimeMonitor(value) {
-      if (this.realTimeDustNoiseDataTime) {
+       this.currentDevDetail = value;
-        clearInterval(this.realTimeDustNoiseDataTime)
+      this.getRealTimeDustNoiseData();
-      }
+          this.selectDustNoiseData();
-      console.log('id换了吗', value)
+      // if (this.realTimeDustNoiseDataTime) {
-      this.currentDevDetail = value
+      //   clearInterval(this.realTimeDustNoiseDataTime)
+      // }
+      // console.log('id换了吗', value)
+      // this.currentDevDetail = value
 
-      this.getRealTimeDustNoiseData()
+      // this.getRealTimeDustNoiseData()
       // this.realTimeDustNoiseDataTime = setInterval( () => {
       //   this.getRealTimeDustNoiseData();
       // },5000)
       // this.getRealTimeDustNoiseData();
 
       // this.selectDustNoiseData();  近24H
+    },
+     //近24小时数据
+    selectDustNoiseData() {
+      var now = new Date();
+      var yy = now.getFullYear(); //年
+      var mm = now.getMonth() + 1; //月
+      var dd = now.getDate(); //日
+      var time = yy + "-";
+      if (mm < 10) time += "0";
+      time += mm + "-";
+      if (dd < 10) time += "0";
+      time += dd;
+      let data = {
+        searchDate:time,
+        projectSn:this.projectSn,
+        deviceId: this.currentDevDetail.deviceId,
+      }
+      selectDustNoiseDataApi(data).then(res=>{
+        // console.log(res)
+        this.dustData_24=res.result
+        this.createdEcharts2();
+      })
     },
     //获取环境设备详情数据
     getRealTimeDustNoiseData() {
@@ -150,7 +225,7 @@ export default {
       console.log(data)
       getRealTimeDustNoiseDataApi(data).then(res => {
         if (res.code == 200) {
-          console.log('获取环境设备详情数据',res.result)
+          console.log('获取环境设备详情数据------',res.result)
           if (res.result != null) {
             this.plantCap = res.result
           } else {
@@ -487,27 +562,31 @@ export default {
       margin-right: 40px;
       margin-top: -20px;
       width: 100px;
-      height: 20px;
+      height: 30px;
-      line-height: 20px;
+      line-height: 30px;
       background-color: #305c6d;
       background-image: url(../assets/images/common/bg_sby.png);
       background-repeat: no-repeat;
       background-size: 100%;
       font-size: 8px;
-     ::v-deep .el-select{
+    //  ::v-deep .el-select{
-        width: 100px;
+    //     width: 100px;
-        height: 20px;
+    //     height: 20px;
-      }
+    //   }
-     ::v-deep .el-input__inner {
+    //  ::v-deep .el-input__inner {
-      background-color: #3e7c86;
+    //   background-color: #3e7c86;
-      color: #fff;
+    //   color: #fff;
-      }
+    //   }
-     ::v-deep .el-select__caret {
+    //  ::v-deep .el-select__caret {
-       color: #fff;
+    //    color: #fff;
-     }
+    //  }
     }
     .devList {
+       width: 100px;
+      height: 20px;
   li {
+     width: 100px;
+      height: 20px;
     cursor: pointer;
     text-align: center;
     line-height: 22px;

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

@@ -3,7 +3,7 @@
     <div class="containerBox">
       <div class="dataBoardContent">
         <vue-scroll>
-          <table class="greenTable">
+          <table class="greenTable" v-if="sprayDevList.length > 0">
             <thead>
               <tr>
                 <th>设备名称</th>
@@ -14,15 +14,19 @@
               </tr>
             </thead>
             <tbody>
-              <tr v-for="i in 8" :key="i">
+              <tr v-for="(item, index) in sprayDevList" :key="index">
-                <td>一号设备</td>
+                <td>{{ item.deviceName }}</td>
                 <td>离线</td>
                 <td>pm2.5</td>
                 <td>0.1μg/m³</td>
-                <td>2次</td>
+                <td>1次</td>
               </tr>
             </tbody>
           </table>
+          <div v-else style="margin-top:60px; height: 70%;text-align: center">
+            <img src="@/assets/images/noData.png" alt="" />
+            <p>暂无数据</p>
+          </div>
           <!-- <div class="placeholderBox placeholderBox2" v-if="alarmList.length == 0">
             <img src="@/assets/images/noData3.png" alt srcset />
             <p>
@@ -37,11 +41,25 @@
 </template>
 
 <script>
-import Card from "../components/Card.vue";
+import {
+  environmentDevList,
+  selectNewEnvironmentAlarmListApi,
+  getRealTimeDustNoiseDataApi,
+  getAirQualityStatisticsApi,
+  sprayDevListApi,
+  selectDustNoiseDataApi,
+  getWeatherDataApi,
+  getCurrentDayAirQualityApi,
+  sprayOperateDataApi
+} from '@/assets/js/api/environmentManage'
+
+import Card from '../components/Card.vue'
 export default {
   components: { Card },
   data() {
     return {
+      alarmList: [],
+      sprayDevList: [],
       // alarmList: [
       //   {
       //     deviceName: "一号设备",
@@ -71,9 +89,39 @@ export default {
       // ],
 
       value: true
-    };
     }
-};
+  },
+  created() {
+    this.getAlarmList()
+    this.getSprayDevList()
+    this.sprayOperate()
+    console.log('合并列表数据', dataListNew)
+  },
+  methods: {
+    sprayOperate(deviceId, operateType) {
+      sprayOperateDataApi({ projectSn: this.$store.state.projectSn, operateType: operateType, deviceId: deviceId }).then(res => {
+        this.sprayDevList = res.result
+      })
+    },
+    getSprayDevList() {
+      sprayDevListApi({ projectSn: this.$store.state.projectSn }).then(res => {
+        this.sprayDevList = res.result
+      })
+    },
+    //获取报警列表
+    getAlarmList() {
+      let data = {
+        projectSn: this.projectSn
+      }
+      selectNewEnvironmentAlarmListApi(data).then(res => {
+        if (res.code == 200) {
+          this.alarmList = res.result
+          console.log('报警列表----', this.alarmList)
+        }
+      })
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
@@ -88,13 +136,13 @@ export default {
   }
   .greenTable {
     th {
-      color:#72bdc9;
+      color: #72bdc9;
       border-bottom: 1px solid rgba(31, 68, 86, 0.3);
       line-height: 35px;
       //opacity: 0.8;
     }
     td {
-      color: #FFF;
+      color: #fff;
       line-height: 35px;
     }
   }
@@ -107,7 +155,7 @@ export default {
     border-radius: 8px;
   }
   .alarmType::before {
-    content: "";
+    content: '';
     position: absolute;
     top: 1px;
     left: 3px;
@@ -125,7 +173,7 @@ export default {
     border-radius: 8px;
   }
   .unAlarm::before {
-    content: "";
+    content: '';
     position: absolute;
     top: 1px;
     right: 3px;