{"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\\dormitoryManage\\electric.vue?vue&type=style&index=0&id=4da47ac4&lang=scss&scoped=true&","dependencies":[{"path":"C:\\Users\\27446\\Desktop\\up\\front\\dkha-web-sz-main\\src\\views\\modules\\dormitoryManage\\electric.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\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.left {\n\t/deep/ .el-tree {\n\t\theight: 690px;\n\t\tpadding-right: 10px;\n\t\toverflow-y: auto;\n\t}\n}\n\n.right {\n\tmargin-left: 100px;\n\tcolor: #fff;\n\n\t#electric_echarts {\n\t\twidth: 100%;\n\t\theight: 690px;\n\t}\n}\n",{"version":3,"sources":["electric.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2RA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA","file":"electric.vue","sourceRoot":"src/views/modules/dormitoryManage","sourcesContent":["<template>\n\t<el-card shadow=\"never\" class=\"aui-card--fill\">\n\t\t<el-row :gutter=\"10\">\n\t\t\t<el-col :span=\"4\">\n\t\t\t\t<div class=\"left\">\n\t\t\t\t\t<dormitory-tree ref=\"dormitoryTree\" type='electric' @treeFun=\"treeFun\"></dormitory-tree>\n\t\t\t\t</div>\n\t\t\t</el-col>\n\t\t\t<el-col :span=\"20\">\n\t\t\t\t<div class=\"right\">\n\t\t\t\t\t<el-date-picker v-model=\"dateTime\" type=\"datetimerange\" value-format=\"yyyy/MM/dd HH:mm:ss\" range-separator=\"至\"\n\t\t\t\t\t start-placeholder=\"开始日期\" end-placeholder=\"结束日期\" :clearable=\"false\">\n\t\t\t\t\t</el-date-picker>\n\t\t\t\t\t<el-button @click=\"clickSearch\" style=\"margin-left:20px\">查询</el-button>\n\t\t\t\t\t<hr>\n\t\t\t\t\t<div v-if=\"floorName==''\" style=\"font-size: 20px;text-align: center;margin-top: 24px;\">301房间</div>\n\t\t\t\t\t<div v-else style=\"font-size: 20px; text-align: center;margin-top: 24px;\">{{floorName}}房间</div>\n\t\t\t\t\t<div id=\"electric_echarts\"></div>\n\t\t\t\t</div>\n\t\t\t</el-col>\n\t\t</el-row>\n\t</el-card>\n</template>\n\n<script>\n\timport dormitoryTree from '../../../components/public/dormitory-tree'\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tdateTime: [\n\t\t\t\t\tnew Date()\n\t\t\t\t\t.toLocaleString(\"zh\", {\n\t\t\t\t\t\tyear: \"numeric\",\n\t\t\t\t\t\tmonth: \"2-digit\",\n\t\t\t\t\t\tday: \"2-digit\"\n\t\t\t\t\t})\n\t\t\t\t\t.substr(0, 10) + \" 00:00:00\",\n\t\t\t\t\tnew Date()\n\t\t\t\t\t.toLocaleString(\"zh\", {\n\t\t\t\t\t\tyear: \"numeric\",\n\t\t\t\t\t\tmonth: \"2-digit\",\n\t\t\t\t\t\tday: \"2-digit\"\n\t\t\t\t\t})\n\t\t\t\t\t.substr(0, 10) + \" 23:59:59\"\n\t\t\t\t],\n\t\t\t\ttreeValue: {\n\t\t\t\t\tdf_floorid: '',\n\t\t\t\t\tdf_type: '',\n\t\t\t\t\tdf_floorname: ''\n\t\t\t\t},\n\t\t\t\tdataForm: {\n\t\t\t\t\tstartDate: \"\",\n\t\t\t\t\tendDate: \"\",\n\t\t\t\t},\n\t\t\t\txAxisData: [],\n\t\t\t\tydata: [],\n\t\t\t\tfloorName: \"\",\n\t\t\t}\n\t\t},\n\t\tcomponents: {\n\t\t\tdormitoryTree\n\t\t},\n\t\tactivated() {\n\t\t\tconst timer = setInterval(() => {\n\t\t\t\tthis.clickSearch();\n\t\t\t}, 30000);\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\twatch: {\n\t\t\t'$store.state.user.defaultCheckedKeys': {\n\t\t\t\thandler(val) {\n\t\t\t\t\tif (val) {\n\t\t\t\t\t\tthis.clickSearchs(val);\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tdeep: true,\n\t\t\t\timmediate: true\n\t\t\t},\n\t\t},\n\t\tmethods: {\n\t\t\t//树形控件 回调函数\n\t\t\ttreeFun(val) {\n\t\t\t\tthis.treeValue = val;\n\t\t\t\tif (val.df_type != '2') {\n\t\t\t\t\treturn this.$message.info('请选择房间查看宿舍电流')\n\t\t\t\t}\n\t\t\t\tthis.floorName = val.df_floorname\n\t\t\t\tthis.clickSearch()\n\t\t\t},\n\t\t\t//搜索\n\t\t\tclickSearch() {\n\t\t\t\tif (!this.dateTime || this.dateTime.length == '0') {\n\t\t\t\t\treturn this.$message.error('请选择时间范围')\n\t\t\t\t} else if (!this.$store.state.user.defaultCheckedKeys) {\n\t\t\t\t\treturn this.$message.error('暂无楼栋数据，无法查询')\n\t\t\t\t}\n\t\t\t\tlet startDate = this.dateTime[0].replace(/\\//g, '-')\n\t\t\t\tlet endDate = this.dateTime[1].replace(/\\//g, '-')\n\t\t\t\tlet id = ''\n\t\t\t\tif (this.treeValue.df_floorid == '') {\n\t\t\t\t\tid = this.$store.state.user.defaultCheckedKeys\n\t\t\t\t} else {\n\t\t\t\t\tid = this.treeValue.df_floorid\n\t\t\t\t}\n\n\t\t\t\tthis.$http.get(`/system/sccurrenthistory/${id}/${startDate}/${endDate}`)\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\t\n\t\t\t\t\t\t// chColltime: \"2020-10-31 17:53:08\",\n\t\t\t\t\t\t// chEcurrent: 0.0424328\n\n\n\t\t\t\t\t\tlet arrData = res.data; //所有数据\n\t\t\t\t\t\tlet xData = []; //x 数据\n\t\t\t\t\t\tlet data = []; //y 数据\n\n\t\t\t\t\t\tthis.xAxisData = []\n\n\t\t\t\t\t\txData = arrData.map(item => item.chColltime.slice(11, 19))\n\t\t\t\t\t\tdata = arrData.map(item => item.chEcurrent)\n\t\t\t\t\t\tthis.ydata = data.map(item => {\n\t\t\t\t\t\t\treturn item.toFixed(2)\n\t\t\t\t\t\t})\n\t\t\t\t\t\tthis.xAxisData = xData;\n\t\t\t\t\t\tthis.electricFun()\n\t\t\t\t\t})\n\t\t\t},\n\t\t\t//搜索\n\t\t\tclickSearchs(val) {\n\t\t\t\tlet startDate = this.dateTime[0].replace(/\\//g, '-')\n\t\t\t\tlet endDate = this.dateTime[1].replace(/\\//g, '-')\n\n\t\t\t\tthis.$http.get(`/system/sccurrenthistory/${val}/${startDate}/${endDate}`)\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\n\t\t\t\t\t\tlet arrData = res.data; //所有数据\n\t\t\t\t\t\tlet xData = []; //x 数据\n\t\t\t\t\t\tlet data = []; //y 数据\n\n\t\t\t\t\t\tthis.xAxisData = []\n\n\t\t\t\t\t\txData = arrData.map(item => item.chColltime.slice(11, 19))\n\t\t\t\t\t\tdata = arrData.map(item => item.chEcurrent)\n\t\t\t\t\t\tthis.ydata = data.map(item => {\n\t\t\t\t\t\t\treturn item.toFixed(2)\n\t\t\t\t\t\t})\n\t\t\t\t\t\tthis.xAxisData = xData;\n\t\t\t\t\t\tthis.electricFun()\n\n\t\t\t\t\t})\n\t\t\t},\n\t\t\t//echarts 图表\n\t\t\telectricFun() {\n\t\t\t\tlet mycharts = this.$echarts.init(document.getElementById('electric_echarts'));\n\t\t\t\twindow.onresize = mycharts.resize;\n\t\t\t\tlet options = {\n\t\t\t\t\tdataZoom: [{\n\t\t\t\t\t\ttype: 'inside',\n\t\t\t\t\t\tstart: this.xAxisData.length < 10 ? 0 : ((this.xAxisData.length - 10) / this.xAxisData.length) * 100,\n\t\t\t\t\t\tend: 100,\n\t\t\t\t\t\tfilterMode: 'empty',\n\t\t\t\t\t\t// zoomLock:true,\n\t\t\t\t\t}],\n\t\t\t\t\ttitle: {\n\t\t\t\t\t\t//text: '监控'\n\t\t\t\t\t},\n\t\t\t\t\ttooltip: {\n\t\t\t\t\t\ttrigger: 'axis',\n\t\t\t\t\t\titemStyle: {\n\t\t\t\t\t\t\tnormal: {\n\t\t\t\t\t\t\t\tlabel: {\n\t\t\t\t\t\t\t\t\tshow: true\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\t\t\t\t\t//工具图标\n\t\t\t\t\ttoolbox: {\n\t\t\t\t\t\tshow: false,\n\t\t\t\t\t\tfeature: {\n\t\t\t\t\t\t\tmagicType: {\n\t\t\t\t\t\t\t\ttype: ['line', 'bar']\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\txAxis: {\n\t\t\t\t\t\ttype: 'category',\n\t\t\t\t\t\taxisLine: {\n\t\t\t\t\t\t\tlineStyle: {\n\t\t\t\t\t\t\t\tcolor: '#fff'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t\tdata: this.xAxisData\n\t\t\t\t\t},\n\t\t\t\t\tyAxis: {\n\t\t\t\t\t\ttype: 'value',\n\t\t\t\t\t\tname: \"电流（A）\",\n\t\t\t\t\t\taxisLine: {\n\t\t\t\t\t\t\tlineStyle: {\n\t\t\t\t\t\t\t\tcolor: '#fff'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsplitLine: { //网格线\n\t\t\t\t\t\t\tlineStyle: {\n\t\t\t\t\t\t\t\ttype: 'dashed' //设置网格线类型 dotted：虚线   solid:实线\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tshow: true //隐藏或显示\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t\tseries: [{\n\t\t\t\t\t\tname: '电流',\n\t\t\t\t\t\ttype: 'line',\n\t\t\t\t\t\tdata: this.ydata,\n\t\t\t\t\t\tlabel: {\n\t\t\t\t\t\t\tnormal: {\n\t\t\t\t\t\t\t\tshow: true,\n\t\t\t\t\t\t\t\tposition: 'top',\n\t\t\t\t\t\t\t\ttextStyle: {\n\t\t\t\t\t\t\t\t\tcolor: 'white'\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\t//对于超上限的数据用默认样式展示\n\t\t\t\t\t\tmarkPoint: {\n\t\t\t\t\t\t\titemStyle: {\n\t\t\t\t\t\t\t\tnormal: {\n\t\t\t\t\t\t\t\t\tborderColor: '#fab60c',\n\t\t\t\t\t\t\t\t\tborderWidth: 5, // 标注边线线宽，单位px，默认为1\n\t\t\t\t\t\t\t\t\tlabel: {\n\t\t\t\t\t\t\t\t\t\tshow: true\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\temphasis: {\n\t\t\t\t\t\t\t\t\tborderColor: '#fab60c',\n\t\t\t\t\t\t\t\t\tborderWidth: 5,\n\t\t\t\t\t\t\t\t\tlabel: {\n\t\t\t\t\t\t\t\t\t\tshow: true\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tdata: 20\n\t\t\t\t\t\t},\n\t\t\t\t\t\tmarkLine: {\n\t\t\t\t\t\t\tsymbol: \"none\", //去掉警戒线最后面的箭头\n\t\t\t\t\t\t\tlabel: {\n\t\t\t\t\t\t\t\tposition: \"end\", //将警示值放在哪个位置，三个值“start”,\"middle\",\"end\"  开始  中点 结束\n\t\t\t\t\t\t\t\tformatter: \"阈值线\" + this.$getDictLabel(\"electricValue\", 0)\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tdata: [{\n\t\t\t\t\t\t\t\tsilent: true, //鼠标悬停事件  true没有，false有\n\t\t\t\t\t\t\t\tlineStyle: { //警戒线的样式  ，虚实  颜色\n\t\t\t\t\t\t\t\t\ttype: \"dashes\",\n\t\t\t\t\t\t\t\t\tcolor: \"rgba(238, 99, 99)\"\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tname: '阈值线',\n\t\t\t\t\t\t\t\tyAxis: this.$getDictLabel(\"electricValue\", 0)\n\t\t\t\t\t\t\t}]\n\t\t\t\t\t\t},\n\t\t\t\t\t\tsmooth: true,\n\t\t\t\t\t}]\n\t\t\t\t}\n\t\t\t\tmycharts.setOption(options)\n\t\t\t}\n\t\t}\n\t}\n</script>\n\n<style lang=\"scss\" scoped>\n\t.left {\n\t\t/deep/ .el-tree {\n\t\t\theight: 690px;\n\t\t\tpadding-right: 10px;\n\t\t\toverflow-y: auto;\n\t\t}\n\t}\n\n\t.right {\n\t\tmargin-left: 100px;\n\t\tcolor: #fff;\n\n\t\t#electric_echarts {\n\t\t\twidth: 100%;\n\t\t\theight: 690px;\n\t\t}\n\t}\n</style>\n"]}]}