123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689 |
- <template>
- <div id="drafts">
- <div class="tit">草稿箱</div>
- <div class="conent">
- <div class="left-nav">
- <Tree :data="treeData" @change="change" v-if="treeData.length"></Tree>
- <div v-else style="text-align: center;margin-top: 20px;">暂无数据</div>
- <!-- <el-tree ref="tree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" node-key="id" :expand-on-click-node="false"-->
- <!-- :current-node-key="currentNodekey"-->
- <!-- :default-expanded-keys="expandedkeys">-->
- <!-- <span class="span-ellipsis" slot-scope="{ node, data }">-->
- <!-- <span :title="node.label">{{ node.label }}</span>-->
- <!-- </span>-->
- <!-- </el-tree>-->
- </div>
- <div class="conent-right">
- <div class="conent-tit">
- <div class="tit-left" v-if="floorName">{{systemName}}-{{floorName}}</div>
- <div class="tit-right">
- <a-button @click="deleteBtn" :disabled="!floorName">删除</a-button>
- <a-button @click="publishBtn" :disabled="!floorName">发布</a-button>
- <a-button type="primary" @click="goToEditer" :disabled="!floorName">编辑</a-button>
- </div>
- </div>
- <div class="concent-bottom">
- <div class="map">
- <div class="canvas-container" ref="draftsCanvas">
- <div id="fengMap"></div>
- <canvas
- id="canvas"
- :width="canvasWidth"
- :height="canvasHeight"
- ref="canvas"
- tabindex="0"
- ></canvas>
- </div>
- </div>
- <div v-show="!legend" class="legend-btn" @click="legend = !legend">
- <a-icon type="left" style="color: #8D9399;font-size: 10px" />
- </div>
- <div v-show="legend" class="legend-btn legend-btn-close" @click="legend = !legend">
- <a-icon type="right" style="color: #8D9399;font-size: 10px" />
- </div>
- <div class="legend" v-if="legend">
- <div
- style="font-size:14px;color: #1F2429;padding-left: 12px;height: 40px;line-height: 40px"
- >可能需要补充的图例</div>
- <a-table
- v-loading="legendLoading"
- :columns="columns"
- :rowKey="(record,index)=>{return index}"
- :data-source="legendData"
- size="middle"
- :pagination="false"
- >
- <div slot="Url" slot-scope="text,record">
- <img
- v-if="record.Url"
- style=" width: 20px;height: 22px;"
- :src="'/serve/topology-wanda/Picture/query/'+ record.Url"
- alt
- />
- <span v-else>---</span>
- </div>
- <span></span>
- </a-table>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import Tree from "./../components/Tree/Tree.vue";
- import { SFengParser } from "@saga-web/feng-map";
- import { SFloorParser } from "@saga-web/big";
- import { FloorView } from "./../lib/FloorView";
- import { EditScence } from "@/components/mapClass/EditScence";
- import bus from "@/bus";
- import {
- readGroup,
- queryDraftGroup,
- queryStatistic,
- deleteGraph,
- publishGraph
- } from "@/api/editer.js";
- import { STopologyParser } from "./../lib/parsers/STopologyParser";
- import { uuid } from "@/components/mapClass/until";
- import { SImageItem } from "@saga-web/graph/lib";
- import store from "../store";
- import { Loading } from "element-ui";
- import { getUrlMsg } from "@/components/urlMsg.js";
- let fengmap = null;
- export default {
- components: { Tree },
- data() {
- return {
- treeData: [],
- columns: [
- {
- title: "名称", // 列的名称
- dataIndex: "Name", // 列的标识
- scopedSlots: { customRender: "Name" }
- },
- {
- title: "图例", // 列的名称
- dataIndex: "Url", // 列的标识
- scopedSlots: { customRender: "Url" }
- }
- ],
- legendData: [],
- legend: true,
- canvasWidth: 700,
- canvasHeight: 600,
- view: null,
- urlMsg: null,
- floorList: {},
- mapServerURL: "http://map.wanda.cn/editor",
- mapthemeUrl: `http://map.wanda.cn/editor/webtheme`,
- key: "23f30a832a862c58637a4aadbf50a566",
- appName: "万达可视化系统",
- defaultProps: {
- children: "Category",
- label: "Gcode"
- },
- projectId: "", //项目id
- fmapID: "", //蜂鸟地图id
- graphId: "", //绘制生成得图id
- legendLoading: false,
- systemName: "",
- floorName: "",
- floorId: "", //楼层id
- BuildingID: "1", // 建筑id
- categoryId: "", //系统类id
- currentNodekey: "", //默认选中的节点树
- expandedkeys: [] //默认展开的节点树
- };
- },
- methods: {
- // handleNodeClick(data, node) {
- // this.legendData = [];
- // this.systemName = "";
- // this.floorName = "";
- // if (data.Gname) {
- // this.systemName = node.parent.data.Gcode;
- // this.floorName = data.Gcode;
- // this.floorId = data.Gname;
- // this.categoryId = node.parent.data.Id;
- // this.getLegend();
- // this.checkFloor(data.Gname);
- // }
- // },
- //初始化获取蜂鸟所有底图数据
- init() {
- const loadings = Loading.service({
- lock: true,
- text: "Loading",
- spinner: "el-icon-loading",
- background: "rgba(0, 0, 0, 0.7)"
- });
- // const loadings = this.$loading({type: 'global'});
- document.getElementById(`canvas`).focus();
- if(this.fmapID.includes('null')){
- loadings.close();
- this.getTreeData();
- }
- fengmap = new SFengParser(
- "fengMap",
- this.mapServerURL + "/fmap/" + this.fmapID,
- this.key,
- this.appName,
- null,
- this.mapthemeUrl
- );
- fengmap.loadMap(this.fmapID, resp => {
- this.floorList = resp;
- fengmap
- .loadTheme(
- `${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`
- )
- .then(response => {
- // 获取楼层数据数据
- loadings.close();
- this.getTreeData();
- });
- });
- },
- clearGraphy() {
- if (this.view) {
- this.view.scene = null;
- return;
- }
- this.view = new FloorView("canvas");
- document.getElementById("canvas").focus();
- },
- parserData(floor) {
- if (floor == "g80") {
- // 屋顶
- if (fengmap.frImg) {
- const imgItem = new SImageItem(
- null,
- `${this.mapServerURL}/webtheme/${this.fmapID}/${fengmap.frImg}`
- );
- this.scene.addItem(imgItem);
- this.view.fitSceneToView();
- this.loading = false;
- this.isQuerying = false;
- }
- } else {
- if (this.floorList[floor]) {
- fengmap.parseData(this.floorList[floor], res => {
- if (res.err) {
- console.log(res.err);
- return;
- }
- this.fParser = new SFloorParser(null);
- this.fParser.parseData(res);
- this.fParser.spaceList.forEach(t => {
- t.selectable = true;
- this.scene.addItem(t);
- });
- this.fParser.wallList.forEach(t => this.scene.addItem(t));
- this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
- this.fParser.doorList.forEach(t => this.scene.addItem(t));
- this.fParser.columnList.forEach(t => this.scene.addItem(t));
- this.fParser.casementList.forEach(t => this.scene.addItem(t));
- this.view.scene = this.scene;
- this.view.fitSceneToView();
- this.loading = false;
- this.isQuerying = false;
- console.log("success");
- });
- } else {
- console.log("楼层不正确");
- }
- }
- },
- change(id) {
- const data = this.treeData;
- (function recursion(newObj) {
- newObj.map(function(item, index) {
- item.open = false;
- item.checked = false;
- if (item.Category && item.Category.length > 0) {
- item.children = item.Category;
- recursion(item.Category);
- }
- });
- })(data);
- let items = null;
- data.forEach(ele => {
- ele.children.forEach(item => {
- ele.open = true;
- if (item.children) {
- item.children.forEach(item1 => {
- item.open = true;
- if (item1.id == id.id) {
- items = item;
- item1.checked = "checked";
- }
- });
- } else {
- if (item.id == id.id) {
- items = ele;
- ele.open = true;
- item.checked = "checked";
- }
- }
- });
- });
- this.legendData = [];
- this.systemName = "";
- this.floorName = "";
- this.systemName = items.Gcode;
- this.floorName = id.Gcode;
- this.floorId = id.Gname;
- this.categoryId = items.Id;
- // this.getLegend();
- this.checkFloor(id.Gname);
- console.log(items);
- },
- getTreeData() {
- const loadings = Loading.service({
- lock: true,
- text: "Loading",
- spinner: "el-icon-loading",
- background: "rgba(0, 0, 0, 0.7)"
- });
- queryDraftGroup({ projectId: this.projectId })
- .then(res => {
- console.log(res);
- loadings.close();
- if (res.Result == "success") {
- const data = res.Data;
- this.systemName = "";
- this.floorName = "";
- this.floorId = "";
- this.categoryId = "";
- if (data.length) {
- (function recursion(newObj) {
- newObj.map(function(item, index) {
- item.id = item.Id || item.Gname;
- item.name = item.Gcode;
- item.checked = false;
- if (item.Category && item.Category.length > 0) {
- item.children = item.Category;
- item.open = false;
- recursion(item.Category);
- }
- });
- })(data);
- data.forEach(ele => {
- ele.children.forEach(item => {
- ele.open = true;
- if (item.children) {
- item.open = true;
- item.children.forEach(item1 => {
- item1.id = item.Id + item1.Gname;
- });
- } else {
- item.id = ele.Id + item.Gname;
- }
- });
- });
- this.treeData = data;
- if (this.treeData[0].children[0].children) {
- this.treeData[0].open = true;
- this.treeData[0].children[0].open = true;
- this.treeData[0].children[0].children[0].checked = "checked";
- this.systemName = this.treeData[0].children[0].Gcode;
- this.floorName = this.treeData[0].children[0].children[0].Gcode;
- this.floorId = this.treeData[0].children[0].children[0].Gname;
- this.categoryId = this.treeData[0].children[0].Id;
- // this.getLegend();
- this.checkFloor(this.treeData[0].children[0].children[0].Gname);
- } else {
- this.treeData[0].open = true;
- this.treeData[0].children[0].checked = "checked";
- this.systemName = this.treeData[0].Gcode;
- this.floorName = this.treeData[0].children[0].Gcode;
- this.floorId = this.treeData[0].children[0].Gname;
- this.categoryId = this.treeData[0].Id;
- // this.getLegend();
- this.checkFloor(this.treeData[0].children[0].Gname);
- }
- } else {
- this.treeData = data;
- }
- } else {
- this.treeData = [];
- this.$message.error("获取楼层结构失败");
- }
- // 如果没有楼层则底图清空
- if (this.treeData.length == 0) {
- this.checkFloor("");
- }
- })
- .catch(() => {
- loadings.close();
- this.$message.error("请求失败");
- });
- },
- //获取补充图例
- getLegend() {
- this.legendLoading = true;
- this.legendData = [];
- queryStatistic({
- projectId: this.projectId,
- graphId: this.graphId,
- categoryId: this.categoryId
- }).then(res => {
- console.log(res);
- this.legendLoading = false;
- if (res.data.Result == "success") {
- const data = res.data.Data;
- data.map(item => {
- this.legendData.push(item);
- });
- } else {
- this.legendData = [];
- this.$message.error("获取楼层结构补充图例失败");
- }
- });
- },
- //删除
- deleteBtn() {
- const loadings = Loading.service({
- lock: true,
- text: "Loading",
- spinner: "el-icon-loading",
- background: "rgba(0, 0, 0, 0.7)"
- });
- deleteGraph([{ Id: this.graphId }]).then(res => {
- console.log(res);
- loadings.close();
- if (res.Result == "success") {
- this.$message.success("删除成功");
- this.getTreeData();
- // this.init();
- this.legendData = [];
- } else {
- this.$message.error(res.Message);
- }
- });
- },
- //发布
- publishBtn() {
- const loadings = Loading.service({
- lock: true,
- text: "Loading",
- spinner: "el-icon-loading",
- background: "rgba(0, 0, 0, 0.7)"
- });
- console.log(this.floorId);
- const data = {
- BuildingID: this.BuildingID,
- CategoryID: this.categoryId,
- FloorID: this.floorId,
- GraphId: this.graphId,
- ProjectID: this.projectId,
- Pub: false,
- PubUser: ""
- };
- publishGraph(data).then(res => {
- loadings.close();
- if (res.Result == "success") {
- this.$message.success("发布成功");
- this.getTreeData();
- this.legendData = [];
- } else {
- this.$message.error(res.Message);
- }
- });
- },
- // 读取数据
- readGroup(floorid) {
- const data = {
- categoryId: this.categoryId,
- projectId: this.projectId,
- BuildingID: this.BuildingID, // 建筑ID
- FloorID: floorid, // 楼层id
- Pub: false
- };
- return readGroup(data);
- },
- /**
- * @name goToEditer
- * @description t跳转editer编辑器
- */
- goToEditer() {
- setTimeout(() => {
- /* const token = this.$store.getters["token"];
- const data = `categoryId=${this.categoryId}&projectId=${this.projectId}&BuildingID=1&FloorID=${this.floorId}&FloorName=${this.floorName}&fmapID=${this.fmapID}&token=${token}`;
- const url =
- window.location.origin +
- "/wandaEditer/editer?" +
- encodeURIComponent(data);
- window.open(url, true); */
-
- // 发布成功跳转草稿箱
- const token = this.$store.getters["token"];
- this.$router.push({
- path: "editer",
- query: {
- categoryId: this.categoryId,
- projectId: this.projectId,
- BuildingID: 1,
- FloorName: this.floorName,
- FloorID: this.floorId,
- fmapID: this.fmapID,
- token:token
- }
- });
- }, 1000);
- },
- // 切换草稿箱楼层
- checkFloor(floorid) {
- this.scene = new EditScence();
- this.scene.isEditStatus = false;
- this.clearGraphy();
- const loadings = Loading.service({
- lock: true,
- text: "Loading",
- spinner: "el-icon-loading",
- background: "rgba(0, 0, 0, 0.7)"
- });
- if(!floorid){
- loadings.close();
- this.view.fitSceneToView();
- return
- }
- setTimeout(() => {
- this.view.scene = this.scene;
- this.parserData(floorid);
- this.readGroup(floorid).then(data => {
- if (data.Result == "success") {
- this.graphId = data.Data[0].ID;
- if (data.Data) {
- loadings.close();
- const parserData = new STopologyParser(null);
- parserData.parseData(data.Data[0].Elements);
- // 多边形
- parserData.zoneLegendList.forEach(t => {
- this.scene.addItem(t);
- this.scene.Nodes.push(t);
- });
- // 增加文字
- parserData.textMarkerList.forEach(t => {
- this.scene.addItem(t);
- this.scene.Markers.push(t);
- });
- // 增加图片
- parserData.imageMarkerList.forEach(t => {
- this.scene.addItem(t);
- this.scene.Markers.push(t);
- });
- // 增加直线
- parserData.lineMarkerList.forEach(t => {
- this.scene.addItem(t);
- this.scene.Markers.push(t);
- });
- // 增加图标类图例
- parserData.imageLegendList.forEach(t => {
- this.scene.addItem(t);
- this.scene.Nodes.push(t);
- });
- // 增加管线类
- // 增加图标类图例
- parserData.relationList.forEach(t => {
- this.scene.addItem(t);
- this.scene.Relations.push(t);
- });
- this.view.fitSceneToView();
- this.getLegend();
- }
- } else {
- loadings.close();
- }
- }).catch(()=>{
- loadings.close();
- });
- }, 100);
- }
- },
- mounted() {
- this.canvasWidth = this.$refs.draftsCanvas.offsetWidth - 10;
- this.canvasHeight = this.$refs.draftsCanvas.offsetHeight - 10;
- const href = window.location.href;
- let params = href.split("?")[1];
- if (!params) {
- // 参数有问题
- return false;
- }
- params = decodeURIComponent(params);
- const paramsArr = params.split("&");
- const obj = {};
- paramsArr.map(item => {
- const arr = item.split("=");
- obj[arr[0]] = arr[1];
- });
- console.log("obj", obj);
- this.projectId = obj.projectId ? obj.projectId : "1000423";
- this.fmapID = obj.fmapID ? obj.fmapID : "1000423_120";
- this.init();
- }
- };
- </script>
- <style lang="less" scoped>
- #drafts {
- widows: 100%;
- height: 100%;
- background: #f7f9fa;
- position: relative;
- .tit {
- width: 100%;
- height: 48px;
- display: flex;
- justify-content: center;
- align-items: center;
- border-bottom: #e4e5e7 solid 1px;
- font-size: 16px;
- font-weight: bold;
- }
- .conent {
- width: 100%;
- height: calc(100% - 48px);
- display: flex;
- position: relative;
- .left-nav {
- width: 224px;
- height: 100%;
- overflow-y: scroll;
- padding: 0 12px;
- /deep/ .el-tree {
- background: #f7f9fa;
- .el-tree-node__content {
- height: 38px;
- }
- /deep/.el-tree-node:focus > .el-tree-node__content {
- background-color: #e1f2ff !important;
- color: #0091ff !important;
- }
- }
- .span-ellipsis {
- width: 100%;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
- .conent-right {
- flex: 1;
- height: 100%;
- background: #fff;
- .conent-tit {
- width: 100%;
- display: flex;
- height: 59px;
- border: 1px solid #eff0f1;
- align-items: center;
- justify-content: space-between;
- padding: 0 16px 0 16px;
- box-sizing: border-box;
- .tit-left {
- font-size: 16px;
- font-weight: bold;
- color: rgba(31, 35, 41, 1);
- }
- .tit-right {
- width: 198px;
- display: flex;
- justify-content: space-between;
- margin-left: auto;
- }
- }
- .concent-bottom {
- height: calc(100% - 61px);
- display: flex;
- position: relative;
- .map {
- flex: 1;
- position: relative;
- height: 100%;
- /*height: calc(100% - 61px);*/
- /*background: red;*/
- }
- .legend {
- position: absolute;
- right: 0;
- top: 0;
- width: 200px;
- border-left: 1px solid #eff0f1;
- background-color: #ffffff;
- height: 100%;
- overflow-y: scroll;
- }
- .legend-btn {
- position: absolute;
- right: 0px;
- top: 9px;
- width: 10px;
- height: 24px;
- background: rgba(228, 229, 231, 1);
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- }
- .legend-btn-close {
- right: 200px;
- }
- }
- }
- }
- }
- #fengMap {
- position: absolute;
- width: 100px;
- height: 100px;
- z-index: -1;
- }
- .canvas-container {
- width: 100%;
- height: 100%;
- }
- </style>
|