F
/
management
forked from zhurui/management
1
0
Fork 0
Code Pull Requests Activity
management/front/dkha-web-sz-main/node_modules/.cache/vue-loader/7313d6f2afe1efc0cd2be09f158...

1 line
52 KiB
JSON
Raw Blame History

{"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\\admin-people.vue?vue&type=script&lang=js&","dependencies":[{"path":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\src\\views\\modules\\home-cell-components\\admin-people.vue","mtime":1614735254000},{"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\\babel-loader\\lib\\index.js","mtime":499162500000},{"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 import tempWebsocket from '@/websocket/system'\n import {\n\t\tmapGetters\n\t} from \"vuex\";\n\texport default {\n mixins: [tempWebsocket],\n computed: {\n\t\t\t...mapGetters(['isFullScreen']),\n\t\t},\n\t\tprops: {\n\t\t\t//进\n\t\t\tenterTitle: {\n\t\t\t\ttype: String,\n\t\t\t\tdefault: () => {}\n\t\t\t},\n\t\t\t//出\n\t\t\tgooutTitle: {\n\t\t\t\ttype: String,\n\t\t\t\tdefault: () => {}\n\t\t\t},\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tdormitoryTotalNums: {\n\t\t\t\t\tentrantsCount: 0,\n\t\t\t\t\toutCount: 0\n\t\t\t\t},\n\t\t\t}\n },\n watch:{\n temp:{\n handler(newVal){\n if(newVal){\n this.draw1()\n this.draw2()\n this.draw3() \n }\n }\n }\n },\n\t\tmounted() {\n this.aidooreightFun()\n this.$nextTick(()=>{\n this.draw1()\n this.draw2()\n this.draw3() \n })\n \n\t\t},\n\t\tactivated() {\n\t\t\tconst timer = setInterval(() => {\n\t\t\t\tthis.aidooreightFun();\n\t\t\t}, 5000);\n\t\t\tthis.$once(\"hook:deactivated\", () => {\n\t\t\t\tclearInterval(timer)\n\t\t\t})\n\t\t\tthis.$once(\"hook:destroyed\", () => {\n\t\t\t\tclearInterval(timer)\n\t\t\t})\n\t\t},\n\t\tmethods: {\n\t\t\tdraw1() { \n\t\t\t\t// 实例化echarts对象\n let myChartDrawer = this.$echarts.init(this.$refs.myEchartone);\n let option = {\n tooltip: {\n formatter: \"{b}{c}\"\n },\n series: [{\n tooltip: {\n show: false\n },\n name: '刻度',\n type: 'gauge',\n radius: '80%',\n z: 1,\n min: 0,\n max: 1,\n center: ['50%','60%'],\n splitNumber: 5, //刻度数量\n startAngle: 210,\n endAngle: -30,\n axisLine: {\n show: true,\n lineStyle: {\n width: 5,\n color: [\n [0.12, '#70C27E'],\n [0.35, '#7AD4DF'],\n [0.63, '#FBF76B'],\n [0.8, '#F88168'],\n [1, '#E71A6D'],\n ]\n }\n }, //仪表盘轴线\n axisLabel: {\n show: false\n }, //刻度标签。\n axisTick: {\n show: true,\n lineStyle: {\n color: 'auto',\n width: 0\n },\n length: -15\n }, //刻度样式\n splitLine: {\n show: true,\n length: 0,\n lineStyle: {\n color: 'auto',\n width: 1\n }\n }, //分隔线样式\n detail: {\n show: false\n },\n pointer: {\n show: false\n }\n }, {\n name: '',\n type: 'gauge',\n radius: '80%',\n min: 0,\n max: 1,\n center: ['50%','60%'],\n data: [{\n value: this.temp.temperature/100,\n name: '温度'\n }],\n splitNumber: 10, //刻度数量\n startAngle: 210,\n endAngle: -30,\n z: 5,\n axisLine: {\n show: true,\n lineStyle: {\n width: 0,\n color: [\n [0.12, '#70C27E'],\n [0.35, '#7AD4DF'],\n [0.63, '#FBF76B'],\n [0.8, '#F88168'],\n [1, '#E71A6D'],\n ]\n }\n }, //仪表盘轴线\n axisLabel: {\n show: true,\n color: '#24D8E7',\n fontSize:10,\n distance: -30,\n formatter:function(params){\n var value = params.toFixed(2) \n if(value == 0.00){\n return '0'\n }else if(value == 1.00){\n return '100'\n }else{\n return ''\n }\n }\n }, //刻度标签。\n axisTick: {\n splitNumber: 10,\n show: true,\n lineStyle: {\n color: 'auto',\n width: 2\n },\n length: 6,\n }, //刻度样式\n splitLine: {\n show: true,\n length: 10,\n lineStyle: {\n color: 'auto',\n width: 2\n }\n }, //分隔线样式\n\n \"itemStyle\": {\n \"normal\": {\n \"color\": \"#24D8E7\" //指针颜色\n }\n },\n pointer: {\n width: 4,\n length: '60%'\n },\n detail: {\n formatter: function(params){\n return (params*100).toFixed(0) + '%'\n },\n fontSize: 50,\n color: \"transparent\",\n offsetCenter: ['0%', '-35%']\n },\n title: {\n offsetCenter: ['0', '30%'], \n fontSize: 14,\n color: \"#24D8E7\",\n show: true\n },\n }]\n };\n myChartDrawer.setOption(option);\n },\n draw2() {\n\t\t\t\t// 实例化echarts对象\n\t\t\t\tlet myChartDrawer = this.$echarts.init(this.$refs.myEchart2);\n\t\t\t\tlet option = {\n tooltip: {\n formatter: \"{b}{c}\"\n },\n series: [{\n tooltip: {\n show: false\n },\n name: '刻度',\n type: 'gauge',\n radius: '80%',\n z: 1,\n min: 0,\n max: 1,\n center: ['50%','60%'],\n splitNumber: 5, //刻度数量\n startAngle: 210,\n endAngle: -30,\n axisLine: {\n show: true,\n lineStyle: {\n width: 5,\n color: [\n [0.12, '#70C27E'],\n [0.35, '#7AD4DF'],\n [0.63, '#FBF76B'],\n [0.8, '#F88168'],\n [1, '#E71A6D'],\n ]\n }\n }, //仪表盘轴线\n axisLabel: {\n show: false\n }, //刻度标签。\n axisTick: {\n show: true,\n lineStyle: {\n color: 'auto',\n width: 0\n },\n length: -15\n }, //刻度样式\n splitLine: {\n show: true,\n length: 0,\n lineStyle: {\n color: 'auto',\n width: 1\n }\n }, //分隔线样式\n detail: {\n show: false\n },\n pointer: {\n show: false\n }\n }, {\n name: '',\n type: 'gauge',\n radius: '80%',\n min: 0,\n max: 1,\n center: ['50%','60%'],\n data: [{\n value: this.temp.humidity/100,\n name: '湿度'\n }],\n splitNumber: 10, //刻度数量\n startAngle: 210,\n endAngle: -30,\n z: 5,\n axisLine: {\n show: true,\n lineStyle: {\n width: 0,\n color: [\n [0.12, '#70C27E'],\n [0.35, '#7AD4DF'],\n [0.63, '#FBF76B'],\n [0.8, '#F88168'],\n [1, '#E71A6D'],\n ]\n }\n }, //仪表盘轴线\n axisLabel: {\n show: true,\n color: '#24D8E7',\n fontSize:10,\n distance: -30,\n formatter:function(params){\n var value = params.toFixed(2) \n if(value == 0.00){\n return '0'\n }else if(value == 1.00){\n return '100'\n }else{\n return ''\n }\n }\n }, //刻度标签。\n axisTick: {\n splitNumber: 10,\n show: true,\n lineStyle: {\n color: 'auto',\n width: 2\n },\n length: 6,\n }, //刻度样式\n splitLine: {\n show: true,\n length: 10,\n lineStyle: {\n color: 'auto',\n width: 2\n }\n }, //分隔线样式\n\n \"itemStyle\": {\n \"normal\": {\n \"color\": \"#24D8E7\" //指针颜色\n }\n },\n pointer: {\n width: 4,\n length: '60%'\n },\n detail: {\n formatter: function(params){\n return (params*100).toFixed(0) + '%'\n },\n fontSize: 50,\n color: \"transparent\",\n offsetCenter: ['0%', '-35%']\n },\n title: {\n offsetCenter: ['0', '30%'], \n fontSize: 14,\n color: \"#24D8E7\",\n show: true\n },\n }]\n };\n\t\t\t\tmyChartDrawer.setOption(option);\n },\n draw3() {\n\t\t\t\t// 实例化echarts对象\n\t\t\t\tlet myChartDrawer = this.$echarts.init(this.$refs.myEchart3);\n\t\t\t\tlet option = {\n tooltip: {\n formatter: \"{b}{c}\"\n },\n series: [{\n tooltip: {\n show: false\n },\n name: '刻度',\n type: 'gauge',\n radius: '80%',\n z: 1,\n min: 0,\n max: 3,\n center: ['50%','60%'],\n splitNumber: 5, //刻度数量\n startAngle: 210,\n endAngle: -30,\n axisLine: {\n show: true,\n lineStyle: {\n width: 5,\n color: [\n [0.12, '#70C27E'],\n [0.35, '#7AD4DF'],\n [0.63, '#FBF76B'],\n [0.8, '#F88168'],\n [1, '#E71A6D'],\n ]\n }\n }, //仪表盘轴线\n axisLabel: {\n show: false\n }, //刻度标签。\n axisTick: {\n show: true,\n lineStyle: {\n color: 'auto',\n width: 0\n },\n length: -15\n }, //刻度样式\n splitLine: {\n show: true,\n length: 0,\n lineStyle: {\n color: 'auto',\n width: 1\n }\n }, //分隔线样式\n detail: {\n show: false\n },\n pointer: {\n show: false\n }\n }, {\n name: '',\n type: 'gauge',\n radius: '80%',\n min: 0,\n max: 3,\n center: ['50%','60%'],\n data: [{\n value: this.temp.pm/100,\n name: '颗粒度'\n }],\n splitNumber: 10, //刻度数量\n startAngle: 210,\n endAngle: -30,\n z: 5,\n axisLine: {\n show: true,\n lineStyle: {\n width: 0,\n color: [\n [0.12, '#70C27E'],\n [0.35, '#7AD4DF'],\n [0.63, '#FBF76B'],\n [0.8, '#F88168'],\n [1, '#E71A6D'],\n ]\n }\n }, //仪表盘轴线\n axisLabel: {\n show: true,\n color: '#24D8E7',\n fontSize:10,\n distance: -30,\n formatter:function(params){\n var value = params.toFixed(2) \n if(value == 0.00){\n return '0'\n }else if(value == 3.00){\n return '300'\n }else{\n return ''\n }\n }\n }, //刻度标签。\n axisTick: {\n splitNumber: 10,\n show: true,\n lineStyle: {\n color: 'auto',\n width: 2\n },\n length: 6,\n }, //刻度样式\n splitLine: {\n show: true,\n length: 10,\n lineStyle: {\n color: 'auto',\n width: 2\n }\n }, //分隔线样式\n\n \"itemStyle\": {\n \"normal\": {\n \"color\": \"#24D8E7\" //指针颜色\n }\n },\n pointer: {\n width: 4,\n length: '60%'\n },\n detail: {\n formatter: function(params){\n return (params*100).toFixed(0) + '%'\n },\n fontSize: 50,\n color: \"transparent\",\n offsetCenter: ['0%', '-35%']\n },\n title: {\n offsetCenter: ['0', '30%'], \n fontSize: 14,\n color: \"#24D8E7\",\n show: true\n },\n }]\n };\n\t\t\t\tmyChartDrawer.setOption(option);\n\t\t\t},\n\t\t\t//教学楼总人数进出\n\t\t\taidooreightFun() {\n\t\t\t\tthis.$http.get('/system/index/aidooreight')\n\t\t\t\t\t.then(({\n\t\t\t\t\t\tdata: res\n\t\t\t\t\t}) => {\n\t\t\t\t\t\tif (res.code != 0) {\n\t\t\t\t\t\t\treturn this.$message.error(res.msg)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tthis.dormitoryTotalNums = res.data\n\t\t\t\t\t})\n\t\t\t},\n\t\t}\n\t}\n",{"version":3,"sources":["admin-people.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"admin-people.vue","sourceRoot":"src/views/modules/home-cell-components","sourcesContent":["<template>\n\t<div class=\"academic-building\">\n\t\t<div class=\"academic-building__title1\">\n\t\t\t<div class=\"title\" style=\"width: 210px;\">\n\t\t\t\t科研楼今日进入总人次\n\t\t\t\t<div class=\"angle-border left-top-border\"></div>\n\t\t\t\t<div class=\"angle-border right-top-border\"></div>\n\t\t\t\t<div class=\"angle-border left-bottom-border\"></div>\n\t\t\t\t<div class=\"angle-border right-bottom-border\"></div>\n\t\t\t</div>\n\t\t\t<div class=\"title\" style=\"width: 210px;margin-left: 50px;\">\n\t\t\t\t科研楼今日离开总人次\n\t\t\t\t<div class=\"angle-border left-top-border\"></div>\n\t\t\t\t<div class=\"angle-border right-top-border\"></div>\n\t\t\t\t<div class=\"angle-border left-bottom-border\"></div>\n\t\t\t\t<div class=\"angle-border right-bottom-border\"></div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"academic-building__content1\">\n\t\t\t<div style=\"width: 210px;\">\n\t\t\t\t<span style=\"font-size: 28px;cursor: pointer;\" @click=\"$router.push({path:'/statistics-accessRecord'})\">{{dormitoryTotalNums.entrantsCount}}\n\t\t\t\t</span>\n\t\t\t\t<span>人次</span>\n\t\t\t</div>\n\t\t\t<div style=\"width: 210px;margin-left: 50px;\">\n\t\t\t\t<span style=\"font-size: 28px;cursor: pointer\" @click=\"$router.push({path:'/statistics-accessRecord'})\">{{dormitoryTotalNums.outCount}}\n\t\t\t\t</span>\n\t\t\t\t<span>人次</span>\n\t\t\t</div>\n\t\t</div>\n\t\t<div :class=\"isFullScreen?'academic-building__title3':'academic-building__title2'\">\n\t\t\t<div class=\"title\" style=\"width:102px;cursor: pointer;\" @click=\"$router.push({path:'/xwyl-track',query:{url:'index'}})\">\n\t\t\t\t机房环境\n\t\t\t\t<div class=\"angle-border left-top-border\"></div>\n\t\t\t\t<div class=\"angle-border right-top-border\"></div>\n\t\t\t\t<div class=\"angle-border left-bottom-border\"></div>\n\t\t\t\t<div class=\"angle-border right-bottom-border\"></div>\n\t\t\t</div>\n\t\t</div>\n <div class=\"charts\">\n <div class=\"maps\">\n <div class=\"chart-map\" ref=\"myEchartone\"></div> \n <div class=\"imgs\">\n <img src=\"../../../assets/img/shouye/temp.png\" alt=\"\">\n <span class=\"num\" v-if=\"temp.temperature*1<$getDictLabel('envirthreshold','temperatureH')\">{{(temp.temperature*1).toFixed(2)}}&#8451;</span>\n\t\t\t\t <span class=\"num\" v-else style=\"color: red\">{{(temp.temperature*1).toFixed(2)}}&#8451;</span>\n </div>\n </div>\n <div class=\"maps\">\n <div class=\"chart-map\" ref=\"myEchart2\"></div> \n <div class=\"imgs\">\n <img src=\"../../../assets/img/shouye/humidity.png\" alt=\"\">\n <span class=\"num\" v-if=\"temp.humidity%100< $getDictLabel('envirthreshold','humidityH' )\">{{(temp.humidity * 1).toFixed(2)}}%</span>\n\t\t\t\t <span class=\"num\" v-else style=\"color: red\">{{(temp.humidity * 1).toFixed(2)}}%</span>\n </div>\n </div>\n <div class=\"maps\">\n <div class=\"chart-map\" ref=\"myEchart3\"></div> \n <div class=\"imgs\">\n <img src=\"../../../assets/img/shouye/pm.png\" alt=\"\">\n <span class=\"num\" v-if=\"temp.pm*1< $getDictLabel('envirthreshold','pmH' )\">{{(temp.pm * 1).toFixed(2)}}ug/m<sup>3</sup></span>\n <span class=\"num\" v-else style=\"color: red\">{{(temp.pm * 1).toFixed(2)}}ug/m<sup>3</sup></span>\n </div>\n </div>\n \n </div>\n\t</div>\n</template>\n\n<script>\n import tempWebsocket from '@/websocket/system'\n import {\n\t\tmapGetters\n\t} from \"vuex\";\n\texport default {\n mixins: [tempWebsocket],\n computed: {\n\t\t\t...mapGetters(['isFullScreen']),\n\t\t},\n\t\tprops: {\n\t\t\t//进\n\t\t\tenterTitle: {\n\t\t\t\ttype: String,\n\t\t\t\tdefault: () => {}\n\t\t\t},\n\t\t\t//出\n\t\t\tgooutTitle: {\n\t\t\t\ttype: String,\n\t\t\t\tdefault: () => {}\n\t\t\t},\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tdormitoryTotalNums: {\n\t\t\t\t\tentrantsCount: 0,\n\t\t\t\t\toutCount: 0\n\t\t\t\t},\n\t\t\t}\n },\n watch:{\n temp:{\n handler(newVal){\n if(newVal){\n this.draw1()\n this.draw2()\n this.draw3() \n }\n }\n }\n },\n\t\tmounted() {\n this.aidooreightFun()\n this.$nextTick(()=>{\n this.draw1()\n this.draw2()\n this.draw3() \n })\n \n\t\t},\n\t\tactivated() {\n\t\t\tconst timer = setInterval(() => {\n\t\t\t\tthis.aidooreightFun();\n\t\t\t}, 5000);\n\t\t\tthis.$once(\"hook:deactivated\", () => {\n\t\t\t\tclearInterval(timer)\n\t\t\t})\n\t\t\tthis.$once(\"hook:destroyed\", () => {\n\t\t\t\tclearInterval(timer)\n\t\t\t})\n\t\t},\n\t\tmethods: {\n\t\t\tdraw1() { \n\t\t\t\t// 实例化echarts对象\n let myChartDrawer = this.$echarts.init(this.$refs.myEchartone);\n let option = {\n tooltip: {\n formatter: \"{b}{c}\"\n },\n series: [{\n tooltip: {\n show: false\n },\n name: '刻度',\n type: 'gauge',\n radius: '80%',\n z: 1,\n min: 0,\n max: 1,\n center: ['50%','60%'],\n splitNumber: 5, //刻度数量\n startAngle: 210,\n endAngle: -30,\n axisLine: {\n show: true,\n lineStyle: {\n width: 5,\n color: [\n [0.12, '#70C27E'],\n [0.35, '#7AD4DF'],\n [0.63, '#FBF76B'],\n [0.8, '#F88168'],\n [1, '#E71A6D'],\n ]\n }\n }, //仪表盘轴线\n axisLabel: {\n show: false\n }, //刻度标签。\n axisTick: {\n show: true,\n lineStyle: {\n color: 'auto',\n width: 0\n },\n length: -15\n }, //刻度样式\n splitLine: {\n show: true,\n length: 0,\n lineStyle: {\n color: 'auto',\n width: 1\n }\n }, //分隔线样式\n detail: {\n show: false\n },\n pointer: {\n show: false\n }\n }, {\n name: '',\n type: 'gauge',\n radius: '80%',\n min: 0,\n max: 1,\n center: ['50%','60%'],\n data: [{\n value: this.temp.temperature/100,\n name: '温度'\n }],\n splitNumber: 10, //刻度数量\n startAngle: 210,\n endAngle: -30,\n z: 5,\n axisLine: {\n show: true,\n lineStyle: {\n width: 0,\n color: [\n [0.12, '#70C27E'],\n [0.35, '#7AD4DF'],\n [0.63, '#FBF76B'],\n [0.8, '#F88168'],\n [1, '#E71A6D'],\n ]\n }\n }, //仪表盘轴线\n axisLabel: {\n show: true,\n color: '#24D8E7',\n fontSize:10,\n distance: -30,\n formatter:function(params){\n var value = params.toFixed(2) \n if(value == 0.00){\n return '0'\n }else if(value == 1.00){\n return '100'\n }else{\n return ''\n }\n }\n }, //刻度标签。\n axisTick: {\n splitNumber: 10,\n show: true,\n lineStyle: {\n color: 'auto',\n width: 2\n },\n length: 6,\n }, //刻度样式\n splitLine: {\n show: true,\n length: 10,\n lineStyle: {\n color: 'auto',\n width: 2\n }\n }, //分隔线样式\n\n \"itemStyle\": {\n \"normal\": {\n \"color\": \"#24D8E7\" //指针颜色\n }\n },\n pointer: {\n width: 4,\n length: '60%'\n },\n detail: {\n formatter: function(params){\n return (params*100).toFixed(0) + '%'\n },\n fontSize: 50,\n color: \"transparent\",\n offsetCenter: ['0%', '-35%']\n },\n title: {\n offsetCenter: ['0', '30%'], \n fontSize: 14,\n color: \"#24D8E7\",\n show: true\n },\n }]\n };\n myChartDrawer.setOption(option);\n },\n draw2() {\n\t\t\t\t// 实例化echarts对象\n\t\t\t\tlet myChartDrawer = this.$echarts.init(this.$refs.myEchart2);\n\t\t\t\tlet option = {\n tooltip: {\n formatter: \"{b}{c}\"\n },\n series: [{\n tooltip: {\n show: false\n },\n name: '刻度',\n type: 'gauge',\n radius: '80%',\n z: 1,\n min: 0,\n max: 1,\n center: ['50%','60%'],\n splitNumber: 5, //刻度数量\n startAngle: 210,\n endAngle: -30,\n axisLine: {\n show: true,\n lineStyle: {\n width: 5,\n color: [\n [0.12, '#70C27E'],\n [0.35, '#7AD4DF'],\n [0.63, '#FBF76B'],\n [0.8, '#F88168'],\n [1, '#E71A6D'],\n ]\n }\n }, //仪表盘轴线\n axisLabel: {\n show: false\n }, //刻度标签。\n axisTick: {\n show: true,\n lineStyle: {\n color: 'auto',\n width: 0\n },\n length: -15\n }, //刻度样式\n splitLine: {\n show: true,\n length: 0,\n lineStyle: {\n color: 'auto',\n width: 1\n }\n }, //分隔线样式\n detail: {\n show: false\n },\n pointer: {\n show: false\n }\n }, {\n name: '',\n type: 'gauge',\n radius: '80%',\n min: 0,\n max: 1,\n center: ['50%','60%'],\n data: [{\n value: this.temp.humidity/100,\n name: '湿度'\n }],\n splitNumber: 10, //刻度数量\n startAngle: 210,\n endAngle: -30,\n z: 5,\n axisLine: {\n show: true,\n lineStyle: {\n width: 0,\n color: [\n [0.12, '#70C27E'],\n [0.35, '#7AD4DF'],\n [0.63, '#FBF76B'],\n [0.8, '#F88168'],\n [1, '#E71A6D'],\n ]\n }\n }, //仪表盘轴线\n axisLabel: {\n show: true,\n color: '#24D8E7',\n fontSize:10,\n distance: -30,\n formatter:function(params){\n var value = params.toFixed(2) \n if(value == 0.00){\n return '0'\n }else if(value == 1.00){\n return '100'\n }else{\n return ''\n }\n }\n }, //刻度标签。\n axisTick: {\n splitNumber: 10,\n show: true,\n lineStyle: {\n color: 'auto',\n width: 2\n },\n length: 6,\n }, //刻度样式\n splitLine: {\n show: true,\n length: 10,\n lineStyle: {\n color: 'auto',\n width: 2\n }\n }, //分隔线样式\n\n \"itemStyle\": {\n \"normal\": {\n \"color\": \"#24D8E7\" //指针颜色\n }\n },\n pointer: {\n width: 4,\n length: '60%'\n },\n detail: {\n formatter: function(params){\n return (params*100).toFixed(0) + '%'\n },\n fontSize: 50,\n color: \"transparent\",\n offsetCenter: ['0%', '-35%']\n },\n title: {\n offsetCenter: ['0', '30%'], \n fontSize: 14,\n color: \"#24D8E7\",\n show: true\n },\n }]\n };\n\t\t\t\tmyChartDrawer.setOption(option);\n },\n draw3() {\n\t\t\t\t// 实例化echarts对象\n\t\t\t\tlet myChartDrawer = this.$echarts.init(this.$refs.myEchart3);\n\t\t\t\tlet option = {\n tooltip: {\n formatter: \"{b}{c}\"\n },\n series: [{\n tooltip: {\n show: false\n },\n name: '刻度',\n type: 'gauge',\n radius: '80%',\n z: 1,\n min: 0,\n max: 3,\n center: ['50%','60%'],\n splitNumber: 5, //刻度数量\n startAngle: 210,\n endAngle: -30,\n axisLine: {\n show: true,\n lineStyle: {\n width: 5,\n color: [\n [0.12, '#70C27E'],\n [0.35, '#7AD4DF'],\n [0.63, '#FBF76B'],\n [0.8, '#F88168'],\n [1, '#E71A6D'],\n ]\n }\n }, //仪表盘轴线\n axisLabel: {\n show: false\n }, //刻度标签。\n axisTick: {\n show: true,\n lineStyle: {\n color: 'auto',\n width: 0\n },\n length: -15\n }, //刻度样式\n splitLine: {\n show: true,\n length: 0,\n lineStyle: {\n color: 'auto',\n width: 1\n }\n }, //分隔线样式\n detail: {\n show: false\n },\n pointer: {\n show: false\n }\n }, {\n name: '',\n type: 'gauge',\n radius: '80%',\n min: 0,\n max: 3,\n center: ['50%','60%'],\n data: [{\n value: this.temp.pm/100,\n name: '颗粒度'\n }],\n splitNumber: 10, //刻度数量\n startAngle: 210,\n endAngle: -30,\n z: 5,\n axisLine: {\n show: true,\n lineStyle: {\n width: 0,\n color: [\n [0.12, '#70C27E'],\n [0.35, '#7AD4DF'],\n [0.63, '#FBF76B'],\n [0.8, '#F88168'],\n [1, '#E71A6D'],\n ]\n }\n }, //仪表盘轴线\n axisLabel: {\n show: true,\n color: '#24D8E7',\n fontSize:10,\n distance: -30,\n formatter:function(params){\n var value = params.toFixed(2) \n if(value == 0.00){\n return '0'\n }else if(value == 3.00){\n return '300'\n }else{\n return ''\n }\n }\n }, //刻度标签。\n axisTick: {\n splitNumber: 10,\n show: true,\n lineStyle: {\n color: 'auto',\n width: 2\n },\n length: 6,\n }, //刻度样式\n splitLine: {\n show: true,\n length: 10,\n lineStyle: {\n color: 'auto',\n width: 2\n }\n }, //分隔线样式\n\n \"itemStyle\": {\n \"normal\": {\n \"color\": \"#24D8E7\" //指针颜色\n }\n },\n pointer: {\n width: 4,\n length: '60%'\n },\n detail: {\n formatter: function(params){\n return (params*100).toFixed(0) + '%'\n },\n fontSize: 50,\n color: \"transparent\",\n offsetCenter: ['0%', '-35%']\n },\n title: {\n offsetCenter: ['0', '30%'], \n fontSize: 14,\n color: \"#24D8E7\",\n show: true\n },\n }]\n };\n\t\t\t\tmyChartDrawer.setOption(option);\n\t\t\t},\n\t\t\t//教学楼总人数进出\n\t\t\taidooreightFun() {\n\t\t\t\tthis.$http.get('/system/index/aidooreight')\n\t\t\t\t\t.then(({\n\t\t\t\t\t\tdata: res\n\t\t\t\t\t}) => {\n\t\t\t\t\t\tif (res.code != 0) {\n\t\t\t\t\t\t\treturn this.$message.error(res.msg)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tthis.dormitoryTotalNums = res.data\n\t\t\t\t\t})\n\t\t\t},\n\t\t}\n\t}\n</script>\n\n<style scoped lang=\"scss\">\n\t.academic-building {\n\t\tcolor: #FFF;\n\n\t\t&__title1 {\n\t\t\tmargin-bottom: 26px;\n\t\t}\n\n\t\t&__title2 {\n\t\t\tmargin-top: 26px;\n\t\t\tmargin-bottom: 16px;\n\t\t}\n &__title3 {\n\t\t\tmargin-top: 100px;\n\t\t\tmargin-bottom: 16px;\n \n\t\t}\n\n\n\t\t&__title1,\n\t\t&__title2 {\n\t\t\tdisplay: flex;\n\t\t\t// justify-content: space-between;\n\t\t\tfont-size: 18px;\n\n\t\t\t.title {\n\t\t\t\theight: 36px;\n\t\t\t\tline-height: 36px;\n\t\t\t\tbackground-color: #133C6F;\n\t\t\t\ttext-align: center;\n\t\t\t\tposition: relative;\n\t\t\t\tcolor: #fff;\n\n\t\t\t\t.angle-border {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\twidth: 12px;\n\t\t\t\t\theight: 12px;\n\t\t\t\t}\n\n\t\t\t\t.left-top-border {\n\t\t\t\t\ttop: -6px;\n\t\t\t\t\tleft: -6px;\n\t\t\t\t\tborder-left: 1px solid #01FFFF;\n\t\t\t\t\tborder-top: 1px solid #01FFFF;\n\t\t\t\t}\n\n\t\t\t\t.right-top-border {\n\t\t\t\t\ttop: -6px;\n\t\t\t\t\tright: -6px;\n\t\t\t\t\tborder-right: 1px solid #01FFFF;\n\t\t\t\t\tborder-top: 1px solid #01FFFF;\n\t\t\t\t}\n\n\t\t\t\t.left-bottom-border {\n\t\t\t\t\tbottom: -6px;\n\t\t\t\t\tleft: -6px;\n\t\t\t\t\tborder-left: 1px solid #01FFFF;\n\t\t\t\t\tborder-bottom: 1px solid #01FFFF;\n\t\t\t\t}\n\n\t\t\t\t.right-bottom-border {\n\t\t\t\t\tbottom: -6px;\n\t\t\t\t\tright: -6px;\n\t\t\t\t\tborder-right: 1px solid #01FFFF;\n\t\t\t\t\tborder-bottom: 1px solid #01FFFF;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__content1 {\n\t\t\tdisplay: flex;\n\t\t\t// justify-content: space-between;\n\t\t\talign-items: center;\n\t\t\theight: 40px;\n\n\t\t\t&>div {\n\t\t\t\twidth: 210px;\n\t\t\t}\n\t\t}\n .charts{\n display: flex;\n .maps{\n width: 100%;\n height: 100%;\n .chart-map {\n width: 180px;\n height: 150px; \n }\n .imgs{\n width: 180px;\n text-align: center;\n .num{\n display: inline-block;\n font-size: 20px;\n margin-left: 14px;\n } \n }\n \n } \n }\n\t\t\n\t}\n</style>\n"]}]}
View Git Blame Copy Permalink