<template>
|
<div>
|
<Popup
|
ref="layer"
|
:closeHidePage="true"
|
:title="title"
|
:left="left"
|
:maxHeight="maxHeight"
|
>
|
<el-form ref="form" :model="data" label-width="60px">
|
<el-form-item label="模式:">
|
<el-select v-model="data.type" @change="changeType" style="width: 231px;">
|
<el-option label="时间" value="time"></el-option>
|
<el-option label="比例" value="progress"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="时间:" v-if="data.type === 'time'">
|
<el-input
|
v-model="data.start"
|
class="time-input"
|
@change="changeTime('start')"
|
></el-input>
|
<div class="split"></div>
|
<el-input
|
v-model="data.end"
|
class="time-input"
|
@change="changeTime('end')"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="进度:">
|
<el-slider v-model="data.rate" @input="changeRate"> </el-slider>
|
</el-form-item>
|
<el-form-item label="高亮:">
|
<el-switch v-model="data.useColor" @change="useColor"></el-switch>
|
<span style="margin-left: 20px"
|
><el-button
|
type="primary"
|
@click="autoPaly"
|
size="small"
|
v-if="!auto"
|
>自动播放</el-button
|
>
|
<el-button type="primary" @click="endPaly" size="small" v-else
|
>结束播放</el-button
|
>
|
<el-button
|
type="primary"
|
@click="currentTime"
|
size="small"
|
v-if="data.type === 'time'"
|
>当前状态</el-button
|
>
|
</span>
|
</el-form-item>
|
</el-form>
|
<el-divider></el-divider>
|
<div class="treeContainer scrollbar">
|
<el-tree
|
ref="tree"
|
:data="treeData"
|
show-checkbox
|
node-key="id"
|
:expand-on-click-node="false"
|
:auto-expand-parent="false"
|
:default-expand-all="true"
|
:default-checked-keys="defaultCheck"
|
@check="check"
|
>
|
<span
|
class="custom-tree-node"
|
slot-scope="{ data }"
|
@dblclick="flyTo(data)"
|
>
|
<span>
|
<i v-if="data.children" class="el-icon-folder"></i>
|
<i
|
v-else
|
:class="
|
data.sourceType === 'location'
|
? 'el-icon-location-outline'
|
: ''
|
"
|
></i>
|
<span>{{ data.name }}</span>
|
</span>
|
</span>
|
</el-tree>
|
</div>
|
</Popup>
|
</div>
|
</template>
|
|
<script>
|
import Popup from "@tools/Popup";
|
import axios from "axios";
|
let demolition = new Map();
|
export default {
|
name: "Demolition",
|
components: {
|
Popup,
|
},
|
data() {
|
return {
|
title: "征拆迁演示",
|
left: "calc(100% - 380px)",
|
maxHeight: "400px",
|
defaultCheck: [],
|
treeData: [],
|
viewCenter: [],
|
auto: false,
|
data: {
|
type: "progress",
|
useColor: false,
|
rate: 0,
|
attr: ["计划开始时间", "计划结束时间"],
|
start: 2021122800,
|
end: 2021123000,
|
list: new Map(),
|
},
|
};
|
},
|
mounted() {
|
// 获取本地配置文件
|
axios.get(`./layer/demolition.json`).then((data) => {
|
this.initData(data.data);
|
});
|
},
|
methods: {
|
autoPaly() {
|
clearInterval(this.autoTime);
|
let num = 0;
|
this.autoTime = setInterval(() => {
|
this.data.rate = num++;
|
if (num > 100) {
|
this.endPaly();
|
}
|
}, 100);
|
this.auto = true;
|
},
|
endPaly() {
|
this.auto = false;
|
clearInterval(this.autoTime);
|
},
|
open() {
|
// 初始定位
|
if (this.viewCenter.length) {
|
this.flyTo({
|
flyTo: this.viewCenter,
|
});
|
}
|
|
for (let item of this.data.list.values()) {
|
this.addDemolitionData(item);
|
}
|
|
// 打开弹窗
|
this.$refs.layer.open();
|
},
|
// 初始化数据
|
initData(data) {
|
// 设置工程树数据
|
this.treeData = data.children;
|
// 初始定位
|
if (data.flyTo) {
|
this.viewCenter = data.flyTo;
|
}
|
this.data.attr = data.attr;
|
this.data.start = data.start;
|
this.data.end = data.end;
|
|
// 加载场景数据
|
this.loadDataToScene();
|
},
|
// 加载数据到场景
|
loadDataToScene() {
|
if (this.$refs.tree) {
|
this.defaultCheck = [];
|
// 遍历节点
|
this.ergodicNode({ children: this.treeData });
|
}
|
},
|
// 遍历节点
|
ergodicNode(node) {
|
if (node.checked && node["拆迁"]) {
|
this.defaultCheck.push(node.id);
|
this.getDemolitionData(node);
|
} else if (node["拆迁"]) {
|
this.getDemolitionData(node);
|
}
|
if (node.children && node.children.length) {
|
node.children.forEach((item) => {
|
this.ergodicNode(item);
|
});
|
}
|
},
|
getDemolitionData(node) {
|
if (!this.data.list.has(node.id)) {
|
let data = {
|
id: node.id,
|
show: node.checked,
|
start: undefined,
|
end: [],
|
};
|
(node.children || node._children).forEach((item) => {
|
node.checked && node.children && this.defaultCheck.push(item.id);
|
item.parentID = node.id;
|
item.disabled = true;
|
if (item.name.indexOf("拆迁") > -1) {
|
data.start = item;
|
} else {
|
data.end.push(item);
|
}
|
});
|
this.data.list.set(node.id, data);
|
}
|
},
|
async addDemolitionData(data) {
|
if (!demolition.has(data.id)) {
|
let _demolition = sgworld.Analysis.demolition(data, {
|
show: data.show,
|
attr: this.data.attr,
|
attrType: "number",
|
end: this.data.end, // 工期
|
start: this.data.start, // 工期
|
useColor: this.data.useColor,
|
});
|
demolition.set(data.id, _demolition);
|
}
|
},
|
// 勾选
|
check(treeNode, data) {
|
let show = data.checkedKeys.indexOf(treeNode.id) > -1;
|
this.showTreeData(treeNode, show);
|
},
|
showTreeData(treeNode, show) {
|
if (treeNode["拆迁"]) {
|
if (demolition.has(treeNode.id)) {
|
demolition.get(treeNode.id).setVisibility(show);
|
this.data.list.get(treeNode.id).show = show;
|
}
|
} else if (treeNode.children) {
|
treeNode.children.forEach((item) => {
|
this.showTreeData(item, show);
|
});
|
}
|
},
|
// 定位
|
flyTo(treeNode) {
|
sgworld._treeTool.flyTo(treeNode);
|
if (treeNode.urls && demolition.has(treeNode.parentID)) {
|
let _demolition = demolition.get(treeNode.parentID);
|
let model;
|
if (treeNode.name.indexOf("拆迁") > -1) {
|
model = _demolition.tiltModel.start;
|
} else {
|
model = _demolition.tiltModel.end.find((item) => {
|
return item.treeobj.id === treeNode.id;
|
});
|
debugger;
|
}
|
model && sgworld.Navigate.flyToObj(model);
|
}
|
},
|
changeRate(value) {
|
for (let item of demolition.values()) {
|
item.currentProgress(value / 100);
|
}
|
},
|
useColor(value) {
|
for (let item of demolition.values()) {
|
item.useColor(value);
|
}
|
},
|
changeType(value) {
|
for (let item of demolition.values()) {
|
item.palyType = value;
|
item.currentProgress(item.progress);
|
}
|
},
|
changeTime(type) {
|
for (let item of demolition.values()) {
|
item[type] = parseFloat(this.data[type]);
|
item.currentProgress(item.progress);
|
}
|
},
|
// 当前状态
|
currentTime() {
|
let now = new Date();
|
let yy = now.getFullYear();
|
let mm = now.getMonth() + 1;
|
mm = mm < 10 ? "0" + mm : mm;
|
let dd = now.getDate();
|
dd = dd < 10 ? "0" + dd : dd;
|
let hh = now.getHours();
|
hh = hh < 10 ? "0" + hh : hh;
|
now = [yy, mm, dd, hh].join("");
|
for (let item of demolition.values()) {
|
item.palyType = "time";
|
item.currentTime(now);
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less" scoped>
|
.treeContainer {
|
width: 100%;
|
max-height: 200px;
|
|
.treeTitle {
|
text-align: center;
|
margin: 10px 0;
|
|
/deep/ .el-upload {
|
margin-right: 10px;
|
}
|
}
|
|
.el-tree {
|
background: transparent;
|
color: #fff;
|
}
|
|
/deep/ .el-tree-node__content:hover {
|
background-color: rgba(245, 247, 250, 0.2);
|
}
|
|
/deep/ .el-tree-node:focus > .el-tree-node__content {
|
background-color: rgba(245, 247, 250, 0.2);
|
}
|
|
/deep/ .custom-tree-node {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 14px;
|
padding-right: 10px;
|
|
i {
|
margin-right: 5px;
|
}
|
}
|
|
/deep/ .el-checkbox > .is-disabled {
|
display: none;
|
}
|
}
|
.time-input {
|
display: inline-block;
|
width: 110px;
|
}
|
.split {
|
display: inline-block;
|
margin: 0 5px;
|
background: #fff;
|
width: 1px;
|
height: 25px;
|
vertical-align: middle;
|
}
|
.el-form-item {
|
margin-bottom: 5px !important;
|
}
|
.el-divider {
|
margin: 5px 0;
|
}
|
</style>
|
