添加机顶盒基础管理页面

src/config/menu.js

@@ -67,7 +67,9 @@ export const menuList = [
               subMenu:[
                   {label:'机顶盒信息管理', imgUrl:'',url:'/STBbase'},
                   {label:'机顶盒运维信息管理', imgUrl:'',url:'/STBoperation'},
-                  {label:'机顶盒运维账号管理', imgUrl:''}
+                  {label:'机顶盒运维账号管理', imgUrl:''},
+                  {label:'app版本管理', imgUrl:'',url:'/appversion'},
+                  {label:'app界面自定义', imgUrl:'',url:'/pagecustom'},
                    
               ]
           }
@@ -81,8 +83,6 @@ export const menuList = [
               subMenu:[
                 {label:'机构管理', imgUrl:'',url:'/organ'},
                 {label:'日志管理', imgUrl:'',url:'/log'},
-                {label:'app版本管理', imgUrl:'',url:'/edition'},
-                {label:'app界面自定义', imgUrl:''},
                 {label:'修改密码', imgUrl:'',url:'/changePwd'},
               ]
             },

src/page/STB/appversion/components/addDialog.vue

+<template>
+  <el-dialog
+    class="custom-dialog"
+    custom-class="party-dialog"
+    title="上传新版安装包"
+    width="540px"
+    :visible.sync="formVisible"
+    :before-close="close"
+  >
+    <div class="dialog-content">
+      <el-form
+        :model="formItem"
+        class="party-form"
+        ref="formItem"
+        label-width="125px"
+        label-position="right"
+        :rules="rules"
+      >
+        <el-form-item label="版本号1：" prop="version">
+          <el-input size="small" v-model="formItem.version" clearable placeholder="请输入版本号"></el-input>
+        </el-form-item>
+        <el-form-item label="版本信息：" prop="versionContent">
+          <el-input type="textarea" size="small" v-model="formItem.versionContent"></el-input>
+        </el-form-item>
+        <el-form-item label="更新内容：" prop="updateContent">
+          <el-input type="textarea" size="small" v-model="formItem.updateContent"></el-input>
+        </el-form-item>
+        <el-upload
+          class="text-center"
+          drag
+          action="#"
+          :auto-upload="false"
+          :on-change="onChange"
+          :file-list="fileList">
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">将安装包拖到此处，或<em>点击上传安装包</em></div>
+          <div class="el-upload__tip" slot="tip">只能上传zip文件，且不超过500kb</div>
+        </el-upload>
+      </el-form>
+      <div slot="footer" class="dialog-footer btn-group">
+        <el-button size="mini" type="primary" @click="submitForm('formItem')">确定</el-button>
+        <el-button size="mini" @click="close">取 消</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      formVisible: false,
+      formItem: {},
+      fileList:[],
+      rules: {
+        version: [
+          { required: true, message: "请输入版本号", trigger: "blur" }
+        ],
+        versionContent: [{ required: true, message: "请输入版本信息", trigger: "blur" }],
+        updateContent: [{ required: true, message: "请输入更新内容", trigger: "blur" }]
+      }
+    };
+  },
+  methods: {
+    backFn(item) {
+      this.formVisible = true;
+      this.$nextTick(()=>{
+        this.$refs.formItem.clearValidate();
+      })
+      this.formItem = {};
+    },
+    // 关闭
+    close() {
+      this.formVisible = false;
+      for (let key in this.formItem) {
+        this.formItem[key] = null;
+      }
+      this.$refs["formItem"].resetFields();
+    },
+    // 上传数据操作
+    onChange(file, fileList) {
+      this.fileList = fileList
+    },
+
+    // 保存编辑信息
+    submitForm() {
+      let _this = this;
+      _this.$refs.formItem.validate(valid => {
+        if (valid) {
+          if (!this.fileList.length) {
+            this.$message.info('请先选取文件!')
+            return false
+          }
+          const fileType = this.fileList.every(item => {
+            console.log(item.raw.type)
+            return item.raw.type === 'application/zip'
+          })
+          if (!fileType) {
+            this.$message.error('支持扩展名：.zip格式!')
+            return false
+          }
+          const param = new FormData()
+          this.fileList.forEach(file => {
+            param.append('file', file.raw) // 此处一定是append file.raw 上传文件只需维护fileList file.raw.name要加上
+            param.append('fileName', file.name)
+            param.append('version', this.formItem.version)
+            param.append('versionContent', this.formItem.versionContent)
+            param.append('updateContent', this.formItem.updateContent)
+          })
+          _this.$emit("refreshFn");
+          _this.formVisible = false;
+          // _this.$https(
+          //     {
+          //       url: "menu/edit",
+          //       method: "put",
+          //       authType: this.backToken
+          //     },
+          //     _this.$qs.stringify(param)
+          //   ).then(res => {
+          //       if (res.data.status == 200 || res.data.status == 201) {
+          //         _this.$message({
+          //           type: "success",
+          //           message: res.data.message
+          //         });
+          //         _this.formVisible = false;
+          //         _this.$refs["formItem"].resetFields();
+          //       } else {
+          //         _this.$message({
+          //           type: "error",
+          //           message: res.data.message
+          //         });
+          //       }
+          //     },
+          //     error => {
+          //       _this.$message({
+          //         type: "error",
+          //         message: error
+          //       });
+          //     }
+          //   );
+        }
+      });
+    },
+  }
+};
+</script>
+
+<style lang="less">
+@import "../../../../style/dialog.less";
+.text-center {
+  text-align: center;
+}
+.custom-dialog {
+  .party-form .el-input {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file

src/page/STB/appversion/components/detailDialog.vue

+<template>
+  <el-dialog
+    custom-class="party-dialog"
+    title="详情"
+    width="540px"
+    :visible.sync="formVisible"
+    :before-close="close"
+  >
+    <div class="dialog-content">
+      <el-form
+        :model="formItem"
+        class="party-form"
+        ref="formItem"
+        label-width="180px"
+        label-position="right"
+        :rules="rules"
+      >
+        <el-form-item label="上传时间：" prop="uploadTime">
+          <el-input size="small" v-model="formItem.uploadTime" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="操作者：" prop="name">
+          <el-input size="small" v-model="formItem.name" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="是否为当前使用版本：" prop="isNew">
+          <el-input size="small" v-model="formItem.isNew" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="版本信息：" prop="version">
+          <el-input type="textarea" size="small" v-model="formItem.version" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="更新内容：" prop="newContent">
+          <el-input type="textarea" size="small" v-model="formItem.newContent" disabled></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer btn-group">
+        <el-button size="mini" type="primary" @click="close()">确定</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      formVisible: false,
+      formItem: {},
+    };
+  },
+  methods: {
+    backFn(item) {
+      this.formVisible = true;
+      this.formItem = item;
+      
+    },
+    // 关闭
+    close() {
+      this.formVisible = false;
+    },
+  }
+};
+</script>
+
+<style lang="less">
+@import "../../../../style/dialog.less";
+</style>
\ No newline at end of file

