Skip to content

D
device-new-platform
Commit 88af1937 authored by 赵啸非's avatar 赵啸非
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents 6f8d0b07 f15cabc1
Hide whitespace changes
Inline Side-by-side
Showing with 1076 additions and 977 deletions
device-manager-ui/admin/src/components/HeaderSite.vue
View file @ 88af1937
......@@ -129,7 +129,7 @@ export default {
const { siteTree } = res.data;
this.sitelist = siteTree;
let arr = [];
const treeFn = function (e) {
const treeFn = function(e) {
e.forEach((element) => {
arr.push(element);
if (element.children && element.children.length > 0) {
......@@ -145,6 +145,14 @@ export default {
},
clickSite(obj) {
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;
if (location.href.search(/token/gi) >= 0) {
setTimeout(() => {
......
device-manager-ui/admin/src/views/analysis/components/three/three.vue
View file @ 88af1937
<template>
<div style="width:100%;height:100%;">
<!-- @click="clickmodel" -->
<div class="three" ref="three" id="counter" @click="clickmodel">
<div id="alert-css2" class="three-card">
<div ref="marke">
<div class="marke">
<div class="marke-win">{{ device.deviceName }} <span style="color: #FF4A4A;">({{ checkItem.alarmTypeStr }})</span></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 style="width:100%;height:100%;">
<!-- @click="clickmodel" -->
<div class="three" ref="three" id="counter" @click="clickmodel">
<div id="alert-css2" class="three-card">
<div ref="marke">
<div class="marke">
<div class="marke-win">
{{ device.deviceName }}
<span style="color: #FF4A4A;"
>({{ checkItem.alarmTypeStr }})</span
>
</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>
</template>
<script>
const bmkb = []//便民看板
let renderer, camera, scene, controls, labelRenderer, Tips, ambientLight, directionalLight, TWEENN, SpotLight
let keyobj = {}//窗口模型
let modlObj = {}//保存模型对象
let checkedMesh = null //选中模型
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"
const bmkb = []; //便民看板
let renderer,
camera,
scene,
controls,
labelRenderer,
Tips,
ambientLight,
directionalLight,
TWEENN,
SpotLight;
let keyobj = {}; //窗口模型
let modlObj = {}; //保存模型对象
let checkedMesh = null; //选中模型
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();
// 设置渲染频率为30FBS，也就是每秒调用渲染器render方法大约30次
......@@ -61,632 +85,648 @@ let timeS = 0;
// tween动画
function tweents(start, next, fn, times) {
/**
* @start object
* @next object
* @fn function
*/
let coords = start
new Tween(coords)
.to(next, times || 400)
.easing(Easing.Quadratic.Out)
.onUpdate((data) => {
fn(data)
})
.start()
/**
* @start object
* @next object
* @fn function
*/
let coords = start;
new Tween(coords)
.to(next, times || 400)
.easing(Easing.Quadratic.Out)
.onUpdate((data) => {
fn(data);
})
.start();
}
function updateCamera() {
camera.updateProjectionMatrix()
camera.updateProjectionMatrix();
}
/**
* 物体是否在场景中显示
* 物体是否在场景中显示
* @param {THREE.Object3D} obj 3D物体
* @return {Boolean} 是否在场景中显示
* */
function ActiveInHierarchy(obj) {
if (!obj.visible) {
return false;
}
//遍历父对象
let parent = obj.parent;
while (parent) {
if (!parent.visible) {
return false;
}
parent = parent.parent;
function ActiveInHierarchy(obj) {
if (!obj.visible) {
return false;
}
//遍历父对象
let parent = obj.parent;
while (parent) {
if (!parent.visible) {
return false;
}
return true;
parent = parent.parent;
}
return true;
}
class PositionGUI {
constructor(obj, name) {
this.obj = obj
this.name = name
}
get modify() {
return this.obj[this.name]
}
set modify(v) {
this.obj[this.name] = v
}
constructor(obj, name) {
this.obj = obj;
this.name = name;
}
get modify() {
return this.obj[this.name];
}
set modify(v) {
this.obj[this.name] = v;
}
}
let bmMark = []//dom节点
let bmMark = []; //dom节点
export default {
props: ['lv', 'floorArr', 'winMarkeList', 'bm','checkItem'],//checkItem选中窗口
data() {
return {
bmkb,//便民看板
isloading: true,
floorList: {},//楼层图
floosrNum: '1',
checkWind: {},//选中窗口
pngArr: [],//图片名称
pngArrSmall: []//小图标
props: ["lv", "floorArr", "winMarkeList", "bm", "checkItem"], //checkItem选中窗口
data() {
return {
bmkb, //便民看板
isloading: true,
floorList: {}, //楼层图
floosrNum: "1",
checkWind: {}, //选中窗口
pngArr: [], //图片名称
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:{
device:function(){
return this.checkItem.device || {}
// 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,
},
mounted() {
this._initTree()
// let files = require.context('', false, /.png$/).keys();
// let pngArr = []
// files.forEach(v => {
// pngArr.push(v.match(/\/([\s\S]*?).png/)[1])
// })
// this.pngArr = pngArr
},
computed: {
device: function() {
return this.checkItem.device || {};
},
methods: {
// 选中模型样式
checkedModel(Mesh) {
if (checkedMesh) {
// delete checkedMesh.material
Mesh.material = new THREE.MeshStandardMaterial({ color: cloneMttl.color, wireframe: false, transparent: true, })
}
checkedMesh = Mesh
if (Mesh) {
cloneMttl = JSON.parse(JSON.stringify(Mesh.material)) //备份材质
// console.log(Mesh.material.color)
Mesh.material = new THREE.MeshStandardMaterial({ color: 0x1F78B7, wireframe: false, transparent: true, opacity: 0.8 })
}
},
// 初始化镜头
relaodCamera() {
if (camera) {
this._initCamera()
}
if (Tips) {
Tips.visible = false
}
},
_initCamera() {
camera.position.x = 0;
camera.position.y = 2000;
camera.position.z = 1000;
},
initGui() {
let datGui = new GUI()
//声明一个保存需求修改的相关数据的对象
let gui = {
ambientLight: "#9b9ba3", //环境光源
directionalLight: "#0xffc288", //点光源
intensity: 1, //灯光强度
visible: true, //是否可见
castShadow: true,
exponent: 30,
target: "plane",
debug: false
};
//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
datGui.addColor(gui, "ambientLight").onChange(function (e) {
ambientLight.color = new THREE.Color(e);
});
datGui.add(gui, "intensity", 0, 5).onChange(function (e) {
ambientLight.intensity = e;
});
datGui.addColor(gui, "directionalLight").onChange(function (e) {
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);
}
},
mounted() {
this._initTree();
// let files = require.context('', false, /.png$/).keys();
// let pngArr = []
// files.forEach(v => {
// pngArr.push(v.match(/\/([\s\S]*?).png/)[1])
// })
// this.pngArr = pngArr
},
methods: {
// 选中模型样式
checkedModel(Mesh) {
if (checkedMesh) {
// delete checkedMesh.material
Mesh.material = new THREE.MeshStandardMaterial({
color: cloneMttl.color,
wireframe: false,
transparent: true,
});
}
checkedMesh = Mesh;
if (Mesh) {
cloneMttl = JSON.parse(JSON.stringify(Mesh.material)); //备份材质
// console.log(Mesh.material.color)
Mesh.material = new THREE.MeshStandardMaterial({
color: 0x1f78b7,
wireframe: false,
transparent: true,
opacity: 0.8,
});
}
},
// 初始化镜头
relaodCamera() {
if (camera) {
this._initCamera();
}
if (Tips) {
Tips.visible = false;
}
},
_initCamera() {
camera.position.x = 0;
camera.position.y = 2000;
camera.position.z = 1000;
},
initGui() {
let datGui = new GUI();
//声明一个保存需求修改的相关数据的对象
let gui = {
ambientLight: "#9b9ba3", //环境光源
directionalLight: "#0xffc288", //点光源
intensity: 1, //灯光强度
visible: true, //是否可见
castShadow: true,
exponent: 30,
target: "plane",
debug: false,
};
//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
datGui.addColor(gui, "ambientLight").onChange(function(e) {
ambientLight.color = new THREE.Color(e);
});
datGui.add(gui, "intensity", 0, 5).onChange(function(e) {
ambientLight.intensity = e;
});
datGui.addColor(gui, "directionalLight").onChange(function(e) {
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)
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//背景透明
});
} 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) {}
}
});
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
})
}
}
},
// 标签渲染
css2Tip(dom, position) {
const { x, y, z } = position
let screenW = this.$el.offsetWidth
let screenH = this.$el.offsetHeight
let css2dom = dom
let Tipss = new CSS2DObject(css2dom);
Tipss.position.set(x, y, z);//文字地址
Tipss.visible = true
scene.add(Tipss);
let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
labelRenderer.setSize(screenW, screenH);
labelRenderer.domElement.style.position = 'absolute';
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");
counter.appendChild(renderer.domElement);
},
// 查询楼层dom节点显示/隐藏
css2DOM(childNodes) {
let childDom = childNodes
if (!childDom) {
childDom = document.getElementById("counter")
}
// console.log(childDom.childNodes);
childDom.childNodes.forEach(em => {
if (em.nodeName == 'DIV') {
let lv = em.getAttribute('data-lv')
// 只显示小图标
if (lv) {
if (lv == this.lv && em.className == 'bg_bm') {
em.style.opacity = 1
} else {
em.style.opacity = 0
}
}
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",'')
}
// 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;
});
}
}
},
// 标签渲染
css2Tip(dom, position) {
const { x, y, z } = position;
let screenW = this.$el.offsetWidth;
let screenH = this.$el.offsetHeight;
let css2dom = dom;
let Tipss = new CSS2DObject(css2dom);
Tipss.position.set(x, y, z); //文字地址
Tipss.visible = true;
scene.add(Tipss);
let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
labelRenderer.setSize(screenW, screenH);
labelRenderer.domElement.style.position = "absolute";
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");
counter.appendChild(renderer.domElement);
},
// 查询楼层dom节点显示/隐藏
css2DOM(childNodes) {
let childDom = childNodes;
if (!childDom) {
childDom = document.getElementById("counter");
}
// console.log(childDom.childNodes);
childDom.childNodes.forEach((em) => {
if (em.nodeName == "DIV") {
let lv = em.getAttribute("data-lv");
// 只显示小图标
if (lv) {
if (lv == this.lv && em.className == "bg_bm") {
em.style.opacity = 1;
} else {
this.$emit("clickWin",'')
console.log("未选中 Mesh!");
em.style.opacity = 0;
}
},
}
}
}
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>
<style>
.three-reload {
position: absolute;
left: 50%;
bottom: 50px;
border-radius: 8px;
border: 2px solid #fff;
color: #333;
background: rgba(255, 255, 255, 0.5);
width: 200px;
height: 50px;
line-height: 50px;
font-size: 18px;
z-index: 99;
text-align: center;
margin-left: -100px;
cursor: pointer;
position: absolute;
left: 50%;
bottom: 50px;
border-radius: 8px;
border: 2px solid #fff;
color: #333;
background: rgba(255, 255, 255, 0.5);
width: 200px;
height: 50px;
line-height: 50px;
font-size: 18px;
z-index: 99;
text-align: center;
margin-left: -100px;
cursor: pointer;
}
.bg_bm {
background-repeat: no-repeat;
margin-top: -30px;
pointer-events: none;
background-repeat: no-repeat;
margin-top: -30px;
pointer-events: none;
}
.check_bm {
margin-top: -70px;
margin-top: -70px;
}
</style>
<style lang="less" scoped>
.three {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
.three-card {
width: 200px;
height: 241px;
margin-top: -140px;
pointer-events: none;
width: 200px;
height: 241px;
margin-top: -140px;
pointer-events: none;
}
.marke {
position: absolute;
width: 200px;
background: #3673c39c;
.marke-win {
height: 40px;
line-height: 40px;
background: #3672c3;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 12px;
box-sizing: border-box;
}
.marke-box {
margin-top: 4px;
padding: 5px 12px 0 12px;
position: relative;
.marke-box-c {
position: relative;
z-index: 1;
height: 100%;
padding-bottom: 12px;
}
p {
font-size: 12px;
// font-weight: bold;
color: #fff;
line-height: 1.5;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
position: absolute;
width: 200px;
background: #3673c39c;
.marke-win {
height: 40px;
line-height: 40px;
background: #3672c3;
font-size: 14px;
font-weight: bold;
color: #fff;
padding: 0 12px;
box-sizing: border-box;
}
.marke-box {
margin-top: 4px;
padding: 5px 12px 0 12px;
position: relative;
.marke-box-c {
position: relative;
z-index: 1;
height: 100%;
padding-bottom: 12px;
}
.box {
border-top: 1px solid #EBEBEB;
padding-top: 10px;
font-size: 14px;
color: #999999;
p {
font-size: 12px;
// font-weight: bold;
color: #fff;
line-height: 1.5;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
.ant-popover-arrow {
position: absolute;
display: block;
width: 20px;
height: 20ox;
left: 50%;
margin-left: -10px;
bottom: -10;
}
.box {
border-top: 1px solid #ebebeb;
padding-top: 10px;
font-size: 14px;
color: #999999;
}
.ant-popover-arrow {
position: absolute;
display: block;
width: 20px;
height: 20px;
left: 50%;
margin-left: -10px;
bottom: -10;
}
}
.bmkb {
position: absolute;
bottom: 100px;
position: absolute;
bottom: 100px;
width: 100%;
padding: 0 310px;
box-sizing: border-box;
ul {
display: flex;
flex-wrap: wrap;
width: 100%;
padding: 0 310px;
box-sizing: border-box;
ul {
display: flex;
flex-wrap: wrap;
width: 100%;
}
}
li {
width: 16.6%;
font-size: 16px;
color: #333;
margin-bottom: 26px;
}
li {
width: 16.6%;
font-size: 16px;
color: #333;
margin-bottom: 26px;
}
img {
vertical-align: middle;
margin-right: 14px;
}
}</style>
\ No newline at end of file
img {
vertical-align: middle;
margin-right: 14px;
}
}
</style>
device-manager-ui/admin/src/views/device/list.vue
View file @ 88af1937
......@@ -18,7 +18,7 @@
>地图模式
</el-link>
</div>
<el-button style="margin-right: 10px" @click="$router.back()" size="small"
<el-button style="margin-right: 10px" @click="handleBack" size="small"
>返回上一级
</el-button>
</div>
......@@ -269,6 +269,200 @@ export default {
name: "Device",
components: { drawerShow, drawerView },
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() {
this.siteId = this.$route.query.siteId;
this.info = this.$route.query;
......@@ -560,200 +754,18 @@ export default {
this.$message.error(error.message);
}
},
// 返回
handleBack() {
let path = sessionStorage.getItem("sitestat");
if (path) {
this.$router.push(path);
} else {
this.$router.back();
}
},
},
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>
);
},
},
],
},
};
beforeDestroy() {
sessionStorage.removeItem("sitestat");
},
};
</script>
......
device-manager-ui/admin/src/views/sitestat/list.vue
View file @ 88af1937
......@@ -5,20 +5,26 @@
<el-card>
<div slot="header">
<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>
<el-scrollbar style="height: 100%">
<el-tree size="mini"
ref="siteTree"
:data="areaData"
id="el-tree"
node-key="id"
indent="4"
:props="treeProps"
:load="loadNode"
highlight-current default-expand-all :expand-on-click-node="false"
:render-content="renderContent"
@node-click="handleNodeClick">
<el-tree
size="mini"
ref="siteTree"
:data="areaData"
id="el-tree"
node-key="id"
indent="4"
:props="treeProps"
:load="loadNode"
highlight-current
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent"
@node-click="handleNodeClick"
>
</el-tree>
</el-scrollbar>
</el-card>
......@@ -27,9 +33,22 @@
<el-col :span="18" :xs="12">
<el-card>
<el-row>
<LayoutTable ref="layoutTable" :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">导出
<LayoutTable
ref="layoutTable"
: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>
</LayoutTable>
</el-row>
......@@ -37,7 +56,7 @@
</el-col>
</el-row>
<dialog-show ref="dialogform" @ok="getData"/>
<dialog-show ref="dialogform" @ok="getData" />
</div>
</template>
......@@ -49,44 +68,43 @@ import tree from "@/assets/mixins/tree";
export default {
name: "Sitestat",
components: {dialogShow},
components: { dialogShow },
mixins: [table, tree],
created() {
this.$get("/sitestat/siteTree", {}).then(({data}) => {
this.$get("/sitestat/siteTree", {}).then(({ data }) => {
// this.areaData = data.siteTree;
this.areaData = data.data;
console.log("areaData1",data.data)
console.log("areaData1", data.data);
});
},
methods: {
/** 下载模板操作 */
downloadTemplate() {
this.isExport = true;
this.$download("/sitestat/downloadTemplate", {}, {type: "excel"})
.then(() => (this.isExport = false))
.catch((error) => {
this.isExport = false;
this.$message.error(error.message);
});
this.$download("/sitestat/downloadTemplate", {}, { type: "excel" })
.then(() => (this.isExport = false))
.catch((error) => {
this.isExport = false;
this.$message.error(error.message);
});
},
/** 导出Excel */
doExport() {
this.isExport = true;
this.$download(
"/sitestat/exportExcel",
{
siteId: this.$route.query["siteId"],
siteName: this.$route.query["siteName"],
},
{type: "excel"}
"/sitestat/exportExcel",
{
siteId: this.$route.query["siteId"],
siteName: this.$route.query["siteName"],
},
{ type: "excel" }
)
.then(() => (this.isExport = false))
.catch((error) => {
this.isExport = false;
this.$message.error(error.message);
});
.then(() => (this.isExport = false))
.catch((error) => {
this.isExport = false;
this.$message.error(error.message);
});
},
/** 重写新增方法 */
......@@ -99,11 +117,13 @@ export default {
},
/** 重写查看方法 */
toView(row) {
let path = this.$route.path;
sessionStorage.setItem("sitestat", path);
//console.log(row)
//进入设备列表页面
this.$router.push({
path: "/device/list",
query: {sitestatId: row.id, siteId: row.siteId},
query: { sitestatId: row.id, siteId: row.siteId },
});
},
......@@ -126,12 +146,12 @@ export default {
siteIdList: node.id.split(",").map((i) => parseInt(i)),
};
} else {
this.query = {siteId: node.id};
this.query = { siteId: node.id };
}
this.getData();
} else if (node.type === "area") {
this.query = {areaCode: node.areaCode};
this.query = { areaCode: node.areaCode };
this.getData();
}
......@@ -162,9 +182,9 @@ export default {
width: 50,
},
{label: "站点名称", align: "center", prop: "siteName"},
{ label: "站点名称", align: "center", prop: "siteName" },
{label: "站点编号", align: "center", prop: "siteCode"},
{ label: "站点编号", align: "center", prop: "siteCode" },
{
label: "设备总数",
......@@ -206,15 +226,15 @@ export default {
width: 240,
formatter: (row) => {
return (
<table-buttons
noAdd
noEdit
noDel
row={row}
onEdit={this.toEdit}
onView={this.toView}
onDel={this.toDel}
/>
<table-buttons
noAdd
noEdit
noDel
row={row}
onEdit={this.toEdit}
onView={this.toView}
onDel={this.toDel}
/>
);
},
},
......@@ -249,12 +269,18 @@ export default {
}
.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);
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);
color: rgb(64, 158, 255);
}
......
device-manager-ui/admin/src/views/sitestat/mapDetail.vue
View file @ 88af1937
......@@ -146,7 +146,10 @@
justify="space-between"
>
<!-- <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> -->
<span style="font-size: 12px">{{ label }}</span>
<el-switch
......@@ -223,6 +226,8 @@ export default {
this.$refs.drawerform.add(row);
},
switchList() {
let path = this.$route.path;
sessionStorage.setItem("sitestat", path);
//进入设备列表页面
this.$router.push({
path: "/device/list",
......@@ -462,4 +467,4 @@ export default {
font-size: 18px;
color: deepskyblue;
}
</style>
\ No newline at end of file
</style>
device-manager-ui/admin/src/views/sitestat/maplist.vue
View file @ 88af1937
......@@ -27,7 +27,7 @@
>
</el-tree>
</el-scrollbar>
</el-card>
</el-card>
</el-row>
<el-row :gutter="20" slot="rightTop" class="mytree">
<el-card>
......@@ -37,23 +37,29 @@
<div class="listbody">
<div class="listtop">
<div class="item sbzs">
<div>{{listNum.all}}</div>
<div>{{ listNum.all }}</div>
<div class="wz">设备总数(台)</div>
</div>
<div class="item zx">
<div>{{listNum.online}}</div>
<div>{{ listNum.online }}</div>
<div class="wz">在线(台)</div>
</div>
<div class="item lx">
<div>{{listNum.unline}}</div>
<div>{{ listNum.unline }}</div>
<div class="wz">离线(台)</div>
</div>
</div>
<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="title">{{ item.label }}</div>
<div class="ckxq pointer" @click="getDetailData(item)">查看详情</div>
<div class="ckxq pointer" @click="getDetailData(item)">
查看详情
</div>
</div>
<div class="are">{{ item.detailAddress }}</div>
<div class="data">
......@@ -67,10 +73,10 @@
离线：<span>{{ item.offlineTotal }}台</span>
</div>
</div>
</div>
</div>
</div>
</div>
</el-card>
</el-card>
</el-row>
</Map>
<dialog-show ref="dialogform" @ok="getData" />
......@@ -89,44 +95,44 @@ export default {
mounted() {
this.pageInfo.list = "/sitestat/list";
},
watch:{
originData(newval){
let val = JSON.parse(JSON.stringify(newval))
watch: {
originData(newval) {
let val = JSON.parse(JSON.stringify(newval));
let arr = this.flatten(val).filter((v) => {
return v.type == "site";
});
this.rightShowList = arr
return v.type == "site";
});
this.rightShowList = arr;
let all = 0;
let online = 0;
let unline = 0;
arr.forEach(v=>{
all += parseInt(v.deviceTotal)
online += parseInt(v.onlineTotal)
unline += parseInt(v.offlineTotal)
})
this.listNum.all = all
this.listNum.online = online
this.listNum.unline = unline
}
arr.forEach((v) => {
all += parseInt(v.deviceTotal);
online += parseInt(v.onlineTotal);
unline += parseInt(v.offlineTotal);
});
this.listNum.all = all;
this.listNum.online = online;
this.listNum.unline = unline;
},
},
created() {
this.pageInfo.list = "/sitestat/list";
// this.$get("/sitestat/maplist", {}).then(({ data }) => {
// this.originData = data;
// this.$refs.map.refresh(this.originData);
// this.originData = data;
// this.$refs.map.refresh(this.originData);
// });
this.$get("/sitestat/siteTree", {}).then(({ data }) => {
let arr = []
data.data.forEach(i=>{
let arr = [];
data.data.forEach((i) => {
arr.push({
...i,
lat:i.latitude,
lng:i.longitude,
level:1
})
})
this.originData = arr
lat: i.latitude,
lng: i.longitude,
level: 1,
});
});
this.originData = arr;
this.areaData = JSON.parse(JSON.stringify(arr));
this.$refs.map.refresh(this.originData);
});
......@@ -173,7 +179,7 @@ export default {
this.$router.push({
path: "/sitestat/mapDetail",
// query: info,
query: { sitestatId: info.id, siteId: info.siteId },
query: { sitestatId: info.id, siteId: info.siteId || info.id },
});
},
......@@ -211,37 +217,39 @@ export default {
obj.lat = node.latitude;
this.$refs.map.relocate(obj);
}
if(node.level==1){
let arr = []
arr.push(JSON.parse(JSON.stringify(node)))
this.originData = arr
if (node.level == 1) {
let arr = [];
arr.push(JSON.parse(JSON.stringify(node)));
this.originData = arr;
this.$refs.map.refresh(this.originData);
this.$refs.map.zoom = 6
}else{
let children = JSON.parse(JSON.stringify(node.children))
children = this.$refs.map.flatten(children)
children.unshift(JSON.parse(JSON.stringify(node)))
this.$refs.map.zoom = 6;
} else {
let children = JSON.parse(JSON.stringify(node.children));
children = this.$refs.map.flatten(children);
children.unshift(JSON.parse(JSON.stringify(node)));
children = children.filter((v) => {
return v.type == "site";
});
children = children.map(i=> {return {
...i,
lat:i.latitude,
lng:i.longitude,
}})
this.originData = children
children = children.map((i) => {
return {
...i,
lat: i.latitude,
lng: i.longitude,
};
});
this.originData = children;
this.$refs.map.refresh(this.originData);
}
},
},
data() {
return {
listNum:{
all:0,
online:0,
unline:0
listNum: {
all: 0,
online: 0,
unline: 0,
},
rightShowList:[],
rightShowList: [],
isExport: false,
originData: [],
config: {
......@@ -300,69 +308,69 @@ export default {
</script>
<style lang="less" scoped>
.deployitem {
padding: 10px 0;
color: #223333;
border-bottom: 1px solid gainsboro;
.top{
display: flex;
justify-content: space-between;
.deployitem {
padding: 10px 0;
color: #223333;
border-bottom: 1px solid gainsboro;
.top {
display: flex;
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 {
font-size: 10px;
margin-right: 20px;
margin-top: 8px;
color: #1890ff;
flex-shrink: 0;
.sbzs > span {
color: #223333;
}
.data {
display: flex;
font-size: 12px;
font-weight: 500;
color: #999999;
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;
}
.zx > span {
color: #0064e9;
}
.zx {
position: relative;
}
.title {
font-size: 14px;
font-weight: 600;
padding: 4px 0;
.zx::before {
content: "";
position: absolute;
width: 4px;
height: 4px;
background: #0064e9;
border-radius: 50%;
top: 6px;
left: -6px;
}
.are {
font-size: 12px;
.lx > span {
color: #fa4d4c;
}
}
.title {
font-size: 14px;
font-weight: 600;
padding: 4px 0;
}
.are {
font-size: 12px;
}
}
.listbody::-webkit-scrollbar {
width: 0;
}
.listbody{
.listbody {
max-height: 700px;
overflow: auto;
.listtop{
overflow: auto;
.listtop {
display: flex;
justify-content: space-between;
padding: 20px 0 10px;
......@@ -376,7 +384,7 @@ export default {
flex-direction: column;
color: #fff;
padding-bottom: 6px;
font-size: 8px;
font-size: 12px;
.wz {
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