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
Show 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 { ...@@ -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 @ 88af1937
...@@ -5,18 +5,31 @@ ...@@ -5,18 +5,31 @@
<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">
{{ device.deviceName }}
<span style="color: #FF4A4A;"
>({{ checkItem.alarmTypeStr }})</span
>
</div>
<div class="marke-box"> <div class="marke-box">
<div class="marke-box-c"> <div class="marke-box-c">
<p>设备编码:{{device.deviceName}}</p> <p>设备编码:{{ device.deviceName }}</p>
<p>MAC地址:{{ device.deviceCode }}</p> <p>MAC地址:{{ device.deviceCode }}</p>
<p>设备位置：{{ device.deviceName }}</p> <p>设备位置：{{ device.deviceName }}</p>
<p>接收人员：{{ device.leadingOfficial }}</p> <p>接收人员：{{ device.leadingOfficial }}</p>
<p>负责人：{{ device.leadingOfficial }}</p> <p>负责人：{{ device.leadingOfficial }}</p>
<p>联系电话：{{ device.leadingOfficialTelephone }}</p> <p>联系电话：{{ device.leadingOfficialTelephone }}</p>
<p>告警程度：--</p> <p>告警程度：--</p>
<p>告警时间：{{$moment(checkItem.alarmTime).format('YYYY-MM-DD HH:mm')}}</p> <p>
<p>告警状态：<span style="color: #FF4A4A;">({{ checkItem.alarmTypeStr }})</span></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> <p>发送状态：--</p>
...@@ -24,10 +37,9 @@ ...@@ -24,10 +37,9 @@
<p>发送内容：--</p> <p>发送内容：--</p>
</div> </div>
<div class="ant-popover-arrow"> <div class="ant-popover-arrow">
<img src="./ycjg.png" alt=""> <img src="./ycjg.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -35,21 +47,33 @@ ...@@ -35,21 +47,33 @@
</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次
...@@ -66,17 +90,17 @@ function tweents(start, next, fn, times) { ...@@ -66,17 +90,17 @@ function tweents(start, next, fn, times) {
* @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();
} }
/** /**
...@@ -84,7 +108,7 @@ function updateCamera() { ...@@ -84,7 +108,7 @@ function updateCamera() {
* @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;
} }
...@@ -99,81 +123,80 @@ function updateCamera() { ...@@ -99,81 +123,80 @@ function updateCamera() {
return true; 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: { watch: {
checkItem:{ checkItem: {
handler: function (str) { handler: function(str) {
let winName = str.device.deviceCode let winName = str.device.deviceCode;
// let winName = '7E_CE_8B_C5_35_05' // let winName = '7E_CE_8B_C5_35_05'
// console.log(keyobj,winName,keyobj[winName]) // console.log(keyobj,winName,keyobj[winName])
if (keyobj[winName]) { if (keyobj[winName]) {
const { x, y, z } = keyobj[winName].positions const { x, y, z } = keyobj[winName].positions;
Tips.position.set(x, y, z);//文字地址 Tips.position.set(x, y, z); //文字地址
Tips.visible = true Tips.visible = true;
// camera.position.x = x*0.5; // camera.position.x = x*0.5;
// camera.position.y = y*0.8; // camera.position.y = y*0.8;
// camera.position.z = z; // camera.position.z = z;
} else { } else {
// Tips.visible = false // Tips.visible = false
Tips.position.set(0, 0, 0);//文字地址 Tips.position.set(0, 0, 0); //文字地址
Tips.visible = true Tips.visible = true;
this._initCamera() this._initCamera();
} }
}, },
deep: true deep: true,
}, },
winMarkeList: { winMarkeList: {
handler: function (v) { handler: function(v) {
if (v.length > 0) { if (v.length > 0) {
this.checkWind = v[0].coordinate this.checkWind = v[0].coordinate;
let window_fromnum = v[0].coordinate.window_fromnum let window_fromnum = v[0].coordinate.window_fromnum;
let winName = `${window_fromnum.slice(0, 1)}_${window_fromnum.slice(1)}` let winName = `${window_fromnum.slice(0, 1)}_${window_fromnum.slice(
1
)}`;
if (keyobj[winName]) { if (keyobj[winName]) {
// 选中模型为焦点 // 选中模型为焦点
const { x, y, z } = keyobj[winName].positions const { x, y, z } = keyobj[winName].positions;
Tips.position.set(x, y, z);//文字地址 Tips.position.set(x, y, z); //文字地址
Tips.visible = true Tips.visible = true;
// camera.position.x = x*0.5; // camera.position.x = x*0.5;
// camera.position.y = y*0.8; // camera.position.y = y*0.8;
// camera.position.z = z; // camera.position.z = z;
} else { } else {
Tips.visible = false Tips.visible = false;
this._initCamera() this._initCamera();
} }
} }
}, },
deep: true deep: true,
}, },
// lv: function (e) { // lv: function (e) {
// modlObj[this.floosrNum].obj.visible = false // modlObj[this.floosrNum].obj.visible = false
...@@ -182,31 +205,30 @@ export default { ...@@ -182,31 +205,30 @@ export default {
// this.css2DOM() // this.css2DOM()
// }, // },
floorArr: { floorArr: {
handler: function (v) { handler: function(v) {
let obj = {} let obj = {};
v.forEach(v => { v.forEach((v) => {
obj[v.lv] = v obj[v.lv] = v;
}) });
this.floorList = obj this.floorList = obj;
if (camera) { if (camera) {
this._3Dloder(); this._3Dloder();
} else { } else {
setTimeout(()=>{ setTimeout(() => {
this._initTree() this._initTree();
}) });
} }
}, },
deep: true deep: true,
}, },
}, },
computed:{ computed: {
device:function(){ device: function() {
return this.checkItem.device || {} return this.checkItem.device || {};
} },
}, },
mounted() { mounted() {
this._initTree() this._initTree();
// let files = require.context('', false, /.png$/).keys(); // let files = require.context('', false, /.png$/).keys();
// let pngArr = [] // let pngArr = []
// files.forEach(v => { // files.forEach(v => {
...@@ -219,22 +241,31 @@ export default { ...@@ -219,22 +241,31 @@ export default {
checkedModel(Mesh) { checkedModel(Mesh) {
if (checkedMesh) { if (checkedMesh) {
// delete checkedMesh.material // delete checkedMesh.material
Mesh.material = new THREE.MeshStandardMaterial({ color: cloneMttl.color, wireframe: false, transparent: true, }) Mesh.material = new THREE.MeshStandardMaterial({
color: cloneMttl.color,
wireframe: false,
transparent: true,
});
} }
checkedMesh = Mesh checkedMesh = Mesh;
if (Mesh) { if (Mesh) {
cloneMttl = JSON.parse(JSON.stringify(Mesh.material)) //备份材质 cloneMttl = JSON.parse(JSON.stringify(Mesh.material)); //备份材质
// console.log(Mesh.material.color) // console.log(Mesh.material.color)
Mesh.material = new THREE.MeshStandardMaterial({ color: 0x1F78B7, wireframe: false, transparent: true, opacity: 0.8 }) Mesh.material = new THREE.MeshStandardMaterial({
color: 0x1f78b7,
wireframe: false,
transparent: true,
opacity: 0.8,
});
} }
}, },
// 初始化镜头 // 初始化镜头
relaodCamera() { relaodCamera() {
if (camera) { if (camera) {
this._initCamera() this._initCamera();
} }
if (Tips) { if (Tips) {
Tips.visible = false Tips.visible = false;
} }
}, },
_initCamera() { _initCamera() {
...@@ -243,7 +274,7 @@ export default { ...@@ -243,7 +274,7 @@ export default {
camera.position.z = 1000; camera.position.z = 1000;
}, },
initGui() { initGui() {
let datGui = new GUI() let datGui = new GUI();
//声明一个保存需求修改的相关数据的对象 //声明一个保存需求修改的相关数据的对象
let gui = { let gui = {
ambientLight: "#9b9ba3", //环境光源 ambientLight: "#9b9ba3", //环境光源
...@@ -253,86 +284,89 @@ export default { ...@@ -253,86 +284,89 @@ export default {
castShadow: true, castShadow: true,
exponent: 30, exponent: 30,
target: "plane", target: "plane",
debug: false debug: false,
}; };
//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值） //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
datGui.addColor(gui, "ambientLight").onChange(function (e) { datGui.addColor(gui, "ambientLight").onChange(function(e) {
ambientLight.color = new THREE.Color(e); ambientLight.color = new THREE.Color(e);
}); });
datGui.add(gui, "intensity", 0, 5).onChange(function (e) { datGui.add(gui, "intensity", 0, 5).onChange(function(e) {
ambientLight.intensity = e; ambientLight.intensity = e;
}); });
datGui.addColor(gui, "directionalLight").onChange(function (e) { datGui.addColor(gui, "directionalLight").onChange(function(e) {
directionalLight.color = new THREE.Color(e); directionalLight.color = new THREE.Color(e);
}); });
datGui.add(gui, "intensity", 0, 5).onChange(function (e) { datGui.add(gui, "intensity", 0, 5).onChange(function(e) {
directionalLight.intensity = e; directionalLight.intensity = e;
}); });
datGui.add(gui, "visible").onChange(function (e) { datGui.add(gui, "visible").onChange(function(e) {
directionalLight.visible = e; directionalLight.visible = e;
}); });
datGui.add(gui, "castShadow").onChange(function (e) { datGui.add(gui, "castShadow").onChange(function(e) {
directionalLight.castShadow = e; directionalLight.castShadow = e;
}); });
datGui.add(gui, "debug").onChange(function (e) { datGui.add(gui, "debug").onChange(function(e) {
if (e) { if (e) {
var debug = new THREE.CameraHelper(directionalLight.shadow.camera); var debug = new THREE.CameraHelper(directionalLight.shadow.camera);
debug.name = "debug"; debug.name = "debug";
scene.add(debug); scene.add(debug);
} } else {
else {
// var debug = scene.getObjectByName("debug"); // var debug = scene.getObjectByName("debug");
// scene.remove(debug); // scene.remove(debug);
} }
}); });
datGui.add(camera, 'fov', 1, 18000).onChange(updateCamera) datGui.add(camera, "fov", 1, 18000).onChange(updateCamera);
datGui.add(camera, 'near', 1, 20000).onChange(updateCamera) datGui.add(camera, "near", 1, 20000).onChange(updateCamera);
datGui.add(camera, 'far', 1, 20000).onChange(updateCamera) datGui.add(camera, "far", 1, 20000).onChange(updateCamera);
const folder = datGui.addFolder('全局Position') const folder = datGui.addFolder("全局Position");
folder.add(new PositionGUI(camera.position, 'x'), 'modify', 0, 20000).name('x') folder
folder.add(new PositionGUI(camera.position, 'y'), 'modify', 0, 20000).name('y') .add(new PositionGUI(camera.position, "x"), "modify", 0, 20000)
folder.add(new PositionGUI(camera.position, 'z'), 'modify', 0, 20000).name('z') .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() { _initTree() {
scene = new THREE.Scene(); scene = new THREE.Scene();
// alert(this.$el.offsetWidth) // alert(this.$el.offsetWidth)
// alert(this.$el.offsetHeight) // alert(this.$el.offsetHeight)
let screenW = this.$el.offsetWidth let screenW = this.$el.offsetWidth;
let screenH = this.$el.offsetHeight let screenH = this.$el.offsetHeight;
camera = new THREE.PerspectiveCamera(25, screenW / screenH, 0.01, 20000); camera = new THREE.PerspectiveCamera(25, screenW / screenH, 0.01, 20000);
this._initCamera() this._initCamera();
camera.lookAt(scene.position); camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer({ renderer = new THREE.WebGLRenderer({
antialias: true,//开启抗锯齿 antialias: true, //开启抗锯齿
logarithmicDepthBuffer: true,//对数深度缓存解决模型重叠 logarithmicDepthBuffer: true, //对数深度缓存解决模型重叠
alpha: true//背景透明 alpha: true, //背景透明
}); });
renderer.shadowMap.enabled = true; renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap // 设置投影类型, 这边的柔和投影 renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 设置投影类型, 这边的柔和投影
renderer.setSize(screenW, screenH); renderer.setSize(screenW, screenH);
// renderer.setAnimationLoop( this.animation ); // renderer.setAnimationLoop( this.animation );
this.$refs.three.appendChild(renderer.domElement); this.$refs.three.appendChild(renderer.domElement);
this._Light() this._Light();
this.css2controls() this.css2controls();
// controls.autoRotate = true // controls.autoRotate = true
// 左右旋转范围 // 左右旋转范围
controls.minAzimuthAngle = -Math.PI * (100 / 360); controls.minAzimuthAngle = -Math.PI * (100 / 360);
controls.maxAzimuthAngle = Math.PI * (100 / 360); controls.maxAzimuthAngle = Math.PI * (100 / 360);
controls.minDistance = 500; controls.minDistance = 500;
controls.maxDistance = 1500; controls.maxDistance = 1500;
controls.maxPolarAngle = 1.2 controls.maxPolarAngle = 1.2;
controls.minPolarAngle = 0.8 controls.minPolarAngle = 0.8;
if (process.env.NODE_ENV == 'development') { if (process.env.NODE_ENV == "development") {
this.initGui() this.initGui();
} }
this.animation() this.animation();
}, },
animation() { animation() {
// TWEEN.update() // TWEEN.update()
...@@ -355,19 +389,18 @@ export default { ...@@ -355,19 +389,18 @@ export default {
// labelRenderer.render( scene, camera ); // labelRenderer.render( scene, camera );
}, },
css2renderer() { css2renderer() {
let screenW = this.$el.offsetWidth;
let screenW = this.$el.offsetWidth let screenH = this.$el.offsetHeight;
let screenH = this.$el.offsetHeight let css2dom = document.getElementById("alert-css2");
let css2dom = document.getElementById('alert-css2')
Tips = new CSS2DObject(css2dom); Tips = new CSS2DObject(css2dom);
Tips.position.set(0, 0, 0);//文字地址 Tips.position.set(0, 0, 0); //文字地址
Tips.visible = false Tips.visible = false;
scene.add(Tips); scene.add(Tips);
labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
labelRenderer.setSize(screenW, screenH); labelRenderer.setSize(screenW, screenH);
labelRenderer.domElement.style.position = 'absolute'; labelRenderer.domElement.style.position = "absolute";
labelRenderer.domElement.style.top = 0; labelRenderer.domElement.style.top = 0;
this.$refs.three.appendChild(labelRenderer.domElement) this.$refs.three.appendChild(labelRenderer.domElement);
}, },
css2controls() { css2controls() {
this.css2renderer(); this.css2renderer();
...@@ -378,56 +411,56 @@ export default { ...@@ -378,56 +411,56 @@ export default {
_Light() { _Light() {
ambientLight = new THREE.AmbientLight(0xffffff, 1); ambientLight = new THREE.AmbientLight(0xffffff, 1);
ambientLight.position.set(0, 0, 0); ambientLight.position.set(0, 0, 0);
scene.add(ambientLight) scene.add(ambientLight);
directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.castShadow = true; directionalLight.castShadow = true;
directionalLight.position.set(5, 10, 7.5); directionalLight.position.set(5, 10, 7.5);
scene.add(directionalLight) scene.add(directionalLight);
// SpotLight = new THREE.SpotLight(0xffffff,1); // SpotLight = new THREE.SpotLight(0xffffff,1);
// SpotLight.castShadow = true; // SpotLight.castShadow = true;
// SpotLight.position.set( 385.522, 1132.217, 1825.427 ); // SpotLight.position.set( 385.522, 1132.217, 1825.427 );
// scene.add(SpotLight) // scene.add(SpotLight)
}, },
_3Dloder() { _3Dloder() {
let _this = this let _this = this;
let MTLLoaders = new MTLLoader() let MTLLoaders = new MTLLoader();
let OBJLoaders = new OBJLoader() let OBJLoaders = new OBJLoader();
let GLTFLoaders = new GLTFLoader() let GLTFLoaders = new GLTFLoader();
OBJLoaders.setCrossOrigin('Anonymous');//跨域问题 OBJLoaders.setCrossOrigin("Anonymous"); //跨域问题
const { floorList } = this const { floorList } = this;
for (const iterator in floorList) { for (const iterator in floorList) {
const mtl = floorList[iterator].mtl_url const mtl = floorList[iterator].mtl_url;
const obj = floorList[iterator].obj_url const obj = floorList[iterator].obj_url;
if (obj.search(/.obj/i) >= 0) { if (obj.search(/.obj/i) >= 0) {
// 模型 // 模型
MTLLoaders.load(mtl, function (materials) { MTLLoaders.load(mtl, function(materials) {
//obj的模型会和MaterialCreator包含的材质对应起来 //obj的模型会和MaterialCreator包含的材质对应起来
OBJLoaders.setMaterials(materials); OBJLoaders.setMaterials(materials);
OBJLoaders.load(obj, function (obj) { OBJLoaders.load(obj, function(obj) {
if (_this.lv !== iterator) { if (_this.lv !== iterator) {
obj.visible = false obj.visible = false;
} }
modlObj[iterator] = { modlObj[iterator] = {
position: { position: {
x: 0, x: 0,
y: 0, y: 0,
z: 0 z: 0,
}, },
obj: obj obj: obj,
} };
_this.isloading = false _this.isloading = false;
scene.add(obj); //返回的组对象插入场景中 scene.add(obj); //返回的组对象插入场景中
// this.initWinname(this.winname) // this.initWinname(this.winname)
}) });
}) });
} else if (obj.search(/.gltf/i) >= 0) { } else if (obj.search(/.gltf/i) >= 0) {
GLTFLoaders.load(obj, function (obj) { GLTFLoaders.load(obj, function(obj) {
// console.log(obj,'@@@@@@@'); // console.log(obj,'@@@@@@@');
const children = obj.scene.children[0].children const children = obj.scene.children[0].children;
const positionY = (iterator-1.7) * 200 const positionY = (iterator - 1.7) * 200;
children.forEach(element => { children.forEach((element) => {
let objname = element.name let objname = element.name;
// mac地址模型 // mac地址模型
if (objname.length > 12) { if (objname.length > 12) {
...@@ -438,54 +471,50 @@ export default { ...@@ -438,54 +471,50 @@ export default {
element.geometry.computeBoundingSphere(); element.geometry.computeBoundingSphere();
// 球体中心点 // 球体中心点
let realPosition = element.geometry.boundingSphere.center; let realPosition = element.geometry.boundingSphere.center;
element['positions'] = JSON.parse(JSON.stringify(realPosition)) element["positions"] = JSON.parse(
element['positions'].y = positionY JSON.stringify(realPosition)
keyobj[objname] = element );
} catch (error) { element["positions"].y = positionY;
keyobj[objname] = element;
} } catch (error) {}
} }
}); });
// if (_this.lv !== iterator) { // if (_this.lv !== iterator) {
// obj.scene.visible = false // obj.scene.visible = false
// // obj.scene.position.y = 100 // // obj.scene.position.y = 100
// } // }
obj.scene.position.y = positionY obj.scene.position.y = positionY;
modlObj[iterator] = { modlObj[iterator] = {
position: { position: {
x: 0, x: 0,
y: positionY, y: positionY,
z: 0 z: 0,
}, },
obj: obj.scene obj: obj.scene,
} };
scene.add(obj.scene); //返回的组对象插入场景中 scene.add(obj.scene); //返回的组对象插入场景中
_this.isloading = false _this.isloading = false;
});
})
} }
} }
}, },
// 标签渲染 // 标签渲染
css2Tip(dom, position) { css2Tip(dom, position) {
const { x, y, z } = position const { x, y, z } = position;
let screenW = this.$el.offsetWidth let screenW = this.$el.offsetWidth;
let screenH = this.$el.offsetHeight let screenH = this.$el.offsetHeight;
let css2dom = dom let css2dom = dom;
let Tipss = new CSS2DObject(css2dom); let Tipss = new CSS2DObject(css2dom);
Tipss.position.set(x, y, z);//文字地址 Tipss.position.set(x, y, z); //文字地址
Tipss.visible = true Tipss.visible = true;
scene.add(Tipss); scene.add(Tipss);
let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
labelRenderer.setSize(screenW, screenH); labelRenderer.setSize(screenW, screenH);
labelRenderer.domElement.style.position = 'absolute'; labelRenderer.domElement.style.position = "absolute";
labelRenderer.domElement.style.top = 0; labelRenderer.domElement.style.top = 0;
labelRenderer.domElement.style.zIndex = 0; labelRenderer.domElement.style.zIndex = 0;
this.$refs.three.appendChild(labelRenderer.domElement) this.$refs.three.appendChild(labelRenderer.domElement);
new OrbitControls(camera, labelRenderer.domElement); new OrbitControls(camera, labelRenderer.domElement);
var counter = document.getElementById("counter"); var counter = document.getElementById("counter");
...@@ -493,27 +522,25 @@ export default { ...@@ -493,27 +522,25 @@ export default {
}, },
// 查询楼层dom节点显示/隐藏 // 查询楼层dom节点显示/隐藏
css2DOM(childNodes) { css2DOM(childNodes) {
let childDom = childNodes let childDom = childNodes;
if (!childDom) { if (!childDom) {
childDom = document.getElementById("counter") childDom = document.getElementById("counter");
} }
// console.log(childDom.childNodes); // console.log(childDom.childNodes);
childDom.childNodes.forEach(em => { childDom.childNodes.forEach((em) => {
if (em.nodeName == 'DIV') { if (em.nodeName == "DIV") {
let lv = em.getAttribute('data-lv') let lv = em.getAttribute("data-lv");
// 只显示小图标 // 只显示小图标
if (lv) { if (lv) {
if (lv == this.lv && em.className == 'bg_bm') { if (lv == this.lv && em.className == "bg_bm") {
em.style.opacity = 1 em.style.opacity = 1;
} else { } else {
em.style.opacity = 0 em.style.opacity = 0;
} }
} }
this.css2DOM(em) this.css2DOM(em);
} }
});
})
}, },
// 选中模型 // 选中模型
getIntersects(event) { getIntersects(event) {
...@@ -522,10 +549,19 @@ export default { ...@@ -522,10 +549,19 @@ export default {
const mouse = new THREE.Vector2(); const mouse = new THREE.Vector2();
// 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1 // 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1
let container = this.$refs.three let container = this.$refs.three;
let getBoundingClientRect = container.getBoundingClientRect(); let getBoundingClientRect = container.getBoundingClientRect();
mouse.x = ((event.clientX - getBoundingClientRect.left) / container.offsetWidth) * 2 - 1; mouse.x =
mouse.y = -((event.clientY - getBoundingClientRect.top) / container.offsetHeight) * 2 + 1; ((event.clientX - getBoundingClientRect.left) / container.offsetWidth) *
2 -
1;
mouse.y =
-(
(event.clientY - getBoundingClientRect.top) /
container.offsetHeight
) *
2 +
1;
//通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置 //通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
raycaster.setFromCamera(mouse, camera); raycaster.setFromCamera(mouse, camera);
...@@ -537,9 +573,12 @@ export default { ...@@ -537,9 +573,12 @@ export default {
return intersects; return intersects;
}, },
clickmodel(event) { clickmodel(event) {
let intersects = this.getIntersects(event) let intersects = this.getIntersects(event);
// 获取选中最近的 Mesh 对象 // 获取选中最近的 Mesh 对象
if (intersects.length != 0 && intersects[0].object instanceof THREE.Mesh) { if (
intersects.length != 0 &&
intersects[0].object instanceof THREE.Mesh
) {
let selectObject = intersects[0].object; let selectObject = intersects[0].object;
// this.changeMaterial(selectObject); // this.changeMaterial(selectObject);
// this.outlineObj(selectObject) // this.outlineObj(selectObject)
...@@ -548,21 +587,24 @@ export default { ...@@ -548,21 +587,24 @@ export default {
// 球体中心点 // 球体中心点
let realPosition = selectObject.geometry.boundingSphere.center; let realPosition = selectObject.geometry.boundingSphere.center;
console.log(selectObject, ActiveInHierarchy(selectObject)) console.log(selectObject, ActiveInHierarchy(selectObject));
// 如果选中窗口标注窗口信息 // 如果选中窗口标注窗口信息
if (keyobj[selectObject.name] && ActiveInHierarchy(selectObject)) { if (keyobj[selectObject.name] && ActiveInHierarchy(selectObject)) {
const winnames = selectObject.name.split("_") const winnames = selectObject.name.split("_");
this.$emit("clickWin",{winName:winnames[0]+winnames[1],...realPosition}) this.$emit("clickWin", {
}else{ winName: winnames[0] + winnames[1],
this.$emit("clickWin",'') ...realPosition,
});
} else {
this.$emit("clickWin", "");
} }
} else { } else {
this.$emit("clickWin",'') this.$emit("clickWin", "");
console.log("未选中 Mesh!"); console.log("未选中 Mesh!");
} }
}, },
} },
} };
</script> </script>
<style> <style>
.three-reload { .three-reload {
...@@ -592,8 +634,6 @@ export default { ...@@ -592,8 +634,6 @@ export default {
.check_bm { .check_bm {
margin-top: -70px; margin-top: -70px;
} }
</style> </style>
<style lang="less" scoped> <style lang="less" scoped>
.three { .three {
...@@ -647,7 +687,7 @@ export default { ...@@ -647,7 +687,7 @@ export default {
} }
.box { .box {
border-top: 1px solid #EBEBEB; border-top: 1px solid #ebebeb;
padding-top: 10px; padding-top: 10px;
font-size: 14px; font-size: 14px;
color: #999999; color: #999999;
...@@ -657,12 +697,11 @@ export default { ...@@ -657,12 +697,11 @@ export default {
position: absolute; position: absolute;
display: block; display: block;
width: 20px; width: 20px;
height: 20ox; height: 20px;
left: 50%; left: 50%;
margin-left: -10px; margin-left: -10px;
bottom: -10; bottom: -10;
} }
} }
.bmkb { .bmkb {
...@@ -689,4 +728,5 @@ export default { ...@@ -689,4 +728,5 @@ export default {
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 @ 88af1937
...@@ -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() {
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> </script>
......
device-manager-ui/admin/src/views/sitestat/list.vue
View file @ 88af1937
...@@ -5,10 +5,13 @@ ...@@ -5,10 +5,13 @@
<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
size="mini"
ref="siteTree" ref="siteTree"
:data="areaData" :data="areaData"
id="el-tree" id="el-tree"
...@@ -16,9 +19,12 @@ ...@@ -16,9 +19,12 @@
indent="4" indent="4"
:props="treeProps" :props="treeProps"
:load="loadNode" :load="loadNode"
highlight-current default-expand-all :expand-on-click-node="false" highlight-current
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent" :render-content="renderContent"
@node-click="handleNodeClick"> @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,21 +68,20 @@ import tree from "@/assets/mixins/tree"; ...@@ -49,21 +68,20 @@ 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;
...@@ -80,7 +98,7 @@ export default { ...@@ -80,7 +98,7 @@ export default {
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) => {
...@@ -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: "设备总数",
...@@ -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 @ 88af1937
...@@ -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",
......
device-manager-ui/admin/src/views/sitestat/maplist.vue
View file @ 88af1937
...@@ -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">
...@@ -89,25 +95,25 @@ export default { ...@@ -89,25 +95,25 @@ 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";
...@@ -117,16 +123,16 @@ export default { ...@@ -117,16 +123,16 @@ export default {
// }); // });
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) => {
return {
...i, ...i,
lat:i.latitude, lat: i.latitude,
lng:i.longitude, 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,11 +308,11 @@ export default { ...@@ -300,11 +308,11 @@ 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;
} }
...@@ -355,14 +363,14 @@ export default { ...@@ -355,14 +363,14 @@ export default {
.are { .are {
font-size: 12px; 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