@@ -58,11 +58,21 @@ export default {
validator: (val) => ["single", "multiple", "disable"].includes(val),
default: "multiple",
},
+ // 是否显示标题
+ showTitle: {
+ type: Boolean,
+ default: false,
+ },
// 是否显示图例
showLegends: {
type: Boolean,
default: true,
},
+ // 楼盘表工具
+ tools: {
+ type: Array,
+ default: () => ["locate", "select", "switchLogic"],
+ },
// 提示信息
tipText: {
type: String,
@@ -111,6 +121,10 @@ export default {
removeSelections(houseIds) {
this.store.commit("removeSelectHouses", houseIds);
},
+ // 全选(onlyEnabled为true，isEnabled为false的房屋不会被选中)
+ selectAll(onlyEnabled = true) {
+ this.store.commit("selectAll", onlyEnabled);
+ },
// 清空选择
clearSelection() {
this.store.commit("clearSelect");
diff --git a/src/components/BuildingTable/HouseDefinition.vue b/src/components/BuildingTable/HouseDefinition.vue
index 08216ea..bd2fa1b 100644
--- a/src/components/BuildingTable/HouseDefinition.vue
+++ b/src/components/BuildingTable/HouseDefinition.vue
@@ -18,6 +18,8 @@ const props = {
showSymbol: Boolean,
// 每行显示几个房屋符号(symbol)，默认：3
symbolColumn: Number,
+ // 是否以精简模式显示
+ simple: Boolean,
};
/**
@@ -34,6 +36,12 @@ export default {
// 创建房屋配置定义
createHouseDefinition() {
const definition = deepClone(this.$options.propsData);
+ // 精简模式
+ if (definition.simple) {
+ definition.className = "simple-cell";
+ definition.showBlock = false;
+ definition.width = 90;
+ }
// 定义render函数，如果有自定义模板使用自定义模块，否则使用默认模板
if (this.$scopedSlots.default) {
definition.render = (h, context) => {
diff --git a/src/components/BuildingTable/HouseTooltip.vue b/src/components/BuildingTable/HouseTooltip.vue
new file mode 100644
index 0000000..aeff07f
--- /dev/null
+++ b/src/components/BuildingTable/HouseTooltip.vue
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/components/BuildingTable/config/house-config.js b/src/components/BuildingTable/config/house-config.js
index 2eaaa92..dc36222 100644
--- a/src/components/BuildingTable/config/house-config.js
+++ b/src/components/BuildingTable/config/house-config.js
@@ -20,9 +20,11 @@ const houseConfig = {
showSymbol: true,
// 每行显示几个房屋符号
symbolColumn: 3,
+ // 是否以精简模式显示
+ simple: false,
// 房屋单元格默认渲染函数
render: function (h, { definition, houseInfo }) {
- const { className, houseStyle, showBlock, includeFields, excludeFields, showSymbol, symbolColumn } = definition
+ const { className, houseStyle, showBlock, includeFields, excludeFields, showSymbol, symbolColumn, simple } = definition
const { houseName, blocks, symbols } = houseInfo
const root = getBuildingTable(this)
@@ -51,8 +53,8 @@ const houseConfig = {
const items = []
if (index % symbolColumn == 0) {
for (let i = index; i < Math.min(index + symbolColumn, symbols.length); i++) {
- const { color, text } = symbols[i]
- items.push(
)
+ const { name, value } = symbols[i]
+ items.push(
)
}
symbolVNodes.push(
{items}
)
}
@@ -60,14 +62,14 @@ const houseConfig = {
return symbolVNodes
}
const clickTitle = (event) => {
- event.stopPropagation()
+ !simple && event.stopPropagation()
root && root.$emit('house-title-click', { house: houseInfo, event })
}
return (
-
{houseName}
+ {houseName}
{renderBlock()}
diff --git a/src/components/BuildingTable/core/select-manager.js b/src/components/BuildingTable/core/select-manager.js
index be92329..550e4bc 100644
--- a/src/components/BuildingTable/core/select-manager.js
+++ b/src/components/BuildingTable/core/select-manager.js
@@ -104,6 +104,18 @@ export default class SelectionManager {
this.raiseEvent()
}
+ // 全选
+ selectAll(onlyEnabled) {
+ if (this.disabled) return
+
+ this.query.queryAll().forEach(house => {
+ if (!onlyEnabled || (onlyEnabled && house.isEnabled)) {
+ this.setHouseCell(house, true)
+ }
+ })
+ this.raiseEvent()
+ }
+
// 清空选择
clearSelect() {
if (this.disabled) return
diff --git a/src/components/BuildingTable/core/table-query.js b/src/components/BuildingTable/core/table-query.js
index 45c1cd7..bfe1c3a 100644
--- a/src/components/BuildingTable/core/table-query.js
+++ b/src/components/BuildingTable/core/table-query.js
@@ -7,6 +7,17 @@ export default class TableQuery {
this.currentLogic = null // 当前逻辑幢
}
+ // 查询所有房屋
+ queryAll() {
+ const result = []
+ for (const logic of this.logicBuilds) {
+ for (const house of logic.houses) {
+ result.push(house)
+ }
+ }
+ return result
+ }
+
// 切换逻辑幢，logicId为空时切换第一个逻辑幢
setLogicId(logicId) {
if (!this.currentLogic || this.currentLogic.logicBuildId != logicId) {
diff --git a/src/components/BuildingTable/index.js b/src/components/BuildingTable/index.js
index 23cd461..737154f 100644
--- a/src/components/BuildingTable/index.js
+++ b/src/components/BuildingTable/index.js
@@ -1,6 +1,11 @@
export { default as UnitDefinition } from './UnitDefinition'
export { default as FloorDefinition } from './FloorDefinition'
export { default as HouseDefinition } from './HouseDefinition'
+export { default as HouseTooltip } from './HouseTooltip.vue'
+
+export { default as SwitchLogicTool } from './tools/SwitchLogicTool'
+export { default as SelectTool } from './tools/SelectTool'
+export { default as LocateTool } from './tools/LocateTool'
import BuildingTable from './BuildingTable'
diff --git a/src/components/BuildingTable/store/selector.js b/src/components/BuildingTable/store/selector.js
index 7dc9395..4215141 100644
--- a/src/components/BuildingTable/store/selector.js
+++ b/src/components/BuildingTable/store/selector.js
@@ -51,6 +51,10 @@ export default {
removeSelectHouses(houseIds) {
this._selector.selectHouseByIds(houseIds, false)
},
+ // 全选(onlyEnabled为true，isEnabled为false的房屋不会被选中)
+ selectAll(onlyEnabled) {
+ this._selector.selectAll(onlyEnabled)
+ },
// 清空选择
clearSelect() {
this._selector.clearSelect()
diff --git a/src/components/BuildingTable/style/house.scss b/src/components/BuildingTable/style/house.scss
index 6531c07..3618602 100644
--- a/src/components/BuildingTable/style/house.scss
+++ b/src/components/BuildingTable/style/house.scss
@@ -51,6 +51,18 @@
position: relative;
cursor: pointer;
+ &.simple-cell {
+ padding-top: 6px;
+
+ .house-cell__block-title {
+ text-align: center;
+ text-decoration: initial;
+ display: block;
+ white-space: initial;
+ text-overflow: initial;
+ }
+ }
+
&::before {
position: absolute;
right: -2px;
diff --git a/src/components/BuildingTable/style/index.scss b/src/components/BuildingTable/style/index.scss
index 1e5f168..5fe1604 100644
--- a/src/components/BuildingTable/style/index.scss
+++ b/src/components/BuildingTable/style/index.scss
@@ -7,4 +7,5 @@
@import "./unit.scss";
@import "./house.scss";
@import "./legend.scss";
+@import "./tooltip.scss";
diff --git a/src/components/BuildingTable/style/table.scss b/src/components/BuildingTable/style/table.scss
index 050a17f..d374cd8 100644
--- a/src/components/BuildingTable/style/table.scss
+++ b/src/components/BuildingTable/style/table.scss
@@ -1,4 +1,7 @@
.building-table-wrap {
+ position: relative;
+ overflow: visible;
+
.building-table__content {
position: relative;
diff --git a/src/components/BuildingTable/style/tool.scss b/src/components/BuildingTable/style/tool.scss
index 954be6e..af63f24 100644
--- a/src/components/BuildingTable/style/tool.scss
+++ b/src/components/BuildingTable/style/tool.scss
@@ -1,21 +1,53 @@
/*tool common */
-.building-tool:not(:first-child) {
- margin-left: 10px;
-}
-
-.building-tool__button {
- display: inline-block;
- width: 20px;
- height: 20px;
+.building-tool {
position: relative;
- top: 5px;
- margin-left: 3px;
- background-size: 100% 100%;
- cursor: pointer;
- transition: opacity 0.25s ease;
- &:hover {
- opacity: 0.9;
+ &:not(:first-child) {
+ margin-left: 16px;
+ }
+
+ &:not(:last-child):after {
+ content: " ";
+ position: absolute;
+ top: 10px;
+ bottom: 10px;
+ width: 1px;
+ margin-left: 6px;
+ background-color: #fff;
+ }
+
+ .building-tool__button {
+ display: inline-block;
+ font-size: 13px;
+ cursor: pointer;
+ border: 1px solid #fff;
+ border-radius: 2px;
+ height: 24px;
+ line-height: 24px;
+ padding: 0 14px;
+ margin-right: 6px;
+ transition: all 0.25s ease;
+
+ &:hover {
+ border: 2px solid #275cc4;
+ padding: 0 13px;
+ }
+ }
+
+ .building-tool__icon {
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ position: relative;
+ top: 5px;
+ margin-left: 3px;
+ background-size: 100% 100%;
+ cursor: pointer;
+ transition: opacity 0.25s ease;
+
+ &:hover {
+ opacity: 0.9;
+ }
}
}
@@ -74,6 +106,21 @@
}
}
+/*select tool*/
+.select-tool-wrap {
+ cursor: pointer;
+ > input {
+ vertical-align: middle;
+ margin-right: 4px;
+ }
+
+ > label {
+ vertical-align: middle;
+ font-size: 13px;
+ font-weight: normal;
+ }
+}
+
/*locate tool*/
.locate-tool-wrap {
.locate-tool__select {
diff --git a/src/components/BuildingTable/style/tooltip.scss b/src/components/BuildingTable/style/tooltip.scss
new file mode 100644
index 0000000..1804365
--- /dev/null
+++ b/src/components/BuildingTable/style/tooltip.scss
@@ -0,0 +1,30 @@
+.house-tooltip-wrap {
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 8px 12px;
+ border-radius: 4px;
+ background: #fff;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.25);
+ z-index: 2000;
+
+ > ul {
+ margin: 0;
+ padding: 0;
+ text-align: left;
+ list-style: none;
+ font-size: 13px;
+ color: #666;
+ line-height: 20px;
+ }
+}
+
+.tooltip-enter-active,
+.tooltip-leave-active {
+ transition: opacity 0.3s linear;
+}
+
+.tooltip-enter,
+.tooltip-leave-to {
+ opacity: 0;
+}
diff --git a/src/components/BuildingTable/tools/LocateTool.vue b/src/components/BuildingTable/tools/LocateTool.vue
index 9b241cb..b1d1a49 100644
--- a/src/components/BuildingTable/tools/LocateTool.vue
+++ b/src/components/BuildingTable/tools/LocateTool.vue
@@ -1,22 +1,26 @@
-
@@ -58,4 +62,4 @@ export default {
},
},
};
-
\ No newline at end of file
+
diff --git a/src/components/BuildingTable/tools/SelectTool.vue b/src/components/BuildingTable/tools/SelectTool.vue
new file mode 100644
index 0000000..2fdc0d6
--- /dev/null
+++ b/src/components/BuildingTable/tools/SelectTool.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/BuildingTable/tools/SwitchLogicTool.vue b/src/components/BuildingTable/tools/SwitchLogicTool.vue
index 7a89e52..f1cd442 100644
--- a/src/components/BuildingTable/tools/SwitchLogicTool.vue
+++ b/src/components/BuildingTable/tools/SwitchLogicTool.vue
@@ -1,5 +1,8 @@
-