src/page/STB/appversion/components/index.js

+import addDialog from './addDialog.vue'
+import detailDialog from './detailDialog.vue'
+export {
+    addDialog,
+    detailDialog
+}

src/page/STB/appversion/index.vue

+<template>
+  <div class="edition-wrapper height100">
+    <div class="search-container">
+      <el-form :inline="true" :model="form">
+        <el-form-item>
+          <el-date-picker
+            v-model="form.dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <div class="btn-group">
+            <el-button type="primary" @click="onSearch">查询</el-button>
+            <el-button @click="handleReset">重置</el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+      <div class="page-tip">
+        <span class="page-tip-title">页面说明:</span>
+        <span class="page-tips">可查看系统使用过的所有app版本信息，可设置其中一个版本为当前使用版本。可产看安装包详情信息。可上传新的安装包，“*”为必填项。</span>
+      </div>
+    </div>
+    <div class="table-content">
+      <div class="btn-group">
+        <el-button type="primary" @click="addBox">上传安装包</el-button>
+      </div>
+      <div class="party-table">
+        <el-table border style="width: 100%;height:100%" height="100%" :data="tableData">
+          <el-table-column type="index" width="120" label="序号"></el-table-column>
+          <el-table-column label="app版本号" prop="version"></el-table-column>
+          <el-table-column label="是否为最新版本" prop="isNew"></el-table-column>
+          <el-table-column label="上传时间" prop="uploadTime"></el-table-column>
+          <el-table-column label="操作者" prop="name"></el-table-column>
+          <el-table-column label="操作" header-align="center" align="center">
+            <template slot-scope="scope" width="220">
+              <el-button-group>
+                <el-button
+                  title="详情"
+                  size="mini"
+                  type="text"
+                  @click="handleDetail(scope.row)"
+                >详情&nbsp;&nbsp;</el-button>
+                <el-button
+                  title="激活"
+                  type="text"
+                  size="mini"
+                  @click="ableBtn(scope.row)"
+                >启用&nbsp;&nbsp;</el-button>
+                
+              </el-button-group>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="partyt-pagination">
+        <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>
+    </div>
+    <add-dialog ref="addDialog" @refreshFn="onSearch"/>
+    <detail-dialog ref="detailDialog"/>
+  </div>
+</template>
+<script>
+import { partyPagination, partyTable } from "@/components/index";
+import { addDialog , detailDialog } from "./components/index";
+export default {
+  data() {
+    return {
+      page: { currentPage: 1, pageSize: 10, total: 4 },
+      form: {
+        dateRange: []
+      },
+      tableData: [
+        // 序号  app版本号  是否为最新版本  上传时间 操作者 操作
+        {
+          uploadTime: "2016-05-02",
+          name: "王小虎",
+          version: "V1.0.0",
+          isNew: "是"
+        },
+        {
+          uploadTime: "2016-05-02",
+          name: "王小虎",
+          version: "V1.0.0",
+          isNew: "是"
+        }
+      ]
+    };
+  },
+  components: { partyPagination ,addDialog ,detailDialog},
+  mounted() {},
+  methods: {
+    // 查询
+    onSearch() {
+      this.page.currentPage = 1
+      this.getTableData();
+    },
+    // 获得数据接口
+    getTableData() {
+      let vm = this;
+      let param = {
+        _index: this.page.currentPage,
+        _size: this.page.pageSize,
+        startTime: this.form.dateRange.length?this.form.dateRange[0]:'' ,
+        endTime: this.form.dateRange.length?this.form.dateRange[1]:'' ,
+      };
+      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
+          }else{
+            this.$message({type:'error',message:res.data.message})
+          }
+        })
+        .catch(function(err) {
+          console.log(err);
+        });
+    },
+    // 新增弹框打开
+    addBox() {
+      this.$refs.addDialog.backFn()
+    },
+    // 详情弹框打开
+    handleDetail(item) {
+      this.$refs.detailDialog.backFn(item)
+    },
+    // 启用
+    ableBtn(row, str) {
+      const _this = this;
+      this.$confirm("确定要设置为最新版本？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        center: true
+      })
+        .then(() => {
+          // 请求接口
+          this.$message.success("操作成功")
+        })
+        .catch(() => {
+          this.$message("已取消")
+        });
+    },
+    handleReset() {
+      this.form = {};
+    },
+    // 分页
+    handleCurrentChange(val) {
+      this.page.currentPage = val
+      this.getTableData()
+    }
+  }
+};
+</script>
+<style lang="less">
+@import "../../../style/dialog.less";
+@import "../../../style/table.less";
+@import "../../../style/pagination.less";
+</style>
\ No newline at end of file

