visu_supervision/src/components/Monitor_StatusAware/index.vue

<!--
 *@description:监控中心 事态感知
 *@author: yh Fu
 *@date: 2023-08-24 08:52:53
 *@version: V1.0.5
-->
<template>
  <div class="leftbar" :class="indentleft" ref="left">
    <div class="forthis">
      <dv-border-box-13
        backgroundColor="rgba(12, 19, 38, .90)"
        style="padding-bottom: 1rem"
      >
        <img
          src="@/assets/images/integrated/light.png"
          style="width: 100%; margin-top: 0.4rem"
        />
        <div class="this-title">·
          <span>事态感知</span>
          <dv-decoration-3
            style="width: 150px; height: 15px; margin-right: 1rem"
          />
        </div>
        <div class="i-list-con">
          <div class="d-l-con-icon">
            <div
              class="icon-con w-33 m-btm-no"
              :class="{ on: She }"
              @click="eventClick('She')"
            >
              <!--   -->
              <div class="icon icon-dot"></div>
              <div class="icon-text">
                <h6>{{ sheNum }}</h6>
                <h5>摄像头</h5>
              </div>
            </div>
            <div
              class="icon-con w-33 m-btm-no"
              :class="{ on: Chuan }"
              @click="eventClick('Chuan')"
            >
              <div class="icon icon-dot"></div>
              <div class="icon-text">
                <h6>{{ sensorNum }}</h6>
                <h5>传感器</h5>
              </div>
            </div>
            <div
              class="icon-con w-33 m-btm-no"
              :class="{ on: Zhi }"
              @click="eventClick('Zhi')"
            >

              <div class="icon icon-dot"></div>
              <div class="icon-text">
                <h6>{{ enforcementNum }}</h6>
                <h5>执法设备</h5>
              </div>
            </div>
          </div>
          <div class="i-list-con h-65" style="height: 62vh">

            <div class="third_contain">
              <!-- 三级搜索框 -->
              <el-input v-model="queryParams.enterpriseName" class="thirdInputModel"  placeholder="按企业名称搜索 " style="color:white"
                        @change="enterpriseList">
              </el-input>
              <div style="height: 4%;"></div>
              <div class="sp_sbg">
                <div
                  style="width: 100%;height: 9%;display: flex;"
                  v-for="(e,index) in companyList"
                  :key="index"
                class="sp_sbg_div"
                :class=" deviceBtn == index ? 'on': 'onno'"
                >
                  <el-button
                    :style="deviceBtn == index ? 'color:#38CCEA' : 'color:#fff'"
                    :class=" deviceBtn == index ? 'highlightedBtn': 'notHighlightedBtn'"
                    @click="getDeviceList(e,index)">
                    <el-tooltip :content="e.enterpriseName" placement="top" v-if="(e.enterpriseName!=null||e.enterpriseName!='')&&e.enterpriseName.length>8">
                      <span style="position: relative;left: -18%;">
                      {{ e.enterpriseName.substring(0,8) }}...
                    </span>
                    </el-tooltip>
                    <span style="position: relative;left: -18%;" v-else>
                      {{ e.enterpriseName }}
                    </span>
                  </el-button>
                  <div
                    class="thirdDevice_icon thirdHighlightedBtn"
                    @click="thirdDeviceHashighLighted(e,index)"
                    >
                  </div>
                </div>
              </div>
              <!--分页-->
              <div class="paging">
                <el-button type="button" @click="enterpriseList(10,queryParams.pageNum-1)">上一页
                </el-button>
                <span>第{{ queryParams.pageNum }}页</span>
                <el-button type="button" :disabled="nextbutton"
                          @click="enterpriseList(10,queryParams.pageNum+1)">下一页
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </dv-border-box-13>
    </div>
  </div>
</template>

<script>
import {treeselect} from "@/api/system/dept";
import Cookies from "js-cookie";
import {
  enterpriseList,
  enterpriseById,
  selectRegulatoryinformationByEnterpriseId
} from '@/api/forest';

