|
|
@@ -1,295 +1,206 @@
|
|
|
<template>
|
|
|
- <div class="persagyPlan">
|
|
|
- <basePlan @onMousedown="onMousedown" @postDeviceIds="postDeviceIds" ref="planEl"></basePlan>
|
|
|
- <tooltip ref="tooltip_map" v-show="showtip" class="toolTip">
|
|
|
- <div class="title">
|
|
|
- {{ this.tooltipName }}
|
|
|
- </div>
|
|
|
- <div class="tip-body">
|
|
|
- <div class="info">
|
|
|
- <p v-for="(item, index) in device_params" :key="index">
|
|
|
- <span class="label">{{ item.infoName }}：</span>
|
|
|
- <span class="value">{{ showData(item) }}</span>
|
|
|
- <span class="unit">{{ item.unit }}</span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="tip-footer">查看设备详情</div>
|
|
|
- </tooltip>
|
|
|
- </div>
|
|
|
+ <div class="persagyPlan">
|
|
|
+ <basePlan @onMousedown="onMousedown" ref="planEl"></basePlan>
|
|
|
+ <tooltip ref="tooltip_map" v-show="showtip" class="toolTip">
|
|
|
+ <div class="title">
|
|
|
+ {{ this.tooltipName }}
|
|
|
+ </div>
|
|
|
+ <div class="tip-body">
|
|
|
+ <div class="info">
|
|
|
+ <p v-for="(item, index) in device_params" :key="index">
|
|
|
+ <span class="label">{{ item.infoName }}：</span>
|
|
|
+ <span class="value">{{ showData(item) }}</span>
|
|
|
+ <span class="unit">{{ item.unit }}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tip-footer">查看设备详情</div>
|
|
|
+ </tooltip>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { readPubGroup, readDeviceParams, readDeviceStatus } from "@/api/plan"; // 引入获取底图得接口
|
|
|
+import { readPubGroup, readDeviceStatus, pubPlanerQuery } from "@/api/plan"; // 引入获取底图得接口
|
|
|
import basePlan from "@/components/basePlan.vue";
|
|
|
import tooltip from "@/components/tooltip.vue";
|
|
|
export default {
|
|
|
- components: { basePlan, tooltip },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- showtip: false,
|
|
|
- tooltipName: "",
|
|
|
- device_params: [],
|
|
|
- deviceIds: [],
|
|
|
- graphId: "e4c6b131ced74032b02b5721cb496b77",
|
|
|
- id: "ad1195f2492f41e3a06f792d6701365c",
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- let _this = this;
|
|
|
- let canvasEl = document.getElementsByTagName("canvas")[0];
|
|
|
- window._resizeTimer = null;
|
|
|
- window.addEventListener("resize", () => {
|
|
|
- clearTimeout(window._resizeTimer);
|
|
|
- window._resizeTimer = setTimeout(() => {
|
|
|
- canvasEl.height = document.body.clientHeight;
|
|
|
- canvasEl.width = document.body.clientWidth;
|
|
|
- _this.$refs.planEl.fixWindow();
|
|
|
- }, 50);
|
|
|
- });
|
|
|
- },
|
|
|
- beforeMount() {
|
|
|
- let searchStr = window.location.search.substr(1);
|
|
|
- // 设备
|
|
|
- // searchStr =
|
|
|
- // 'projectId=Pj1101050029&&buildingId=Bd1101050029cb77fbd1846611eaac87cd1cd6a961c6&floorId=Fl11010500295de391e3e5564ce58003c7e5391dc5e4&id=c57264b1252245e6b2713f1cbb9c4148&graphId=cbe7180ead0f420782acf1c39382319a&floorMap=base/ebd53bb00d3511eb9a1db95f725712e8.jsonz'
|
|
|
+ components: { basePlan, tooltip },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showtip: false,
|
|
|
+ tooltipName: "",
|
|
|
+ device_params: [],
|
|
|
+ deviceIds: [],
|
|
|
+ graphId: "e4c6b131ced74032b02b5721cb496b77",
|
|
|
+ id: "ad1195f2492f41e3a06f792d6701365c",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.pubPlanerQuery();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ let _this = this;
|
|
|
|
|
|
- // 设备 + 空间
|
|
|
- searchStr =
|
|
|
- "projectId=Pj1101050029&&buildingId=Bd1101050029cb77fbd1846611eaac87cd1cd6a961c6&floorId=Fl1101050029f18b92c5ceaf408d893e257bf03692df&id=0234df7a9a7b40dca38358b7e0a71ce9&graphId=e43a9c03d9bb482ca96b3b545735be35&floorMap=base/a5f453020d4111eb9a1d57eee76e51f1.jsonz";
|
|
|
- // buildingId=Bd1101050029cb77fbd1846611eaac87cd1cd6a961c6&floorId=Fl1101050029f18b92c5ceaf408d893e257bf03692df&name=%E5%BE%88%E8%B4%B9%E5%8A%B2&id=0234df7a9a7b40dca38358b7e0a71ce9&graphId=e43a9c03d9bb482ca96b3b545735be35&version=1.1.1&floorMap=base%2Fa5f453020d4111eb9a1d57eee76e51f1.jsonz
|
|
|
- // 项目id,建筑id,楼层id,图id,图graphId,底图floorMap
|
|
|
- const params = this.queryURLParams(searchStr);
|
|
|
- Object.entries(params).map((arr) => {
|
|
|
- this[arr[0]] = arr[1];
|
|
|
- window[`_${arr[0]}`] = arr[1];
|
|
|
- });
|
|
|
- console.log(params);
|
|
|
- // console.log("here");
|
|
|
- // console.log("id:", this.id);
|
|
|
- // console.log("graphId:", this.graphId);
|
|
|
- // console.log("url:", this.url);
|
|
|
- // console.log("projectId:", this.projectId);
|
|
|
- },
|
|
|
+ // 自适应
|
|
|
+ let canvasEl = document.getElementsByTagName("canvas")[0];
|
|
|
+ window._resizeTimer = null;
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ clearTimeout(window._resizeTimer);
|
|
|
+ window._resizeTimer = setTimeout(() => {
|
|
|
+ canvasEl.height = document.body.clientHeight;
|
|
|
+ canvasEl.width = document.body.clientWidth;
|
|
|
+ _this.$refs.planEl.fixWindow();
|
|
|
+ }, 50);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeMount() {
|
|
|
+ // 获取图对应参数
|
|
|
+ let searchStr = window.location.search.substr(1);
|
|
|
+ // 设备
|
|
|
+ // searchStr =
|
|
|
+ // 'projectId=Pj1101050029&&buildingId=Bd1101050029cb77fbd1846611eaac87cd1cd6a961c6&floorId=Fl11010500295de391e3e5564ce58003c7e5391dc5e4&id=c57264b1252245e6b2713f1cbb9c4148&graphId=cbe7180ead0f420782acf1c39382319a&floorMap=base/ebd53bb00d3511eb9a1db95f725712e8.jsonz'
|
|
|
|
|
|
- methods: {
|
|
|
- /**
|
|
|
- * 查询url参数
|
|
|
- */
|
|
|
- queryURLParams(url) {
|
|
|
- let obj = {};
|
|
|
- url.replace(/([^?=&#]+)=([^?=&#]+)/g, (_, key, value) => (obj[key] = value));
|
|
|
- url.replace(/#([^?=&#]+)/g, (_, hash) => (obj["HASH"] = hash));
|
|
|
- return obj;
|
|
|
- },
|
|
|
- postDeviceIds(ids) {
|
|
|
- this.deviceIds = ids;
|
|
|
- if (ids.length > 0) {
|
|
|
- readDeviceStatus({ objectIds: ids }).then((res) => {
|
|
|
- // console.log('res')
|
|
|
- // console.log(res)
|
|
|
- window.parse.nodes.forEach((nodeItem) => {
|
|
|
- let sItem = res.content.find((_item) => {
|
|
|
- return _item.objectId == nodeItem._data.attachObjectIds[0];
|
|
|
- });
|
|
|
+ // 设备 + 空间
|
|
|
+ searchStr =
|
|
|
+ // "projectId=Pj1101050029&&buildingId=Bd1101050029cb77fbd1846611eaac87cd1cd6a961c6&floorId=Fl1101050029f18b92c5ceaf408d893e257bf03692df&id=0234df7a9a7b40dca38358b7e0a71ce9&graphId=e43a9c03d9bb482ca96b3b545735be35&floorMap=base/a5f453020d4111eb9a1d57eee76e51f1.jsonz";
|
|
|
+ "projectId=Pj4403070003&&buildingId=Bd4403070003b5858fefad1a4d1586d38910e99dd140&floorId=Fl44030700030232b37b40f84312932da8cb6046698a&id=0234df7a9a7b40dca38358b7e0a71ce9&graphId=e43a9c03d9bb482ca96b3b545735be35&floorMap=base/2a00d9e248f811eba46a2b6533ccab6d.jsonz";
|
|
|
+ // buildingId=Bd1101050029cb77fbd1846611eaac87cd1cd6a961c6&floorId=Fl1101050029f18b92c5ceaf408d893e257bf03692df&name=%E5%BE%88%E8%B4%B9%E5%8A%B2&id=0234df7a9a7b40dca38358b7e0a71ce9&graphId=e43a9c03d9bb482ca96b3b545735be35&version=1.1.1&floorMap=base%2Fa5f453020d4111eb9a1d57eee76e51f1.jsonz
|
|
|
+ // 项目id,建筑id,楼层id,图id,图graphId,底图floorMap
|
|
|
+ const params = this.queryURLParams(searchStr);
|
|
|
+ Object.entries(params).map((arr) => {
|
|
|
+ this[arr[0]] = arr[1];
|
|
|
+ window[`_${arr[0]}`] = arr[1];
|
|
|
+ });
|
|
|
+ console.log(params);
|
|
|
+ },
|
|
|
|
|
|
- // if(sItem == null){
|
|
|
- // sItem = res.content[0]
|
|
|
- // }
|
|
|
- let key = null;
|
|
|
- /**
|
|
|
- * 0: 灰
|
|
|
- 1：蓝
|
|
|
- 2：红
|
|
|
- 3：黄
|
|
|
- 4：绿
|
|
|
- 5：棕
|
|
|
- *
|
|
|
- */
|
|
|
- if (sItem) {
|
|
|
- switch (sItem.status) {
|
|
|
- case 0:
|
|
|
- // 空
|
|
|
- key = 0;
|
|
|
- break;
|
|
|
- case 1:
|
|
|
- // 运行
|
|
|
- key = 1;
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- // 关闭
|
|
|
- key = 0;
|
|
|
- break;
|
|
|
- default:
|
|
|
- break;
|
|
|
- }
|
|
|
- let picUrl = nodeItem._data.properties.state.find((item) => {
|
|
|
- return item.state == key;
|
|
|
- }).pic;
|
|
|
- if (nodeItem.__picUrl && nodeItem.__picUrl == picUrl) {
|
|
|
- } else {
|
|
|
- nodeItem.__picUrl = picUrl;
|
|
|
- nodeItem.url = window.img_baseurl + "/image-service/common/image_get?systemId=dataPlatform&key=" + picUrl;
|
|
|
- // nodeItem.url ='/dp-auxiliary/image-service/common/image_get?systemId=dataPlatform&key='+picUrl
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- showData(item) {
|
|
|
- if (item.dataSource) {
|
|
|
- return item.dataSource.find((item) => {
|
|
|
- return item.code == "0";
|
|
|
- }).name;
|
|
|
- } else {
|
|
|
- return item.data;
|
|
|
- }
|
|
|
- },
|
|
|
- onMousedown(item, e) {
|
|
|
- let time = new Date().getTime();
|
|
|
- window._now = console.log("item:", item);
|
|
|
- setTimeout(() => {
|
|
|
- if (item) {
|
|
|
- clearTimeout(window._caller);
|
|
|
- let operationType = "click";
|
|
|
- console.log(111);
|
|
|
- this.showtip = true;
|
|
|
- this.tooltipName = "test";
|
|
|
- this.device_params = [
|
|
|
- {
|
|
|
- infoName: "hhh",
|
|
|
- unit: "g",
|
|
|
- },
|
|
|
- ];
|
|
|
- this.$refs.tooltip_map.$el.style.left = e[0].offsetX + "px";
|
|
|
- this.$refs.tooltip_map.$el.style.top = e[0].offsetY + "px";
|
|
|
- return;
|
|
|
- let deviceId = item.data.attachObjectIds[0];
|
|
|
- if (window._now) {
|
|
|
- let diff = time - window._now;
|
|
|
- console.log("diff:", diff);
|
|
|
- if (diff < 400) {
|
|
|
- operationType = "dbclick";
|
|
|
- // 双击
|
|
|
- } else {
|
|
|
- // 单击
|
|
|
- }
|
|
|
- }
|
|
|
- window._now = time;
|
|
|
- if (operationType == "click") {
|
|
|
- // 单击
|
|
|
- window._caller = setTimeout(() => {
|
|
|
- readDeviceParams({ objectId: deviceId }).then((res) => {
|
|
|
- this.tooltipName = item.data.name;
|
|
|
- this.device_params = res.content;
|
|
|
- this.$refs.tooltip_map.$el.style.left = e[0].offsetX + "px";
|
|
|
- this.$refs.tooltip_map.$el.style.top = e[0].offsetY + "px";
|
|
|
- this.showtip = true;
|
|
|
- });
|
|
|
- }, 300);
|
|
|
- } else {
|
|
|
- // 双击
|
|
|
- try {
|
|
|
- window.postMsgToU3d(JSON.stringify({ time: new Date(), data: { deviceId: deviceId } }));
|
|
|
- } catch (error) {
|
|
|
- console.error("to u3d error", error);
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.showtip = false;
|
|
|
- }
|
|
|
- }, 200);
|
|
|
- },
|
|
|
+ methods: {
|
|
|
+ // 查询平面图信息
|
|
|
|
|
|
- // 移入
|
|
|
- onMousedownx(item, e) {
|
|
|
- // return false;
|
|
|
+ pubPlanerQuery() {
|
|
|
+ id = "ec53d14a461149988ff1790087cc9994"; //广场id
|
|
|
+ const data = {
|
|
|
+ filters: `folderId=${id}`,
|
|
|
+ PageNumber: 1,
|
|
|
+ PageSize: 1000,
|
|
|
+ };
|
|
|
+ pubPlanerQuery(data).then((res) => {
|
|
|
+ console.log("res", res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 查询url参数
|
|
|
+ */
|
|
|
+ queryURLParams(url) {
|
|
|
+ let obj = {};
|
|
|
+ url.replace(
|
|
|
+ /([^?=&#]+)=([^?=&#]+)/g,
|
|
|
+ (_, key, value) => (obj[key] = value)
|
|
|
+ );
|
|
|
+ url.replace(/#([^?=&#]+)/g, (_, hash) => (obj["HASH"] = hash));
|
|
|
+ return obj;
|
|
|
+ },
|
|
|
+ showData(item) {
|
|
|
+ if (item.dataSource) {
|
|
|
+ return item.dataSource.find((item) => {
|
|
|
+ return item.code == "0";
|
|
|
+ }).name;
|
|
|
+ } else {
|
|
|
+ return item.data;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onMousedown(item, e) {
|
|
|
+ if (item) {
|
|
|
+ this.showtip = !this.showtip;
|
|
|
+ if (!e[0].offsetX) return;
|
|
|
+ this.$refs.tooltip_map.$el.style.left = e[0].offsetX + "px";
|
|
|
+ this.$refs.tooltip_map.$el.style.top = e[0].offsetY + "px";
|
|
|
+ } else {
|
|
|
+ this.showtip = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- let deviceId = item.data.attachObjectIds[0];
|
|
|
- let res = readDeviceParams(deviceId);
|
|
|
- this.tooltipName = item.data.name;
|
|
|
- this.device_params = res.content;
|
|
|
- this.showtip = true;
|
|
|
- console.log(e[0].offsetX + "px");
|
|
|
- this.$refs.tooltip_map.$el.style.left = e[0].offsetX + "px";
|
|
|
- this.$refs.tooltip_map.$el.style.top = e[0].offsetY + "px";
|
|
|
- },
|
|
|
+ // 移入
|
|
|
+ onMousedownx(item, e) {
|
|
|
+ return false;
|
|
|
},
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
.persagyPlan {
|
|
|
- padding: 6 px 10px 6px 10px;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
+ padding: 6 px 10px 6px 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
.title {
|
|
|
- padding: 10px 16px;
|
|
|
- line-height: 22px;
|
|
|
- color: #ebeef5;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
+ padding: 10px 16px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #ebeef5;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
}
|
|
|
.toolTip {
|
|
|
- min-width: 40px;
|
|
|
- box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.1);
|
|
|
- border: 1px solid #5d6177;
|
|
|
- // padding: 6px 10px 6px 10px;
|
|
|
- position: absolute;
|
|
|
- border-radius: 8px;
|
|
|
- box-shadow: 0px 1px 13px rgba(0, 0, 0, 0.189549), 0px 1px 11px rgba(0, 0, 0, 0.5);
|
|
|
+ min-width: 40px;
|
|
|
+ box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.1);
|
|
|
+ border: 1px solid #5d6177;
|
|
|
+ // padding: 6px 10px 6px 10px;
|
|
|
+ position: absolute;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0px 1px 13px rgba(0, 0, 0, 0.189549),
|
|
|
+ 0px 1px 11px rgba(0, 0, 0, 0.5);
|
|
|
}
|
|
|
.tip-body {
|
|
|
- border-top: 1px solid #5d6177;
|
|
|
- border-bottom: 1px solid #5d6177;
|
|
|
+ border-top: 1px solid #5d6177;
|
|
|
+ border-bottom: 1px solid #5d6177;
|
|
|
}
|
|
|
.info {
|
|
|
- padding: 16px;
|
|
|
- max-height: 280px;
|
|
|
- overflow: auto;
|
|
|
- line-height: 29px;
|
|
|
- span {
|
|
|
- color: #a7abc0;
|
|
|
- }
|
|
|
- .value {
|
|
|
- color: #fff;
|
|
|
- // margin-left: 12px;
|
|
|
- }
|
|
|
- .unit {
|
|
|
- margin-left: 0;
|
|
|
- }
|
|
|
+ padding: 16px;
|
|
|
+ max-height: 280px;
|
|
|
+ overflow: auto;
|
|
|
+ line-height: 29px;
|
|
|
+ span {
|
|
|
+ color: #a7abc0;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ color: #fff;
|
|
|
+ // margin-left: 12px;
|
|
|
+ }
|
|
|
+ .unit {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
}
|
|
|
.tip-footer {
|
|
|
- width: 100%;
|
|
|
- height: 50px;
|
|
|
- line-height: 50px;
|
|
|
- font-size: 16px;
|
|
|
- text-align: center;
|
|
|
- color: #a7abc0;
|
|
|
- transition: background-color 0.3s;
|
|
|
- cursor: pointer;
|
|
|
- &:hover {
|
|
|
- color: #fff;
|
|
|
- background-color: rgba(0, 145, 255, 0.295974);
|
|
|
- }
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ color: #a7abc0;
|
|
|
+ transition: background-color 0.3s;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ color: #fff;
|
|
|
+ background-color: rgba(0, 145, 255, 0.295974);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
- width: 6px;
|
|
|
- height: 6px;
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
- border-radius: 0;
|
|
|
+ border-radius: 0;
|
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
- background-color: #21262f;
|
|
|
- border-radius: 3px;
|
|
|
+ background-color: #21262f;
|
|
|
+ border-radius: 3px;
|
|
|
|
|
|
- &:hover {
|
|
|
- background-color: #21262f;
|
|
|
- }
|
|
|
+ &:hover {
|
|
|
+ background-color: #21262f;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
YaolongHan