@epxing/dashboard 0.0.0-stage → 5.3.0-beta.1

package/src/Tabs.vue

@@ -0,0 +1,484 @@
+<template>
+  <div ref="container" :class="['container', 'container--'+theme, { 'drag-element': isDragElement }, { 'is-design': mode==='design'}]" @click="updateTabName">
+    <div class="tabs el-tabs el-tabs--card el-tabs--top">
+      <div class="el-tabs__header is-top">
+        <span tabindex="0" class="el-tabs__new-tab" v-if="mode==='design'">
+          <i class="el-icon-plus" @click="addTab"></i>
+        </span>
+        <div class="el-tabs__nav-wrap is-top">
+          <div class="el-tabs__nav-scroll">
+            <div role="tablist" class="el-tabs__nav is-top">
+              <div :class="['el-tabs__item', 'is-top', {'is-closable': mode==='design' }, { 'is-active': activeTab===tab.id }]" v-for="tab in items" :key="tab.id" @dblclick="editTab(tab)" @click.stop="activeTab=tab.id">
+                <input
+                  class="edit-tab__input"
+                  v-if="editTabId===tab.id"
+                  ref="editTabInput"
+                  type="text"
+                  placeholder=""
+                  v-model="editTabName"
+                  maxlength="10"
+                />
+                <template v-else>
+                  <span>{{tab.name}}</span>
+                  <span class="el-icon-close" @click.stop="removeTab(tab.id)" v-if="mode==='design'"></span>
+                </template>
+
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="el-tabs__content" ref="tabsContent">
+        <div class="el-tab-pane" v-for="tab in items" :key="tab.id" :style="{display: activeTab===tab.id? 'block': 'none'}" >
+          <!-- 运行态：headless 网格，不依赖布局库；移动端（真机 / 手机框预览）页签内子项按堆叠重排（containerGridMixin.mobileItems） -->
+          <epx-dashboard-grid
+            v-if="mode !== 'design'"
+            class="epx-dashboard-tabs__grid"
+            :items="mobileItems(tab.items || [])"
+            :grid="gridParams"
+            :load-way="loadWay"
+            :body-height="bodyHeight"
+            scroll-root-selector=".epx-dashboard__container, .dashboard-container">
+            <template #item="{ item }">
+              <div class="drag-component" >
+                <component :is="'epx-'+ item.contentType" :ref="`component_${item.i}`"
+                    class="epx-dashboard__component"
+                    is-dashboard
+                    :key="item.id"
+                    :comp-id="item.id"
+                    :comp-title="item.title"
+                    :comp-style="item.style"
+                    :comp-configs="getCompConfigs(item, item.id)"
+                    :comp-grid="childGrid(item)"
+                    :chart-cache="chartCache"
+                    :mobile-appearance="mobileStacked ? item.mobileAppearance : undefined"
+                    :items="item.items"
+                    :item-configs="itemConfigs"
+                    :theme="theme" ></component>
+              </div>
+            </template>
+          </epx-dashboard-grid>
+          <!-- 设计态：子网格（gridstack 封装）挂在页面级根实例下，跨网格拖入 / 拖出由 transfer 事件搬数据。
+               只给激活页签建子网格：gridstack 一个壳只能有一个子网格（makeSubGrid 对已有 subGrid 的壳直接返回旧实例），
+               非激活页签 display:none 也量不到宽度；切页签时旧子网格随内容卸载、新页签重建（页签内容组件随之重建） -->
+          <epx-dashboard-design-grid
+            v-else-if="activeTab === tab.id"
+            class="epx-dashboard-tabs__design-grid"
+            :sub-grid-of="epxDashboardDesignGrid"
+            :items="tab.items || []"
+            :grid="gridParams"
+            :body-height="bodyHeight"
+            :min-height="designMinHeight"
+            @change="onDesignChange"
+            @transfer-out="item => onTransferOut(tab, item)"
+            @transfer-in="item => onTransferIn(tab, item)">
+            <template #item="{ item }">
+              <epx-dashboard-design-item :item="item" :active="!!design && design.isActive(item)" :floatable="gridParams.mode !== 'float'" @select="openConfigPanel">
+                <!-- 渲染组件：嵌套容器同样进设计态（items / changeItems / open-config 的传法与页面级画布对容器项一致） -->
+                <div v-if="item.contentType && !reloadComponent[item.id]" class="drag-component">
+                  <epx-component :name="item.contentType" :ref="`component_${item.i}`"
+                    class="epx-dashboard__component"
+                    is-dashboard
+                    :key="item.id"
+                    :comp-id="item.id"
+                    :comp-title="item.title"
+                    :comp-style="item.style"
+                    :comp-configs="getCompConfigs(item, item.id)"
+                    :comp-grid="childGrid(item)"
+                    :comp-item="item"
+                    :items="item.items"
+                    :item-configs="itemConfigs"
+                    :dashboard-id="dashboardId"
+                    :all-component-list="allComponentList"
+                    :theme="theme"
+                    mode="design"
+                    :mobile-appearance="mobileStacked ? item.mobileAppearance : undefined"
+                    @changeItems="v => changeSubItems(tab, item, v)"
+                    @open-config="(...args) => $emit('open-config', ...args)"></epx-component>
+                </div>
+                <span v-else>{{item.i}}</span>
+                <template #operates>
+                  <i class="component-operate__item el-icon-edit-outline" v-if="item.contentType==='report-chart'" @click="designReport(item)"></i>
+                  <i class="component-operate__item el-icon-setting" @click="editComponent(item)"></i>
+                  <!-- <i class="component-operate__item el-icon-copy-document" v-if="item.contentType==='report-chart'" @click="$emit('copy-report', item)"></i> -->
+                  <el-dropdown class="componnet-dropdown" @command="v=>deleteComponent(item, v)" v-if="item.contentType==='report-chart'">
+                    <i class="component-operate__item el-icon-delete"></i>
+                    <template v-slot:dropdown><el-dropdown-menu>
+                      <el-dropdown-item command="only">仅从仪表盘中删除</el-dropdown-item>
+                      <el-dropdown-item command="all">从仪表盘和报表库中删除</el-dropdown-item>
+                    </el-dropdown-menu></template>
+                  </el-dropdown>
+                  <i class="component-operate__item el-icon-delete" v-else @click="deleteComponent(item)"></i>
+                </template>
+              </epx-dashboard-design-item>
+            </template>
+          </epx-dashboard-design-grid>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineAsyncComponent } from 'vue'
+import { normalizeGridItem } from './layout-util'
+import DashboardGrid from './DashboardGrid.vue'
+import { containerGridMixin } from './grid/mixins'
+export default {
+  name: 'epx-dashboard-tabs',
+  // 运行态网格参数 / 门控策略 / 嵌套容器网格透传（compGrid prop、gridParams / loadWay / childGrid）来自 containerGridMixin
+  mixins: [containerGridMixin],
+  components: {
+    [DashboardGrid.name]: DashboardGrid,
+    // 设计态画布（gridstack 封装）与项 chrome 按需加载，运行态不拉 gridstack
+    'epx-dashboard-design-grid': defineAsyncComponent(() => import('./DesignGrid.vue')),
+    'epx-dashboard-design-item': defineAsyncComponent(() => import('./DesignItem.vue'))
+  },
+  inject: {
+    // 父网格 api（页面级画布或上级容器的 DesignGrid 提供）：激活页签的子网格挂到它下面；独立挂载时为空，子网格退化为独立网格
+    epxDashboardDesignGrid: { default: null },
+    // 设计态共享选中态（页面级画布提供）：容器内与页面级只有一个选中项
+    epxDashboardDesign: { default: null }
+  },
+  props: {
+    items: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    itemConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    theme: String,
+    // 本容器项的 id：设计态选中项的 owner 标记（与 Div 对齐）
+    compId: String,
+    mode: String,
+    allComponentList: Array,
+    chartCache: Boolean,
+    dashboardId: String
+  },
+  data () {
+    return {
+      activeTab: '',
+      reloadComponent: {},
+      isDragElement: false,
+      editTabId: '',
+      editTabName: '',
+      // 设计态页签内容区可视高度，传给激活页签的子网格做 min-height
+      designMinHeight: 0
+    }
+  },
+  computed: {
+    tab () {
+      return this.items.find(item => item.id === this.activeTab)
+    },
+    tabIndex () {
+      return this.items.findIndex(item => item.id === this.activeTab)
+    },
+    getCompConfigs () {
+      return (component) => {
+      // 如果是页面 查找页面默认配置
+        const { configs = {}, id, title, contentType, ...otherConfigs } = component
+        const compId = this.getDashboardLegacy() && this.dashboardId ? this.dashboardId + '-' + id : id
+        const itemConfig = this.itemConfigs[compId] || {}
+        const _configs = { ...otherConfigs, ...configs, ...itemConfig }
+        if (title) {
+          _configs.componentName = title
+        }
+        return _configs
+      }
+    },
+    design () {
+      return this.epxDashboardDesign
+    },
+    activeComponent () {
+      return this.design ? this.design.state.activeItem : null
+    }
+  },
+  watch: {
+    items: {
+      handler (tabs = []) {
+        // i 与 id 兜底（i 不再持久化）+ x/y/w/h 必须是数字（网格引擎按数值布局）
+        for (const tab of tabs) {
+          for (const item of (tab.items || [])) {
+            normalizeGridItem(item)
+          }
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    addTab () {
+      const newTabName = this.items.length + ''
+      const tabs = this.items
+      tabs.push({
+        name: '标签页' + (this.items.length + 1),
+        id: newTabName,
+        items: []
+      })
+      this.$emit('changeItems', tabs)
+    },
+    removeTab (targetName) {
+      const tabs = this.items
+      if (tabs.length <= 1) {
+        this.$message.error('最少有一个标签')
+        return
+      }
+      let activeName = this.activeTab
+      let activeIndex = -1
+      if (activeName === targetName) {
+        tabs.forEach((tab, index) => {
+          if (tab.id === targetName) {
+            activeIndex = index
+            const nextTab = tabs[index + 1] || tabs[index - 1]
+            if (nextTab) {
+              activeName = nextTab.id
+            }
+          }
+        })
+      }
+      this.activeTab = activeName
+      tabs.splice(activeIndex, 1)
+      this.$emit('changeItems', tabs)
+    },
+    editTab (tab) {
+      if (this.mode !== 'design') return
+      this.editTabId = tab.id
+      this.editTabName = tab.name
+      this.$nextTick(() => {
+        this.$refs.editTabInput[0].focus()
+      })
+    },
+    updateTabName () {
+      if (this.editTabId && this.editTabName) {
+        const index = this.items.findIndex(item => item.id === this.editTabId)
+        this.items.splice(index, 1, { ...this.items[index], name: this.editTabName })
+        this.$emit('changeItems', this.items)
+        this.editTabId = null
+        this.editTabName = ''
+      }
+    },
+    addGridItem (v) {
+      const tab = this.tabs.find(item => item.name === this.activeTab)
+      if (tab) {
+        tab.items.push(v)
+      }
+    },
+    // 库改了子项坐标（拖拽 / 缩放 / 推挤 / 首次对账）：画布已就地写回，只需通知上层保存
+    onDesignChange () {
+      this.$emit('changeItems', this.items)
+    },
+    // 跨网格搬出（页签内项被拖到页面或别的容器）：源侧必须同步移出，否则子网格下一次同步会把壳重新加回来
+    onTransferOut (tab, item) {
+      const index = (tab.items || []).findIndex(i => i.id === item.id)
+      if (index !== -1) tab.items.splice(index, 1)
+      this.$emit('changeItems', this.items)
+    },
+    // 跨网格搬入当前页签：画布已按本网格换算过 w/h
+    onTransferIn (tab, item) {
+      if (!tab.items) tab.items = []
+      tab.items.push(item)
+      this.$emit('changeItems', this.items)
+    },
+    // 页签里嵌套容器的子项变化：替换该容器项对象后上报（与页面级画布 changeSubItems 同手法）
+    changeSubItems (tab, item, v) {
+      const index = (tab.items || []).findIndex(i => i.id === item.id)
+      if (index === -1) return
+      tab.items.splice(index, 1, { ...tab.items[index], items: v })
+      this.$emit('changeItems', this.items)
+    },
+    openConfigPanel (component) {
+      if (this.design) this.design.select(component, this.compId)
+    },
+    // 设计态页签内容区可视高度（所有页签共用同一个内容区）
+    measureDesignHeight () {
+      if (this.$refs.tabsContent) this.designMinHeight = this.$refs.tabsContent.clientHeight
+    },
+    designReport (component) {
+      const configs = this.getCompConfigs(component, component.id)
+      this.goPage({
+        component: 'report-design',
+        params: {
+          id: configs.id,
+          callback: () => {
+            this.reloadComponent[component.id] = true
+            this.$nextTick(() => {
+              this.reloadComponent[component.id] = false
+            })
+          }
+        }
+
+      })
+    },
+    editComponent (activeComponent) {
+      const componentInfo = this.allComponentList.find(item => item.CODE === activeComponent.contentType) || { CODE: activeComponent.contentType }
+      const configs = this.getCompConfigs(activeComponent, activeComponent.id)
+      this.$emit('open-config', activeComponent.id, componentInfo, configs)
+    },
+    deleteComponent (component, command) {
+      const activeComponent = component || this.activeComponent
+      const index = this.tab.items.findIndex(item => item.id === activeComponent.id)
+      if (activeComponent.contentType === 'report-chat' && command === 'all') {
+        const configs = this.getCompConfigs(activeComponent, activeComponent.id)
+        this.$http.removeMulti({
+          entityId: 'FM_REPORT_BASE',
+          ids: configs.id
+        })
+      }
+      if (index !== -1) {
+        this.tab.items.splice(index, 1)
+        this.$emit('changeItems', this.items)
+        // 被删的正是选中项：清掉共享选中态，操作条 / 属性面板不再指向已删除的项
+        if (this.design && this.design.isActive(activeComponent)) this.design.clear()
+      }
+    }
+  },
+  mounted () {
+    if (!this.items || this.items.length === 0) {
+      const items = [{
+        id: 'tab_' + new Date().getTime(),
+        name: '标签页1',
+        items: []
+      }]
+      this.$emit('changeItems', items)
+      this.activeTab = items[0].id
+    } else {
+      this.activeTab = this.items[0].id
+    }
+    if (this.mode !== 'design') return
+    this.measureDesignHeight()
+    if (typeof ResizeObserver !== 'undefined' && this.$refs.tabsContent) {
+      this.designResizeObserver = new ResizeObserver(() => this.measureDesignHeight())
+      this.designResizeObserver.observe(this.$refs.tabsContent)
+    }
+  },
+  beforeUnmount () {
+    if (this.designResizeObserver) this.designResizeObserver.disconnect()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+div.container {
+  height: 100%;
+  pointer-events: all!important;
+}
+// div.container--technology {
+//   background-color: rgba(255,255,255, .1);
+//   &::before {
+//       content: '';
+//       position: absolute;
+//       top: 0;
+//       display: block;
+//       width: 100%;
+//       height: 1px;
+//       background: linear-gradient(90deg, rgba(45, 164, 247, 0) 0%, #2DA4F7 50%, rgba(45, 164, 247, 0) 100%);
+//       opacity: 0.5;
+//   }
+//   &::after {
+//     content: '';
+//     position: absolute;
+//     bottom: 0;
+//     display: block;
+//     width: 100%;
+//     height: 1px;
+//     background: linear-gradient(90deg, rgba(45, 164, 247, 0) 0%, #2DA4F7 50%, rgba(45, 164, 247, 0) 100%);
+//     opacity: 0.5;
+//   }
+//   .el-tabs--card > .el-tabs__header {
+//       border-color: rgba(255,255,255, .3);
+//      .el-tabs__nav {
+//       border-color: rgba(255,255,255, .3);
+//      }
+//     .el-tabs__item {
+//       border-left-color: rgba(255,255,255, .3);
+//       color: rgba(255,255,255, .6);
+//       &.is-active, &:hover, &:focus {
+//         color: #fff;
+//         background: rgba(0,0,0,.2)
+//       }
+//     }
+//   }
+// }
+// div.container--dark {
+//   background-color: rgba(255,255,255, .1);
+//   .el-tabs--card > .el-tabs__header {
+//       border-color: rgba(255,255,255, .3);
+//      .el-tabs__nav {
+//       border-color: rgba(255,255,255, .3);
+//      }
+//     .el-tabs__item {
+//       border-left-color: rgba(255,255,255, .3);
+//       color: rgba(255,255,255, .6);
+//       &.is-active, &:hover, &:focus {
+//         color: #fff;
+//         background: rgba(0,0,0,.2)
+//       }
+//     }
+//   }
+// }
+.tabs {
+  height: 100%;
+
+    :deep(.el-tabs__content) {
+      height: calc(100% - 58px);
+    }
+    :deep(.el-tab-pane) {
+      height: 100%;
+      overflow: auto;
+    }
+    :deep(.el-tabs__item) {
+      color: inherit;
+    }
+
+}
+.drag-element {
+
+    :deep(.el-tab-pane) {
+      border: 1px dashed;
+      @include border_color_primary;
+    }
+
+}
+.epx-dashboard-tabs__grid {
+  min-height: 100%;
+}
+.drag-component {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+.is-design {
+  .drag-component {
+    >*  {
+      pointer-events: none;
+    }
+  }
+}
+// 操作条按钮：横排在 epx-dashboard-design-item__operates 里
+.component-operate__item {
+  display: block;
+  font-size: var(--epx-font-size-base);
+  color: #fff;
+  line-height: 20px;
+  text-align: center;
+  cursor: pointer;
+  margin: 2px 0;
+}
+.componnet-dropdown {
+  .component-operate__item {
+    width: 20px;
+    margin-top: 0;
+  }
+}
+.edit-tab__input {
+  border: none;
+  outline: none;
+}
+</style>

package/src/Title.vue

@@ -0,0 +1,107 @@
+<template>
+  <div :class="['epx-dashboard-title', 'epx-dashboard-title--'+ theme]" :style="[layoutStyle, $component.style]">
+      <h3 v-if="$configs.level==='h3'" :style="titleStyle"><i v-if="$configs.icon" :class="$configs.icon" :style="{color: $configs.iconColor}"></i>{{ $component.title }}</h3>
+      <h2 v-else-if="$configs.level==='h2'" :style="titleStyle"><i v-if="$configs.icon" :class="$configs.icon" :style="{color: $configs.iconColor}"></i>{{ $component.title }}</h2>
+      <h1 v-else :style="titleStyle"><i v-if="$configs.icon" :class="$configs.icon" :style="{color: $configs.iconColor}"></i>{{ $component.title }}</h1>
+      <p class="epx-dashboard-title__sub-title" v-if="subTitle" :style="subTitleStyle">{{ subTitle }}</p>
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+export default {
+  name: 'epx-dashboard-title',
+  mixins: [component],
+
+  // ↓↓↓ 配置点默认值（页面配置可覆盖）
+  subTitle: '', // 副标题文案，配置后展示在标题下方
+  subTitleFontStyle: {}, // 副标题字体样式（PC 端）
+  subTitleFontStyleMobile: {}, // 副标题字体样式（移动端，在 PC 样式基础上覆盖，只需配置差异项）
+  titleFontStyle: {}, // 主标题字体样式（PC 端）
+  titleFontStyleMobile: {}, // 主标题字体样式（移动端，在 PC 样式基础上覆盖，只需配置差异项）
+  horizontal: 'center', // 水平对齐：flex-start 居左 / center 居中 / flex-end 居右
+  vertical: 'center', // 垂直对齐：flex-start 顶部 / center 居中 / flex-end 底部
+
+  props: {
+    theme: String
+  },
+  computed: {
+    subTitle () {
+      const { subTitle = '' } = this.$configs
+      return subTitle
+    },
+    titleStyle () {
+      const { titleFontStyle = {}, titleFontStyleMobile = {} } = this.$configs
+      const style = { ...titleFontStyle }
+      // 移动端在 PC 样式基础上叠加覆盖，仅需配置与 PC 不同的属性
+      if (this.$isMobile) Object.assign(style, titleFontStyleMobile)
+      return style
+    },
+    subTitleStyle () {
+      const { subTitleFontStyle = {}, subTitleFontStyleMobile = {} } = this.$configs
+      const style = { ...subTitleFontStyle }
+      // 移动端在 PC 样式基础上叠加覆盖，仅需配置与 PC 不同的属性
+      if (this.$isMobile) Object.assign(style, subTitleFontStyleMobile)
+      return style
+    },
+    layoutStyle () {
+      const { horizontal = 'center', vertical = 'center' } = this.$configs
+      // 组件样式里配置了 textAlign 时，水平对齐以它为准
+      const { textAlign } = this.$component.style || {}
+      const align = { left: 'flex-start', center: 'center', right: 'flex-end' }[textAlign] || horizontal
+      return {
+        alignItems: align,
+        justifyContent: vertical,
+        textAlign: { 'flex-start': 'left', center: 'center', 'flex-end': 'right' }[align]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@include b(dashboard-title) {
+  height: 100%;
+  vertical-align: middle;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  text-align: center;
+ i {
+  margin-right: 4px;
+ }
+ @include e(sub-title) {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--color-text-assistant);
+ }
+ @include m(dark) {
+  color: rgba(255, 255, 255, .8);
+  @include e(sub-title) {
+   color: rgba(255, 255, 255, .5);
+  }
+ }
+ @include m(technology) {
+  color: rgba(255, 255, 255, .8);
+  @include e(sub-title) {
+   color: rgba(255, 255, 255, .5);
+  }
+ }
+}
+
+// 移动端默认缩小主标题；用 em 保持相对根节点字号缩放，组件样式/配置点显式设置的 fontSize（行内）仍优先
+@media only screen and (max-width: 992px) {
+  @include b(dashboard-title) {
+    h1 {
+      font-size: 1.5em;
+    }
+    h2 {
+      font-size: 1.25em;
+    }
+    h3 {
+      font-size: 1em;
+    }
+  }
+}
+</style>