设备筛选

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/FatigueWakesUp/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="obverseVisible" title="疲劳唤醒弹窗" width="470px">
+  <Dialog v-model="obverseVisible" title="疲劳唤醒弹窗" width="470px"  @update:close="obverseVisible = false">
     <div class="FatigueWakesUp">
       <Video class="video-stream" :camId="camId" img="激光疲劳唤醒" />
       <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
@@ -17,7 +17,7 @@
     </template>
     <!-- 设备操作弹窗 -->
     <DeviceControlDialog v-model="deviceControlVisible" :deviceId="dialogData.iotDeviceId" :productId="dialogData.id"
-      :deviceType="dialogData.deviceType" />
+      :deviceType="dialogData.deviceType" class="fatigue-wakes-up" />
   </Dialog>
 </template>
 
@@ -50,6 +50,7 @@ export default {
   },
   data() {
     return {
+      camId: null ,
       activeName: "first",
       deviceControlVisible: false,
       data: {
@@ -124,6 +125,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.fatigue-wakes-up {
+  position: absolute; /* 或 fixed，取决于你的需求 */
+  z-index: 3000; /* 确保这个值足够高 */
+  /* 其他样式 */
+  }
 .FatigueWakesUp {
   width: 420px;
   color: #fff;

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/device.vue

@@ -0,0 +1,462 @@
+<template>
+  <div class='content' :style="{height: menu.isRecentOpen ? 'calc(75vh - 70px)' : 'calc(80vh - 75px)',width: '400px'}">
+      <div class="left">
+        <!-- <WgtTitle :title="'设备列表'"></WgtTitle> -->
+        <el-form :model="form" class="formSearch " size="mini"  @submit.native.prevent>
+          <el-form-item>
+            <el-col :span="11">
+              <el-select
+                v-model="form.deviceType"
+                placeholder="请选择设备类型"
+              >
+                <el-option
+                  v-for="item in [{label:'激光疲劳唤醒',value:10},{label:'智能设备箱',value:13},{label:'离网光伏供电',value:15},{label:'远端机',value:16},{label:'气象检测器',value:3},{label:'一体机柜',value:17}]"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="12" :offset="1">
+              <el-checkbox-group v-model="form.deviceState" style="height:26px">
+                <el-checkbox :label="1">在线</el-checkbox>
+                <el-checkbox :label="0">异常</el-checkbox>
+              </el-checkbox-group>
+            </el-col>
+          </el-form-item>
+          <el-form-item style="display: flex; justify-content: center;">
+            <el-button class="btnInfoBoard" type="add" @click.native="onSearch()">搜索</el-button>
+            <el-button type="publish" @click.native="onResetSearch()">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <div class="body">
+          <vuescroll :ops="scrollOptions">
+            <div :class="'device  '" v-for="(item, index) of list" @click="devClick(item)">
+              <div>{{ item.deviceName }}</div>
+              <el-tooltip :content="(item.deviceState == 0 || item.deviceState == null) ? '异常' : '在线'" placement="top">
+                <img src="@/assets/jihe/images/offline.svg" class="state"
+                  v-if="item.deviceState == '0' || item.deviceState == null">
+                <img src="@/assets/jihe/images/online.svg" class="state" v-else>
+              </el-tooltip>
+            </div>
+            <div v-if="list.length === 0" style="color: #fff; text-align: center; line-height: 60px">
+              暂无数据
+            </div>
+          </vuescroll>
+        </div>
+        <div class="footer">
+          <Pagination @current-change="bindList" @size-change="onSizeChange" width="'100%'"
+            :page-sizes="[10, 20, 30, 40, 50]" :page-size="page.pageSize" :current-page.sync="page.pageNum"
+            layout="total, prev, pager, next" :total="total" class="Pagination">
+          </Pagination>
+        </div>
+        <FatigueWakesUp :visible="this.isFatigueWakesUpVisible"  class="fatigue-wakes-up"  :dialogData="dialogData"  @update:value="this.isFatigueWakesUpVisible = false" />
+        <GuardrailCollision v-if="isGuardrailCollision"  class="fatigue-wakes-up" />
+        <IntegratedCabinet v-if="isIntegratedCabinet"  class="fatigue-wakes-up" />
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import request from "@/utils/request";
+  import vuescroll from "vuescroll";
+  import scrollOptions from "@/common/scrollbar.js";
+  import { Message } from "element-ui";
+  import Button from "@screen/components/Buttons/Button.vue";
+  import { setLoading } from "@screen/utils/index.js";
+  import Pagination from '@screen/components/Pagination.vue';
+  import {  mapState } from "vuex";
+  import FatigueWakesUp from "./../Dialogs/FatigueWakesUp/index.vue";
+  import GuardrailCollision from "./../Dialogs/GuardrailCollision/index.vue";
+  import IntegratedCabinet from "./../Dialogs/IntegratedCabinet/index.vue";
+  export default {
+    name: 'smartAnalysis',
+    components: {
+      vuescroll,
+      FatigueWakesUp,
+      GuardrailCollision,
+      IntegratedCabinet,
+      Button,
+
+      Pagination
+    },
+    computed: {
+      ...mapState(["menu"]),
+    },
+    data() {
+      return {
+        isFatigueWakesUpVisible:false,
+        isGuardrailCollision:false,
+        isIntegratedCabinet:false,
+        dialogData: {},
+        devItem:{},
+        clearable: false,
+        listIndex: -1,
+        form: {
+          deviceName: '',
+          deviceState: [1, 0]
+        },
+        page: {
+          pageNum: 0,
+          pageSize: 20
+        },
+        searchData: {
+          pageNum: 0,
+          pageSize: 10
+        },
+        total: 0,
+        totalRecord:0,
+        list: [],
+        scrollOptions,
+        date:'',
+        tableSource: [],
+        tableData:[],
+        tableCols: [],
+        init: true,
+        aryChartList:[]
+      }
+    },
+    created() {
+  
+    },
+    mounted() {
+      this.date = moment().format('YYYY-MM-DD')
+      this.bindList();
+    },
+    methods: {
+    
+      bindData(){
+        const item = this.devItem;
+        const closeLoading = setLoading();
+        request({
+          url: 'business/device/properties/deviceAnalysis',
+          method: 'post',
+          data:{
+            dateTime: this.date,
+            deviceType: item.deviceType,
+            deviceId: item.deviceId
+          }
+        }).then(result => {
+          if (result.code != 200) return Message.error(result?.msg);
+          this.aryChartList = [];
+          let cols = [];
+          let rows = [];
+          result.data.forEach(e => {
+            cols.push({
+              label: e.name,
+              value: e.name
+            })
+  
+            if(rows.length === 0){
+              e.results.forEach(el => {
+                rows.push({
+                  name:item.deviceName,
+                  timestamp: el.timestamp.substr(11)
+                })
+              });
+            }
+  
+            let xname = e.results.map(x=>x.timestamp.substr(11))
+            let value = [];
+              let unit = ''
+            e.results.forEach((c,idx)=>{
+              rows[idx][e.name] = c.result
+              const n = c.result?.match(/\d+\.*\d*/g);
+                if(n && n.length > 0){
+                  if(unit === ''){
+                    unit = c.result.substr(n[0].length)
+                  }
+                  value.push(parseFloat(n[0]))
+                } else {
+                  value.push(0)
+                }
+            })
+  
+  
+            const chartOptions = _.cloneDeep(chart1);
+            chartOptions.title.text = e.name +' / ' + this.date + ' / ' + item.deviceName;
+            chartOptions.xAxis.data = xname;
+            chartOptions.yAxis[0].name = unit;
+            chartOptions.series[0].name = e.name;
+            chartOptions.series[0].data = value;
+            chartOptions.tooltip['valueFormatter'] = function (value) {
+              return value + " "+unit;
+            }
+  
+            this.aryChartList.push({
+              ...item,
+              pname: e.name,
+              options: chartOptions
+            })
+          })
+          this.tableCols = cols;
+          this.tableSource = rows;
+          this.totalRecord = rows.length;
+          this.searchData= {
+            pageSize: 10,
+            pageNum: 1,
+          },
+          this.loadTable()
+        }).finally(()=>{
+          closeLoading()
+        });
+      },
+      onSizeTableChange(pageSize) {
+        this.tableData = [];
+        this.searchData.pageSize = pageSize;
+        this.searchData.pageNum = 1;
+        this.loadTable();
+      },
+      loadTable(e){
+        if(e){
+          this.searchData.pageNum = e;
+        }
+        const nums = (this.searchData.pageNum-1)*(this.searchData.pageSize);
+        const nume = nums + this.searchData.pageSize
+        this.tableData = this.tableSource.slice(nums,nume)
+      },
+   
+      devClick(item){
+        console.log("item-->",item)
+        // console.log(item.deviceType+"111")
+        // console.log(this.isFatigueWakesUpVisible+"2")
+        // console.log(this.isFatigueWakesUpVisible+"5")
+        this.isIntegratedCabinet=false;
+        this.isGuardrailCollision=false;
+        this.dialogData=item;
+        
+
+        if(item.deviceType=='10'){
+          console.log("this.isFatigueWakesUpVisible--->",this.isFatigueWakesUpVisible)
+          this.isFatigueWakesUpVisible =true;
+          // console.log(this.isFatigueWakesUpVisible+"3")
+        }
+        // console.log(this.isFatigueWakesUpVisible+"4")
+      },
+      onSizeChange(pageSize) {
+        this.page.pageSize = pageSize;
+        this.bindList();
+      },
+      bindList() {
+        const params = {
+          ...this.form, ...this.page,
+        };
+        if (params.deviceState.length === 2) {
+          delete params.deviceState;
+        } else {
+          params.deviceState = params.deviceState.join('')
+        }
+        if (params.deviceName === '') {
+          delete params.deviceName
+        }
+  
+        request({
+          url: 'business/device/list',
+          method: 'get',
+          params
+        }).then(result => {
+          if (result.code != 200) return Message.error(result?.msg);
+          this.list = result.rows;
+          this.total = result.total;
+          if(this.init){
+            this.init = false;
+            setTimeout(() => {
+  
+              // this.devClick( this.list[0],0)
+            }, 400);
+  
+          }
+  
+        })
+      },
+      onResetSearch() {
+        this.form = {
+          deviceName: '',
+          deviceState: [1, 0]
+        };
+        this.pageNum = 0;
+        this.bindList();
+      },
+      onSearch() {
+        this.pageNum = 0;
+        this.bindList();
+      },
+    }
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  .fatigue-wakes-up {
+  position: absolute; /* 或 fixed，取决于你的需求 */
+  z-index: 3000; /* 确保这个值足够高 */
+  /* 其他样式 */
+  }
+  .content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    background-color: #101d23;
+    padding: 20px;
+  
+    .left {
+      width: 18vw;
+      // background-color: #112533;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+  
+      .body {
+        flex: 1;
+        height: 0;
+        padding: 0 10px 10px;
+      }
+  
+      .footer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 10px;
+      }
+    }
+  
+  }
+  
+  ::v-deep .formSearch {
+    padding: 20px 5px;
+  
+    .el-form-item__label {
+      color: #fff;
+    }
+  }
+  
+  .direction {
+    ::v-deep .el-input {
+      .el-input__inner {
+        font-size: 14px !important;
+        padding: 8px 5px;
+      }
+    }
+  }
+  
+  .device {
+    padding: 7.5px 15px;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .deviceSel{
+    // background-color:#1798a9;
+    background: linear-gradient(45deg, #1798a9, #1798a900);
+  }
+  .device:hover {
+    background-color: #1d647f;
+  }
+  
+  .state {
+    width: 18px;
+    height: 18px;
+  }
+  
+  </style>
+  
+  <style lang="scss" scoped>
+  .Pagination {
+  
+    ::v-deep {
+  
+      >button,
+      >ul li {
+        background: #064258;
+        border-radius: 2px 2px 2px 2px;
+        opacity: 1;
+        color: #fff;
+      }
+  
+      >button {
+        padding: 0 3px;
+        border: 1px solid #00b3cc;
+      }
+  
+      >ul li {
+        background: linear-gradient(180deg, #004960 0%, #004b62 100%);
+        margin: 0 1.5px;
+  
+        &.active {
+          background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
+        }
+      }
+  
+      .el-pagination__total {
+        color: #fff;
+      }
+  
+      .el-pagination__sizes {
+        .el-select {
+          .el-input {
+            width: 81px;
+  
+            .el-input__inner {
+              font-size: 12px;
+              height: 23px;
+              background-color: #064258 !important;
+            }
+          }
+  
+          .el-input__suffix {
+            .el-input__icon {
+              line-height: 23px;
+            }
+          }
+        }
+      }
+  
+      .el-pagination__jump {
+        margin-left: 10px;
+        color: #fff;
+        font-size: 12px;
+  
+        .el-input {
+          width: 27px;
+          margin: 0 3px;
+  
+          .el-input__inner {
+            font-size: 12px;
+            background-color: #064258 !important;
+            border-radius: 2px 2px 2px 2px;
+          }
+        }
+      }
+  
+      .btn-next {
+        margin-left: 6px;
+      }
+    }
+  
+    ::v-deep .el-pagination__total {
+      margin-left: 10px;
+    }
+  }
+  .devparam{
+    width: 200px;
+    margin-left: 20px;
+  
+  }
+  .selectDate {
+      width: 89px;
+      border: 1px solid #00b3cc;
+  
+      ::v-deep {
+        .el-input__prefix{
+          top:-4px;
+        }
+        .el-input__inner {
+  
+          background-color: #064258 !important;
+          border-width: 0px !important;
+        }
+      }
+    }
+  </style>
+  

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="HomeDevice">
+    <ElPopover trigger="manual" :value="activeIcon === 'Frame'" :visibleArrow="false" placement="left"
+      popper-class="global-input-search-popoverIcon global-input-search-popoverIcon2">
+
+      <div slot="reference">
+        <el-tooltip effect="light" content="筛选设备" placement="left">
+          <Button :class="['btn', { 'btn-active': activeIcon }]" @click.native="handleClick('Frame')">
+            <img src="@screen/images/home-Frame/Frame.svg" />
+          </Button>
+        </el-tooltip>
+      </div> 
+
+      <div class="body4">
+        <div class="title">筛选设备</div>
+        <span class="close" @click="() => { this.activeIcon = null; }">
+          <i class="el-icon-close" />
+        </span>
+        <HomeDeviceFilter class="item" />
+      </div>
+    </ElPopover>
+  </div>
+</template>
+
+<script>
+import Button from "@screen/components/Buttons/Button.vue";
+import Form from "@screen/components/FormConfig";
+import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
+import { merge, cloneDeep } from "lodash";
+import HomeDeviceFilter from "./device.vue";
+export default {
+  name: "HomeDevice",
+  components: {
+    Button,
+    Form,
+    HomeDeviceFilter,
+  },
+  data() {
+    return {
+      activeIcon: null,
+    };
+  },
+  methods: {
+    handleClick(type) {
+      this.activeIcon = this.activeIcon === type ? null : type;
+    },
+    filterEnd(data) {
+      this.activeIcon = null;
+      // this.filterData = data;
+      this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.global-input-search-popoverIcon2{
+  top: 35px !important;
+}
+div.el-popper.global-input-search-popoverIcon {
+  background: rgba(6, 66, 88, 0.8);
+  border: 1px solid rgba(42, 217, 253, 0.6);
+  position: relative;
+  padding-top: 36px;
+  transform: translateY(24px);
+  // margin-top: 6vh;
+  .body4 {
+    width: 400px;
+    .title {
+      background: linear-gradient(90deg,
+          #237e9b 0%,
+          rgba(23, 145, 184, 0) 100%);
+      padding: 3px 9px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+    }
+
+    .close {
+      padding: 3px 9px;
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 50px;
+    }
+
+  }
+}
+</style>
+<style lang="scss" scoped>
+.image {
+  width: 1000px;
+  height: 555px;
+}
+
+.HomeDevice {
+  .btn {
+    padding: 9px;
+    background: linear-gradient(180deg, #152e3c 0%, #163a45 100%);
+    border-radius: 4px;
+    overflow: hidden;
+    height: unset;
+    border: 1px solid rgba(40, 144, 167, 1);
+  }
+
+  .btn-active {
+    background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
+  }
+}
+</style>

ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue

@@ -22,6 +22,7 @@
           <HomeWeather class="item" />
           <HomeWeatherLayer class="item" />
           <HomeTraffic class="item" />
+          <HomeDevice class="item" />
         </div>
         <div class="content-r">
           <ConditionStatistics class="right card-menu" style="height: 100%;" />
@@ -76,6 +77,7 @@ import HomeVectorControl from "./components/HomeVectorControl/index.vue";
 import HomeWeather from "./components/HomeWeather/index.vue";
 import HomeWeatherLayer from "./components/HomeWeatherLayer/index.vue";
 import HomeTraffic from "./components/HomeTraffic/index.vue";
+import HomeDevice from "./components/HomeDevice/index.vue";
 
 import RoadAndEvents from "./components/RoadAndEvents/index.vue";
 import Button from "@screen/components/Buttons/Button.vue";
@@ -107,6 +109,7 @@ export default {
     HomeWeather,
     HomeWeatherLayer,
     HomeTraffic,
+    HomeDevice,
     RadioGroup,
     Carbon,
     Real,