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

package/src/DesignItem.vue

@@ -0,0 +1,124 @@
+<template>
+  <div :class="['epx-dashboard-design-item', { 'epx-dashboard-design-item--active': active }]" @click.stop="$emit('select', item)">
+    <!-- 整卡可拖：gridstack 的拖拽把手是壳的内容盒，这里不设起手区；内容区哪些元素吃指针由画布的 .drag-component 规则决定 -->
+    <div class="epx-dashboard-design-item__body"><slot></slot></div>
+    <!-- 8 向缩放把手的视觉圆点（沿用旧 resize-point 规格）：不接收指针，命中区是 gridstack 生成的 .ui-resizable-* -->
+    <i v-for="dir in handles" :key="dir" :class="['epx-dashboard-design-item__handle', 'epx-dashboard-design-item__handle--' + dir]"></i>
+    <div class="epx-dashboard-design-item__operates">
+      <!-- 悬浮切换（所有项通用，容器内子项也有）：点一下在悬浮层 / 碰撞层之间切换，高亮表示当前悬浮中；
+           整页悬浮模式下逐项悬浮没有意义，宿主传 floatable=false 隐藏 -->
+      <i v-if="floatable" :class="['epx-dashboard-design-item__float', 'el-icon-top', { 'is-on': !!item.float }]"
+        :title="item.float ? '悬浮中，点击恢复默认' : '设为悬浮（可叠放、不推挤）'" @click="toggleFloat"></i>
+      <slot name="operates"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+// 设计态项 chrome：选中边框、缩放把手圆点、操作条。拖拽 / 缩放交互由 gridstack（内容盒 + .ui-resizable-* 把手）负责，这里只重样式。
+const HANDLES = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw']
+
+export default {
+  name: 'epx-dashboard-design-item',
+  props: {
+    item: { type: Object, required: true },
+    active: Boolean,
+    // 是否显示悬浮切换图标：整页悬浮（grid.mode === 'float'）与移动端布局不显示
+    floatable: { type: Boolean, default: true }
+  },
+  emits: ['select'],
+  data () {
+    return { handles: HANDLES }
+  },
+  methods: {
+    // 悬浮 ↔ 默认：字段直接落到 item 上（与 DesignGrid.setFloat / 属性面板 changeItemConfigs 'component' 同一路径），
+    // 画布按 item.float 把壳搬到悬浮层 / 碰撞层，外壳 deep watch 自动保存；关掉时层级 z 一并删掉、不留脏值。
+    // 点击会冒泡到根元素的 select，所以切换的同时该项也被选中
+    toggleFloat () {
+      const item = this.item
+      if (item.float) {
+        delete item.float
+        delete item.z
+      } else {
+        item.float = true
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@include b(dashboard-design-item) {
+  position: relative;
+  height: 100%;
+  box-sizing: border-box;
+  // 选中 / 悬停边框已移到 grid-stack-item 壳的 ::after（不受 overflow 裁切），此处只控制把手和操作条
+  &:hover,
+  &.epx-dashboard-design-item--active {
+    > .epx-dashboard-design-item__handle {
+      display: block;
+    }
+  }
+  &:hover > .epx-dashboard-design-item__operates,
+  &.epx-dashboard-design-item--active > .epx-dashboard-design-item__operates {
+    display: flex;
+  }
+  // 内容盒本身要能接住指针（主题「悬浮预览」靠 .drag-component:hover 命中），子元素是否吃指针由画布规则决定
+  @include e(body) {
+    height: 100%;
+  }
+  @include e(handle) {
+    position: absolute;
+    display: none;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    pointer-events: none;
+    z-index: 2;
+    @include bg_color_primary;
+  }
+  // 悬浮切换图标：规格同宿主操作条按钮（宿主的 .component-operate__item 是各自文件里的非 scoped 样式，这里自带一份不依赖它）；
+  // 悬浮中反色高亮（白底蓝标）表示开关状态
+  @include e(float) {
+    display: block;
+    width: 20px;
+    font-size: var(--epx-font-size-base);
+    line-height: 20px;
+    text-align: center;
+    color: #fff;
+    cursor: pointer;
+    border-radius: 2px;
+    @include when(on) {
+      color: #0874E7;
+      background: #fff;
+    }
+  }
+  // 操作条：避开 gridstack 的 ne 角把手（内容盒右上 20×20）与 e 边把手（右侧 10px），并压过把手的 z-index（100 / 101）；
+  // 它同时是 draggable.cancel 选择器，按钮上按下不会起手拖拽
+  @include e(operates) {
+    position: absolute;
+    top: 24px;
+    right: 12px;
+    display: none;
+    align-items: center;
+    gap: 4px;
+    padding: 0 4px;
+    background: #0874E7;
+    border-radius: 4px;
+    z-index: 200;
+  }
+}
+.epx-dashboard-design-item__handle--n { top: -3px; left: 50%; margin-left: -3px; }
+.epx-dashboard-design-item__handle--s { bottom: -3px; left: 50%; margin-left: -3px; }
+.epx-dashboard-design-item__handle--e { right: -3px; top: 50%; margin-top: -3px; }
+.epx-dashboard-design-item__handle--w { left: -3px; top: 50%; margin-top: -3px; }
+.epx-dashboard-design-item__handle--ne { top: -3px; right: -3px; }
+.epx-dashboard-design-item__handle--nw { top: -3px; left: -3px; }
+.epx-dashboard-design-item__handle--se { bottom: -3px; right: -3px; }
+.epx-dashboard-design-item__handle--sw { bottom: -3px; left: -3px; }
+// gridstack 把手只保留命中区（几何用库默认值），去掉库自带的角把手箭头图标与旋转；视觉由上面的圆点负责
+.epx-dashboard-design-grid .grid-stack-item > .ui-resizable-handle {
+  background-image: none;
+  transform: none;
+}
+</style>

package/src/Div.vue

@@ -0,0 +1,419 @@
+<template>
+  <div ref="container" :class="['container','epx-dashboard-div', `epx-dashboard-div--${compTheme}`,{ 'drag-element': isDragElement }, { 'is-design': mode==='design'}]" :style="style">
+     <div :class="['epx-chart__header', {'epx-chart__header--no-icon': $configs.iconFlag===false,}]" :style="titleStyle" v-if="showTitle && titleText">
+      <div class="epx-chart__header-left" :style="{color:$configs.iconColor}">
+        <template v-if="$configs.iconFlag!==false" >
+          <i v-if="$configs.icon" :style="$configs.textStyle" class="epx-chart__header-icon--icon" :class="$configs.icon || 'epx-icon-kapianmorentubiao'"></i>
+          <span v-else class="epx-chart__header-icon"></span>
+        </template>
+        <span class="epx-chart__title" :style="$configs.textStyle">{{titleText}}</span>
+      </div>
+    </div>
+    <!-- 运行态：headless 网格，不依赖布局库；移动端（真机 / 手机框预览）子项按堆叠重排（containerGridMixin.mobileItems） -->
+    <epx-dashboard-grid
+      v-if="mode !== 'design'"
+      class="epx-dashboard-div__grid"
+      :items="mobileItems(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 事件搬数据。
+         内容区单独一层：flex 撑满、内容超高时容器内滚动，其可视高度传给子网格做 min-height（指针到网格底部才不触发库的「离开网格」） -->
+    <div v-else ref="designBody" class="epx-dashboard-div__design-body">
+      <epx-dashboard-design-grid
+        class="epx-dashboard-div__design-grid"
+        :sub-grid-of="epxDashboardDesignGrid"
+        :items="items"
+        :grid="gridParams"
+        :body-height="bodyHeight"
+        :min-height="designMinHeight"
+        @change="onDesignChange"
+        @transfer-out="onTransferOut"
+        @transfer-in="onTransferIn">
+        <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="compTheme"
+                mode="design"
+                :mobile-appearance="mobileStacked ? item.mobileAppearance : undefined"
+                @changeItems="v => changeSubItems(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>
+</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-div',
+  // 运行态网格参数 / 门控策略 / 嵌套容器网格透传（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: {
+    theme: String,
+    compId: String,
+    compStyle: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    compItem: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    compConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    items: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    itemConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    mode: String,
+    allComponentList: Array,
+    chartCache: Boolean,
+    dashboardId: String
+  },
+  data () {
+    return {
+      reloadComponent: {},
+      isDragElement: false,
+      // 设计态内容区可视高度（壳内容盒高 − 标题栏高），传给子网格做 min-height
+      designMinHeight: 0
+    }
+  },
+  computed: {
+    compTheme () {
+      return this.$configs.theme || this.theme
+    },
+    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
+      }
+    },
+    $configs () {
+      const itemConfig = this.itemConfigs[this.compId] || {}
+      const _configs = { ...this.compConfigs, ...itemConfig }
+      return _configs
+    },
+    style () {
+      const style = { ...this.compStyle }
+      if (style.backgroundImage) {
+        style.backgroundImage = style.backgroundImage.replace(/url\s*\(([\w+-/.\s]+)\)/g, (str, $1) => {
+          return `url(${this.$util.getFileUrl($1)})`
+        })
+      }
+      return style
+    },
+    showTitle () {
+      const { showTitle } = this.$configs
+      return showTitle
+    },
+    title () {
+      const { title = '' } = this.$configs
+      return title
+    },
+    titleStyle () {
+      const { align, backgroundStyle, backgroundColor, backgroundImage } = this.titleFontStyle || {}
+      const style = {}
+      if (align) {
+        style.justifyContent = align
+      }
+      if (backgroundStyle === 'image') {
+        style.backgroundImage = `url(${this.$util.getFileUrl(backgroundImage)})`
+      } else if (backgroundColor) {
+        style.backgroundColor = backgroundColor
+      }
+      return style
+    },
+    titleText () {
+      return this.$configs.title
+    },
+    design () {
+      return this.epxDashboardDesign
+    },
+    activeComponent () {
+      return this.design ? this.design.state.activeItem : null
+    }
+  },
+  watch: {
+    items: {
+      handler (v = []) {
+        for (const item of v) {
+          if (!item) continue
+          // i 与 id 兜底（i 不再持久化）+ x/y/w/h 必须是数字（网格引擎按数值布局）
+          normalizeGridItem(item)
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    addGridItem (v) {
+      this.$emit('changeItems', [...this.items, v])
+    },
+    // 库改了子项坐标（拖拽 / 缩放 / 推挤 / 首次对账）：画布已就地写回，只需通知上层保存
+    onDesignChange () {
+      this.$emit('changeItems', [...this.items])
+    },
+    // 跨网格搬出（子项被拖到页面或别的容器）：源侧必须同步移出，否则子网格下一次同步会把壳重新加回来
+    onTransferOut (item) {
+      this.$emit('changeItems', this.items.filter(i => i.id !== item.id))
+    },
+    // 跨网格搬入：画布已按本网格换算过 w/h
+    onTransferIn (item) {
+      this.$emit('changeItems', [...this.items, item])
+    },
+    // 嵌套容器的子项变化：替换该容器项对象后上报（与页面级画布 changeSubItems 同手法）
+    changeSubItems (item, v) {
+      const index = this.items.findIndex(i => i.id === item.id)
+      if (index === -1) return
+      const items = [...this.items]
+      items.splice(index, 1, { ...items[index], items: v })
+      this.$emit('changeItems', items)
+    },
+    openConfigPanel (component) {
+      if (this.design) this.design.select(component, this.compId)
+    },
+    // 设计态内容区可视高度：壳内容盒高 − 标题栏高（内容区是 flex 撑满的一层，量它即可；无标题时等于壳内容盒高）
+    measureDesignHeight () {
+      if (this.$refs.designBody) this.designMinHeight = this.$refs.designBody.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.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) {
+        const items = [...this.items]
+        items.splice(index, 1)
+        this.$emit('changeItems', items)
+        // 被删的正是选中项：清掉共享选中态，操作条 / 属性面板不再指向已删除的项
+        if (this.design && this.design.isActive(activeComponent)) this.design.clear()
+      }
+    }
+  },
+  mounted () {
+    if (this.mode !== 'design') return
+    this.measureDesignHeight()
+    if (typeof ResizeObserver !== 'undefined' && this.$refs.designBody) {
+      this.designResizeObserver = new ResizeObserver(() => this.measureDesignHeight())
+      this.designResizeObserver.observe(this.$refs.designBody)
+    }
+  },
+  beforeUnmount () {
+    if (this.designResizeObserver) this.designResizeObserver.disconnect()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+div.container {
+  height: 100%;
+  pointer-events: all!important;
+}
+// 设计态：标题栏 + 内容区纵向排布，内容区撑满剩余高度、内容超高时容器内滚动（运行态布局不受影响）。
+// 容器没有专门的起手区：按在子网格空白处即拖容器（DesignGrid 只对锁定子项打「按下」标记）
+div.container.is-design {
+  display: flex;
+  flex-direction: column;
+  > .epx-chart__header {
+    flex: none;
+  }
+}
+.epx-dashboard-div__design-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+.epx-dashboard-div__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;
+  }
+}
+</style>
+<style lang="scss">
+@include b(dashboard-div) {
+  background: var(--epx-bg-card);
+  @include m(dark) {
+    background: rgba(255, 255, 255, 0.1);
+    @include e(title) {
+      color: rgba(255, 255, 255, 0.8);
+    }
+    @include e(num) {
+      color: #fff;
+      >font {
+        color: #fff;
+      }
+    }
+  }
+  @include m(technology) {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(4px);
+    position: relative;
+    // 设计态不用毛玻璃：backdrop-filter 让容器根自成堆叠上下文，子网格里的选中壳（R31 的 z 600）会被关在容器里、压不过页面级悬浮层
+    &.is-design {
+      backdrop-filter: none;
+    }
+    &::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;
+    }
+    .epx-chart__header-icon {
+      width: 40px;
+      background: url('@/assets/images/dashboard/theme_header.png') no-repeat center;
+      background-size: 100% 100%;
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+</style>