zhgdyun/src/components/areaTree.vue

<template>
  <div
    class="areaTreeBox"
    :class="
      videoType == 1 || modules == 'markingRoom' || modules == 'carManage'
        ? 'hasVedio'
        : 'noVideo'
    "
    id="videoTreeBox"
  >
    <div
      class="areaTreeInner whiteBlock fullHeight"
      v-show="
        expandOnoff ||
        videoType == 1 ||
        modules == 'markingRoom' ||
        modules == 'carManage'
      "
      :class="$props.styleType ? 'black' : ''"
    >
      <div class="pageTitle" v-if="videoType == 1">视频列表</div>
      <p
        :class="
          modules == 'markingRoom' || modules == 'carManage'
            ? 'pageTitle'
            : 'treeTitle'
        "
        v-else
      >
        查看全部工地
      </p>
      <div class="treeBox">
        <vue-scroll v-if="treeData.length > 0 || videoType != 1">
          <el-tree
            :data="treeData"
            @node-click="handleNodeClick"
            :props="defaultProps"
            node-key="itemId"
            ref="tree"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span
                v-show="data.videoName"
                class="icon-video"
                :class="data.deviceType == 2 ? 'icon-video2' : ''"
              >
              </span>
              <span
                :class="
                  data.videoName
                    ? 'videoName'
                    : data.projectName
                    ? 'projectName'
                    : data.companyType == 2
                    ? 'companyName2'
                    : ''
                "
                :title="node.label"
                >{{ node.label }}</span
              >
              <!-- <span
                :title="data.projectNum"
                v-show="data.projectNum && videoType == 0"
                >{{ data.projectNum }}</span
              > -->
              <el-tooltip
                effect="dark"
                content="播放项目所有视频"
                placement="top"
              >
                <span
                  class="playAllBtn"
                  v-show="
                    videoType == 1 && data.projectName && data.list.length > 0
                  "
                  @click.stop="playMutipleVideo(data)"
                ></span>
              </el-tooltip>
              <span
                v-show="data.projectName && modules == 'markingRoom'"
                class="statusImgBox"
              >
                <img
                  v-show="data.standardDevStopUsingNum != 0"
                  src="@/assets/images/no_alarm.png"
                  alt=""
                  srcset=""
                />
                <img
                  v-show="data.standardDevNotOnline != 0"
                  src="@/assets/images/offline_alarm.png"
                  alt=""
                  srcset=""
                />
                <img
                  v-show="data.standardTemperatureAlarmNum != 0"
                  src="@/assets/images/temp_alarm.png"
                  alt=""
                  srcset=""
                />
                <img
                  v-show="data.standardHumidityAlarmNum != 0"
                  src="@/assets/images/humi_alarm.png"
                  alt=""
                  srcset=""
                />
              </span>
            </span>
          </el-tree>
        </vue-scroll>
        <div class="placeholderBox" v-else>
          <img
            src="@/assets/images/longguang/noData2.png"
            alt=""
            srcset=""
            v-if="company == 'longguang'"
          />
          <img src="@/assets/images/noData2.png" alt="" srcset="" v-else />
          <p>{{ $t('message.videoManage.empty') }}</p>
        </div>
      </div>
    </div>
    <div
      class="onoffBtn"
      :class="expandOnoff ? 'active' : ''"
      v-show="
        videoType == 0 && modules != 'markingRoom' && modules != 'carManage'
      "
      @click="expandOnoff = !expandOnoff"
    >
      <i v-show="expandOnoff" class="el-icon-caret-left"></i>
      <span v-show="!expandOnoff"
        ><i class="el-icon-caret-right"></i>查看所有工地</span
      >
    </div>
  </div>
