初始化

frontend/packages/BigScreenManagement/ChooseTemplateDialog.vue

@@ -0,0 +1,79 @@
+<template>
+  <el-dialog
+    :title="hasCreate ? '新建' : '模板'"
+    :visible.sync="dialogVisible"
+    width="50%"
+    class="bs-dialog-wrap bs-el-dialog"
+    :before-close="handleClose"
+  >
+    <TemplateList
+      ref="templateList"
+      :has-create="hasCreate"
+      :page-info="pageInfo"
+      :loading="loading"
+      @addNew="addNew"
+      @useIt="useIt"
+      @replaceItByTemplate="replaceItByTemplate"
+    />
+  </el-dialog>
+</template>
+
+<script>
+import TemplateList from 'data-room-ui/TemplateList'
+export default {
+  name: 'ChooseTemplistDialog',
+  components: {
+    TemplateList
+  },
+  props: {
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    hasCreate: {
+      type: Boolean,
+      default: false
+    },
+    pageInfo: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data () {
+    return {
+      dialogVisible: false,
+      parentNode: null,
+      type: null
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+    init (parentNode, type) {
+      this.parentNode = parentNode
+      this.type = type
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.$refs.templateList.getTemplateList(type)
+      })
+    },
+    handleClose () {
+      this.dialogVisible = false
+    },
+    addNew () {
+      this.$emit('addNew', this.parentNode, this.type)
+    },
+    useIt (id) {
+      this.$emit('useIt', id, this.parentNode, this.type)
+    },
+    replaceItByTemplate (config) {
+      this.$emit('replaceItByTemplate', config)
+      this.dialogVisible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

frontend/packages/BigScreenManagement/addDialog.vue

@@ -0,0 +1,585 @@
+<template>
+  <div>
+    <el-dialog
+      :close-on-click-modal="false"
+      :title="title ? '编辑' : '新增'"
+      :visible.sync="formVisible"
+      :append-to-body="true"
+      class="bs-dialog-wrap bs-el-dialog"
+      @close="closeAddDialog"
+    >
+      <el-form
+        ref="dataForm"
+        :model="dataForm"
+        :rules="dataFormRules"
+        label-position="right"
+        label-width="100px"
+        class="bs-el-form"
+      >
+        <el-form-item label="上级目录">
+          <el-select
+            ref="select"
+            v-model="dataForm.parentCode"
+            placeholder="请选择上级目录"
+            clearable
+          >
+            <el-option
+              :key="dataForm.parentCode"
+              hidden
+              :value="dataForm.parentCode"
+              :label="selectName"
+            />
+            <el-tree
+              :data="catalogList"
+              :props="defaultProps"
+              node-key="code"
+              :check-on-click-node="true"
+              :expand-on-click-node="false"
+              @node-click="handleNodeClick"
+            >
+              <span
+                slot-scope="{ data }"
+                class="menu-span"
+              >
+                <span
+                  style="padding-left:4px;font-size:14px"
+                  class="tree-node-name"
+                >{{ data.name }}</span>
+              </span>
+            </el-tree>
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="名称"
+          prop="name"
+        >
+          <el-input
+            v-model="dataForm.name"
+            autocomplete="off"
+            placeholder="请输入名称"
+            clearable
+            maxlength="30"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="dataForm.type === 'bigScreen'"
+          label="推荐分辨率"
+        >
+          <el-select
+            v-model="resolutionRatioValue"
+            class="select"
+            placeholder="请选择分辨率"
+            clearable
+          >
+            <el-option
+              v-for="resolutionRatioItem in resolutionRatioOptions"
+              :key="resolutionRatioItem.value"
+              :label="resolutionRatioItem.label"
+              :value="resolutionRatioItem.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="dataForm.type === 'bigScreen'"
+          label="大屏宽度"
+        >
+          <el-input-number
+            v-model="resolutionRatio.w"
+            :min="100"
+            :max="8000"
+          />
+        </el-form-item>
+        <el-form-item
+          v-if="dataForm.type === 'bigScreen'"
+          label="大屏高度"
+        >
+          <el-input-number
+            v-model="resolutionRatio.h"
+            :min="100"
+            :max="8000"
+          />
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input-number
+            v-model="dataForm.orderNum"
+            :min="0"
+            :max="30000"
+            controls-position="right"
+          />
+        </el-form-item>
+      </el-form>
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          class="bs-el-button-default"
+          @click="closeAddDialog"
+        >
+          取消
+        </el-button>
+        <el-button
+          v-if="title"
+          type="primary"
+          :loading="toDesignLoading"
+          :disabled="toDesignDisabled"
+          @click="addOrUpdate(true)"
+        >
+          设计
+        </el-button>
+        <el-button
+          type="primary"
+          :loading="sureLoading"
+          :disabled="sureDisabled"
+          @click="addOrUpdate(!title)"
+        >
+          确定
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Icon from 'data-room-ui/assets/images/dataSourceIcon/export'
+export default {
+  name: 'EditForm',
+  components: {
+  },
+  props: {
+  },
+  data () {
+    return {
+      selectName: '',
+      defaultProps: { // el-tree的配置
+        children: 'children',
+        label: 'name'
+      },
+      resolutionRatioValue: '1920*1080',
+      resolutionRatio: {
+        w: 1920,
+        h: 1080
+      },
+      resolutionRatioOptions: [
+        {
+          value: '1024*768',
+          label: '1024*768'
+        },
+        {
+          value: '1280*720',
+          label: '1280*720'
+        },
+        {
+          value: '1920*1080',
+          label: '1920*1080'
+        },
+        {
+          value: '2560*1440',
+          label: '2560*1440'
+        },
+        {
+          value: '3840*2160',
+          label: '3840*2160'
+        },
+        {
+          value: '5120*2880',
+          label: '5120*2880'
+        },
+        {
+          value: '7680*4320',
+          label: '7680*4320'
+        }
+      ],
+      catalogList: [],
+      type: '',
+      parentCode: '', // 父节点的code
+      formVisible: false,
+      title: '', // 弹框标题(新增/编辑)
+      dataForm: {
+        id: '',
+        type: '',
+        name: '',
+        code: '',
+        remark: '',
+        components: '',
+        formType: '',
+        formConfig: '',
+        pageTemplateId: ''
+      },
+      formTypeList: [
+        {
+          value: 'modelForm',
+          label: '模型表单',
+          disabled: false
+        },
+        {
+          value: 'bizForm',
+          label: '业务表单',
+          disabled: true
+        }
+      ],
+      iconList: [],
+      dataFormRules: {
+        name: [
+          { required: true, message: '页面名称不能为空', trigger: 'blur' }
+        ]
+        // modelCode: [
+        //   { required: true, message: '数据模型不能为空', trigger: 'change' }
+        // ]
+      },
+      currentPageType: '基础表格',
+      sureLoading: false,
+      toDesignLoading: false,
+      sureDisabled: false,
+      toDesignDisabled: false
+    }
+  },
+  computed: {},
+  watch: {
+    formVisible: {
+      handler (value) {
+        if (value) {
+          this.openCascader()
+        }
+      }
+    },
+    resolutionRatioValue (val) {
+      if (val) {
+        this.resolutionRatio.w = val.split('*')[0]
+        this.resolutionRatio.h = val.split('*')[1]
+      } else {
+        this.resolutionRatio.w = 1920
+        this.resolutionRatio.h = 1080
+      }
+    }
+  },
+  mounted () {},
+  methods: {
+    // 点击选择上级目录树节点
+    handleNodeClick (node) {
+      this.$set(this.dataForm, 'parentCode', node.code)
+      this.selectName = node.name
+      this.$refs.select.blur() // 点击后关闭下拉框，因为点击树形控件后select不会自动折叠
+    },
+    // 获取所有的目录
+    openCascader () {
+      this.$dataRoomAxios.post('/bigScreen/category/tree', { searchKey: '', typeList: ['catalog'], sort: false }).then(data => {
+        const list = [{ name: '根目录', code: '', children: data }]
+        this.catalogList = list
+      }).catch(() => {
+      })
+    },
+    // 关闭弹窗时
+    closeAddDialog () {
+      this.formVisible = false
+      this.$refs.dataForm.resetFields()
+    },
+    // 初始化
+    init (nodeData, parentNode, type, categories) {
+      this.selectName = parentNode.name
+      this.title = ''
+      this.dataForm.code = nodeData ? nodeData.code : ''
+      this.dataForm.type = nodeData ? nodeData.type : type
+      const code = nodeData ? nodeData.code : ''
+      this.formVisible = true
+      this.$nextTick(() => {
+        if (this.dataForm.type === 'bigScreen') {
+          if (code) {
+            this.$dataRoomAxios.get(`/${this.dataForm.type}/design/info/code/${code}`).then((resp) => {
+              this.$set(this, 'title', resp.name)
+              this.$set(this.dataForm, 'name', resp.name)
+              this.$set(this.dataForm, 'chartList', resp.chartList)
+              this.$set(this.dataForm, 'code', resp.code)
+              this.$set(this.dataForm, 'id', resp.id)
+              this.$set(this.dataForm, 'parentCode', resp.parentCode === '0' ? '' : resp.parentCode)
+              this.$set(this.dataForm, 'remark', resp.remark)
+              this.$set(this.dataForm, 'type', resp.type)
+              this.$set(this.dataForm, 'orderNum', nodeData.orderNum)
+              this.$set(this.dataForm, 'pageTemplateId', resp?.pageTemplateId)
+              if (this.dataForm.type === 'bigScreen') {
+                const { w, h } = resp.pageConfig
+                this.resolutionRatio.w = w
+                this.resolutionRatio.h = h
+                this.resolutionRatioValue = `${w}*${h}`
+              }
+              this.getTemplateList(this.dataForm.type)
+            })
+          } else {
+            this.$set(this.dataForm, 'name', '')
+            this.$set(this.dataForm, 'chartList', [])
+            this.$set(this.dataForm, 'code', '')
+            this.$set(this.dataForm, 'id', '')
+            this.$set(this.dataForm, 'parentCode', parentNode.code)
+            this.$set(this.dataForm, 'remark', '')
+            this.$set(this.dataForm, 'type', this.dataForm.type)
+            this.$set(this.dataForm, 'orderNum', 0)
+            this.$set(this.dataForm, 'pageTemplateId', '')
+            if (this.dataForm.type === 'bigScreen') {
+              this.resolutionRatio.w = '1920'
+              this.resolutionRatio.h = '1080'
+            }
+            this.getTemplateList(this.dataForm.type)
+          }
+        }
+      })
+    },
+    // 点击确定时
+    addOrUpdate (isToDesign = false) {
+      if (this.dataForm.type === 'bigScreen') {
+        this.addOrUpdateBigScreen(isToDesign)
+      }
+    },
+    // 大屏 新增/编辑
+    async addOrUpdateBigScreen (isToDesign) {
+      this.$refs.dataForm.validate(async (valid) => {
+        if (!valid) {
+          return
+        }
+        const addOrUpdateHandel = !this.dataForm.code
+          ? (form) => this.$dataRoomAxios.post('/bigScreen/design/add', form)
+          : (form) => this.$dataRoomAxios.post('/bigScreen/design/update', form)
+        const form = {
+          className: 'com.gccloud.dataroom.core.module.manage.dto.DataRoomPageDTO',
+          chartList: this.dataForm.chartList,
+          code: this.dataForm.code,
+          id: this.dataForm.id,
+          name: this.dataForm.name,
+          parentCode: this.dataForm.parentCode,
+          remark: this.dataForm.remark,
+          type: 'bigScreen',
+          orderNum: this.dataForm.orderNum,
+          pageConfig: {
+            w: this.resolutionRatio.w || '1920',
+            h: this.resolutionRatio.h || '1080',
+            bgColor: '#151a26',
+            lightBgColor: '#f5f7fa',
+            opacity: 100,
+            customTheme: 'dark'
+          },
+          pageTemplateId: this.dataForm.pageTemplateId
+        }
+        if (isToDesign) {
+          this.toDesignLoading = true
+          this.sureDisabled = true
+        } else {
+          this.sureLoading = true
+          this.toDesignDisabled = true
+        }
+        addOrUpdateHandel(form)
+          .then((code) => {
+            this.formVisible = false
+            const message = this.dataForm.code ? '更新成功' : '新增成功'
+            this.$message.success(message)
+            this.$emit('refreshData', form, this.dataForm.id)
+            if (isToDesign) {
+              this.toDesignLoading = false
+              this.sureDisabled = false
+              form.code = code || this.dataForm.code
+              this.toDesign({ ...form })
+            } else {
+              this.sureLoading = false
+              this.toDesignDisabled = false
+            }
+          })
+          .catch(() => {
+            this.sureLoading = false
+            this.toDesignLoading = false
+            this.sureDisabled = false
+            this.toDesignDisabled = false
+          })
+      })
+    },
+    // 跳转设计态
+    toDesign (form) {
+      // eslint-disable-next-line no-case-declarations
+      // const { href: bigScreenHref } = this.$router.resolve({
+      //   path: window.BS_CONFIG?.routers?.designUrl || '/big-screen/design',
+      //   query: {
+      //     code: form.code
+      //   }
+      // })
+      // window.open(bigScreenHref, '_self')
+      this.$router.push({
+        path: window.BS_CONFIG?.routers?.designUrl || '/big-screen/design',
+        query: {
+          code: form.code
+        }
+      })
+    },
+    // 得到模板列表
+    getTemplateList (type) {
+      this.$nextTick(() => {
+        // this.$refs.TemplateList.init(type)
+      })
+    },
+    // 选择模版后覆盖配置
+    selectTemplate (template) {
+      // TODO: 选择模版后覆盖配置
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  overflow-y: auto;
+}
+
+.el-scrollbar {
+  height: 300px;
+  overflow-x: hidden;
+
+  ::v-deep .el-scrollbar__view {
+    overflow-x: hidden;
+  }
+}
+
+.color-picker {
+  display: flex;
+  align-items: center;
+}
+
+.icon-svg {
+  width: 25px;
+  height: 25px;
+}
+
+.color-select {
+  width: 350px;
+  display: flex;
+  margin-top: 5px;
+  align-items: center;
+  justify-content: space-between;
+
+  div {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    position: relative;
+  }
+
+  ::v-deep .el-color-picker__trigger {
+    top: 0;
+    right: 0;
+    width: 21px;
+    height: 21px;
+    padding: 0;
+  }
+
+  .el-icon-check {
+    font-size: 20px;
+    color: #ffffff;
+    position: absolute;
+  }
+}
+
+.icon-list {
+  margin-top: 15px;
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid #e8e8e8;
+
+  .el-button--mini {
+    min-width: 37px;
+    padding: 5px !important;
+    border: 1px solid transparent !important;
+
+    &:hover {
+      background-color: rgba(217, 217, 217, 0.3);
+    }
+  }
+}
+
+.icon-uploader {
+  width: 60px;
+  height: 60px;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+
+  /*.icon-svg {*/
+  /*  padding: 5px;*/
+  /*  width: 60px !important;*/
+  /*  height: 60px !important;*/
+  /*}*/
+}
+
+.icon-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  text-align: center;
+}
+
+.icon {
+  width: 60px;
+  height: 60px;
+  display: block;
+}
+
+.default-layout-box {
+  display: flex;
+  flex-wrap: wrap;
+
+  .default-layout-item {
+    cursor: pointer;
+    margin: 9px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .component-name {
+      font-size: 12px;
+    }
+
+    .sampleImg {
+      margin: 0 auto;
+      width: 102px;
+      height: 73px;
+      display: block;
+    }
+
+    .img_dispaly {
+      margin: 0 auto;
+      text-align: center;
+      width: 100px;
+      height: 70px;
+      line-height: 70px;
+      background-color: #D7D7D7;
+      color: #999;
+    }
+
+    .demonstration {
+      text-align: center;
+    }
+  }
+
+  .default-layout-item:hover {
+    cursor: pointer;
+  }
+
+  ::v-deep .el-radio__label {
+    display: none;
+  }
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 6px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+
+.catalog-cascader {
+  width: 100% !important;
+}
+</style>

frontend/packages/BigScreenManagement/index.js

@@ -0,0 +1,7 @@
+import BigScreenManagement from './index.vue'
+
+BigScreenManagement.install = function (Vue) {
+  Vue.component(BigScreenManagement.name, BigScreenManagement)
+}
+
+export default BigScreenManagement

frontend/packages/BigScreenManagement/index.vue

@@ -0,0 +1,896 @@
+<template>
+  <div v-loading="pageLoading" loading-text="加载中..." class="page-manage-wrap">
+    <div class="page-manage-menu">
+      <!-- 搜索部分 -->
+      <div class="page-manage-menu-search">
+        <el-input v-model="searchKey" placeholder="请输入名称" @keyup.enter.native="filterClick" />
+        <!-- 新增页面按钮 -->
+        <i class="page-icon el-icon-plus" @click="openPageMenuDialog" />
+      </div>
+      <!-- 页面列表 -->
+      <div class="page-manage-menu-list">
+        <template v-if="pageDesignListHasLength">
+          <el-tree ref="tree" :key="treeKey" class="page-list-tree" node-key="code"
+            :default-expanded-keys="defaultExpand" :current-node-key="currentNodeCode" :data="pageDesignList"
+            :props="defaultProps" :filter-node-method="filterNode" @node-click="nodeClick">
+            <span slot-scope="{ node, data }" class="menu-span">
+              <icon-svg :name="pageIconName(data, node)" />
+              <span style="padding-left:4px;font-size:14px" class="tree-node-name">{{ data.name }}</span>
+              <el-dropdown class="page-list-dropdown" placement="bottom-start" node-key="id" trigger="click">
+                <span class="el-dropdown-link menu-dropdown-link">
+                  <i class="el-icon-more" />
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item @click.native="handleDropdownClick('edit', data, node)">编辑 </el-dropdown-item>
+                  <el-dropdown-item v-if="data.type !== 'catalog'"
+                    @click.native="handleDropdownClick('copy', data, node)">复制 </el-dropdown-item>
+                  <el-dropdown-item class="delete-item" @click.native="handleDropdownClick('delete', data, node)">删除
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </span>
+          </el-tree>
+        </template>
+        <el-empty v-else slot="empty" />
+      </div>
+    </div>
+    <!-- 预览部分 -->
+    <div class="page-manage-content">
+      <div class="page-manage-content-top">
+        <div class="page-manage-content-top-name">
+          <icon-svg v-if="activePage.code" :name="pageIconImg(activePage)" class="active-page-icon" />
+          {{ activePage.type !== 'catalog' ? activePage.name : '' }}
+        </div>
+        <div>
+          <el-button v-if="pageDesignList.length !== 0 && activePage.code" class="top-button" icon="el-icon-share"
+            @click="gopagePreview(activePage)">
+            新窗口打开
+          </el-button>
+          <el-button v-if="pageDesignList.length !== 0 && activePage.code" class="page-manage-content-top-page"
+            type="primary" @click="gopageDesign(activePage)">
+            设计
+          </el-button>
+        </div>
+      </div>
+      <div class="page-manage-content-body-box" :style="{ padding: activePage.type !== 'dashBoard' ? '16px' : '0' }">
+        <div class="page-manage-content-body">
+          <el-empty v-if="!activePage.code" slot="empty" description="请在左侧选择页面修改或新增页面" class="empty-wrap" />
+          <div v-else :class="{
+            'preview-wrap': true,
+            'inner-preview-wrap': true,
+            'padding': activePage.type === 'form'
+          }">
+            <BigScreenRun v-if="activePage.type === 'bigScreen'" :key="activePage.code" :code="activePage.code" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 新增或编辑弹窗 -->
+    <AddDialog ref="AddDialog" @refreshData="reSearch" />
+    <!-- 新增目录弹窗 -->
+    <el-dialog :title="catalogData.id ? '编辑目录' : '新增目录'" :visible.sync="catalogVisible" width="30%"
+      class="bs-dialog-wrap catalog-dialog bs-el-dialog" @close="handleClose">
+      <el-form ref="form" :model="catalogData" label-width="80px" :rules="formRules" class="bs-el-form">
+        <el-form-item label="上级目录">
+          <el-select ref="select" v-model="catalogData.parentCode" placeholder="请选择上级目录" clearable
+            @change="parentCodeChange">
+            <el-option key="code" hidden :value="catalogData.parentCode" :label="selectName" />
+            <el-tree :data="catalogList" :props="defaultProps" node-key="code" :check-on-click-node="true"
+              :expand-on-click-node="false" @node-click="handleNodeClick">
+              <span slot-scope="{ data }" class="menu-span">
+                <span style="padding-left:4px;font-size:14px" class="tree-node-name">{{ data.name }}</span>
+              </span>
+            </el-tree>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="目录名称" prop="name">
+          <el-input v-model="catalogData.name" />
+        </el-form-item>
+        <el-form-item label="排序">
+          <el-input-number v-model="catalogData.orderNum" :min="0" :max="30000" controls-position="right" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button class="bs-el-button-default" @click="catalogVisible = false">取消</el-button>
+        <el-button type="primary" @click="addCatalog">确定</el-button>
+      </span>
+    </el-dialog>
+    <ChooseTemplateDialog ref="ChooseTemplateDialog" :loading="templateLoading" :has-create="true" @addNew="addNew"
+      @useIt="useIt" />
+    <pageMenuDialog ref="pageMenuDialog" @addPageDesign="addPageDesign" />
+  </div>
+</template>
+<script>
+
+import AddDialog from './addDialog.vue'
+import ChooseTemplateDialog from './ChooseTemplateDialog.vue'
+import pageMenuDialog from './pageMenuDialog.vue'
+import BigScreenRun from 'data-room-ui/BigScreenRun/index.vue'
+import Icon from 'data-room-ui/assets/images/pageIcon/export'
+import { getPageType } from './utils'
+// import _ from 'lodash'
+import cloneDeep from 'lodash/cloneDeep'
+import IconSvg from 'data-room-ui/SvgIcon'
+let dashBoardPageCode = null
+export default {
+  name: 'PageManage',
+  components: {
+    AddDialog,
+    ChooseTemplateDialog,
+    pageMenuDialog,
+    BigScreenRun,
+    IconSvg
+  },
+  // 路由钩子-进入后
+  beforeRouteEnter(to, from, next) {
+    next(vm => {
+      dashBoardPageCode = from.query.code
+    })
+  },
+  props: [],
+  data() {
+    return {
+      isCatalog: false, // 用来判断当前点击的节点是否是目录
+      parentNode: { code: '' }, // 用来保存当前的父节点
+      currentTreeNode: {}, // 保存当前点击的节点信息
+      selectName: '',
+      catalogList: [],
+      currentNodeCode: '',
+      dashBoardConfig: {},
+      defaultExpand: [], // 默认展开的节点
+      currentNode: {}, // 默认选中的节点
+      flag: true,
+      pageIcon: Icon.getNameList(), // 获取所有的svg
+      defaultProps: { // el-tree的配置
+        children: 'children',
+        label: 'name'
+      },
+      showPage: false, // 显示页面
+      sort: false, // 排序
+      searchKey: '', // 关键词
+      parentCode: '', // 当前选中的子节点的父节点的编码
+      zNodes: [],
+      ztreeObj: '',
+      nodeData: {}, // 当前鼠标悬浮时的树节点
+      activePage: {
+        code: null,
+        type: null,
+        name: null
+      }, // 当前选中的的树节点
+      rightClickForm: {
+        visible: false,
+        org: {}
+      },
+      catalogVisible: false, // 文件夹的弹窗
+      isAdd: true, // 判断当前目录是新增还是编辑
+      catalogData: {
+        id: '',
+        code: '',
+        type: 'catalog',
+        name: '',
+        parentCode: '',
+        orderNum: 0
+      }, // 文件夹数据
+      // formConf,
+      formInitInfo: {}, // 初始的数据
+      pageDesignList: [], // 页面列表
+      menuList: [{}],
+      showHover: false,
+      pageLoading: false,
+      treeKey: new Date().getTime(),
+      formRules: {
+        name: [
+          { required: true, message: '目录名称不能为空', trigger: 'blur' }
+        ]
+      },
+      catalogDataList: [], // 存储遍历后的所有目录列表
+      templateLoading: false
+    }
+  },
+  computed: {
+    pageDesignListHasLength() {
+      return this.pageDesignList?.length > 0
+    }
+  },
+  watch: {
+    catalogVisible: {
+      handler(value) {
+        if (value) {
+          this.openCascader(this.currentTreeNode)
+        }
+      }
+    }
+  },
+  mounted() {
+    this.getDataList()
+    this.chooseCatalog()
+  },
+  methods: {
+    // 关闭新增页面菜单的弹窗
+    closePageMenuDialog() {
+      this.$refs.pageMenuDialog.dialogVisible = false
+    },
+    // 点击新增打开页面菜单弹窗
+    openPageMenuDialog() {
+      this.$refs.pageMenuDialog.dialogVisible = true
+    },
+    parentCodeChange(code) {
+      this.catalogData.parentCode = code
+    },
+    // 初始化新增目录时选择上级目录
+    chooseCatalog() {
+      this.parentNode = this.activePage?.type === 'catalog' ? this.activePage : { code: '0', name: '根目录' }
+      this.catalogData.parentCode = this.parentNode.code
+      this.selectName = this.parentNode.name
+    },
+    // 点击下拉选项中的树节点选择上级目录树节点
+    handleNodeClick(node) {
+      this.$set(this.catalogData, 'parentCode', node.code)
+      this.selectName = node.name
+      this.$refs.select.blur() // 点击后关闭下拉框，因为点击树形控件后select不会自动折叠
+    },
+    // 获取所有的目录
+    openCascader(node) {
+      const excludeCategory = node.type === 'catalog' && !this.isAdd ? node.code : undefined
+      this.$dataRoomAxios.post('/bigScreen/category/tree', { searchKey: '', typeList: ['catalog'], excludeCategory, sort: false }).then(data => {
+        const list = [{ name: '根目录', code: '', children: data }]
+        this.catalogList = list
+      }).catch(() => {
+      })
+    },
+    // 默认选择第一项
+    chooseFirstNode() {
+      this.defaultExpand = []
+      // 如果存在activePage则将activePage设置为高亮
+      if (this.activePage && this.activePage.code) {
+        this.currentNodeCode = this.activePage.code
+        this.$nextTick(() => {
+          if (this.$refs.tree) {
+            this.$refs.tree.setCurrentKey(this.currentNodeCode)
+          }
+        })
+        this.defaultExpand.push(this.currentNodeCode)
+        this.currentNode = { ...this.activePage }
+      } else {
+        // 如果不存在则默认选择第一项（或者是第一个目录的第一项）
+        if (this.pageDesignList?.length > 0 && !(this.pageDesignList?.length === 1 && this.pageDesignList[0].type === 'catalog' && (!this.pageDesignList[0].children || this.pageDesignList[0].children?.length === 0))) {
+          const code = this.getDefaultNode(this.pageDesignList)
+          if (code) {
+            this.currentNodeCode = code
+            this.activePage = { ...this.currentNode }
+            this.defaultExpand.push(code)
+            this.$nextTick(() => {
+              this.$refs.tree.setCurrentKey(code)
+            })
+            this.isCatalog = false
+          }
+        } else {
+          this.activePage = { code: '', name: '', type: '' }
+        }
+      }
+    },
+    // 设置默认节点
+    getDefaultNode(nodeList) {
+      for (const node of nodeList) {
+        if (this.flag) {
+          if (node.children && node.children.length > 0 && node.type === 'catalog') {
+            return this.getDefaultNode(node.children)
+          } else if (!(node.children && node.children?.length > 0) && node?.type === 'catalog') {
+            continue
+          } else {
+            this.flag = false
+            this.currentNode = node
+            return node.code
+          }
+        } else {
+          return this.currentNode.code
+        }
+      }
+    },
+    // 左侧菜单图标
+    pageIconName(data, node) {
+      if (data.type === 'bigScreen') {
+        return this.pageIcon[2]
+      } else {
+        return node.expanded ? this.pageIcon[1] : this.pageIcon[0]
+      }
+    },
+    // 顶部图标
+    pageIconImg() {
+      return this.pageIcon[2]
+    },
+    // 树节点查询
+    filterClick() {
+      this.$refs.tree.filter(this.searchKey)
+    },
+    filterNode(value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    // 预览
+    gopagePreview(nodeData) {
+      if (nodeData.code && nodeData.type === 'bigScreen') {
+        const { href } = this.$router.resolve({
+          path: window.BS_CONFIG?.routers?.previewUrl || '/big-screen/preview', // 这里写的是要跳转的路由地址
+          query: {
+            code: nodeData.code
+          }
+        })
+        window.open(href, '_blank')
+      } else if (!nodeData.code) {
+        this.$message.warning('请先选择表单或页面')
+      }
+    },
+    // 点击节点
+    nodeClick(treeNode, nodeObj, val) {
+      this.currentTreeNode = treeNode
+      // 点击的节点为目录，则当前父节点为目录
+      if (treeNode.type === 'catalog') {
+        this.parentNode = cloneDeep(treeNode)
+        this.isCatalog = true
+      } else {
+        this.isCatalog = false
+        this.activePage = treeNode
+        // 点击的节点非目录，则为当前节点的父节点
+        this.parentNode = (!treeNode.parentCode || treeNode.parentCode === '0') ? { code: '0', name: '根目录' } : cloneDeep(nodeObj.parent.data)
+      }
+      this.catalogData.parentCode = this.parentNode.code
+      this.selectName = this.parentNode.name
+    },
+
+    handleClose() {
+      this.catalogVisible = false
+      this.$refs.form.clearValidate()
+    },
+    // 获取页面的列表(获取，搜索，排序)
+    getDataList() {
+      this.pageLoading = true
+      this.$dataRoomAxios.post('/bigScreen/category/tree', { searchKey: this.searchKey, sort: this.sort }).then(data => {
+        this.pageDesignList = data
+        // 如果有addModel这个参数，说明是从页面直接新增过来的，直接进入页面或者表单的填写状态
+        if (this.$route.query.add) {
+          this.$refs.AddDialog.init(undefined, this.parentNode, 'form')
+        }
+        if (dashBoardPageCode) {
+          this.$nextTick(() => {
+            const currentNode = this.findItemBycode(dashBoardPageCode, data)
+            if (currentNode && currentNode.code) {
+              this.activePage = currentNode
+              if (this.$refs.tree) {
+                this.$refs.tree.setCurrentKey(currentNode)
+                this.defaultExpand.push(currentNode.code)
+              }
+            } else {
+              this.chooseFirstNode()
+            }
+          })
+        } else {
+          this.chooseFirstNode()
+        }
+      }).catch(() => {
+      }).finally(() => {
+        this.pageLoading = false
+      })
+    },
+    // 遍历树节点匹配code
+    findItemBycode(code, list) {
+      let node = list.find(item => item.code === code)
+      if (node) {
+        return node
+      } else {
+        for (let i = 0; i < list?.length; i++) {
+          if (list[i].children instanceof Array && list[i].children?.length > 0) {
+            node = this.findItemBycode(code, list[i].children)
+            if (node) {
+              return node
+            }
+          }
+        }
+        return null
+      }
+    },
+    // 对页面进行操作
+    handleDropdownClick(command, nodeData, node) {
+      switch (command) {
+        case 'copy':
+          this.copyPege(nodeData, node)
+          break
+        case 'edit':
+          this.toEdit(nodeData, node)
+          break
+        case 'delete':
+          this.deletePageDesign(nodeData, node)
+          break
+        // case 'code':
+        //   this.code(nodeData, node)
+        //   break
+      }
+    },
+    // code (nodeData, node) {
+    //   axios({
+    //     method: 'get',
+    //     url: `${window.BS_CONFIG.baseUrl}/code/generation/adminPage/${nodeData.code}`,
+    //     headers: {
+    //     },
+    //     // 通过URL传参，后端通过  @RequestParam 注解获取参数
+    //     params: {},
+    //     // 通过body传参，后端通过  @RequestBody 注解获取参数
+    //     data: {},
+    //     withCredentials: false,
+    //     responseType: 'arraybuffer'
+    //   }).then(res => {
+    //     const fileUrl = window.URL.createObjectURL(new Blob([res.data]))
+    //     // 创建超链接
+    //     const fileLink = document.createElement('a')
+    //     fileLink.href = fileUrl
+    //     // 设置下载文件名
+    //     let responseFileName = res.headers.filename
+    //     // 解决中文乱码
+    //     responseFileName = window.decodeURI(responseFileName)
+    //     fileLink.setAttribute('download', responseFileName)
+    //     document.body.appendChild(fileLink)
+    //     // 模拟人工点击下载超链接
+    //     fileLink.click()
+    //     this.submitLoading = false
+    //     // 释放资源
+    //     document.body.removeChild(fileLink)
+    //     window.URL.revokeObjectURL(fileUrl)
+    //     this.step++
+    //   }).catch((error) => {
+    //     this.submitLoading = false
+    //     console.error(error)
+    //   })
+    // },
+    // 复制页面
+    copyPege(nodeData, node) {
+      this.$dataRoomAxios.post(`/${nodeData.type}/design/copy/${nodeData.code}`).then(() => {
+        this.getDataList()
+      })
+    },
+    // 新增大屏或新增页面，从空白新建
+    addNew(parentNode, type) {
+      this.$refs.AddDialog.init(undefined, this.parentNode, type)
+      this.flag = true
+    },
+    // 大屏 dashboard从模版新建, 使用某个模版新建
+    useIt(pageTemplateId, parentNode, type) {
+      this.templateLoading = true
+      const className = 'com.gccloud.dataroom.core.module.manage.dto.DataRoomPageDTO'
+      this.$dataRoomAxios.post(`/bigScreen/${type}/design/add/template`, {
+        pageTemplateId,
+        parentCode: parentNode.code,
+        type,
+        className
+      }).then((code) => {
+        const path = window.BS_CONFIG?.routers?.designUrl || '/big-screen/design'
+        // const { href } = this.$router.resolve({
+        //   path,
+        //   query: {
+        //     code: code
+        //   }
+        // })
+        // window.open(href, '_self')
+        this.$router.push({
+          path,
+          query: {
+            code: code
+          }
+        })
+      }).finally(() => {
+        this.templateLoading = true
+      })
+    },
+    // 新增页面/表单/目录
+    addPageDesign(page) {
+      const type = page.type
+      const categories = page.categories
+      if (type !== 'catalog') {
+        // 如果是大屏，弹出选择模版页面
+        if (['bigScreen'].includes(type)) {
+          this.$refs.ChooseTemplateDialog.init(this.parentNode, type)
+          return
+        }
+        this.$refs.AddDialog.init(undefined, this.parentNode, type, categories)
+        this.flag = true
+      } else {
+        // 新增时初始化目录配置
+        this.catalogData = {
+          id: '',
+          code: '',
+          type: 'catalog',
+          name: '',
+          parentCode: this.parentNode.code,
+          orderNum: 0
+        }
+        this.isAdd = true
+        this.catalogVisible = true
+      }
+    },
+    // 刷新页面
+    reSearch(treeNode, id) {
+      this.getDataList()
+    },
+    // 编辑
+    toEdit(nodeData, nodeObj) {
+      // 编辑目录
+      if (nodeData.type === 'catalog') {
+        this.catalogVisible = true
+        this.catalogData.name = nodeData.name
+        this.isAdd = false
+        this.catalogData.id = nodeData.id
+        this.catalogData.code = nodeData.code
+        this.catalogData.orderNum = nodeData.orderNum
+        this.parentNode = (!nodeData.parentCode || nodeData.parentCode === '0') ? { code: '0', name: '根目录' } : cloneDeep(nodeObj.parent.data)
+        this.catalogData.parentCode = this.parentNode.code
+        this.selectName = this.parentNode.name
+      } else {
+        this.$refs.AddDialog.init(nodeData, this.parentNode)
+      }
+    },
+    // 点击新增/编辑目录
+    addCatalog() {
+      this.$refs.form.validate(async (valid) => {
+        if (!valid) {
+          return
+        }
+        if (this.isAdd) {
+          this.$dataRoomAxios.post('/bigScreen/category/add',
+            {
+              ...this.catalogData,
+              id: '',
+              code: ''
+            }).then(data => {
+              this.catalogVisible = false
+              this.getDataList()
+              this.flag = true
+              // 关闭页面菜单的弹窗
+              this.closePageMenuDialog()
+            }).catch(() => {
+            })
+        } else {
+          this.$dataRoomAxios.post('/bigScreen/category/update', { ...this.catalogData, excludeCategory: this.catalogData.code }).then(data => {
+            this.catalogVisible = false
+            this.getDataList()
+          }).catch(() => {
+          })
+        }
+      })
+    },
+    // 删除页面设计
+    deletePageDesign(nodeData, node) {
+      const type = getPageType(nodeData.type)// 由于类型与接口不统一需要转化一下
+      const url = type === 'category' ? `/bigScreen/category/delete/${nodeData.code}` : `/bigScreen/${type}/design/delete/${nodeData.code}`// 接口地址
+      this.$confirm('确定删除该页面设计？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        customClass: 'bs-el-message-box'
+      }).then(async () => {
+        this.$dataRoomAxios.post(url).then(() => {
+          this.$message({
+            type: 'success',
+            message: '删除成功'
+          })
+          this.flag = true
+          this.activePage.code = ''
+          this.chooseFirstNode()
+          this.$refs.tree.remove(node)
+          if (nodeData.type === 'catalog' && this.parentCode === nodeData.code) {
+            this.parentCode = '0'
+          }
+        }).catch(() => {
+          this.$message({
+            type: 'error',
+            message: '删除失败!'
+          })
+        })
+      }).catch()
+    },
+    // 点击进入页面设计
+    gopageDesign(nodeData) {
+      const path = window.BS_CONFIG?.routers?.designUrl || '/big-screen/design'
+      const openType = nodeData.type === 'report' ? '_blank' : '_self'
+      const { href } = this.$router.resolve({
+        path,
+        query: {
+          code: nodeData.code
+        }
+      })
+      window.open(href, openType)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-type-cover {
+  position: absolute;
+  top: 0;
+  left: 16px;
+  color: #fff;
+  background: #00000020;
+  padding: 4px;
+  font-size: 12px;
+}
+
+.page-manage-wrap {
+  display: flex;
+
+  .page-manage-menu {
+    width: 260px;
+    border-right: 2px solid #F5F7FA;
+
+    .page-manage-menu-search {
+      display: flex;
+      align-items: center;
+      padding: 10px 15px;
+      box-sizing: border-box;
+      justify-content: space-around;
+
+      .input-with-select {
+        margin-bottom: 0px;
+      }
+
+      .page-icon {
+        font-size: 20px;
+        margin-left: 10px;
+        color: var(--bs-el-color-primary);
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+
+    }
+  }
+
+  .page-manage-menu-list {
+    width: 100%;
+    overflow: auto;
+    height: calc(100vh - 40px - 50px);
+
+    .tree-node-name {
+      width: 170px;
+      display: inline-block;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .el-icon-document {
+      font-size: 16px;
+      padding: 5px 5px 0 0;
+      color: #007afe;
+    }
+
+    .el-icon-notebook-1 {
+      font-size: 16px;
+      padding: 5px 5px 0 0;
+      color: #50D4FD;
+    }
+
+    .el-icon-folder {
+      font-size: 16px;
+      padding: 5px 5px 0 0;
+      color: #6477FF;
+    }
+
+    .el-icon-folder-opened {
+      font-size: 16px;
+      padding: 5px 5px 0 0;
+      color: #6477FF;
+    }
+  }
+
+  .page-manage-content {
+    width: calc(100vw - 260px);
+    height: calc(100vh - 40px);
+
+    .page-manage-content-top {
+      height: 50px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 20px;
+
+      .page-name-icon {
+        color: var(--bs-el-color-primary);
+        padding-right: 10px;
+      }
+    }
+
+    .page-manage-content-body-box {
+      width: 100%;
+      height: calc(100vh - 40px - 50px);
+      background-color: #F5F7FA;
+
+      .page-manage-content-body {
+        height: 100%;
+        background-color: #fff;
+        position: relative;
+        overflow: auto;
+        overflow-x: hidden;
+
+        ::v-deep .el-input__suffix-inner {
+          /*pointer-events: none!important;*/
+        }
+
+        .preview-wrap {
+          /*pointer-events: none;*/
+          width: 100%;
+          height: 100%;
+          position: absolute;
+
+          .admin-page-wrap {
+            height: 100%;
+            background: #F5F7FA;
+          }
+        }
+
+        .empty-wrap {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          color: #AAAAAA;
+        }
+      }
+    }
+  }
+}
+
+.el-dropdown {
+  cursor: pointer;
+}
+
+.catalog-dialog {
+  ::v-deep .el-dialog__body {
+    min-height: 80px;
+  }
+}
+
+.el-icon-delete {
+  color: #DF2A2A;
+}
+
+.el-dropdown-menu--mini .el-dropdown-menu__item i {
+  padding-top: 6px;
+}
+
+.el-dropdown-menu--mini ::v-deep .el-dropdown-menu__item {
+  display: flex;
+  min-width: 100px !important;
+  line-height: 36px;
+  margin-bottom: 10px;
+
+  .page-opt-list-icon {
+    width: 120px !important;
+    font-size: 16px;
+    padding: 10px 5px 0 0;
+    color: #007afe;
+  }
+
+  .page-dropdown-right {
+    .page-name {
+      font-size: 14px;
+    }
+
+    .page-desc {
+      color: #878A8B;
+      font-size: 12px;
+      line-height: 20px;
+    }
+  }
+}
+
+.menu-span {
+  width: 100%;
+  display: flex;
+  align-items: center;
+
+  .el-dropdown {
+    position: absolute;
+    right: 10px;
+  }
+}
+
+.disabled {
+  pointer-events: auto !important;
+  cursor: not-allowed !important;
+}
+
+.page-list-active {
+  cursor: pointer;
+  background-color: #F4F4F4;
+}
+
+.el-icon-rank {
+  cursor: move;
+}
+
+.active-page-icon {
+  margin-right: 5px;
+}
+
+.sort-icon {
+  font-size: 20px;
+  margin-left: 10px;
+  color: var(--bs-el-color-primary);
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+/* 去除tree前面的小三角形*/
+.page-list-tree ::v-deep .el-tree-node__content>.el-tree-node__expand-icon {
+  width: 20px;
+  opacity: 0 !important;
+}
+
+/*选中树节点后*/
+.page-list-tree ::v-deep .ztree li a.curSelectedNode span {
+  color: var(--bs-el-color-primary) !important;
+}
+
+#settingDropdown {
+  display: inline-block;
+  float: right;
+}
+
+::v-deep .el-tree-node {
+  line-height: 40px;
+
+  .el-tree-node__content {
+    line-height: 40px;
+    height: 100%;
+  }
+}
+
+/*当前tree节点激活样式*/
+.page-list-tree ::v-deep .is-current>.el-tree-node__content {
+  background: #007aff10;
+  color: var(--bs-el-color-primary);
+}
+
+.page-list-tree ::v-deep .is-current>.el-tree-node__content::before {
+  position: absolute;
+  left: 0;
+  border-left: 4px solid var(--bs-el-color-primary);
+  content: "";
+  height: 40px;
+  width: 4px;
+}
+
+::v-deep .el-icon-more {
+  transform: rotate(90deg);
+  color: #999999;
+  font-size: 10px;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 6px;
+  border-radius: 4px;
+  /*height: 4px;*/
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+
+.padding {
+  padding: 20px;
+  background: #fff;
+}
+
+.catalog-cascader {
+  width: 100% !important;
+}
+
+.delete-item {
+  color: #ea0b30 !important;
+}
+</style>

frontend/packages/BigScreenManagement/pageMenuDialog.vue

@@ -0,0 +1,98 @@
+<template>
+  <el-dialog
+    class="bs-dialog-wrap bs-page-menu-wrap bs-el-dialog"
+    title="新建页面"
+    :visible.sync="dialogVisible"
+    width="800px"
+    @close="dialogVisible=false"
+  >
+    <div class="page-menu-box">
+      <div
+        v-for="(page,index) in pageList"
+        :key="index"
+        class="page-item"
+        @click="addPage(page)"
+      >
+        <div class="page-img-box">
+          <img
+            :src="page.icon"
+          >
+        </div>
+        <div class="page-item-icon">
+          {{ page.name }}
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+
+export default {
+  name: 'PageMenuDialog',
+  data () {
+    return {
+      dialogVisible: false,
+      pageList: [
+        {
+          name: '目录',
+          icon: require('./images/目录.png'),
+          type: 'catalog',
+          categories: 'catalog'
+        },
+        {
+          name: '大屏',
+          icon: require('./images/大屏.png'),
+          type: 'bigScreen',
+          categories: 'bigScreen'
+        }
+      ]
+    }
+  },
+  methods: {
+    // 新增页面
+    addPage (page) {
+      this.$emit('addPageDesign', page)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-page-menu-wrap{
+  .page-menu-box{
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(4, 25%);
+    .page-item{
+      height: 140px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+      &:hover{
+        cursor: pointer;
+      }
+      .page-img-box{
+        width: 100px;
+        height: 100px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: 1px solid #e5e5e5;
+        &:hover{
+          border: 1px dashed var(--bs-el-color-primary);
+        }
+      }
+      img{
+        width: 80%;
+      }
+      .page-item-icon{
+        width: 100%;
+        text-align: center;
+      }
+    }
+  }
+
+}
+</style>

frontend/packages/BigScreenManagement/utils/index.js

@@ -0,0 +1,7 @@
+export function getPageType (type) {
+  if (type === 'catalog') {
+    return 'category'
+  } else {
+    return type
+  }
+}