index.vue

<template>
  <div class="interactive-wrapper height100">
    <el-row :gutter="16" style="margin-left:0;margin-right:0;height:calc(100% - 41px);">
      <el-col :span="6" class="height100">
        <el-card class="height100">
          <div class="tree-title">组织机构</div>
          <div class="tree-body">
            <el-input suffix-icon="el-icon-search" placeholder="请输入组织结构名称" v-model="filterText"></el-input>
            <el-tree
              class="filter-tree"
              :data="treeData"
              :props="defaultProps"
              default-expand-all
              accordion
              :filter-node-method="filterNode"
              @node-click="handleNodeClick"
              ref="tree"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" class="height100" ref="rightBox">
        <el-card class="height100">
          <div class="content-title">
            <div class="title">“北京市政府”展板互动信息汇总</div>
            <div class="page-tip">
              <span class="page-tip-title">页面说明:</span>
              <span class="page-tips">可按照账号状态及所属单位进行信息筛选。可新增机顶盒账号，“*”为必填项。请先创建单位管理员账号，否则机顶盒无法激活</span>
            </div>
          </div>
          <div class="scrollBox" :style="{height:height+'px'}">
            <div class="content-item" v-for="(item,index) in tableData" :key="index">
              <h5 class="title">{{item.name}}</h5>
              <p>{{item.content}}</p>
              <div class="img-box">
                <img v-for="(j,idx) in item.images" :src="j" :key='idx' alt="">
                <!-- <img src="@/assets/audio-icon.png" alt="">
                <img src="@/assets/audio-icon.png" alt="">
                <img src="@/assets/video-icon.png" alt="">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic139.nipic.com%2Ffile%2F20170825%2F24044964_112347917039_2.jpg&refer=http%3A%2F%2Fpic139.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616393684&t=43405cf2c33d8addc98e0909da78f359" alt=""> -->
              </div>
              <div class="author">
                <div>{{item.username}}</div>
                <div>{{item.createTime}}</div>
              </div>
            </div>
          </div>
          <div class="partyt-pagination" style="margin:0 20px;">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page="page.currentPage"
              :page-size="page.pageSize"
              layout="prev, pager, next, jumper"
              :total="page.total"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>

export default {
  data() {
    return {
      height:'',
      filterText: "",
      page: { currentPage: 1, pageSize: 10, total: 0 },
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      selectAreaId:'',
      tableData: [
        {
          title: "建党百年，爱国主义教育",
          content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.",
          author: "邢潇潇",
          files:['@/assets/audio-icon.png','@/assets/video-icon.png','https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic139.nipic.com%2Ffile%2F20170825%2F24044964_112347917039_2.jpg&refer=http%3A%2F%2Fpic139.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616393684&t=43405cf2c33d8addc98e0909da78f359'],
          macUrl: "2021/01/02  14:34:22"
        },
        {
          title: "建党百年，爱国主义教育",
          content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.",
          author: "邢潇潇",
          files:['@/assets/audio-icon.png','@/assets/video-icon.png','https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic139.nipic.com%2Ffile%2F20170825%2F24044964_112347917039_2.jpg&refer=http%3A%2F%2Fpic139.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616393684&t=43405cf2c33d8addc98e0909da78f359'],
          macUrl: "2021/01/02  14:34:22"
        },
      ]
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted(){
    this.height = this.$refs.rightBox.$el.offsetHeight-160
    // 获取全部组织机构数据
    this.getOrgData()
    this.onSearch()
  },
  methods: {
    // 查询
    onSearch() {
      this.page.currentPage = 1
      this.getTableData();
    },
    // 获得数据接口
    getTableData() {
      let vm = this;
      let param = {
        _index:this.page.currentPage,
        _size:this.page.pageSize,
        orgId: this.selectAreaId
      };
      vm.$https(
        {
          url: "interaction/getList",
          method: "post",
          authType: this.backToken
        },
        vm.$qs.stringify(param)
      ).then(res => {
          if(res.data.resultCode==='200'){
            let data = res.data.data;
            vm.page.total = data.total;
            vm.tableData = data.records;
            vm.tableData.forEach(item=>{
              item.images = item.images.split(',')
              item.images.forEach((result,index)=>{
                if (/\.(MP4|mp4)/.test(result)){
                  item.images[index] = require('@/assets/video-icon.png')
                }else if (/\.(MP3|mp3)/.test(result)){
                  item.images[index] = require('@/assets/audio-icon.png')
                }else {
                  item.images[index] = require('@/assets/default-img.jpeg')
                }
              })
            })
            
            vm.tableData = [...vm.tableData]
          }else{
            this.$message({type:'error',message:res.data.message})
          }
          
        })
        .catch(function(err) {
          console.log(err);
        })
    },
    // 获取组织机构数据
    getOrgData(){
      this.$https({
        method: "get",
        url: "organ/getList",
        authType: this.backToken
      }).then(res => {
        if(res.data.resultCode === '200'){
          this.treeData = res.data.data;
        }else{
          this.$message({type:'error',message:res.data.message})
        }
        },
        error => {
          console.log(error);
        }
      );
    },
    // 过滤树结构数据
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 点击节点事件
    handleNodeClick(data) {
      this.selectAreaId = data.areaId
      this.getTableData()
    },
    // 分页
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getTableData();
    },
  }
};
</script>
<style lang="less">
@import '../../../style/pagination.less';
.interactive-wrapper {
  .scrollBox {
    overflow: auto;
  }
  .page-tip {
    display: flex;
    font-size: 14px;
    color: #333333;
    .page-tip-title {
      font-weight: bold;
      padding-right: 10px;
    }
  }
  .el-card__body {
    padding: 0;
  }
  .tree-title {
    font-size: 16px;
    color: #fff;
    text-align: center;
    height: 56px;
    line-height: 56px;
    background: #9B1E23;
    border-radius: 8px 8px 0 0;
  }
  .tree-body {
    padding: 20px;
    .el-input__inner {
      background: #F8F8F8;
      border-radius: 22px;
    }
    .el-input__icon {
      font-size: 18px;
      color: #AC9374;
    }
    .el-tree-node__content:hover {
      border-radius: 20px;
    }
    .el-tree-node__content {
      height:30px;
      margin: 5px 0;
    }
  }
  .content-title {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #eee;
    .title {
      font-size: 20px;
      color: #333;
    }
    .page-tips {
      width:500px;
    }
  }
  .content-item {
    font-size: 16px;
    margin: 20px;
    padding: 40px;
    background: #f8f8f8;
    .title {
      padding-bottom: 20px;
    }
    p {
      padding-bottom: 20px;
      border-bottom: 1px solid #bbb;
    }
    .img-box {
      padding: 20px;
      border-bottom: 1px solid #bbb;
      img {
        width: 90px;
        height: 90px;
        margin-right: 20px;
      }
    }
    .author {
      display: flex;
      justify-content: space-between;
      padding-top: 16px;
      font-size: 14px;
    }
  }
}
</style>