Skip to content

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

Merge remote-tracking branch 'origin/master'

parents b05ad7e1 50cc3009
Hide whitespace changes
Inline Side-by-side
Showing with 124 additions and 84 deletions
device-manager-ui/admin/package.json
View file @ de602ec3
...@@ -10,12 +10,11 @@ ...@@ -10,12 +10,11 @@
"build:prod": "vue-cli-service build --model prod" "build:prod": "vue-cli-service build --model prod"
}, },
"dependencies": { "dependencies": {
"@tweenjs/tween.js": "^18.6.4",
"three-css2drender": "^1.0.0",
"@ampproject/remapping": "^2.2.0", "@ampproject/remapping": "^2.2.0",
"@chenfengyuan/vue-qrcode": "^1.0.2", "@chenfengyuan/vue-qrcode": "^1.0.2",
"@jiaminghi/data-view": "^2.10.0", "@jiaminghi/data-view": "^2.10.0",
"@riophae/vue-treeselect": "0.4.0", "@riophae/vue-treeselect": "0.4.0",
"@tweenjs/tween.js": "^18.6.4",
"@vue/babel-preset-app": "^4.5.13", "@vue/babel-preset-app": "^4.5.13",
"@xunlei/vue-context-menu": "^1.0.2", "@xunlei/vue-context-menu": "^1.0.2",
"axios": "^0.18.0", "axios": "^0.18.0",
...@@ -33,7 +32,7 @@ ...@@ -33,7 +32,7 @@
"quill": "1.3.7", "quill": "1.3.7",
"screenfull": "5.0.2", "screenfull": "5.0.2",
"sockjs-client": "^1.5.1", "sockjs-client": "^1.5.1",
"three": "^0.152.2", "three-css2drender": "^1.0.0",
"v-charts": "^1.17.10", "v-charts": "^1.17.10",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-amap": "^0.5.10", "vue-amap": "^0.5.10",
...@@ -62,6 +61,7 @@ ...@@ -62,6 +61,7 @@
"sass-loader": "^7.1.0", "sass-loader": "^7.1.0",
"script-ext-html-webpack-plugin": "2.1.5", "script-ext-html-webpack-plugin": "2.1.5",
"svg-sprite-loader": "5.1.1", "svg-sprite-loader": "5.1.1",
"three": "^0.149.0",
"vue-formatter": "^0.0.8", "vue-formatter": "^0.0.8",
"vue-template-compiler": "^2.6.10" "vue-template-compiler": "^2.6.10"
}, },
......
device-manager-ui/admin/src/views/analysis/Analysis.vue
View file @ de602ec3
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
</div> </div>
</div> </div>
<div class="center"> <div class="center">
<three :floorArr="floorArr" lv="1"/> <three :floorArr="floorArr" lv="1" :checkItem="checkDeviceItem"/>
</div> </div>
<div class="right"> <div class="right">
<div class="right-content"> <div class="right-content">
...@@ -184,7 +184,7 @@ export default { ...@@ -184,7 +184,7 @@ export default {
waitTime: 2000, waitTime: 2000,
}, },
realTimeInfo: { realTimeInfo: {
header: ["设备名称", "告警次数", "告警时间", "告警类型"], header: ["设备名称", "告警次数", "告警时间", "告警类型",'设备编码'],
headerHeight: 30, headerHeight: 30,
headerBGC: "#3B5A9E", headerBGC: "#3B5A9E",
oddRowBGC: "", oddRowBGC: "",
...@@ -205,9 +205,12 @@ export default { ...@@ -205,9 +205,12 @@ export default {
deviceFirmCollect: {}, // 设备厂家排名 deviceFirmCollect: {}, // 设备厂家排名
alarmLevelCollect: {}, // 今日告警等级分布 alarmLevelCollect: {}, // 今日告警等级分布
deviceAlarmMapInfoList: [], // 实施告警消息 deviceAlarmMapInfoList: [], // 实施告警消息
Statlist:[],//设备列表
checkDeviceItem:{}//选中设备
}; };
}, },
created() { created() {
this.getStatlist()
this.getDevAlarm(); this.getDevAlarm();
this.getData(); this.getData();
setTimeout(()=>{ setTimeout(()=>{
...@@ -216,8 +219,10 @@ export default { ...@@ -216,8 +219,10 @@ export default {
}, },
methods: { methods: {
// 点击设备 // 点击设备
tabelRow(row){ tabelRow(arr){
console.log(row)
const {rowIndex} = arr
this.checkDeviceItem = this.Statlist[rowIndex]
}, },
// 获取今日告警设备统计 // 获取今日告警设备统计
getDevAlarm() { getDevAlarm() {
...@@ -247,19 +252,18 @@ export default { ...@@ -247,19 +252,18 @@ export default {
this.siteDeviceAlarmCollect = siteDeviceAlarmCollect; this.siteDeviceAlarmCollect = siteDeviceAlarmCollect;
this.alarmLevelCollect = alarmLevelCollect; this.alarmLevelCollect = alarmLevelCollect;
this.deviceAlarmMapInfoList = deviceAlarmMapInfoList; this.deviceAlarmMapInfoList = deviceAlarmMapInfoList;
if (deviceAlarmMapInfoList.length) { // if (deviceAlarmMapInfoList.length) {
let arr = deviceAlarmMapInfoList.map((v) => { // let arr = deviceAlarmMapInfoList.map((v) => {
return [ // return [
v.deviceName, // v.deviceName,
v.count, // v.count,
v.alarmTime, // v.alarmTime,
this.filterDevAlarmType(v.alarmType), // this.filterDevAlarmType(v.alarmType),
]; // ];
}); // });
this.realTimeInfo = { ...this.realTimeInfo, data: arr }; // this.realTimeInfo = { ...this.realTimeInfo, data: arr };
} // }
console.log(this.deviceAlarmMapInfoList,"@@@@@@@@@@@")
let { 直连设备, 子设备, 网关设备 } = deviceConnTypeCollect; let { 直连设备, 子设备, 网关设备 } = deviceConnTypeCollect;
let { 在线, 离线, 缺纸 } = alarmTypeCollect; let { 在线, 离线, 缺纸 } = alarmTypeCollect;
let firmName = Object.keys(deviceFirmCollect).map((key) => key); let firmName = Object.keys(deviceFirmCollect).map((key) => key);
...@@ -286,6 +290,29 @@ export default { ...@@ -286,6 +290,29 @@ export default {
} }
); );
}, },
// 查询单个异常设备
getStatlist(){
this.$post("/device/alarm/info/statlist", { siteId: this.siteId }).then(res=>{
console.log(res,"@@@@@")
const {code,data} = res
if(code == 1){
this.Statlist = data || []
if (data.length) {
let arr = data.map((v) => {
return [
v.device.deviceName,
v.todayAlarmDeviceCount,
this.$moment(v.alarmTime).format('YYYY-MM-DD HH:mm'),
v.alarmTypeStr,
v.device.deviceCode
];
});
this.realTimeInfo = { ...this.realTimeInfo, data: arr };
}
}
})
},
// 获取设备类型分布图标 // 获取设备类型分布图标
getDevTypeDisEchart(direct, subset, network) { getDevTypeDisEchart(direct, subset, network) {
let chartDom = document.getElementById("devTypeDis"); let chartDom = document.getElementById("devTypeDis");
......
device-manager-ui/admin/src/views/analysis/components/three/three.vue
View file @ de602ec3
...@@ -5,14 +5,23 @@ ...@@ -5,14 +5,23 @@
<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">{{ checkWind.window_name }}-{{ checkWind.window_fromnum }}</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 class="b">所在部门：{{ checkWind.section_name }}</p> <p>设备编码:{{device.deviceName}}</p>
<p class="y">办理业务：<span v-for="(itemm, index) in checkWind.business" :key="index" <p>MAC地址:{{ device.deviceCode }}</p>
style="padding-right:5px">{{ itemm }}</span></p> <p>设备位置：{{ device.deviceName }}</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>
</div>
<div class="ant-popover-arrow">
<img src="./ycjg.png" alt="">
</div> </div>
<div class="ant-popover-arrow"></div>
</div> </div>
</div> </div>
...@@ -101,7 +110,7 @@ class PositionGUI { ...@@ -101,7 +110,7 @@ class PositionGUI {
} }
let bmMark = []//dom节点 let bmMark = []//dom节点
export default { export default {
props: ['lv', 'floorArr', 'winMarkeList', 'bm'], props: ['lv', 'floorArr', 'winMarkeList', 'bm','checkItem'],//checkItem选中窗口
data() { data() {
return { return {
bmkb,//便民看板 bmkb,//便民看板
...@@ -114,24 +123,26 @@ export default { ...@@ -114,24 +123,26 @@ export default {
} }
}, },
watch: { watch: {
bm: { checkItem:{
handler: function (str) { handler: function (str) {
// 保存节点 let winName = str.device.deviceCode
if (bmMark.length == 0) { // let winName = '7E_CE_8B_C5_35_05'
bmMark = document.querySelectorAll(".check_bm") // 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
this._initCamera()
} }
bmMark.forEach(v => {
let reg = new RegExp(`^${str}`, 'g')
if (v.dataset.name.search(reg) > -1 && v.dataset.lv == this.lv) {
v.style.opacity = 1
} else {
v.style.opacity = 0
}
})
console.log()
}, },
deep: true deep: true
}, },
winMarkeList: { winMarkeList: {
handler: function (v) { handler: function (v) {
if (v.length > 0) { if (v.length > 0) {
...@@ -157,12 +168,12 @@ export default { ...@@ -157,12 +168,12 @@ export default {
}, },
deep: true deep: true
}, },
lv: function (e) { // lv: function (e) {
modlObj[this.floosrNum].obj.visible = false // modlObj[this.floosrNum].obj.visible = false
modlObj[e].obj.visible = true // modlObj[e].obj.visible = true
this.floosrNum = e // this.floosrNum = e
this.css2DOM() // this.css2DOM()
}, // },
floorArr: { floorArr: {
handler: function (v) { handler: function (v) {
let obj = {} let obj = {}
...@@ -182,6 +193,11 @@ export default { ...@@ -182,6 +193,11 @@ export default {
}, },
}, },
computed:{
device:function(){
return this.checkItem.device || {}
}
},
mounted() { mounted() {
this._initTree() this._initTree()
// let files = require.context('', false, /.png$/).keys(); // let files = require.context('', false, /.png$/).keys();
...@@ -402,21 +418,30 @@ export default { ...@@ -402,21 +418,30 @@ export default {
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
children.forEach(element => { children.forEach(element => {
let objname = element.name let objname = element.name
console.log(objname,"#######");
// 窗口 // mac地址模型
if (/^\d_/.test(objname)) { if (objname.length > 12) {
// 获取外部模型具体点击位置 obj模型没有位置 // console.log(objname,"#######",iterator);
element.geometry.computeBoundingSphere(); try {
// 球体中心点 // console.log(objname,"#######");
let realPosition = element.geometry.boundingSphere.center; // 获取外部模型具体点击位置 obj模型没有位置
element['positions'] = realPosition element.geometry.computeBoundingSphere();
keyobj[objname] = element // 球体中心点
let realPosition = element.geometry.boundingSphere.center;
element['positions'] = JSON.parse(JSON.stringify(realPosition))
element['positions'].y = positionY
keyobj[objname] = element
} catch (error) {
}
} }
}); });
const positionY = (iterator-1) * 200
// 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
...@@ -570,50 +595,44 @@ export default { ...@@ -570,50 +595,44 @@ export default {
} }
.three-card { .three-card {
width: 314px; width: 200px;
height: 73px; height: 241px;
margin-top: -130px; margin-top: -140px;
pointer-events: none; pointer-events: none;
} }
.marke { .marke {
position: absolute; position: absolute;
width: 314px; width: 200px;
background: #3673c39c;
.marke-win { .marke-win {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
background: #FFFFFF; background: #3672c3;
box-shadow: 0px 0px 8px 0px rgba(19, 43, 78, 0.3); font-size: 14px;
border-radius: 16px;
font-size: 20px;
font-weight: bold; font-weight: bold;
color: #F77234; color: #fff;
padding: 0 24px; padding: 0 12px;
box-sizing: border-box; box-sizing: border-box;
} }
.marke-box { .marke-box {
border-radius: 16px;
margin-top: 4px; margin-top: 4px;
padding: 12px 24px 0 24px; padding: 5px 12px 0 12px;
background: #fff;
box-shadow: 0px 0px 8px 0px rgba(19, 43, 78, 0.3);
position: relative; position: relative;
.marke-box-c { .marke-box-c {
position: relative; position: relative;
z-index: 1; z-index: 1;
background-color: #fff;
height: 100%; height: 100%;
padding-bottom: 12px; padding-bottom: 12px;
} }
p { p {
font-size: 14px; font-size: 12px;
font-weight: bold; // font-weight: bold;
color: #F77234; color: #fff;
line-height: 30px; line-height: 1.5;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
...@@ -630,17 +649,11 @@ export default { ...@@ -630,17 +649,11 @@ export default {
.ant-popover-arrow { .ant-popover-arrow {
position: absolute; position: absolute;
display: block; display: block;
width: 8.48528137px; width: 20px;
height: 8.48528137px; height: 20ox;
background: transparent;
border-style: solid;
border-width: 8px;
transform: rotate(45deg);
left: 50%; left: 50%;
transform: translateX(-50%) rotate(45deg); margin-left: -10px;
bottom: -6px; bottom: -10;
border-color: transparent #fff #fff transparent;
box-shadow: 3px 3px 7px rgb(0 0 0 / 7%);
} }
} }
......
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