</template>
<script>
import { getstandardDevListApi } from '@/assets/js/api/markingRoom'
import {
  getComapnyStatisticsListApi,
  getComapnyVideoListApi,
  getComapnyParentNameApi
} from '@/assets/js/api/company/project'
import { getVideoItemInfoApi } from '@/assets/js/api/equipmentCenter/cameraList'
export default {
  props: ['videoType', 'modules', 'activeLive', 'styleType', 'videoSn'],
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'list',
        label: 'name'
      },
      expandOnoff: false,
      searchsn: '',
      videoList: [],
      expandKeys: [],
      numIndex: 1, //用于不用账号登录左边组织机构的点击
      markRoomDevList: [],
      company: ''
    }
  },
  mounted() {
    this.company = COMPANY
    this.loadData()
  },
  methods: {
    getMarkRoomDev(sn) {
      getstandardDevListApi({ projectSn: sn }).then((res) => {
        this.markRoomDevList = res.result
      })
    },
    loadData() {
      console.log(isDockingToWoer)
      console.log(this.$props.videoSn)
      if (this.$props.videoSn) {
        this.searchsn = this.$props.videoSn
        console.log(this.searchsn)
      } else {
        if (isDockingToWoer) {
          this.searchsn = this.$store.state.projectSn
        } else {
          var backArr = this.$store.state.mapBackArr
          console.log(Number(this.$store.state.userInfo.accountType),'778899')
          switch (Number(this.$store.state.userInfo.accountType)) {
            case 2:
              this.searchsn = this.$store.state.userInfo.headquartersSn
              this.numIndex = 2

              break
            case 3:
              this.searchsn = this.$store.state.userInfo.sn
              this.numIndex = 3
              break
            case 4:
              this.searchsn = this.$store.state.userInfo.sn
              this.numIndex = 4
              break
            case 5:
              this.searchsn = this.$store.state.userInfo.sn
              this.numIndex = 5
              break
            case 7:
              this.searchsn = this.$store.state.userInfo.sn
              this.numIndex = 7
              break
          }
          if (this.videoType == 1 && backArr.length > 0) {
            this.searchsn = backArr[backArr.length - 1].sn
          }
          if (this.$route.path.indexOf('/project/') != -1) {
            this.searchsn = this.$store.state.projectSn
          }
        }
      }
      console.log(this.searchsn,'113355')
      // getComapnyVideoListApi({
      //   sn: this.searchsn
      // }).then((res) => {
      //   this.videoList = res.result.videoList;
      //   if(this.videoList[0].videoType==3){
      //     this.$emit('playParams',this.videoList)
      //   }
      // });
      getComapnyStatisticsListApi({
        sn: this.searchsn,
        videoType: this.videoType,
        standardType: this.modules == 'markingRoom' ? 1 : 0
      }).then((res) => {
        console.log('-----tree')
        this.treeData = res.result.companyList
          ? res.result.companyList
          : res.result.projectList
            ? res.result.projectList
            : res.result.videoList
        console.log('this.$route.path', this.$route.path)
        console.log(this.treeData)

        if (this.$route.path.indexOf('dataBoard/digitalSite') == -1) {
          console.log('areaTree.vue传递设备列表数据')
          this.$emit('playParams', this.treeData)
          console.log(this.treeData)
        }
        if (this.$route.path.indexOf('/firm/towerManage') != -1) {
          this.$emit('getTreeData', this.treeData)
        }
        console.log(
          'areaTree.vue传递设备列表数据  --- this.activeLive : ',
          this.activeLive
        )
        if (this.activeLive) {
          this.treeData.forEach((item) => {
            if (this.activeLive.devSn == item.serialNumber) {
              this.handleNodeClick(item)
              this.$nextTick(() => {
                this.$refs['tree'].setCurrentKey(item.itemId.toString())
              })
            }
          })
        }
      })
    },
    //获取视频播放url
    getVideo(itemId, videoType, item) {
      //videoType    1萤石云，2乐橙，3ISC，4大华，5宇视，6国标
      //playType 播放方式，1高清RTMP,2流畅RTMP,3高清HLS,4流畅HLS,5高清轻量级插件，6流畅轻量级插件
      getVideoItemInfoApi({
        itemId: itemId
      }).then((res) => {
        var result = res.result
        var url = ''

        if (videoType == 1) {
          switch (Number(result.projectVideoConfig.playType)) {
            case 1:
              url = result.videoInfo.rtmpHd
              break
            case 2:
              url = result.videoInfo.rtmp
              break
            case 3:
              url = result.videoInfo.hdFlvAddress
              break
            case 4:
              url = result.videoInfo.flvAddress
              break
            case 5:
              url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.hd.live`
              break
            case 6:
              url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.live`
              break
            default:
              url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.live`
              break
          }
          this.$emit('playParams', [
            {
              accessToken: result.accessToken,
              url: url,
              videoType: videoType,
              playType: result.projectVideoConfig.playType
            }
          ])
        }
        if (videoType == 2) {
          // url=`imou://open.lechange.com/${item.serialNumber}/${item.channelId}/1?streamId=1`
          // this.$emit('playParams',{accessToken:result.accessToken,url:url,videoType:item.videoType})
          this.$emit('playParams', [
            {
              accessToken: result.accessToken,
              url: item.liveRadioUrl,
              videoType: item.videoType
            }
          ])
        }
        // if(videoType==3){
        //   item.date = new Date()
        //   this.$emit('playParams',[item])
        // }
        // console.log('视频播放url',url)
      })
    },
    handleNodeClick(data) {
      console.log(data, this.videoType, '5555')
      let companyType = data.companyType
      if (this.videoType == 1) {
        //用于企业级视频监控页面
        if (data.videoName) {
          if (data.videoType == 3) {
            data.date = new Date()
            this.$emit('playParams', [data])
          } else {
            this.getVideo(data.itemId, data.videoType, data)
          }
        }
      } else {
        let sn1 = data.projectSn ? data.projectSn : data.companySn
        getComapnyParentNameApi({
          sn: sn1
        }).then((res) => {
          let backArr = []
          let data = res.result
          console.log(res)
          backArr.push({
            name: data.firstCompanyName,
            sn: data.firstCompanySn
          })
          if (data.secondCompanyName) {
            backArr.push({
              name: data.secondCompanyName,
              sn: data.secondCompanySn
            })
          }
          if (data.thirdCompanyName) {
            backArr.push({
              name: data.thirdCompanyName,
              sn: data.thirdCompanySn
            })
          }
          if (data.projectName) {
            backArr.push({ name: data.projectName, sn: data.projectSn })
          }
          if (!companyType) {
            backArr[backArr.length - 1].isProject = true
          }
          console.log(companyType, backArr)
          this.$store.commit('setMapBackArr', backArr)
          this.$parent.initData()
        })
      }
    },
    playMutipleVideo(data) {
      this.$emit('playParams', data.list)
    }
  }
}
</script>
<style lang="less" scoped>
.treeTitle {
  padding: 0px 0 20px 0px;
}
.pageTitle {
  margin-bottom: 20px;
}
.onoffBtn {
  color: white;
  width: 20px;
  font-size: 12px;
  position: absolute;
  right: -20px;
  top: calc(50% - 93px);
  padding: 35px 0;
  text-align: center;
  background-color: #bbb;
  cursor: pointer;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  .el-icon-caret-left {
    line-height: 116px;
  }
  &.active {
    background-color: rgba(0, 0, 0, 0.7);
  }
}
.custom-tree-node {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.areaTreeBox {
  /deep/.el-tree {
    font-size: 15px;
    width: 100%;
    background-color: transparent;
    .el-tree-node {
      width: 100%;
      white-space: normal;
      &:focus > .el-tree-node__content {
        background-color: transparent;
      }
      &.is-current > .el-tree-node__content {
        background-color: rgba(81, 129, 246, 0.14);
        color: #5181f6;
      }
    }
    .el-tree-node__content {
      // height: 32px;
      padding: 7px 0;
      height: auto;
      line-height: 16px;
      position: relative;
      // margin-bottom: 7px;
      &:hover {
        background-color: rgba(81, 129, 246, 0.14);
        color: #5181f6;
        // font-weight: bold;
        .icon-video {
          background: url('../assets/images/icon-video-blue.png') center center
            no-repeat;
          &.icon-video2 {
            background: url('../assets/images/icon-video2-blue.png') center
              center no-repeat;
          }
        }
      }

      .videoName {
        font-size: 14px;
      }
      .projectName {
        font-size: 14px;
        width: calc(100% - 30px);
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .companyName2 {
        font-size: 16px;
        font-weight: bold;
      }
    }
    .el-tree-node__expand-icon {
      font-size: 16px;
      padding: 0 6px;
      &.is-leaf {
        color: transparent !important;
      }
    }
  }
}
.noVideo.areaTreeBox {
  height: calc(100% + 48px);
  position: absolute;
  top: -48px;
  left: 0;
  .treeTitle {
    color: white;
  }
  /deep/.el-tree {
    color: #ffffff;

    .el-tree-node__content:hover,
    .el-tree-node:focus > .el-tree-node__content {
      background-color: transparent;
    }

    .el-tree__empty-text {
      color: white;
    }
  }
  /deep/.el-tree-node__expand-icon {
    color: #ffffff;
  }
}
.areaTreeInner {
  background-color: rgba(0, 0, 0, 0.7);
  width: 300px;
  padding: 20px 15px;
  height: calc(100% - 40px);
}
.treeBox {
  height: calc(100% - 42px);
  width: 306px;
  margin-left: -15px;
}
.hasVedio.areaTreeBox {
  height: 100%;
  position: relative;
  top: 0;
  float: left;
  .treeBox {
    background-color: rgba(216, 216, 216, 0.2);
  }
  .el-tree {
    padding: 20px 10px;
    height: calc(100% - 50px);
    width: calc(100% - 20px);
    .disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
  .treeTitle {
    background-color: #f7f7f7;
    margin-bottom: 10px;
  }
  .areaTreeInner {
    background-color: #ffffff;
  }
  /deep/.el-tree-node__expand-icon {
    // color: rgba(42, 46, 63, 0.3);
  }
  // /deep/.el-tree-node__expand-icon.is-leaf{
  //   color: rgba(42, 46, 63, 0.3);
  // }
}
.icon-video {
  margin-right: 13px;
  width: 14px;
  height: 20px;
  display: inline-block;
  background: url('../assets/images/icon-video.png') center center no-repeat;
  // background-size: 14px auto ;
  vertical-align: top;
  &.icon-video2 {
    background: url('../assets/images/icon-video2.png') center center no-repeat;
  }
}
.playAllBtn {
  width: 18px;
  height: 18px;
  // display: inline-block;
  // margin-left: 10px;
  // vertical-align: text-top;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url('../assets/images/icon-play.png') center center no-repeat;
  &:hover {
    background: url('../assets/images/icon-play-blue.png') center center
      no-repeat;
  }
}
.statusImgBox {
  float: right;
  img {
    margin-left: 5px;
    &:first-child {
      margin-left: 0;
    }
  }
}

.longguang {
  .el-tree-node__content {
    &:hover {
      background-color: rgba(81, 129, 246, 0.14);
      color: #5181f6;
      // font-weight: bold;
      .icon-video {
        background: url('../assets/images/longguang/icon-video-blue.png') center
          center no-repeat !important;
        &.icon-video2 {
          background: url('../assets/images/longguang/icon-video2-blue.png')
            center center no-repeat !important;
        }
      }
    }
  }
  .playAllBtn {
    &:hover {
      background: url('../assets/images/longguang/icon-watch-video.png') center
        center no-repeat !important;
    }
  }
}
// 以下为龙光大屏video组件引入此组件时的样式
.black {
  float: left;
  background-color: #011536 !important;
  color: white !important;
  height: calc(100% - 70px);
  .pageTitle {
    box-sizing: border-box;
    padding: 5px 10px;
    margin-bottom: 20px;
    background-color: #021330;
    height: 20px;
    line-height: 10px;
    &::before {
      background-color: #fff;
    }
    font-size: 18px;
  }
  .treeBox {
    background-color: #021330 !important;
    position: relative;
  }
  .companyName2 {
    color: #fff;
    font-weight: 100 !important;
    font-size: 15px;
    font-family: '黑体', '微软雅黑', 'Helvetica Neue', Helvetica, 'PingFang SC',
      'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif !important;
  }
  .custom-tree-node {
    color: #fff;
  }
  .areaTreeBox {
    /deep/ .el-tree-node__expand-icon {
      color: #fff !important;
    }
    /deep/ .el-tree-node__content {
      color: #fff !important;
    }
  }
  .icon-video {
    background: url('../assets/images/icon-video-white.png') center center
      no-repeat;
    // background-size: 14px auto ;
    vertical-align: top;
    &.icon-video2 {
      background: url('../assets/images/icon-video2.png') center center
        no-repeat;
    }
  }
  .projectName:hover {
    color: #5181f6;
    &::before {
      content: '';
      display: inline-block;
      background-color: #fff;
      width: 1.5%;
      height: 100%;
      position: absolute;
      top: 0%;
      left: 0%;
      background-color: #5181f6;
    }
  }
  .custom-tree-node:hover {
    color: #5181f6;
    &::before {
      content: '';
      display: inline-block;
      background-color: #fff;
      width: 1.5%;
      height: 100%;
      position: absolute;
      top: 0%;
      left: 0%;
      background-color: #5181f6;
    }
  }
}
</style>