export default {
  name: "StatusAware",
  //   列表容器动态样式 当前是否为摄像头 摄像头设备列表 当前是否为传感器 传感器数量 当前是否为云广播 云广播数量
  props: ['indentleft', 'onShe', 'sheNum', 'onChuan', 'sensorNum', 'onLa', 'loudspeakerNum', 'onZhi', 'enforcementNum', 'deptId'],
  data() {
    return {
      localMark: "She",               // 当前资源类型
      She: false,
      Chuan: false,
      La: false,
      Zhi: false,
      resourceTypeList: [
        {'value': 'She', 'lable': '摄像头'},
        {'value': 'Chuan', 'lable': '传感器'},
        {'value': 'La','lable': '云广播'},
        {'value': 'Zhi','lable': '执法设备'
        }],
      deptName: '',                // 部门名称
      deptOptions: undefined,     // 部门树选项
      defaultProps: {
        children: "children",
        label: "label",
      },                          // 部门树默认props
      placeholderMsg: '',
      cgqTimer: null,
      thirdInput:'',                // 输入框label(三级)
      companyList:[],               // 企业列表
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        enterpriseName: null
      },
      totalAllCompany:0,
      cameraListSearch:[],
      deviceBtn:null
    }
  },
  mounted() {
    this.getTreeselect();
    this.enterpriseList(10,1);
  },
  methods: {
    /**
     * 企业列表接口
     */
    enterpriseList(pageSize, pageNum){
      if (pageNum < 1) {
        this.$modal.msg('当前已是第一页')
        return
      } else if(pageNum > this.totalAllCompany/10+1){
        this.$modal.msg('当前已是最后一页')
        return;
      }
      this.queryParams.pageSize = pageSize;
      this.queryParams.pageNum = pageNum;
      enterpriseList({...this.queryParams ,deptId:Cookies.get("deptId")}).then(res => {
        this.companyList = res.data
        this.totalAllCompany = res.total
      })
    },
    getDeviceList(e,idx){
      this.deviceBtn=idx
      this.$parent.getDeviceList(e);
    },
    thirdDeviceHashighLighted(e,idx){
      this.deviceBtn=idx
      this.$parent.thirdDeviceHashighLighted(e);
    },
    /* 电视墙替换结束 */
    /** 部门树*/
    // 查询部门下拉树结构
    getTreeselect() {
      treeselect().then((response) => {
        console.log(response.data);
        this.deptOptions = response.data;
      });
    },
    // 单击节点
    handleNodeClickForParent(data) {
      this.$emit('handleNodeClickOfParent', data, this.localMark)
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    /**
     * @description 资源点击事件 进行对应的资源展示
     *                         摄像头  传感器  云广播
     * @params {String} type =  she || chuan || la  显示资源的类型
     */
    eventClick(type) {
      this.localMark = type;
      this[`${type}`] = true
      this.$emit(`${type}ClickOfParent`)
      // this.deptId = Cookies.get("deptId")
      clearInterval(this.cgqTimer);
      debugger
      switch (type) {
        case "She":
          this.$emit('sheClick')
          this.jkListIcon = 'sj-icon-jkzx'
          break;
        case "Chuan":
          this.$emit('chuanClick')
          this.cgqTimer = setInterval(() => {
            this.$emit('chuanClick')
          }, 20 * 1000);
          this.jkListIcon = 'sj-icon-centerdata-t-firecontrol-fire-pressure-sensor'
          break;
        case "La":
          this.$emit('laClick');
          this.jkListIcon = 'sj-icon-labaguangbo'
          break;
        case "Zhi":
          this.$emit('zhiClick', this.deptId);
          this.jkListIcon = 'sj-icon-zhongzhi'
          break;
      }
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    chuanSet() {
      if (this.Chuan) {
        this.cgqTimer = setInterval(() => {
          this.getMonitorDeviceAndDataList();
        }, 20000);
      }
    },

  },
  beforeDestroy() {
    clearInterval(this.cgqTimer); //关闭
  },
  watch: {
    'queryParams.enterpriseName':function(val){
      this.enterpriseList(this.queryParams.pageSize, this.queryParams.pageNum, val)
    },
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
    // 监听当前资源类型
    localMark: {
      handler(newVal) {
        this.resourceTypeList.forEach(item => {
          // 将其他不展示类型置为false
          if (item.value != newVal) {
            this[`${item.value}`] = false
          } else {
            this.placeholderMsg = `请输入${item.lable}名称`
          }

        })
      },
    }
  }
}
</script>

<style lang="scss" scoped>
.inputModel{
    width: 100%;
    padding: 0 5%;
  }
  .itemPic{
    width: 24%;
    height: 100%;
  }
  .highlightedBtn{
    background: url('~@/assets/images/video-plaza/highLightBtn.png') 0 0 no-repeat; /* 高亮背景 */
    background-size: cover;
  }
  .notHighlightedBtn{
    background: none;
  }

  .third_contain{
    overflow: hidden;
    overflow-y: scroll;
    width: 99%;
    height: 100%;
    padding-left:10px;
    ::v-deep .el-button{
      width: 80%;
      height: 100%;
      margin-left: 0 !important;
      >span{
        display: inline-block;
        width: 100%;
        text-align: center;
      }
      >span >span{
        left: 0 !important;
        display: inline-block;
        width: 100%;
        text-align: center;
      }
    }
    ::v-deep .el-button:not(:nth-child(1)){
    }
    .thirdDevice_icon{
      width: 10%;
      margin: 1.7% 15px 0 2%;
      height: 70%;
      cursor: pointer;
    }

    .paging {
      height: 4%;
      padding: 0rem .3rem;
      display: flex;
      justify-content: center;
      align-content: center;

      span {
        color: #2bacf7;
        display: flex;
        align-items: center;
        padding: 0 1rem;
      }

      button {
        width: 70px;
        padding: 0 0.3rem;
        height: 1.5rem;
        background-color: #112543;
        color: #2bacf7;
        border: 1px solid #33467f;
      }

      button:hover {
        padding: 0 0.3rem;
        height: 1.5rem;
        background-color: #112543;
        color: #0ff7c5;
        border: 1px solid #1d657f;
      }
    }
  }

  .thirdInputModel{
    margin-top: 10px;
    // margin-left: 8%;
    // width: 95%;
  }
  .sp_sbg{
    overflow: hidden;
    overflow-y: scroll;
    width: 100%;
    height: 80%;
    .sp_sbg_div{
      background-color: rgb(35, 76, 172,0.2);
      margin: 5px 0px;
      border-radius: 5px;

      .el-button{
        background: none;
        outline: 0px;
        border: 0px;
      }
    }

    .sp_sbg_div.on{
      background-color: rgb(35, 76, 172,0.4);
      .el-button{
        span{
          color: #01FBFE!important;
          text-shadow: 0px 0px 3px #01FBFE;
        }
      }
    }

  }
  .sip_img{
    opacity: 0.8;
  }
  .sip_imgon{
    opacity: 1;
    box-shadow: 0px 5px 5px #0b3555;
  }
  .thirdHighlightedBtn{
    background: url('~@/assets/images/video-plaza/camera1_on.png') 0 0 no-repeat; /* 高亮背景 */
    background-size: 100% 100%;
  }
  .thirdDevice_icon{
    width: 10%;
    margin: 1.7% 15px 0 2%;
    height: 70%;
    cursor: pointer;
  }
</style>