src/page/STB/base/components/dialog.vue

+<template>
+  <el-dialog
+    custom-class="party-dialog"
+    :title="title"
+    width="540px"
+    :visible.sync="formVisible"
+    :before-close="close"
+  >
+    <div class="dialog-content">
+      <el-form
+        :model="formItem"
+        class="party-form"
+        ref="formItem"
+        label-width="125px"
+        label-position="right"
+        :rules="rules"
+      >
+        <el-form-item label="所属单位：" prop="unit">
+          <el-select
+            size="small"
+            v-model="formItem.unit"
+            clearable
+            placeholder="请选择所属单位"
+            @change="selectItem"
+          >
+            <el-option
+              v-for="item in unitOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="机构地理位置：" prop="address">
+          <el-input size="small" v-model="formItem.address" disabled></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer btn-group">
+        <el-button size="mini" type="primary" @click="submitForm('formItem')">确定</el-button>
+        <el-button size="mini" @click="close">取 消</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      title:'',
+      formVisible: false,
+      formItem: {},
+      unitOptions: [
+        {
+          value: "1",
+          label: "黄金糕"
+        },
+        {
+          value: "2",
+          label: "双皮奶"
+        },
+        {
+          value: "3",
+          label: "蚵仔煎"
+        },
+        {
+          value: "4",
+          label: "龙须面"
+        },
+        {
+          value: "5",
+          label: "北京烤鸭"
+        }
+      ],
+      rules: {
+        unit: [{ required: true, message: "请选择所属单位", trigger: "change" }]
+      }
+    };
+  },
+  methods: {
+    backFn(item) {
+      this.formVisible = true;
+      this.$nextTick(()=>{
+        this.$refs.formItem.clearValidate();
+      })
+      if (item) {
+        // 编辑
+        this.formItem = item;
+        this.title="编辑"
+      } else {
+        // 新增
+        this.title="新增"
+        this.formItem = {};
+      }
+      
+    },
+    // 关闭
+    close() {
+      this.formVisible = false;
+      for (let key in this.formItem) {
+        this.formItem[key] = null;
+      }
+      this.$refs["formItem"].resetFields();
+    },
+    // 联动出地址
+    selectItem(val) {
+      this.formItem.address = val;
+    },
+    // 保存编辑信息
+    submitForm() {
+      let _this = this;
+      _this.$refs.formItem.validate(valid => {
+        if (valid) {
+          let searchObj = {};
+          for (let key in _this.formItem) {
+            if (this.formItem[key]) {
+              searchObj[key] = _this.formItem[key];
+            }
+          }
+          _this.$emit("refreshFn");
+          _this.formVisible = false;
+          // _this.$https(
+          //     {
+          //       url: "menu/edit",
+          //       method: "put",
+          //       authType: this.backToken
+          //     },
+          //     _this.$qs.stringify(searchObj)
+          //   ).then(res => {
+          //       if (res.data.status == 200 || res.data.status == 201) {
+          //         _this.$message({
+          //           type: "success",
+          //           message: res.data.message
+          //         });
+          //         _this.formVisible = false;
+          //         _this.$refs["formItem"].resetFields();
+          //       } else {
+          //         _this.$message({
+          //           type: "error",
+          //           message: res.data.message
+          //         });
+          //       }
+          //     },
+          //     error => {
+          //       _this.$message({
+          //         type: "error",
+          //         message: error
+          //       });
+          //     }
+          //   );
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="less">
+@import "../../../../style/dialog.less";
+</style>
\ No newline at end of file

src/page/STB/pageCustom/index.vue

+<template>
+  <div class="custom-page height100">
+    <el-card class="height100">
+      <!-- <div class="page-title">app界面自定义</div> -->
+      <div class="page-content">
+        <div class="page-tip">
+          <span class="tip-title">页面说明：</span>
+          <span>可更换app目录界面及运行界面的背景图，可新增背景图，可预览背景图</span>
+        </div>
+        <div class="top-content">
+          <div class="content-title">
+            <div class="title">app目录界面设置</div>
+            <div class="btn-group">
+              <el-button type="default" @click="uploadPageImg">上传背景图</el-button>
+            </div>
+          </div>
+          <!-- <div class="swiper-content">
+            <swiper class="swiper" :options="swiperOption">
+              <swiper-slide v-for="(item, index) in list" :key="index">
+                <el-col :span="24" class="slider-group-item">{{index}}</el-col>
+              </swiper-slide>
+              <div slot="button-prev" class="swiper-button-prev">
+                <i class="el-icon-arrow-left" />
+              </div>
+              <div slot="button-next" class="swiper-button-next">
+                <i class="el-icon-arrow-right" />
+              </div>
+            </swiper>
+          </div> -->
+        </div>
+        <div class="down-content">
+          <div class="content-title">
+            <div class="title">app运行画面设置</div>
+            <div class="btn-group">
+              <el-button type="default" @click="uploadRunImg">上传背景图</el-button>
+            </div>
+          </div>
+          <el-carousel :autoplay="false" type="card" height="120px">
+            <el-carousel-item v-for="item in 6" :key="item">
+              <h3 class="medium">{{ item }}</h3>
+            </el-carousel-item>
+          </el-carousel>
+        </div>
+      </div>
+      <div class="btn-group footer-btn">
+        <el-button size="mini" @click="close">取 消</el-button>
+        <el-button size="mini" type="primary" @click="submitForm('editform')">确定</el-button>
+      </div>
+    </el-card>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      swiperOption: {
+        effect: "coverflow",
+        grabCursor: true,
+        centeredSlides: true,
+        slidesPerView: "auto",
+        coverflowEffect: {
+          rotate: 50,
+          stretch: 0,
+          depth: 100,
+          modifier: 1,
+          slideShadows: true
+        },
+        pagination: {
+          el: ".swiper-pagination"
+        }
+      }
+    };
+  },
+  mounted() {},
+  methods: {
+    uploadPageImg() {},
+    uploadRunImg() {}
+  }
+};
+</script>
+<style lang="less" scoped>
+.custom-page {
+  position: relative;
+  .page-title {
+    font-size: 20px;
+    color: #333333;
+    text-align: center;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #eee;
+  }
+  .page-tip {
+    background: #f7f5f2;
+    border-radius: 8px;
+    padding: 16px 20px;
+    margin: 20px 0;
+    font-size: 14px;
+    color: #333333;
+    .tip-title {
+      font-weight: 700;
+      margin-right: 5px;
+    }
+  }
+  .page-content {
+    width: 800px;
+    margin: 0 auto;
+    .content-title {
+      display: flex;
+      justify-content: space-between;
+      padding: 20px;
+      .title {
+        position: relative;
+        font-size: 18px;
+        color: #333333;
+        &::before {
+          content: "";
+          position: absolute;
+          top: 6px;
+          left: -20px;
+          width: 4px;
+          height: 18px;
+          background: #000;
+        }
+      }
+      .el-button {
+        padding: 0 20px;
+      }
+    }
+    .el-carousel__item h3 {
+      color: #475669;
+      font-size: 14px;
+      opacity: 0.75;
+      line-height: 200px;
+      margin: 0;
+    }
+
+    .el-carousel__item:nth-child(2n) {
+      background-color: #99a9bf;
+    }
+
+    .el-carousel__item:nth-child(2n + 1) {
+      background-color: #d3dce6;
+    }
+  }
+  .footer-btn {
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    right: 0;
+    text-align: center;
+    padding-top: 20px;
+    border-top: 1px solid #eee;
+    .el-button {
+      padding: 0 20px;
+    }
+  }
+  /deep/.el-carousel__arrow {
+    background-color: #ac9374;
+  }
+  /deep/.el-carousel__item--card {
+    width: 30%;
+  }
+}
+</style>
\ No newline at end of file

src/page/content/interactive/index.vue

 <template>
   <div class="interactive-wrapper height100">
-    <div class="page-tip">
-      <span class="page-tip-title">页面说明:</span>
-      <span class="page-tips">可按照账号状态及所属单位进行信息筛选。可新增机顶盒账号，“*”为必填项。请先创建单位管理员账号，否则机顶盒无法激活</span>
-    </div>
     <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">
@@ -12,100 +8,73 @@
             <el-input suffix-icon="el-icon-search" placeholder="请输入组织结构名称" v-model="filterText"></el-input>
             <el-tree
               class="filter-tree"
-              :data="data"
+              :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">
+      <el-col :span="18" class="height100" ref="rightBox">
         <el-card class="height100">
-          <div class="content-title">“北京市政府”展板互动信息汇总</div>
-          <div class="content-item" v-for="(item,index) in list" :key="index">
-            <h5 class="title">{{item.title}}</h5>
-            <p>{{item.content}}</p>
-            <div class="img-box">
-              <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 class="content-title">
+            <div class="title">“北京市政府”展板互动信息汇总</div>
+            <div class="page-tip">
+              <span class="page-tip-title">页面说明:</span>
+              <span class="page-tips">可按照账号状态及所属单位进行信息筛选。可新增机顶盒账号，“*”为必填项。请先创建单位管理员账号，否则机顶盒无法激活</span>
             </div>
-            <div class="author">
-              <div>{{item.author}}</div>
-              <div>{{item.time}}</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>
-          <party-pagination style="margin:0 20px;"/>
+          <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>
-import { partyPagination } from '@/components/index'
+
 export default {
-  components:{ partyPagination},
   data() {
     return {
+      height:'',
       filterText: "",
-      data: [
-        {
-          id: 1,
-          label: "一级 1",
-          children: [
-            {
-              id: 4,
-              label: "二级 1-1",
-              children: [
-                {
-                  id: 9,
-                  label: "三级 1-1-1"
-                },
-                {
-                  id: 10,
-                  label: "三级 1-1-2"
-                }
-              ]
-            }
-          ]
-        },
-        {
-          id: 2,
-          label: "一级 2",
-          children: [
-            {
-              id: 5,
-              label: "二级 2-1"
-            },
-            {
-              id: 6,
-              label: "二级 2-2"
-            }
-          ]
-        },
-        {
-          id: 3,
-          label: "一级 3",
-          children: [
-            {
-              id: 7,
-              label: "二级 3-1"
-            },
-            {
-              id: 8,
-              label: "二级 3-2"
-            }
-          ]
-        }
-      ],
+      page: { currentPage: 1, pageSize: 10, total: 0 },
+      treeData: [],
       defaultProps: {
         children: "children",
-        label: "label"
+        label: "name"
       },
-      list: [
+      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.",
@@ -128,19 +97,111 @@ export default {
       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.label.indexOf(value) !== -1;
-    }
+      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 {
-    padding: 10px;
+    display: flex;
+    font-size: 14px;
+    color: #333333;
+    .page-tip-title {
+      font-weight: bold;
+      padding-right: 10px;
+    }
   }
   .el-card__body {
     padding: 0;
@@ -173,10 +234,17 @@ export default {
     }
   }
   .content-title {
-    font-size: 20px;
-    color: #333;
+    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;

src/router/STBox.js

+export let STBoxRoute = [
+  //=======================================机顶盒管理 start ===================================//
+  {
+    path: '/STBbase',
+    name: '机顶盒基础信息管理',
+    component: () => import('@/page/STB/base/index'),
+    meta: {
+      showBreadcrumb: true,
+      title: '机顶盒基础信息管理',
+    }
+  },
+  {
+    path: '/STBoperation',
+    name: '机顶盒运维信息管理',
+    component: () => import('@/page/STB/operation/index'),
+    meta: {
+      showBreadcrumb: true,
+      title: '机顶盒运维信息管理',
+    }
+  },
+  {
+    path: '/interactive',
+    name: '互动内容',
+    component: () => import('@/page/content/interactive/index'),
+    meta: {
+      showBreadcrumb: true,
+      title: '互动内容',
+    }
+  },
+  {
+    path: '/appversion',
+    name: 'app版本管理',
+    component: () => import('@/page/STB/appversion/index'),
+    meta: {
+      showBreadcrumb: true,
+      title: 'app版本管理',
+    }
+  },
+  {
+    path: '/pagecustom',
+    name: 'app界面自定义',
+    component: () => import('@/page/STB/pageCustom/index'),
+    meta: {
+      showBreadcrumb: true,
+      title: 'app界面自定义',
+    }
+  },
+  //=======================================机顶盒管理 end ===================================//
+]

src/router/index.js

@@ -77,6 +77,7 @@ const forgetPassword = r => require.ensure([],()=>r(require('@/components/end/fo
 import { statisticsRoute } from './statistics'
 import { systemRoute } from './system'
 import { accoutsRoute } from './accout'
+import { STBoxRoute } from './STBox'
 const router = new Router({
   routes: [
      {
@@ -96,6 +97,7 @@ const router = new Router({
       ...statisticsRoute,
       ...systemRoute,
       ...accoutsRoute,
+      ...STBoxRoute,
       {
        path: '/forgetPassword',
        name: '忘记密码',
@@ -423,37 +425,6 @@ const router = new Router({
           name: '审核活动产品',
           component: auditProductActivity
         },
-
-
-        //=======================================机顶盒管理 start ===================================//
-        {
-          path: '/STBbase',
-          name: '机顶盒基础信息管理',
-          component: () => import('@/page/STB/base/index'),
-          meta:{
-            showBreadcrumb:true,
-            title:'机顶盒基础信息管理',
-          }
-         },
-         {
-          path: '/STBoperation',
-          name: '机顶盒运维信息管理',
-          component: () => import('@/page/STB/operation/index'),
-          meta:{
-            showBreadcrumb:true,
-            title:'机顶盒运维信息管理',
-          }
-         },
-         {
-          path: '/interactive',
-          name: '互动内容',
-          component: () => import('@/page/content/interactive/index'),
-          meta:{
-            showBreadcrumb:true,
-            title:'互动内容',
-          }
-         },
-        //=======================================机顶盒管理 end ===================================//
       ]
     },