Skip to content

D
device-new-platform
Commit 9ee5eec9 authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

fix: 修复站点详情查看，站点设备查看列表

parent fefc92f1
Hide whitespace changes
Inline Side-by-side
Showing with 1076 additions and 977 deletions
device-manager-ui/admin/src/components/HeaderSite.vue
View file @ 9ee5eec9
...@@ -129,7 +129,7 @@ export default { ...@@ -129,7 +129,7 @@ export default {
const { siteTree } = res.data; const { siteTree } = res.data;
this.sitelist = siteTree; this.sitelist = siteTree;
let arr = []; let arr = [];
const treeFn = function (e) { const treeFn = function(e) {
e.forEach((element) => { e.forEach((element) => {
arr.push(element); arr.push(element);
if (element.children && element.children.length > 0) { if (element.children && element.children.length > 0) {
...@@ -145,6 +145,14 @@ export default { ...@@ -145,6 +145,14 @@ export default {
}, },
clickSite(obj) { clickSite(obj) {
session.setSession("siteid", obj.id); session.setSession("siteid", obj.id);
let path = this.$route.path;
let query = this.$route.query;
if (query.siteId) {
this.$router.push({
path,
query: { ...query, siteId: obj.id },
});
}
this.show = false; this.show = false;
if (location.href.search(/token/gi) >= 0) { if (location.href.search(/token/gi) >= 0) {
setTimeout(() => { setTimeout(() => {
......
device-manager-ui/admin/src/views/analysis/components/three/three.vue
View file @ 9ee5eec9
<template> <template>
<div style="width:100%;height:100%;"> <div style="width:100%;height:100%;">
<!-- @click="clickmodel" --> <!-- @click="clickmodel" -->
<div class="three" ref="three" id="counter" @click="clickmodel"> <div class="three" ref="three" id="counter" @click="clickmodel">
<div id="alert-css2" class="three-card"> <div id="alert-css2" class="three-card">
<div ref="marke"> <div ref="marke">
<div class="marke"> <div class="marke">
<div class="marke-win">{{ device.deviceName }} <span style="color: #FF4A4A;">({{ checkItem.alarmTypeStr }})</span></div> <div class="marke-win">
<div class="marke-box"> {{ device.deviceName }}
<div class="marke-box-c"> <span style="color: #FF4A4A;"
<p>设备编码:{{device.deviceName}}</p> >({{ checkItem.alarmTypeStr }})</span
<p>MAC地址:{{ device.deviceCode }}</p> >
<p>设备位置：{{ device.deviceName }}</p>
<p>接收人员：{{ device.leadingOfficial }}</p>
<p>负责人：{{ device.leadingOfficial }}</p>
<p>联系电话：{{ device.leadingOfficialTelephone }}</p>
<p>告警程度：--</p>
<p>告警时间：{{$moment(checkItem.alarmTime).format('YYYY-MM-DD HH:mm')}}</p>
<p>告警状态：<span style="color: #FF4A4A;">({{ checkItem.alarmTypeStr }})</span></p>
<p>处理人：--</p>
<p>处理时间：--</p>
<p>发送状态：--</p>
<p>发送时间：--</p>
<p>发送内容：--</p>
</div>
<div class="ant-popover-arrow">
<img src="./ycjg.png" alt="">
</div>
</div>
</div>
</div>
</div> </div>
<div class="marke-box">
<div class="marke-box-c">
<p>设备编码:{{ device.deviceName }}</p>
<p>MAC地址:{{ device.deviceCode }}</p>
<p>设备位置：{{ device.deviceName }}</p>
<p>接收人员：{{ device.leadingOfficial }}</p>
<p>负责人：{{ device.leadingOfficial }}</p>
<p>联系电话：{{ device.leadingOfficialTelephone }}</p>
<p>告警程度：--</p>
<p>
告警时间：{{
$moment(checkItem.alarmTime).format("YYYY-MM-DD HH:mm")
}}
</p>
<p>
告警状态：<span style="color: #FF4A4A;"
>({{ checkItem.alarmTypeStr }})</span
>
</p>
<p>处理人：--</p>
<p>处理时间：--</p>
<p>发送状态：--</p>
<p>发送时间：--</p>
<p>发送内容：--</p>
</div>
<div class="ant-popover-arrow">
<img src="./ycjg.png" alt="" />
</div>
</div>
</div>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
const bmkb = []//便民看板 const bmkb = []; //便民看板
let renderer, camera, scene, controls, labelRenderer, Tips, ambientLight, directionalLight, TWEENN, SpotLight let renderer,
let keyobj = {}//窗口模型 camera,
let modlObj = {}//保存模型对象 scene,
let checkedMesh = null //选中模型 controls,
let cloneMttl = null//窗口材质备份 labelRenderer,
import * as THREE from 'three' Tips,
window.THREE = THREE ambientLight,
import { CSS2DRenderer, CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer" directionalLight,
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls" TWEENN,
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader" SpotLight;
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader" let keyobj = {}; //窗口模型
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader" let modlObj = {}; //保存模型对象
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min" let checkedMesh = null; //选中模型
import { Tween, Easing } from "@tweenjs/tween.js" let cloneMttl = null; //窗口材质备份
import * as THREE from "three";
window.THREE = THREE;
import {
CSS2DRenderer,
CSS2DObject,
} from "three/examples/jsm/renderers/CSS2DRenderer";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min";
import { Tween, Easing } from "@tweenjs/tween.js";
let clock = new THREE.Clock(); let clock = new THREE.Clock();
// 设置渲染频率为30FBS，也就是每秒调用渲染器render方法大约30次 // 设置渲染频率为30FBS，也就是每秒调用渲染器render方法大约30次
...@@ -61,632 +85,648 @@ let timeS = 0; ...@@ -61,632 +85,648 @@ let timeS = 0;
// tween动画 // tween动画
function tweents(start, next, fn, times) { function tweents(start, next, fn, times) {
/** /**
* @start object * @start object
* @next object * @next object
* @fn function * @fn function
*/ */
let coords = start let coords = start;
new Tween(coords) new Tween(coords)
.to(next, times || 400) .to(next, times || 400)
.easing(Easing.Quadratic.Out) .easing(Easing.Quadratic.Out)
.onUpdate((data) => { .onUpdate((data) => {
fn(data) fn(data);
}) })
.start() .start();
} }
function updateCamera() { function updateCamera() {
camera.updateProjectionMatrix() camera.updateProjectionMatrix();
} }
/** /**
* 物体是否在场景中显示 * 物体是否在场景中显示
* @param {THREE.Object3D} obj 3D物体 * @param {THREE.Object3D} obj 3D物体
* @return {Boolean} 是否在场景中显示 * @return {Boolean} 是否在场景中显示
* */ * */
function ActiveInHierarchy(obj) { function ActiveInHierarchy(obj) {
if (!obj.visible) { if (!obj.visible) {
return false; return false;
} }
//遍历父对象 //遍历父对象
let parent = obj.parent; let parent = obj.parent;
while (parent) { while (parent) {
if (!parent.visible) { if (!parent.visible) {
return false; return false;
}
parent = parent.parent;
} }
return true; parent = parent.parent;
}
return true;
} }
class PositionGUI { class PositionGUI {
constructor(obj, name) { constructor(obj, name) {
this.obj = obj this.obj = obj;
this.name = name this.name = name;
} }
get modify() { get modify() {
return this.obj[this.name] return this.obj[this.name];
} }
set modify(v) { set modify(v) {
this.obj[this.name] = v this.obj[this.name] = v;
} }
} }
let bmMark = []//dom节点 let bmMark = []; //dom节点
export default { export default {
props: ['lv', 'floorArr', 'winMarkeList', 'bm','checkItem'],//checkItem选中窗口 props: ["lv", "floorArr", "winMarkeList", "bm", "checkItem"], //checkItem选中窗口
data() { data() {
return { return {
bmkb,//便民看板 bmkb, //便民看板
isloading: true, isloading: true,
floorList: {},//楼层图 floorList: {}, //楼层图
floosrNum: '1', floosrNum: "1",
checkWind: {},//选中窗口 checkWind: {}, //选中窗口
pngArr: [],//图片名称 pngArr: [], //图片名称
pngArrSmall: []//小图标 pngArrSmall: [], //小图标
};
},
watch: {
checkItem: {
handler: function(str) {
let winName = str.device.deviceCode;
// let winName = '7E_CE_8B_C5_35_05'
// console.log(keyobj,winName,keyobj[winName])
if (keyobj[winName]) {
const { x, y, z } = keyobj[winName].positions;
Tips.position.set(x, y, z); //文字地址
Tips.visible = true;
// camera.position.x = x*0.5;
// camera.position.y = y*0.8;
// camera.position.z = z;
} else {
// Tips.visible = false
Tips.position.set(0, 0, 0); //文字地址
Tips.visible = true;
this._initCamera();
} }
},
deep: true,
}, },
watch: {
checkItem:{
handler: function (str) {
let winName = str.device.deviceCode
// let winName = '7E_CE_8B_C5_35_05'
// console.log(keyobj,winName,keyobj[winName])
if (keyobj[winName]) {
const { x, y, z } = keyobj[winName].positions
Tips.position.set(x, y, z);//文字地址
Tips.visible = true
// camera.position.x = x*0.5;
// camera.position.y = y*0.8;
// camera.position.z = z;
} else {
// Tips.visible = false
Tips.position.set(0, 0, 0);//文字地址
Tips.visible = true
this._initCamera()
}
},
deep: true
},
winMarkeList: {
handler: function (v) {
if (v.length > 0) {
this.checkWind = v[0].coordinate
let window_fromnum = v[0].coordinate.window_fromnum
let winName = `${window_fromnum.slice(0, 1)}_${window_fromnum.slice(1)}`
if (keyobj[winName]) {
// 选中模型为焦点
const { x, y, z } = keyobj[winName].positions
Tips.position.set(x, y, z);//文字地址
Tips.visible = true
// camera.position.x = x*0.5;
// camera.position.y = y*0.8;
// camera.position.z = z;
} else {
Tips.visible = false
this._initCamera()
}
}
},
deep: true
},
// lv: function (e) {
// modlObj[this.floosrNum].obj.visible = false
// modlObj[e].obj.visible = true
// this.floosrNum = e
// this.css2DOM()
// },
floorArr: {
handler: function (v) {
let obj = {}
v.forEach(v => {
obj[v.lv] = v
})
this.floorList = obj
if (camera) {
this._3Dloder();
} else {
setTimeout(()=>{
this._initTree()
})
}
},
deep: true
},
winMarkeList: {
handler: function(v) {
if (v.length > 0) {
this.checkWind = v[0].coordinate;
let window_fromnum = v[0].coordinate.window_fromnum;
let winName = `${window_fromnum.slice(0, 1)}_${window_fromnum.slice(
1
)}`;
if (keyobj[winName]) {
// 选中模型为焦点
const { x, y, z } = keyobj[winName].positions;
Tips.position.set(x, y, z); //文字地址
Tips.visible = true;
// camera.position.x = x*0.5;
// camera.position.y = y*0.8;
// camera.position.z = z;
} else {
Tips.visible = false;
this._initCamera();
}
}
},
deep: true,
}, },
computed:{ // lv: function (e) {
device:function(){ // modlObj[this.floosrNum].obj.visible = false
return this.checkItem.device || {} // modlObj[e].obj.visible = true
// this.floosrNum = e
// this.css2DOM()
// },
floorArr: {
handler: function(v) {
let obj = {};
v.forEach((v) => {
obj[v.lv] = v;
});
this.floorList = obj;
if (camera) {
this._3Dloder();
} else {
setTimeout(() => {
this._initTree();
});
} }
},
deep: true,
}, },
mounted() { },
this._initTree() computed: {
// let files = require.context('', false, /.png$/).keys(); device: function() {
// let pngArr = [] return this.checkItem.device || {};
// files.forEach(v => {
// pngArr.push(v.match(/\/([\s\S]*?).png/)[1])
// })
// this.pngArr = pngArr
}, },
methods: { },
// 选中模型样式 mounted() {
checkedModel(Mesh) { this._initTree();
if (checkedMesh) { // let files = require.context('', false, /.png$/).keys();
// delete checkedMesh.material // let pngArr = []
Mesh.material = new THREE.MeshStandardMaterial({ color: cloneMttl.color, wireframe: false, transparent: true, }) // files.forEach(v => {
} // pngArr.push(v.match(/\/([\s\S]*?).png/)[1])
checkedMesh = Mesh // })
if (Mesh) { // this.pngArr = pngArr
cloneMttl = JSON.parse(JSON.stringify(Mesh.material)) //备份材质 },
// console.log(Mesh.material.color) methods: {
Mesh.material = new THREE.MeshStandardMaterial({ color: 0x1F78B7, wireframe: false, transparent: true, opacity: 0.8 }) // 选中模型样式
} checkedModel(Mesh) {
}, if (checkedMesh) {
// 初始化镜头 // delete checkedMesh.material
relaodCamera() { Mesh.material = new THREE.MeshStandardMaterial({
if (camera) { color: cloneMttl.color,
this._initCamera() wireframe: false,
} transparent: true,
if (Tips) { });
Tips.visible = false }
} checkedMesh = Mesh;
}, if (Mesh) {
_initCamera() { cloneMttl = JSON.parse(JSON.stringify(Mesh.material)); //备份材质
camera.position.x = 0; // console.log(Mesh.material.color)
camera.position.y = 2000; Mesh.material = new THREE.MeshStandardMaterial({
camera.position.z = 1000; color: 0x1f78b7,
}, wireframe: false,
initGui() { transparent: true,
let datGui = new GUI() opacity: 0.8,
//声明一个保存需求修改的相关数据的对象 });
let gui = { }
ambientLight: "#9b9ba3", //环境光源 },
directionalLight: "#0xffc288", //点光源 // 初始化镜头
intensity: 1, //灯光强度 relaodCamera() {
visible: true, //是否可见 if (camera) {
castShadow: true, this._initCamera();
exponent: 30, }
target: "plane", if (Tips) {
debug: false Tips.visible = false;
}; }
},
//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值） _initCamera() {
datGui.addColor(gui, "ambientLight").onChange(function (e) { camera.position.x = 0;
ambientLight.color = new THREE.Color(e); camera.position.y = 2000;
}); camera.position.z = 1000;
datGui.add(gui, "intensity", 0, 5).onChange(function (e) { },
ambientLight.intensity = e; initGui() {
}); let datGui = new GUI();
datGui.addColor(gui, "directionalLight").onChange(function (e) { //声明一个保存需求修改的相关数据的对象
directionalLight.color = new THREE.Color(e); let gui = {
}); ambientLight: "#9b9ba3", //环境光源
datGui.add(gui, "intensity", 0, 5).onChange(function (e) { directionalLight: "#0xffc288", //点光源
directionalLight.intensity = e; intensity: 1, //灯光强度
}); visible: true, //是否可见
datGui.add(gui, "visible").onChange(function (e) { castShadow: true,
directionalLight.visible = e; exponent: 30,
}); target: "plane",
datGui.add(gui, "castShadow").onChange(function (e) { debug: false,
directionalLight.castShadow = e; };
});
datGui.add(gui, "debug").onChange(function (e) { //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
if (e) { datGui.addColor(gui, "ambientLight").onChange(function(e) {
var debug = new THREE.CameraHelper(directionalLight.shadow.camera); ambientLight.color = new THREE.Color(e);
debug.name = "debug"; });
scene.add(debug); datGui.add(gui, "intensity", 0, 5).onChange(function(e) {
} ambientLight.intensity = e;
else { });
// var debug = scene.getObjectByName("debug"); datGui.addColor(gui, "directionalLight").onChange(function(e) {
// scene.remove(debug); directionalLight.color = new THREE.Color(e);
} });
datGui.add(gui, "intensity", 0, 5).onChange(function(e) {
directionalLight.intensity = e;
});
datGui.add(gui, "visible").onChange(function(e) {
directionalLight.visible = e;
});
datGui.add(gui, "castShadow").onChange(function(e) {
directionalLight.castShadow = e;
});
datGui.add(gui, "debug").onChange(function(e) {
if (e) {
var debug = new THREE.CameraHelper(directionalLight.shadow.camera);
debug.name = "debug";
scene.add(debug);
} else {
// var debug = scene.getObjectByName("debug");
// scene.remove(debug);
}
});
datGui.add(camera, "fov", 1, 18000).onChange(updateCamera);
datGui.add(camera, "near", 1, 20000).onChange(updateCamera);
datGui.add(camera, "far", 1, 20000).onChange(updateCamera);
const folder = datGui.addFolder("全局Position");
folder
.add(new PositionGUI(camera.position, "x"), "modify", 0, 20000)
.name("x");
folder
.add(new PositionGUI(camera.position, "y"), "modify", 0, 20000)
.name("y");
folder
.add(new PositionGUI(camera.position, "z"), "modify", 0, 20000)
.name("z");
},
_initTree() {
scene = new THREE.Scene();
// alert(this.$el.offsetWidth)
// alert(this.$el.offsetHeight)
let screenW = this.$el.offsetWidth;
let screenH = this.$el.offsetHeight;
camera = new THREE.PerspectiveCamera(25, screenW / screenH, 0.01, 20000);
this._initCamera();
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer({
antialias: true, //开启抗锯齿
logarithmicDepthBuffer: true, //对数深度缓存解决模型重叠
alpha: true, //背景透明
});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 设置投影类型, 这边的柔和投影
renderer.setSize(screenW, screenH);
// renderer.setAnimationLoop( this.animation );
this.$refs.three.appendChild(renderer.domElement);
this._Light();
this.css2controls();
// controls.autoRotate = true
// 左右旋转范围
controls.minAzimuthAngle = -Math.PI * (100 / 360);
controls.maxAzimuthAngle = Math.PI * (100 / 360);
controls.minDistance = 500;
controls.maxDistance = 1500;
controls.maxPolarAngle = 1.2;
controls.minPolarAngle = 0.8;
if (process.env.NODE_ENV == "development") {
this.initGui();
}
this.animation();
},
animation() {
// TWEEN.update()
requestAnimationFrame(this.animation);
let T = clock.getDelta();
timeS = timeS + T;
// requestAnimationFrame默认调用render函数60次，通过时间判断，降低renderer.render执行频率
if (timeS > renderT) {
// 控制台查看渲染器渲染方法的调用周期，也就是间隔时间是多少
// console.log(`调用.render时间间隔`,timeS*1000+'毫秒');
controls.update();
renderer.render(scene, camera);
labelRenderer.render(scene, camera);
//renderer.render每执行一次，timeS置0
timeS = 0;
}
// console.log(2222);
// controls.update();
// renderer.render( scene, camera );
// labelRenderer.render( scene, camera );
},
css2renderer() {
let screenW = this.$el.offsetWidth;
let screenH = this.$el.offsetHeight;
let css2dom = document.getElementById("alert-css2");
Tips = new CSS2DObject(css2dom);
Tips.position.set(0, 0, 0); //文字地址
Tips.visible = false;
scene.add(Tips);
labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
labelRenderer.setSize(screenW, screenH);
labelRenderer.domElement.style.position = "absolute";
labelRenderer.domElement.style.top = 0;
this.$refs.three.appendChild(labelRenderer.domElement);
},
css2controls() {
this.css2renderer();
controls = new OrbitControls(camera, labelRenderer.domElement);
var counter = document.getElementById("counter");
counter.appendChild(renderer.domElement);
},
_Light() {
ambientLight = new THREE.AmbientLight(0xffffff, 1);
ambientLight.position.set(0, 0, 0);
scene.add(ambientLight);
directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.castShadow = true;
directionalLight.position.set(5, 10, 7.5);
scene.add(directionalLight);
// SpotLight = new THREE.SpotLight(0xffffff,1);
// SpotLight.castShadow = true;
// SpotLight.position.set( 385.522, 1132.217, 1825.427 );
// scene.add(SpotLight)
},
_3Dloder() {
let _this = this;
let MTLLoaders = new MTLLoader();
let OBJLoaders = new OBJLoader();
let GLTFLoaders = new GLTFLoader();
OBJLoaders.setCrossOrigin("Anonymous"); //跨域问题
const { floorList } = this;
for (const iterator in floorList) {
const mtl = floorList[iterator].mtl_url;
const obj = floorList[iterator].obj_url;
if (obj.search(/.obj/i) >= 0) {
// 模型
MTLLoaders.load(mtl, function(materials) {
//obj的模型会和MaterialCreator包含的材质对应起来
OBJLoaders.setMaterials(materials);
OBJLoaders.load(obj, function(obj) {
if (_this.lv !== iterator) {
obj.visible = false;
}
modlObj[iterator] = {
position: {
x: 0,
y: 0,
z: 0,
},
obj: obj,
};
_this.isloading = false;
scene.add(obj); //返回的组对象插入场景中
// this.initWinname(this.winname)
}); });
datGui.add(camera, 'fov', 1, 18000).onChange(updateCamera) });
datGui.add(camera, 'near', 1, 20000).onChange(updateCamera) } else if (obj.search(/.gltf/i) >= 0) {
datGui.add(camera, 'far', 1, 20000).onChange(updateCamera) GLTFLoaders.load(obj, function(obj) {
// console.log(obj,'@@@@@@@');
const folder = datGui.addFolder('全局Position') const children = obj.scene.children[0].children;
folder.add(new PositionGUI(camera.position, 'x'), 'modify', 0, 20000).name('x') const positionY = (iterator - 1.7) * 200;
folder.add(new PositionGUI(camera.position, 'y'), 'modify', 0, 20000).name('y') children.forEach((element) => {
folder.add(new PositionGUI(camera.position, 'z'), 'modify', 0, 20000).name('z') let objname = element.name;
},
_initTree() { // mac地址模型
scene = new THREE.Scene(); if (objname.length > 12) {
// alert(this.$el.offsetWidth) // console.log(objname,"#######",iterator);
// alert(this.$el.offsetHeight) try {
let screenW = this.$el.offsetWidth // console.log(objname,"#######");
let screenH = this.$el.offsetHeight // 获取外部模型具体点击位置 obj模型没有位置
camera = new THREE.PerspectiveCamera(25, screenW / screenH, 0.01, 20000); element.geometry.computeBoundingSphere();
this._initCamera() // 球体中心点
camera.lookAt(scene.position); let realPosition = element.geometry.boundingSphere.center;
element["positions"] = JSON.parse(
JSON.stringify(realPosition)
renderer = new THREE.WebGLRenderer({ );
antialias: true,//开启抗锯齿 element["positions"].y = positionY;
logarithmicDepthBuffer: true,//对数深度缓存解决模型重叠 keyobj[objname] = element;
alpha: true//背景透明 } catch (error) {}
}
}); });
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap // 设置投影类型, 这边的柔和投影
renderer.setSize(screenW, screenH);
// renderer.setAnimationLoop( this.animation );
this.$refs.three.appendChild(renderer.domElement);
this._Light()
this.css2controls()
// controls.autoRotate = true
// 左右旋转范围
controls.minAzimuthAngle = -Math.PI * (100 / 360);
controls.maxAzimuthAngle = Math.PI * (100 / 360);
controls.minDistance = 500;
controls.maxDistance = 1500;
controls.maxPolarAngle = 1.2
controls.minPolarAngle = 0.8
if (process.env.NODE_ENV == 'development') {
this.initGui()
}
this.animation()
},
animation() {
// TWEEN.update()
requestAnimationFrame(this.animation);
let T = clock.getDelta();
timeS = timeS + T;
// requestAnimationFrame默认调用render函数60次，通过时间判断，降低renderer.render执行频率
if (timeS > renderT) {
// 控制台查看渲染器渲染方法的调用周期，也就是间隔时间是多少
// console.log(`调用.render时间间隔`,timeS*1000+'毫秒');
controls.update();
renderer.render(scene, camera);
labelRenderer.render(scene, camera);
//renderer.render每执行一次，timeS置0
timeS = 0;
}
// console.log(2222);
// controls.update();
// renderer.render( scene, camera );
// labelRenderer.render( scene, camera );
},
css2renderer() {
let screenW = this.$el.offsetWidth
let screenH = this.$el.offsetHeight
let css2dom = document.getElementById('alert-css2')
Tips = new CSS2DObject(css2dom);
Tips.position.set(0, 0, 0);//文字地址
Tips.visible = false
scene.add(Tips);
labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
labelRenderer.setSize(screenW, screenH);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = 0;
this.$refs.three.appendChild(labelRenderer.domElement)
},
css2controls() {
this.css2renderer();
controls = new OrbitControls(camera, labelRenderer.domElement);
var counter = document.getElementById("counter");
counter.appendChild(renderer.domElement);
},
_Light() {
ambientLight = new THREE.AmbientLight(0xffffff, 1);
ambientLight.position.set(0, 0, 0);
scene.add(ambientLight)
directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.castShadow = true;
directionalLight.position.set(5, 10, 7.5);
scene.add(directionalLight)
// SpotLight = new THREE.SpotLight(0xffffff,1);
// SpotLight.castShadow = true;
// SpotLight.position.set( 385.522, 1132.217, 1825.427 );
// scene.add(SpotLight)
},
_3Dloder() {
let _this = this
let MTLLoaders = new MTLLoader()
let OBJLoaders = new OBJLoader()
let GLTFLoaders = new GLTFLoader()
OBJLoaders.setCrossOrigin('Anonymous');//跨域问题
const { floorList } = this
for (const iterator in floorList) {
const mtl = floorList[iterator].mtl_url
const obj = floorList[iterator].obj_url
if (obj.search(/.obj/i) >= 0) {
// 模型
MTLLoaders.load(mtl, function (materials) {
//obj的模型会和MaterialCreator包含的材质对应起来
OBJLoaders.setMaterials(materials);
OBJLoaders.load(obj, function (obj) {
if (_this.lv !== iterator) {
obj.visible = false
}
modlObj[iterator] = {
position: {
x: 0,
y: 0,
z: 0
},
obj: obj
}
_this.isloading = false
scene.add(obj); //返回的组对象插入场景中
// this.initWinname(this.winname)
})
})
} else if (obj.search(/.gltf/i) >= 0) {
GLTFLoaders.load(obj, function (obj) {
// console.log(obj,'@@@@@@@');
const children = obj.scene.children[0].children
const positionY = (iterator-1.7) * 200
children.forEach(element => {
let objname = element.name
// mac地址模型
if (objname.length > 12) {
// console.log(objname,"#######",iterator);
try {
// console.log(objname,"#######");
// 获取外部模型具体点击位置 obj模型没有位置
element.geometry.computeBoundingSphere();
// 球体中心点
let realPosition = element.geometry.boundingSphere.center;
element['positions'] = JSON.parse(JSON.stringify(realPosition))
element['positions'].y = positionY
keyobj[objname] = element
} catch (error) {
}
}
});
// if (_this.lv !== iterator) {
// obj.scene.visible = false
// // obj.scene.position.y = 100
// }
obj.scene.position.y = positionY
modlObj[iterator] = {
position: {
x: 0,
y: positionY,
z: 0
},
obj: obj.scene
}
scene.add(obj.scene); //返回的组对象插入场景中
_this.isloading = false
})
}
} // if (_this.lv !== iterator) {
}, // obj.scene.visible = false
// 标签渲染 // // obj.scene.position.y = 100
css2Tip(dom, position) { // }
const { x, y, z } = position obj.scene.position.y = positionY;
let screenW = this.$el.offsetWidth modlObj[iterator] = {
let screenH = this.$el.offsetHeight position: {
let css2dom = dom x: 0,
let Tipss = new CSS2DObject(css2dom); y: positionY,
Tipss.position.set(x, y, z);//文字地址 z: 0,
Tipss.visible = true },
scene.add(Tipss); obj: obj.scene,
let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer };
labelRenderer.setSize(screenW, screenH); scene.add(obj.scene); //返回的组对象插入场景中
labelRenderer.domElement.style.position = 'absolute'; _this.isloading = false;
labelRenderer.domElement.style.top = 0; });
labelRenderer.domElement.style.zIndex = 0; }
this.$refs.three.appendChild(labelRenderer.domElement) }
},
new OrbitControls(camera, labelRenderer.domElement); // 标签渲染
var counter = document.getElementById("counter"); css2Tip(dom, position) {
counter.appendChild(renderer.domElement); const { x, y, z } = position;
}, let screenW = this.$el.offsetWidth;
// 查询楼层dom节点显示/隐藏 let screenH = this.$el.offsetHeight;
css2DOM(childNodes) { let css2dom = dom;
let childDom = childNodes let Tipss = new CSS2DObject(css2dom);
if (!childDom) { Tipss.position.set(x, y, z); //文字地址
childDom = document.getElementById("counter") Tipss.visible = true;
} scene.add(Tipss);
// console.log(childDom.childNodes); let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
childDom.childNodes.forEach(em => { labelRenderer.setSize(screenW, screenH);
if (em.nodeName == 'DIV') { labelRenderer.domElement.style.position = "absolute";
let lv = em.getAttribute('data-lv') labelRenderer.domElement.style.top = 0;
// 只显示小图标 labelRenderer.domElement.style.zIndex = 0;
if (lv) { this.$refs.three.appendChild(labelRenderer.domElement);
if (lv == this.lv && em.className == 'bg_bm') {
em.style.opacity = 1 new OrbitControls(camera, labelRenderer.domElement);
} else { var counter = document.getElementById("counter");
em.style.opacity = 0 counter.appendChild(renderer.domElement);
} },
} // 查询楼层dom节点显示/隐藏
this.css2DOM(em) css2DOM(childNodes) {
} let childDom = childNodes;
if (!childDom) {
}) childDom = document.getElementById("counter");
}
}, // console.log(childDom.childNodes);
// 选中模型 childDom.childNodes.forEach((em) => {
getIntersects(event) { if (em.nodeName == "DIV") {
// 声明 raycaster 和 mouse 变量 let lv = em.getAttribute("data-lv");
const raycaster = new THREE.Raycaster(); // 只显示小图标
const mouse = new THREE.Vector2(); if (lv) {
if (lv == this.lv && em.className == "bg_bm") {
// 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1 em.style.opacity = 1;
let container = this.$refs.three
let getBoundingClientRect = container.getBoundingClientRect();
mouse.x = ((event.clientX - getBoundingClientRect.left) / container.offsetWidth) * 2 - 1;
mouse.y = -((event.clientY - getBoundingClientRect.top) / container.offsetHeight) * 2 + 1;
//通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
raycaster.setFromCamera(mouse, camera);
// 获取与射线相交的对象数组，其中的元素按照距离排序，越近的越靠前
const intersects = raycaster.intersectObjects(scene.children, true);
//返回选中的对象
return intersects;
},
clickmodel(event) {
let intersects = this.getIntersects(event)
// 获取选中最近的 Mesh 对象
if (intersects.length != 0 && intersects[0].object instanceof THREE.Mesh) {
let selectObject = intersects[0].object;
// this.changeMaterial(selectObject);
// this.outlineObj(selectObject)
// 获取外部模型具体点击位置
selectObject.geometry.computeBoundingSphere();
// 球体中心点
let realPosition = selectObject.geometry.boundingSphere.center;
console.log(selectObject, ActiveInHierarchy(selectObject))
// 如果选中窗口标注窗口信息
if (keyobj[selectObject.name] && ActiveInHierarchy(selectObject)) {
const winnames = selectObject.name.split("_")
this.$emit("clickWin",{winName:winnames[0]+winnames[1],...realPosition})
}else{
this.$emit("clickWin",'')
}
} else { } else {
this.$emit("clickWin",'') em.style.opacity = 0;
console.log("未选中 Mesh!");
} }
}, }
} this.css2DOM(em);
} }
});
},
// 选中模型
getIntersects(event) {
// 声明 raycaster 和 mouse 变量
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
// 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1
let container = this.$refs.three;
let getBoundingClientRect = container.getBoundingClientRect();
mouse.x =
((event.clientX - getBoundingClientRect.left) / container.offsetWidth) *
2 -
1;
mouse.y =
-(
(event.clientY - getBoundingClientRect.top) /
container.offsetHeight
) *
2 +
1;
//通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
raycaster.setFromCamera(mouse, camera);
// 获取与射线相交的对象数组，其中的元素按照距离排序，越近的越靠前
const intersects = raycaster.intersectObjects(scene.children, true);
//返回选中的对象
return intersects;
},
clickmodel(event) {
let intersects = this.getIntersects(event);
// 获取选中最近的 Mesh 对象
if (
intersects.length != 0 &&
intersects[0].object instanceof THREE.Mesh
) {
let selectObject = intersects[0].object;
// this.changeMaterial(selectObject);
// this.outlineObj(selectObject)
// 获取外部模型具体点击位置
selectObject.geometry.computeBoundingSphere();
// 球体中心点
let realPosition = selectObject.geometry.boundingSphere.center;
console.log(selectObject, ActiveInHierarchy(selectObject));
// 如果选中窗口标注窗口信息
if (keyobj[selectObject.name] && ActiveInHierarchy(selectObject)) {
const winnames = selectObject.name.split("_");
this.$emit("clickWin", {
winName: winnames[0] + winnames[1],
...realPosition,
});
} else {
this.$emit("clickWin", "");
}
} else {
this.$emit("clickWin", "");
console.log("未选中 Mesh!");
}
},
},
};
</script> </script>
<style> <style>
.three-reload { .three-reload {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 50px; bottom: 50px;
border-radius: 8px; border-radius: 8px;
border: 2px solid #fff; border: 2px solid #fff;
color: #333; color: #333;
background: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.5);
width: 200px; width: 200px;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
font-size: 18px; font-size: 18px;
z-index: 99; z-index: 99;
text-align: center; text-align: center;
margin-left: -100px; margin-left: -100px;
cursor: pointer; cursor: pointer;
} }
.bg_bm { .bg_bm {
background-repeat: no-repeat; background-repeat: no-repeat;
margin-top: -30px; margin-top: -30px;
pointer-events: none; pointer-events: none;
} }
.check_bm { .check_bm {
margin-top: -70px; margin-top: -70px;
} }
</style> </style>
<style lang="less" scoped> <style lang="less" scoped>
.three { .three {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.three-card { .three-card {
width: 200px; width: 200px;
height: 241px; height: 241px;
margin-top: -140px; margin-top: -140px;
pointer-events: none; pointer-events: none;
} }
.marke { .marke {
position: absolute; position: absolute;
width: 200px; width: 200px;
background: #3673c39c; background: #3673c39c;
.marke-win { .marke-win {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
background: #3672c3; background: #3672c3;
font-size: 14px; font-size: 14px;
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
padding: 0 12px; padding: 0 12px;
box-sizing: border-box; box-sizing: border-box;
} }
.marke-box { .marke-box {
margin-top: 4px; margin-top: 4px;
padding: 5px 12px 0 12px; padding: 5px 12px 0 12px;
position: relative; position: relative;
.marke-box-c { .marke-box-c {
position: relative; position: relative;
z-index: 1; z-index: 1;
height: 100%; height: 100%;
padding-bottom: 12px; padding-bottom: 12px;
}
p {
font-size: 12px;
// font-weight: bold;
color: #fff;
line-height: 1.5;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
} }
.box { p {
border-top: 1px solid #EBEBEB; font-size: 12px;
padding-top: 10px; // font-weight: bold;
font-size: 14px; color: #fff;
color: #999999; line-height: 1.5;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
} }
}
.ant-popover-arrow { .box {
position: absolute; border-top: 1px solid #ebebeb;
display: block; padding-top: 10px;
width: 20px; font-size: 14px;
height: 20ox; color: #999999;
left: 50%; }
margin-left: -10px;
bottom: -10;
}
.ant-popover-arrow {
position: absolute;
display: block;
width: 20px;
height: 20px;
left: 50%;
margin-left: -10px;
bottom: -10;
}
} }
.bmkb { .bmkb {
position: absolute; position: absolute;
bottom: 100px; bottom: 100px;
width: 100%;
padding: 0 310px;
box-sizing: border-box;
ul {
display: flex;
flex-wrap: wrap;
width: 100%; width: 100%;
padding: 0 310px; }
box-sizing: border-box;
ul {
display: flex;
flex-wrap: wrap;
width: 100%;
}
li { li {
width: 16.6%; width: 16.6%;
font-size: 16px; font-size: 16px;
color: #333; color: #333;
margin-bottom: 26px; margin-bottom: 26px;
} }
img { img {
vertical-align: middle; vertical-align: middle;
margin-right: 14px; margin-right: 14px;
} }
}</style> }
\ No newline at end of file </style>
device-manager-ui/admin/src/views/device/list.vue
View file @ 9ee5eec9
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
>地图模式 >地图模式
</el-link> </el-link>
</div> </div>
<el-button style="margin-right: 10px" @click="$router.back()" size="small" <el-button style="margin-right: 10px" @click="handleBack" size="small"
>返回上一级 >返回上一级
</el-button> </el-button>
</div> </div>
...@@ -269,6 +269,200 @@ export default { ...@@ -269,6 +269,200 @@ export default {
name: "Device", name: "Device",
components: { drawerShow, drawerView }, components: { drawerShow, drawerView },
mixins: [table, tree], mixins: [table, tree],
data() {
return {
//二维码
qrCodeDialog: {
visible: false,
qrCode: "",
qrCodeUrl: "",
},
// 用户导入参数
upload: {
// 是否显示弹出层（设备导入）
open: false,
// 弹出层标题（设备导入）
title: "导入设备数据",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的数据
updateSupport: 0,
// 上传的地址
url: "/m/device/importData",
},
hallDialog: {
// 是否显示弹出层（设备导入）
open: false,
// 弹出层标题（设备导入）
title: "所属大厅选择",
},
info: {},
// 站点树
tree: {
// 是否显示弹出层（设备导入）
open: false,
// 弹出层标题（设备导入）
title: "修改站点",
},
isExport: false,
siteId: null,
siteName: "",
siteCode: "",
updateSiteId: null,
updateSiteName: "",
updateSiteCode: "",
hallId: null,
hallName: "",
config: {
getsocketData: null,
tableName: "table",
search: [
{
name: "deviceName",
type: "text",
label: "设备名称",
fuzzy: true,
},
{
name: "deviceCode",
type: "text",
label: "设备编码",
fuzzy: true,
},
{
name: "orgName",
type: "text",
label: "所属机构",
fuzzy: true,
},
{
name: "productId",
type: "select",
label: "设备类型",
},
],
columns: [
{
type: "selection",
align: "center",
reserveSelection: true,
width: 60,
},
{ type: "index", label: "序号", align: "center", width: 50 },
{ label: "设备名称", align: "center", prop: "deviceName" },
{
label: "设备类型",
align: "center",
prop: "productId",
formatter: this.formatter,
},
{ label: "设备编码", align: "center", prop: "deviceCode" },
{ label: "所属大厅", prop: "hallName" },
{ label: "所属机构", prop: "orgName" },
{
label: "设备生产商",
align: "center",
prop: "deviceFirmId",
formatter: this.formatter,
width: 250,
},
{ label: "负责人", align: "center", prop: "leadingOfficial" },
{
label: "联系电话",
align: "center",
prop: "leadingOfficialTelephone",
},
{
label: "状态 ",
align: "center",
prop: "deviceStatus",
formatter: this.formatterStatus,
},
{
label: "利旧设备",
align: "center",
prop: "source",
formatter: this.formatterYES,
},
{
prop: "enabled",
align: "center",
label: "启用/停用",
width: 100,
formatter: this.changeStatus,
},
{
label: "创建时间",
align: "center",
prop: "createTime",
formatter: this.formatterDate,
},
{
label: "操作",
align: "center",
width: 240,
formatter: (row) => {
return (
<div>
<table-buttons
noAdd
row={row}
onEdit={this.toEdit}
onView={this.toView}
onDel={this.toDel}
/>
<span> </span>
{row.deviceStatus === 0 ? (
<el-button
size="mini"
type="text"
icon="el-icon-open"
onClick={() => {
this.activeDevice(row);
}}
>
激活
</el-button>
) : (
""
)}
<span> </span>
<el-button
type="text"
size="mini"
onClick={() => this.viewQrCode(row.id)}
>
二维码
</el-button>
<span> </span>
<el-button
type="text"
size="mini"
onClick={() => this.restartApp(row)}
>
重启
</el-button>
</div>
);
},
},
],
},
};
},
created() { created() {
this.siteId = this.$route.query.siteId; this.siteId = this.$route.query.siteId;
this.info = this.$route.query; this.info = this.$route.query;
...@@ -560,200 +754,18 @@ export default { ...@@ -560,200 +754,18 @@ export default {
this.$message.error(error.message); this.$message.error(error.message);
} }
}, },
// 返回
handleBack() {
let path = sessionStorage.getItem("sitestat");
if (path) {
this.$router.push(path);
} else {
this.$router.back();
}
},
}, },
data() { beforeDestroy() {
return { sessionStorage.removeItem("sitestat");
//二维码
qrCodeDialog: {
visible: false,
qrCode: "",
qrCodeUrl: "",
},
// 用户导入参数
upload: {
// 是否显示弹出层（设备导入）
open: false,
// 弹出层标题（设备导入）
title: "导入设备数据",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的数据
updateSupport: 0,
// 上传的地址
url: "/m/device/importData",
},
hallDialog: {
// 是否显示弹出层（设备导入）
open: false,
// 弹出层标题（设备导入）
title: "所属大厅选择",
},
info: {},
// 站点树
tree: {
// 是否显示弹出层（设备导入）
open: false,
// 弹出层标题（设备导入）
title: "修改站点",
},
isExport: false,
siteId: null,
siteName: "",
siteCode: "",
updateSiteId: null,
updateSiteName: "",
updateSiteCode: "",
hallId: null,
hallName: "",
config: {
getsocketData: null,
tableName: "table",
search: [
{
name: "deviceName",
type: "text",
label: "设备名称",
fuzzy: true,
},
{
name: "deviceCode",
type: "text",
label: "设备编码",
fuzzy: true,
},
{
name: "orgName",
type: "text",
label: "所属机构",
fuzzy: true,
},
{
name: "productId",
type: "select",
label: "设备类型",
},
],
columns: [
{
type: "selection",
align: "center",
reserveSelection: true,
width: 60,
},
{ type: "index", label: "序号", align: "center", width: 50 },
{ label: "设备名称", align: "center", prop: "deviceName" },
{
label: "设备类型",
align: "center",
prop: "productId",
formatter: this.formatter,
},
{ label: "设备编码", align: "center", prop: "deviceCode" },
{ label: "所属大厅", prop: "hallName" },
{ label: "所属机构", prop: "orgName" },
{
label: "设备生产商",
align: "center",
prop: "deviceFirmId",
formatter: this.formatter,
width: 250,
},
{ label: "负责人", align: "center", prop: "leadingOfficial" },
{
label: "联系电话",
align: "center",
prop: "leadingOfficialTelephone",
},
{
label: "状态 ",
align: "center",
prop: "deviceStatus",
formatter: this.formatterStatus,
},
{
label: "利旧设备",
align: "center",
prop: "source",
formatter: this.formatterYES,
},
{
prop: "enabled",
align: "center",
label: "启用/停用",
width: 100,
formatter: this.changeStatus,
},
{
label: "创建时间",
align: "center",
prop: "createTime",
formatter: this.formatterDate,
},
{
label: "操作",
align: "center",
width: 240,
formatter: (row) => {
return (
<div>
<table-buttons
noAdd
row={row}
onEdit={this.toEdit}
onView={this.toView}
onDel={this.toDel}
/>
<span> </span>
{row.deviceStatus === 0 ? (
<el-button
size="mini"
type="text"
icon="el-icon-open"
onClick={() => {
this.activeDevice(row);
}}
>
激活
</el-button>
) : (
""
)}
<span> </span>
<el-button
type="text"
size="mini"
onClick={() => this.viewQrCode(row.id)}
>
二维码
</el-button>
<span> </span>
<el-button
type="text"
size="mini"
onClick={() => this.restartApp(row)}
>
重启
</el-button>
</div>
);
},
},
],
},
};
}, },
}; };
</script> </script>
......
device-manager-ui/admin/src/views/sitestat/list.vue
View file @ 9ee5eec9
...@@ -5,20 +5,26 @@ ...@@ -5,20 +5,26 @@
<el-card> <el-card>
<div slot="header"> <div slot="header">
<span><b class="cardTitle">站点分布</b></span> <span><b class="cardTitle">站点分布</b></span>
<el-button style="float: right" @click="switchStat" type="text">切换为地图模式</el-button> <el-button style="float: right" @click="switchStat" type="text"
>切换为地图模式</el-button
>
</div> </div>
<el-scrollbar style="height: 100%"> <el-scrollbar style="height: 100%">
<el-tree size="mini" <el-tree
ref="siteTree" size="mini"
:data="areaData" ref="siteTree"
id="el-tree" :data="areaData"
node-key="id" id="el-tree"
indent="4" node-key="id"
:props="treeProps" indent="4"
:load="loadNode" :props="treeProps"
highlight-current default-expand-all :expand-on-click-node="false" :load="loadNode"
:render-content="renderContent" highlight-current
@node-click="handleNodeClick"> default-expand-all
:expand-on-click-node="false"
:render-content="renderContent"
@node-click="handleNodeClick"
>
</el-tree> </el-tree>
</el-scrollbar> </el-scrollbar>
</el-card> </el-card>
...@@ -27,9 +33,22 @@ ...@@ -27,9 +33,22 @@
<el-col :span="18" :xs="12"> <el-col :span="18" :xs="12">
<el-card> <el-card>
<el-row> <el-row>
<LayoutTable ref="layoutTable" :data="tableData" notAdd notDel :config="tableConfig"> <LayoutTable
<el-button slot="table-head-left2" style="margin-left: 10px" type="primary" class="addclass" size="mini" @click="doExport" ref="layoutTable"
:disabled="isExport">导出 :data="tableData"
notAdd
notDel
:config="tableConfig"
>
<el-button
slot="table-head-left2"
style="margin-left: 10px"
type="primary"
class="addclass"
size="mini"
@click="doExport"
:disabled="isExport"
>导出
</el-button> </el-button>
</LayoutTable> </LayoutTable>
</el-row> </el-row>
...@@ -37,7 +56,7 @@ ...@@ -37,7 +56,7 @@
</el-col> </el-col>
</el-row> </el-row>
<dialog-show ref="dialogform" @ok="getData"/> <dialog-show ref="dialogform" @ok="getData" />
</div> </div>
</template> </template>
...@@ -49,44 +68,43 @@ import tree from "@/assets/mixins/tree"; ...@@ -49,44 +68,43 @@ import tree from "@/assets/mixins/tree";
export default { export default {
name: "Sitestat", name: "Sitestat",
components: {dialogShow}, components: { dialogShow },
mixins: [table, tree], mixins: [table, tree],
created() { created() {
this.$get("/sitestat/siteTree", {}).then(({data}) => { this.$get("/sitestat/siteTree", {}).then(({ data }) => {
// this.areaData = data.siteTree; // this.areaData = data.siteTree;
this.areaData = data.data; this.areaData = data.data;
console.log("areaData1",data.data) console.log("areaData1", data.data);
}); });
}, },
methods: { methods: {
/** 下载模板操作 */ /** 下载模板操作 */
downloadTemplate() { downloadTemplate() {
this.isExport = true; this.isExport = true;
this.$download("/sitestat/downloadTemplate", {}, {type: "excel"}) this.$download("/sitestat/downloadTemplate", {}, { type: "excel" })
.then(() => (this.isExport = false)) .then(() => (this.isExport = false))
.catch((error) => { .catch((error) => {
this.isExport = false; this.isExport = false;
this.$message.error(error.message); this.$message.error(error.message);
}); });
}, },
/** 导出Excel */ /** 导出Excel */
doExport() { doExport() {
this.isExport = true; this.isExport = true;
this.$download( this.$download(
"/sitestat/exportExcel", "/sitestat/exportExcel",
{ {
siteId: this.$route.query["siteId"], siteId: this.$route.query["siteId"],
siteName: this.$route.query["siteName"], siteName: this.$route.query["siteName"],
}, },
{type: "excel"} { type: "excel" }
) )
.then(() => (this.isExport = false)) .then(() => (this.isExport = false))
.catch((error) => { .catch((error) => {
this.isExport = false; this.isExport = false;
this.$message.error(error.message); this.$message.error(error.message);
}); });
}, },
/** 重写新增方法 */ /** 重写新增方法 */
...@@ -99,11 +117,13 @@ export default { ...@@ -99,11 +117,13 @@ export default {
}, },
/** 重写查看方法 */ /** 重写查看方法 */
toView(row) { toView(row) {
let path = this.$route.path;
sessionStorage.setItem("sitestat", path);
//console.log(row) //console.log(row)
//进入设备列表页面 //进入设备列表页面
this.$router.push({ this.$router.push({
path: "/device/list", path: "/device/list",
query: {sitestatId: row.id, siteId: row.siteId}, query: { sitestatId: row.id, siteId: row.siteId },
}); });
}, },
...@@ -126,12 +146,12 @@ export default { ...@@ -126,12 +146,12 @@ export default {
siteIdList: node.id.split(",").map((i) => parseInt(i)), siteIdList: node.id.split(",").map((i) => parseInt(i)),
}; };
} else { } else {
this.query = {siteId: node.id}; this.query = { siteId: node.id };
} }
this.getData(); this.getData();
} else if (node.type === "area") { } else if (node.type === "area") {
this.query = {areaCode: node.areaCode}; this.query = { areaCode: node.areaCode };
this.getData(); this.getData();
} }
...@@ -162,9 +182,9 @@ export default { ...@@ -162,9 +182,9 @@ export default {
width: 50, width: 50,
}, },
{label: "站点名称", align: "center", prop: "siteName"}, { label: "站点名称", align: "center", prop: "siteName" },
{label: "站点编号", align: "center", prop: "siteCode"}, { label: "站点编号", align: "center", prop: "siteCode" },
{ {
label: "设备总数", label: "设备总数",
...@@ -206,15 +226,15 @@ export default { ...@@ -206,15 +226,15 @@ export default {
width: 240, width: 240,
formatter: (row) => { formatter: (row) => {
return ( return (
<table-buttons <table-buttons
noAdd noAdd
noEdit noEdit
noDel noDel
row={row} row={row}
onEdit={this.toEdit} onEdit={this.toEdit}
onView={this.toView} onView={this.toView}
onDel={this.toDel} onDel={this.toDel}
/> />
); );
}, },
}, },
...@@ -249,12 +269,18 @@ export default { ...@@ -249,12 +269,18 @@ export default {
} }
.mytree ::v-deep { .mytree ::v-deep {
.el-tree--highlight-current ::v-deep .el-tree-node.is-checked > .el-tree-node__content { .el-tree--highlight-current
::v-deep
.el-tree-node.is-checked
> .el-tree-node__content {
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
color: rgb(64, 158, 255); color: rgb(64, 158, 255);
} }
.el-tree--highlight-current ::v-deep .el-tree-node.is-current > .el-tree-node__content { .el-tree--highlight-current
::v-deep
.el-tree-node.is-current
> .el-tree-node__content {
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
color: rgb(64, 158, 255); color: rgb(64, 158, 255);
} }
......
device-manager-ui/admin/src/views/sitestat/mapDetail.vue
View file @ 9ee5eec9
...@@ -146,7 +146,10 @@ ...@@ -146,7 +146,10 @@
justify="space-between" justify="space-between"
> >
<!-- <img src="../../assets/images/排队机.png" alt="" /> --> <!-- <img src="../../assets/images/排队机.png" alt="" /> -->
<img :src="require(`../../assets/images/${label}.png`)" /> <img
v-if="label"
:src="require(`../../assets/images/${label}.png`)"
/>
<!-- <i style="font-size: 20px" class="el-icon-location-information"></i> --> <!-- <i style="font-size: 20px" class="el-icon-location-information"></i> -->
<span style="font-size: 12px">{{ label }}</span> <span style="font-size: 12px">{{ label }}</span>
<el-switch <el-switch
...@@ -223,6 +226,8 @@ export default { ...@@ -223,6 +226,8 @@ export default {
this.$refs.drawerform.add(row); this.$refs.drawerform.add(row);
}, },
switchList() { switchList() {
let path = this.$route.path;
sessionStorage.setItem("sitestat", path);
//进入设备列表页面 //进入设备列表页面
this.$router.push({ this.$router.push({
path: "/device/list", path: "/device/list",
...@@ -462,4 +467,4 @@ export default { ...@@ -462,4 +467,4 @@ export default {
font-size: 18px; font-size: 18px;
color: deepskyblue; color: deepskyblue;
} }
</style> </style>
\ No newline at end of file
device-manager-ui/admin/src/views/sitestat/maplist.vue
View file @ 9ee5eec9
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
> >
</el-tree> </el-tree>
</el-scrollbar> </el-scrollbar>
</el-card> </el-card>
</el-row> </el-row>
<el-row :gutter="20" slot="rightTop" class="mytree"> <el-row :gutter="20" slot="rightTop" class="mytree">
<el-card> <el-card>
...@@ -37,23 +37,29 @@ ...@@ -37,23 +37,29 @@
<div class="listbody"> <div class="listbody">
<div class="listtop"> <div class="listtop">
<div class="item sbzs"> <div class="item sbzs">
<div>{{listNum.all}}</div> <div>{{ listNum.all }}</div>
<div class="wz">设备总数(台)</div> <div class="wz">设备总数(台)</div>
</div> </div>
<div class="item zx"> <div class="item zx">
<div>{{listNum.online}}</div> <div>{{ listNum.online }}</div>
<div class="wz">在线(台)</div> <div class="wz">在线(台)</div>
</div> </div>
<div class="item lx"> <div class="item lx">
<div>{{listNum.unline}}</div> <div>{{ listNum.unline }}</div>
<div class="wz">离线(台)</div> <div class="wz">离线(台)</div>
</div> </div>
</div> </div>
<div class="maplist"> <div class="maplist">
<div v-for="(item,index) in rightShowList" :key="index" class="deployitem"> <div
v-for="(item, index) in rightShowList"
:key="index"
class="deployitem"
>
<div class="top"> <div class="top">
<div class="title">{{ item.label }}</div> <div class="title">{{ item.label }}</div>
<div class="ckxq pointer" @click="getDetailData(item)">查看详情</div> <div class="ckxq pointer" @click="getDetailData(item)">
查看详情
</div>
</div> </div>
<div class="are">{{ item.detailAddress }}</div> <div class="are">{{ item.detailAddress }}</div>
<div class="data"> <div class="data">
...@@ -67,10 +73,10 @@ ...@@ -67,10 +73,10 @@
离线：<span>{{ item.offlineTotal }}台</span> 离线：<span>{{ item.offlineTotal }}台</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</el-card> </el-card>
</el-row> </el-row>
</Map> </Map>
<dialog-show ref="dialogform" @ok="getData" /> <dialog-show ref="dialogform" @ok="getData" />
...@@ -89,44 +95,44 @@ export default { ...@@ -89,44 +95,44 @@ export default {
mounted() { mounted() {
this.pageInfo.list = "/sitestat/list"; this.pageInfo.list = "/sitestat/list";
}, },
watch:{ watch: {
originData(newval){ originData(newval) {
let val = JSON.parse(JSON.stringify(newval)) let val = JSON.parse(JSON.stringify(newval));
let arr = this.flatten(val).filter((v) => { let arr = this.flatten(val).filter((v) => {
return v.type == "site"; return v.type == "site";
}); });
this.rightShowList = arr this.rightShowList = arr;
let all = 0; let all = 0;
let online = 0; let online = 0;
let unline = 0; let unline = 0;
arr.forEach(v=>{ arr.forEach((v) => {
all += parseInt(v.deviceTotal) all += parseInt(v.deviceTotal);
online += parseInt(v.onlineTotal) online += parseInt(v.onlineTotal);
unline += parseInt(v.offlineTotal) unline += parseInt(v.offlineTotal);
}) });
this.listNum.all = all this.listNum.all = all;
this.listNum.online = online this.listNum.online = online;
this.listNum.unline = unline this.listNum.unline = unline;
} },
}, },
created() { created() {
this.pageInfo.list = "/sitestat/list"; this.pageInfo.list = "/sitestat/list";
// this.$get("/sitestat/maplist", {}).then(({ data }) => { // this.$get("/sitestat/maplist", {}).then(({ data }) => {
// this.originData = data; // this.originData = data;
// this.$refs.map.refresh(this.originData); // this.$refs.map.refresh(this.originData);
// }); // });
this.$get("/sitestat/siteTree", {}).then(({ data }) => { this.$get("/sitestat/siteTree", {}).then(({ data }) => {
let arr = [] let arr = [];
data.data.forEach(i=>{ data.data.forEach((i) => {
arr.push({ arr.push({
...i, ...i,
lat:i.latitude, lat: i.latitude,
lng:i.longitude, lng: i.longitude,
level:1 level: 1,
}) });
}) });
this.originData = arr this.originData = arr;
this.areaData = JSON.parse(JSON.stringify(arr)); this.areaData = JSON.parse(JSON.stringify(arr));
this.$refs.map.refresh(this.originData); this.$refs.map.refresh(this.originData);
}); });
...@@ -173,7 +179,7 @@ export default { ...@@ -173,7 +179,7 @@ export default {
this.$router.push({ this.$router.push({
path: "/sitestat/mapDetail", path: "/sitestat/mapDetail",
// query: info, // query: info,
query: { sitestatId: info.id, siteId: info.siteId }, query: { sitestatId: info.id, siteId: info.siteId || info.id },
}); });
}, },
...@@ -211,37 +217,39 @@ export default { ...@@ -211,37 +217,39 @@ export default {
obj.lat = node.latitude; obj.lat = node.latitude;
this.$refs.map.relocate(obj); this.$refs.map.relocate(obj);
} }
if(node.level==1){ if (node.level == 1) {
let arr = [] let arr = [];
arr.push(JSON.parse(JSON.stringify(node))) arr.push(JSON.parse(JSON.stringify(node)));
this.originData = arr this.originData = arr;
this.$refs.map.refresh(this.originData); this.$refs.map.refresh(this.originData);
this.$refs.map.zoom = 6 this.$refs.map.zoom = 6;
}else{ } else {
let children = JSON.parse(JSON.stringify(node.children)) let children = JSON.parse(JSON.stringify(node.children));
children = this.$refs.map.flatten(children) children = this.$refs.map.flatten(children);
children.unshift(JSON.parse(JSON.stringify(node))) children.unshift(JSON.parse(JSON.stringify(node)));
children = children.filter((v) => { children = children.filter((v) => {
return v.type == "site"; return v.type == "site";
}); });
children = children.map(i=> {return { children = children.map((i) => {
...i, return {
lat:i.latitude, ...i,
lng:i.longitude, lat: i.latitude,
}}) lng: i.longitude,
this.originData = children };
});
this.originData = children;
this.$refs.map.refresh(this.originData); this.$refs.map.refresh(this.originData);
} }
}, },
}, },
data() { data() {
return { return {
listNum:{ listNum: {
all:0, all: 0,
online:0, online: 0,
unline:0 unline: 0,
}, },
rightShowList:[], rightShowList: [],
isExport: false, isExport: false,
originData: [], originData: [],
config: { config: {
...@@ -300,69 +308,69 @@ export default { ...@@ -300,69 +308,69 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.deployitem { .deployitem {
padding: 10px 0; padding: 10px 0;
color: #223333; color: #223333;
border-bottom: 1px solid gainsboro; border-bottom: 1px solid gainsboro;
.top{ .top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
}
.ckxq {
font-size: 10px;
margin-right: 20px;
margin-top: 8px;
color: #1890ff;
flex-shrink: 0;
}
.data {
display: flex;
font-size: 12px;
font-weight: 500;
color: #999999;
margin: 4px 0;
.dataitem {
margin-right: 16px;
} }
.ckxq { .sbzs > span {
font-size: 10px; color: #223333;
margin-right: 20px;
margin-top: 8px;
color: #1890ff;
flex-shrink: 0;
} }
.data { .zx > span {
display: flex; color: #0064e9;
font-size: 12px; }
font-weight: 500; .zx {
color: #999999; position: relative;
margin: 4px 0;
.dataitem {
margin-right: 16px;
}
.sbzs > span {
color: #223333;
}
.zx > span {
color: #0064e9;
}
.zx {
position: relative;
}
.zx::before {
content: "";
position: absolute;
width: 4px;
height: 4px;
background: #0064e9;
border-radius: 50%;
top: 6px;
left: -6px;
}
.lx > span {
color: #fa4d4c;
}
} }
.title { .zx::before {
font-size: 14px; content: "";
font-weight: 600; position: absolute;
padding: 4px 0; width: 4px;
height: 4px;
background: #0064e9;
border-radius: 50%;
top: 6px;
left: -6px;
} }
.are { .lx > span {
font-size: 12px; color: #fa4d4c;
} }
} }
.title {
font-size: 14px;
font-weight: 600;
padding: 4px 0;
}
.are {
font-size: 12px;
}
}
.listbody::-webkit-scrollbar { .listbody::-webkit-scrollbar {
width: 0; width: 0;
} }
.listbody{ .listbody {
max-height: 700px; max-height: 700px;
overflow: auto; overflow: auto;
.listtop{ .listtop {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 20px 0 10px; padding: 20px 0 10px;
...@@ -376,7 +384,7 @@ export default { ...@@ -376,7 +384,7 @@ export default {
flex-direction: column; flex-direction: column;
color: #fff; color: #fff;
padding-bottom: 6px; padding-bottom: 6px;
font-size: 8px; font-size: 12px;
.wz { .wz {
margin-left: 14px; margin-left: 14px;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment