{"remainingRequest":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\src\\views\\modules\\home-cell-components\\academic-sensors.vue?vue&type=style&index=0&id=3606789d&scoped=true&lang=scss&","dependencies":[{"path":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\src\\views\\modules\\home-cell-components\\academic-sensors.vue","mtime":1614735254000},{"path":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\node_modules\\sass-loader\\lib\\loader.js","mtime":1533139052000},{"path":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.sensors {\n\tposition: relative;\n\n\t.title {\n\t\tfont-size: 18px;\n\t\tline-height: 36px;\n\t\tbackground-color: #133C6F;\n\t\twidth: 210px;\n\t\ttext-align: center;\n\t\tposition: relative;\n\t\tcolor: #fff;\n\t\tmargin-bottom: 20px;\n\n\t\t.angle-border {\n\t\t\tposition: absolute;\n\t\t\twidth: 12px;\n\t\t\theight: 12px;\n\t\t}\n\n\t\t.left-top-border {\n\t\t\ttop: -6px;\n\t\t\tleft: -6px;\n\t\t\tborder-left: 1px solid #01FFFF;\n\t\t\tborder-top: 1px solid #01FFFF;\n\t\t}\n\n\t\t.right-top-border {\n\t\t\ttop: -6px;\n\t\t\tright: -6px;\n\t\t\tborder-right: 1px solid #01FFFF;\n\t\t\tborder-top: 1px solid #01FFFF;\n\t\t}\n\n\t\t.left-bottom-border {\n\t\t\tbottom: -6px;\n\t\t\tleft: -6px;\n\t\t\tborder-left: 1px solid #01FFFF;\n\t\t\tborder-bottom: 1px solid #01FFFF;\n\t\t}\n\n\t\t.right-bottom-border {\n\t\t\tbottom: -6px;\n\t\t\tright: -6px;\n\t\t\tborder-right: 1px solid #01FFFF;\n\t\t\tborder-bottom: 1px solid #01FFFF;\n\t\t}\n\t}\n\n\t.floor-list {\n\t\tdisplay: flex;\n\t\tlist-style-type: none;\n\t\tmargin: 0 0 10px 0;\n\t\tpadding: 0;\n\t\tcolor: #FFF;\n\n\t\t// white-space: nowrap;\n\t\t// height: 30px;\n\t\tli {\n\t\t\t// display: inline-block;\n\t\t\t// min-width: 60px;\n\t\t\tpadding: 0 15px;\n\t\t\tmargin-right: 10px;\n\t\t\t// width:60px;\n\t\t\ttext-align: center;\n\t\t\tcursor: pointer;\n\t\t\theight: 30px;\n\t\t\tline-height: 30px;\n\t\t\tbackground: #133C6F;\n\n\t\t\t&.active {\n\t\t\t\tbackground: green;\n\t\t\t}\n\t\t\t&.actives {\n\t\t\t\tbackground: red;\n\t\t\t}\n\t\t}\n\t}\n\n\t.floor-map {\n\t\tposition: relative;\n\n\t\t.el-image {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t.environment-icon {\n\t\t\tposition: absolute;\n\t\t\twidth: 24px;\n\t\t\theight: 24px;\n\t\t\ttransform: translate(-50%, -50%);\n\t\t}\n\t}\n}\n",{"version":3,"sources":["academic-sensors.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+IA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"academic-sensors.vue","sourceRoot":"src/views/modules/home-cell-components","sourcesContent":["<template>\n\t<div class=\"sensors\">\n\t\t<div class=\"title\" style=\"width:102px;\">\n\t\t\t设备报警\n\t\t\t<div class=\"angle-border left-top-border\"></div>\n\t\t\t<div class=\"angle-border right-top-border\"></div>\n\t\t\t<div class=\"angle-border left-bottom-border\"></div>\n\t\t\t<div class=\"angle-border right-bottom-border\"></div>\n\t\t</div>\n\t\t<!-- 滚动条备选样式 -->\n\t\t<!-- <el-scrollbar vertical=\"horizontal\" style=\"width:484px;height:40px;\"> -->\n\t\t<ul class=\"floor-list\">\n\t\t\t<li v-for=\"(item,index) in floorList\" :key=\"index\" :class=\"[activeName==item.df_floorname?'active':'',item.type==true?'actives':'']\" @click=\"changeFloor(item)\">{{item.df_floorname}}</li>\n\t\t</ul>\n\t\t<!-- </el-scrollbar> -->\n\t\t<div class=\"floor-map\">\n\t\t\t<el-image :style=\"isFullScreen?'height:400px':'height:100%'\" :src=\"require('@/assets/img/map/floor-'+activeName+'.png')\" fit=\"contain\"></el-image>\n\t\t\t<el-popover :popper-class=\"item.isSendAlarm=='true'?'environment-popover environment-popover-danger':'environment-popover'\"\n\t\t\t v-for=\"(item,index) in warningList\" :key=\"index\" placement=\"top\" width=\"210\" trigger=\"hover\">\n\t\t\t\t<p class=\"title\">{{item.devicename}}</p>\n\t\t\t\t<div v-if=\"item.isOffdevice=='false'\">\n\t\t\t\t\t<p :class=\"item.istemperatureAlarm=='true'?'danger':''\" class=\"temperature\">温度：{{(item.temperature*1).toFixed(2)}}℃</p>\n\t\t\t\t\t<p :class=\"item.ishumidityAlarm=='true'?'danger':''\" class=\"humidity\">湿度：{{(item.humidity*1).toFixed(2)}}%</p>\n\t\t\t\t\t<p :class=\"item.ispmAlarm=='true'?'danger':''\" class=\"graininess\">PM2.5细颗粒物：{{item.pm}}</p>\n\t\t\t\t</div>\n\t\t\t\t<p v-else>离线</p>\n\t\t\t\t<!-- 离线 -->\n\t\t\t\t<el-image class=\"environment-icon\" :style=\"{left:item.coordinate[0],top:item.coordinate[1]}\" slot=\"reference\" :src=\"item|filterIcon\"></el-image>\n\t\t\t</el-popover>\n\t\t</div>\n\n\t</div>\n</template>\n\n<script>\n\timport {\n\t\tmapGetters\n\t} from 'vuex'\n\texport default {\n\t\tfilters: {\n\t\t\t// 根据状态返回对应状态的icon\n\t\t\tfilterIcon(data) {\n\t\t\t\tlet icon = 'normal.png';\n\t\t\t\tif (data.isOffdevice == 'true') {\n\t\t\t\t\ticon = 'offline.png';\n\t\t\t\t} else if (data.isSendAlarm == 'true') {\n\t\t\t\t\ticon = 'abnormal.png'\n\t\t\t\t}\n\t\t\t\treturn require('@/assets/home/' + icon)\n\t\t\t}\n\t\t},\n\t\tcomputed: {\n\t\t\t...mapGetters(['environmentList','isFullScreen']),\n\t\t\twarningList() {\n\t\t\t\treturn this.environmentList.filter(item => {\n\t\t\t\t\treturn item.floorAddr[1] == this.activeId\n\t\t\t\t})\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tactiveName: '1f',\n\t\t\t\tactiveNames: '',\n\t\t\t\tactiveNameArr: [],\n\t\t\t\tactiveId: '',\n\t\t\t\tfloorList: [], //楼层列表\n\t\t\t}\n\t\t},\n\t\twatch: {\n\t\t\t// 监听环境传感器报警数据改变\n\t\t\tenvironmentList: {\n\t\t\t\tdeep: true,\n\t\t\t\thandler(newData) {\n\t\t\t\t\tif (newData.length > 0) {\n\t\t\t\t\t\t// 是否有报警设备  优先显示\n\t\t\t\t\t\tlet warn = newData.filter(item => item.isSendAlarm == 'true');\n\t\t\t\t\t\tif (warn.length > 0) {\n\t\t\t\t\t\t\tlet floorId = warn[0].floorAddr[1];\n\t\t\t\t\t\t\t获取最新报警数据相关信息\n\t\t\t\t\t\t\tlet list = this.floorList;\n\t\t\t\t\t\t\t//根据查找最新报警设备所在楼层切换显示报警数据\n\t\t\t\t\t\t\tfor (let i = 0; i < list.length; i++) {\n\t\t\t\t\t\t\t\tif (floorId == list[i].df_floorid) {\n\t\t\t\t\t\t\t\t\tlet arr=[]\n\t\t\t\t\t\t\t\t\tarr.push(list[i].df_floorname);\n\t\t\t\t\t\t\t\t\tthis.activeNameArr=Array.from(new Set(arr))\n\t\t\t\t\t\t\t\t\tthis.activeNameArr.forEach(item=>{\n\t\t\t\t\t\t\t\t\t\tthis.floorList.forEach(val=>{\n\t\t\t\t\t\t\t\t\t\t\tif(item == val.df_floorname){\n\t\t\t\t\t\t\t\t\t\t\t\tval.type=true\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\tthis.activeId = list[i].df_floorid;\n\t\t\t\t\t\t\t\t\tbreak\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tcreated() {\n\t\t\tthis.getBuildingFloors();\t\t\t\n\t\t},\n\t\tmethods: {\n\t\t\tchangeFloor(item) {\n\t\t\t\tthis.activeName = item.df_floorname;\n\t\t\t\tthis.floorList.forEach(val=>{\n\t\t\t\t\tif(val.type == item.type){\n\t\t\t\t\t\titem.type=false\n\t\t\t\t\t}\n\t\t\t\t})\t\n\t\t\t\tthis.activeId = item.df_floorid;\n\t\t\t},\n\t\t\tgetBuildingFloors() {\n\t\t\t\t// 获取教学楼楼层信息 // id   -1全部  0学生宿舍  1教师宿舍  2教学楼\n\t\t\t\tthis.$http({\n\t\t\t\t\tmethod: \"get\",\n\t\t\t\t\turl: '/system/scdormitoryfloor/tree/2'\n\t\t\t\t}).then(({\n\t\t\t\t\tdata: res\n\t\t\t\t}) => {\n\t\t\t\t\tif (res.code != 0) {\n\t\t\t\t\t\treturn this.$message(res.msg)\n\t\t\t\t\t}\n\t\t\t\t\tlet arrs = res.data.filter(item => item.df_parentid != \"0\");\n\t\t\t\t\tthis.floorList=arrs.map(item=>{\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...item,\n\t\t\t\t\t\t\ttype:false\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t\t// 默认显示第一个楼层\n\t\t\t\t\tthis.activeName = this.floorList[0].df_floorname\n\t\t\t\t\tthis.activeId = this.floorList[0].df_floorid\n\t\t\t\t})\n\t\t\t},\n\t\t}\n\t}\n</script>\n<style scoped lang=\"scss\">\n\t.sensors {\n\t\tposition: relative;\n\n\t\t.title {\n\t\t\tfont-size: 18px;\n\t\t\tline-height: 36px;\n\t\t\tbackground-color: #133C6F;\n\t\t\twidth: 210px;\n\t\t\ttext-align: center;\n\t\t\tposition: relative;\n\t\t\tcolor: #fff;\n\t\t\tmargin-bottom: 20px;\n\n\t\t\t.angle-border {\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 12px;\n\t\t\t\theight: 12px;\n\t\t\t}\n\n\t\t\t.left-top-border {\n\t\t\t\ttop: -6px;\n\t\t\t\tleft: -6px;\n\t\t\t\tborder-left: 1px solid #01FFFF;\n\t\t\t\tborder-top: 1px solid #01FFFF;\n\t\t\t}\n\n\t\t\t.right-top-border {\n\t\t\t\ttop: -6px;\n\t\t\t\tright: -6px;\n\t\t\t\tborder-right: 1px solid #01FFFF;\n\t\t\t\tborder-top: 1px solid #01FFFF;\n\t\t\t}\n\n\t\t\t.left-bottom-border {\n\t\t\t\tbottom: -6px;\n\t\t\t\tleft: -6px;\n\t\t\t\tborder-left: 1px solid #01FFFF;\n\t\t\t\tborder-bottom: 1px solid #01FFFF;\n\t\t\t}\n\n\t\t\t.right-bottom-border {\n\t\t\t\tbottom: -6px;\n\t\t\t\tright: -6px;\n\t\t\t\tborder-right: 1px solid #01FFFF;\n\t\t\t\tborder-bottom: 1px solid #01FFFF;\n\t\t\t}\n\t\t}\n\n\t\t.floor-list {\n\t\t\tdisplay: flex;\n\t\t\tlist-style-type: none;\n\t\t\tmargin: 0 0 10px 0;\n\t\t\tpadding: 0;\n\t\t\tcolor: #FFF;\n\n\t\t\t// white-space: nowrap;\n\t\t\t// height: 30px;\n\t\t\tli {\n\t\t\t\t// display: inline-block;\n\t\t\t\t// min-width: 60px;\n\t\t\t\tpadding: 0 15px;\n\t\t\t\tmargin-right: 10px;\n\t\t\t\t// width:60px;\n\t\t\t\ttext-align: center;\n\t\t\t\tcursor: pointer;\n\t\t\t\theight: 30px;\n\t\t\t\tline-height: 30px;\n\t\t\t\tbackground: #133C6F;\n\n\t\t\t\t&.active {\n\t\t\t\t\tbackground: green;\n\t\t\t\t}\n\t\t\t\t&.actives {\n\t\t\t\t\tbackground: red;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.floor-map {\n\t\t\tposition: relative;\n\n\t\t\t.el-image {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t.environment-icon {\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 24px;\n\t\t\t\theight: 24px;\n\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t}\n\t\t}\n\t}\n</style>\n<style lang=\"scss\">\n\tbody {\n\t\t.environment-popover {\n\t\t\tcolor: #fff;\n\n\t\t\t// background: #1154FF;\n\t\t\t// .popper__arrow{\n\t\t\t// \t&::after{\n\t\t\t// \t\tborder-top-color: #1154FF!important;\n\t\t\t// \t}\n\t\t\t// }\n\t\t\t&.environment-popover-danger {\n\t\t\t\tp {\n\t\t\t\t\t&.danger {\n\t\t\t\t\t\tanimation: evironmentdanger 0.8s linear;\n\t\t\t\t\t\tanimation-iteration-count: infinite;\n\t\t\t\t\t\tanimation-direction: alternate;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tp {\n\t\t\t\tmargin: 5px 0;\n\t\t\t\tpadding: 0;\n\t\t\t\tline-height: 1;\n\t\t\t\tanimation-fill-mode: both;\n\n\t\t\t\t&.title {\n\t\t\t\t\tfont-size: 18px;\n\t\t\t\t}\n\n\t\t\t}\n\t\t}\n\t}\n\n\t@keyframes evironmentdanger {\n\t\t0% {\n\t\t\tcolor: #fff;\n\t\t}\n\n\t\t100% {\n\t\t\tcolor: red;\n\t\t}\n\t}\n</style>\n"]}]}