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: La }"
              @click="eventClick('La')"
            >

              <div class="icon icon-dot"></div>
              <div class="icon-text">
                <h6>{{ loudspeakerNum }}</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="overflow-y" style="height: 33vh;">-->
          <!--                <el-collapse accordion>-->
          <!--                  <el-collapse-item v-for="(item,index) in region" :key="index">-->
          <!--                    &lt;!&ndash; deptId &ndash;&gt;-->
          <!--                    <template slot="title">-->
          <!--                      <div class="d-l-con sj-collapse" :class="{on:listCurrentIndex1==item.deptId}"-->
          <!--                           v-on:click="selectCameraByDeptId(item.deptId)">-->
          <!--                        <div class="d-l-l-text">-->
          <!--                          <h4 class="collapse-title">{{ item.deptName }}</h4>-->
          <!--                        </div>-->
          <!--                        <div class="d-l-l-count">{{ item.deptCount }}</div>-->
          <!--                      </div>-->
          <!--                    </template>-->
          <!--                  </el-collapse-item>-->
          <!--                </el-collapse>-->
          <!--              </div>-->

          <!--              &lt;!&ndash; 横向柱状 echart &ndash;&gt;-->
          <!--              <div class="overflow-y" style="height: 33vh;">-->
          <!--                <div id="camera-chart" style="width: 100%;height:33vh;"></div>-->
          <!--              </div>-->
          <div class="sj-search">
            <el-input
              v-model="deptName"
              placeholder="请输入部门名称"
              clearable
              size="small"
              prefix-icon="el-icon-search"
            />
          </div>
          <div class="i-list-con h-65" style="height: 62vh">
            <el-tree
              :data="deptOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              node-key="id"
              :default-expanded-keys="[100]"
              @node-click="handleNodeClickForParent"
            />
          </div>
        </div>
      </dv-border-box-13>
    </div>
  </div>
</template>

<script>
import {treeselect} from "@/api/system/dept";
import Cookies from "js-cookie";

export default {
  name: "StatusAware",
  //   列表容器动态样式 当前是否为摄像头 摄像头设备列表 当前是否为传感器 传感器数量 当前是否为云广播 云广播数量
  props: ['indentleft', 'onShe', 'sheNum', 'onChuan', 'sensorNum', 'onLa', 'loudspeakerNum', 'onZhi', 'enforcementNum', 'deptId'],
  data() {
    return {
      localMark: "She",               // 当前资源类型
      She: true,
      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,
    }
  },
  mounted() {
    this.getTreeselect();
  },
  methods: {
    /* 电视墙替换结束 */
    /** 部门树*/
    // 查询部门下拉树结构
    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: {
    // 根据名称筛选部门树
    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>