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
Show 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 @@
"build:prod": "vue-cli-service build --model prod"
},
"dependencies": {
"@tweenjs/tween.js": "^18.6.4",
"three-css2drender": "^1.0.0",
"@ampproject/remapping": "^2.2.0",
"@chenfengyuan/vue-qrcode": "^1.0.2",
"@jiaminghi/data-view": "^2.10.0",
"@riophae/vue-treeselect": "0.4.0",
"@tweenjs/tween.js": "^18.6.4",
"@vue/babel-preset-app": "^4.5.13",
"@xunlei/vue-context-menu": "^1.0.2",
"axios": "^0.18.0",
......@@ -33,7 +32,7 @@
"quill": "1.3.7",
"screenfull": "5.0.2",
"sockjs-client": "^1.5.1",
"three": "^0.152.2",
"three-css2drender": "^1.0.0",
"v-charts": "^1.17.10",
"vue": "^2.6.14",
"vue-amap": "^0.5.10",
......@@ -62,6 +61,7 @@
"sass-loader": "^7.1.0",
"script-ext-html-webpack-plugin": "2.1.5",
"svg-sprite-loader": "5.1.1",
"three": "^0.149.0",
"vue-formatter": "^0.0.8",
"vue-template-compiler": "^2.6.10"
},
......
device-manager-ui/admin/src/views/analysis/Analysis.vue
View file @ de602ec3
......@@ -62,7 +62,7 @@
</div>
</div>
<div class="center">
<three :floorArr="floorArr" lv="1"/>
<three :floorArr="floorArr" lv="1" :checkItem="checkDeviceItem"/>
</div>
<div class="right">
<div class="right-content">
......@@ -184,7 +184,7 @@ export default {
waitTime: 2000,
},
realTimeInfo: {
header: ["设备名称", "告警次数", "告警时间", "告警类型"],
header: ["设备名称", "告警次数", "告警时间", "告警类型",'设备编码'],
headerHeight: 30,
headerBGC: "#3B5A9E",
oddRowBGC: "",
......@@ -205,9 +205,12 @@ export default {
deviceFirmCollect: {}, // 设备厂家排名
alarmLevelCollect: {}, // 今日告警等级分布
deviceAlarmMapInfoList: [], // 实施告警消息
Statlist:[],//设备列表
checkDeviceItem:{}//选中设备
};
},
created() {
this.getStatlist()
this.getDevAlarm();
this.getData();
setTimeout(()=>{
......@@ -216,8 +219,10 @@ export default {
},
methods: {
// 点击设备
tabelRow(row){
console.log(row)
tabelRow(arr){
const {rowIndex} = arr
this.checkDeviceItem = this.Statlist[rowIndex]
},
// 获取今日告警设备统计
getDevAlarm() {
......@@ -247,19 +252,18 @@ export default {
this.siteDeviceAlarmCollect = siteDeviceAlarmCollect;
this.alarmLevelCollect = alarmLevelCollect;
this.deviceAlarmMapInfoList = deviceAlarmMapInfoList;
if (deviceAlarmMapInfoList.length) {
let arr = deviceAlarmMapInfoList.map((v) => {
return [
v.deviceName,
v.count,
v.alarmTime,
this.filterDevAlarmType(v.alarmType),
];
});
// if (deviceAlarmMapInfoList.length) {
// let arr = deviceAlarmMapInfoList.map((v) => {
// return [
// v.deviceName,
// v.count,
// v.alarmTime,
// this.filterDevAlarmType(v.alarmType),
// ];
// });
this.realTimeInfo = { ...this.realTimeInfo, data: arr };
}
console.log(this.deviceAlarmMapInfoList,"@@@@@@@@@@@")
// this.realTimeInfo = { ...this.realTimeInfo, data: arr };
// }
let { 直连设备, 子设备, 网关设备 } = deviceConnTypeCollect;
let { 在线, 离线, 缺纸 } = alarmTypeCollect;
let firmName = Object.keys(deviceFirmCollect).map((key) => key);
......@@ -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) {
let chartDom = document.getElementById("devTypeDis");
......
device-manager-ui/admin/src/views/analysis/components/three/three.vue
View file @ de602ec3
......@@ -5,14 +5,23 @@
<div id="alert-css2" class="three-card">
<div ref="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-c">
<p class="b">所在部门：{{ checkWind.section_name }}</p>
<p class="y">办理业务：<span v-for="(itemm, index) in checkWind.business" :key="index"
style="padding-right:5px">{{ itemm }}</span></p>
<p>设备编码:{{device.deviceName}}</p>
<p>MAC地址:{{ device.deviceCode }}</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 class="ant-popover-arrow"></div>
</div>
</div>
......@@ -101,7 +110,7 @@ class PositionGUI {
}
let bmMark = []//dom节点
export default {
props: ['lv', 'floorArr', 'winMarkeList', 'bm'],
props: ['lv', 'floorArr', 'winMarkeList', 'bm','checkItem'],//checkItem选中窗口
data() {
return {
bmkb,//便民看板
......@@ -114,24 +123,26 @@ export default {
}
},
watch: {
bm: {
checkItem:{
handler: function (str) {
// 保存节点
if (bmMark.length == 0) {
bmMark = document.querySelectorAll(".check_bm")
}
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
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 {
v.style.opacity = 0
Tips.visible = false
this._initCamera()
}
})
console.log()
},
deep: true
},
winMarkeList: {
handler: function (v) {
if (v.length > 0) {
......@@ -157,12 +168,12 @@ export default {
},
deep: true
},
lv: function (e) {
modlObj[this.floosrNum].obj.visible = false
modlObj[e].obj.visible = true
this.floosrNum = e
this.css2DOM()
},
// 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 = {}
......@@ -182,6 +193,11 @@ export default {
},
},
computed:{
device:function(){
return this.checkItem.device || {}
}
},
mounted() {
this._initTree()
// let files = require.context('', false, /.png$/).keys();
......@@ -402,21 +418,30 @@ export default {
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
console.log(objname,"#######");
// 窗口
if (/^\d_/.test(objname)) {
// 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'] = realPosition
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) {
// obj.scene.visible = false
// // obj.scene.position.y = 100
......@@ -570,50 +595,44 @@ export default {
}
.three-card {
width: 314px;
height: 73px;
margin-top: -130px;
width: 200px;
height: 241px;
margin-top: -140px;
pointer-events: none;
}
.marke {
position: absolute;
width: 314px;
width: 200px;
background: #3673c39c;
.marke-win {
height: 40px;
line-height: 40px;
background: #FFFFFF;
box-shadow: 0px 0px 8px 0px rgba(19, 43, 78, 0.3);
border-radius: 16px;
font-size: 20px;
background: #3672c3;
font-size: 14px;
font-weight: bold;
color: #F77234;
padding: 0 24px;
color: #fff;
padding: 0 12px;
box-sizing: border-box;
}
.marke-box {
border-radius: 16px;
margin-top: 4px;
padding: 12px 24px 0 24px;
background: #fff;
box-shadow: 0px 0px 8px 0px rgba(19, 43, 78, 0.3);
padding: 5px 12px 0 12px;
position: relative;
.marke-box-c {
position: relative;
z-index: 1;
background-color: #fff;
height: 100%;
padding-bottom: 12px;
}
p {
font-size: 14px;
font-weight: bold;
color: #F77234;
line-height: 30px;
font-size: 12px;
// font-weight: bold;
color: #fff;
line-height: 1.5;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
......@@ -630,17 +649,11 @@ export default {
.ant-popover-arrow {
position: absolute;
display: block;
width: 8.48528137px;
height: 8.48528137px;
background: transparent;
border-style: solid;
border-width: 8px;
transform: rotate(45deg);
width: 20px;
height: 20ox;
left: 50%;
transform: translateX(-50%) rotate(45deg);
bottom: -6px;
border-color: transparent #fff #fff transparent;
box-shadow: 3px 3px 7px rgb(0 0 0 / 7%);
margin-left: -10px;
bottom: -10;
}
}
......
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