3 лет назад · f6d695f1a2
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,23 @@
 
				+.DS_Store
			
 
				+node_modules
			
 
				+/dist
			
 
				+
			
 
				+
			
 
				+# local env files
			
 
				+.env.local
			
 
				+.env.*.local
			
 
				+
			
 
				+# Log files
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.idea
			
 
				+.vscode
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,5 @@
 
				+module.exports = {
			
 
				+  presets: [
			
 
				+    '@vue/cli-plugin-babel/preset'
			
 
				+  ]
			
 
				+}
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,35 @@
 
				+{
			
 
				+  "name": "community_dinner",
			
 
				+  "version": "0.1.0",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "serve": "vue-cli-service serve",
			
 
				+    "build": "vue-cli-service build"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "axios": "^1.4.0",
			
 
				+    "core-js": "^3.6.5",
			
 
				+    "echarts": "^5.4.2",
			
 
				+    "element-plus": "^2.3.4",
			
 
				+    "element-ui": "^2.15.13",
			
 
				+    "jsencrypt": "^3.3.2",
			
 
				+    "vue": "^2.6.11",
			
 
				+    "vue-router": "^3.2.0",
			
 
				+    "vuex": "^3.4.0"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@vue/cli-plugin-babel": "~4.5.14",
			
 
				+    "@vue/cli-plugin-router": "~4.5.14",
			
 
				+    "@vue/cli-plugin-vuex": "~4.5.14",
			
 
				+    "@vue/cli-service": "~4.5.14",
			
 
				+    "less-loader": "^5.0.0",
			
 
				+    "sass": "^1.26.5",
			
 
				+    "sass-loader": "^8.0.2",
			
 
				+    "vue-template-compiler": "^2.6.11"
			
 
				+  },
			
 
				+  "browserslist": [
			
 
				+    "> 1%",
			
 
				+    "last 2 versions",
			
 
				+    "not dead"
			
 
				+  ]
			
 
				+}
			
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="">
			
 
				+  <head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
			
 
				+    <title><%= htmlWebpackPlugin.options.title %></title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <noscript>
			
 
				+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			
 
				+    </noscript>
			
 
				+    <div id="app"></div>
			
 
				+    <!-- built files will be auto injected -->
			
 
				+  </body>
			
 
				+</html>
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,32 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <div id="nav">
			
 
				+      <!-- <router-link to="/">index</router-link> |
			
 
				+      <router-link to="/about">About</router-link> -->
			
 
				+    </div>
			
 
				+    <router-view/>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<style lang="scss">
			
 
				+#app {
			
 
				+  font-family: Avenir, Helvetica, Arial, sans-serif;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+  text-align: center;
			
 
				+  color: #2c3e50;
			
 
				+}
			
 
				+
			
 
				+#nav {
			
 
				+  // padding: 30px;
			
 
				+
			
 
				+  a {
			
 
				+    font-weight: bold;
			
 
				+    color: #2c3e50;
			
 
				+
			
 
				+    &.router-link-exact-active {
			
 
				+      color: #42b983;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/assets/centerBottom/background.png
+++ b/src/assets/centerBottom/background.png
--- a/src/assets/centerBottom/moimg.png
+++ b/src/assets/centerBottom/moimg.png
--- a/src/assets/centerTop/background.png
+++ b/src/assets/centerTop/background.png
--- a/src/assets/centerTop/blueBg.png
+++ b/src/assets/centerTop/blueBg.png
--- a/src/assets/centerTop/redBg.png
+++ b/src/assets/centerTop/redBg.png
--- a/src/assets/centerTop/titleimg.png
+++ b/src/assets/centerTop/titleimg.png
--- a/src/assets/fonts/font.css
+++ b/src/assets/fonts/font.css
@@ -0,0 +1,8 @@
 
				+@font-face {

			
 
				+    /* 重命名字体名 */

			
 
				+    font-family: '优设标题黑';

			
 
				+    /* 引入字体 */

			
 
				+    src: url('./优设标题黑.ttf');

			
 
				+    font-weight: normal;

			
 
				+    font-style: normal;

			
 
				+  }
			
--- a/src/assets/fonts/优设标题黑.ttf
+++ b/src/assets/fonts/优设标题黑.ttf
--- a/src/assets/index/background.png
+++ b/src/assets/index/background.png
--- a/src/assets/index/juxing.png
+++ b/src/assets/index/juxing.png
--- a/src/assets/index/loginbg.png
+++ b/src/assets/index/loginbg.png
--- a/src/assets/index/logo.png
+++ b/src/assets/index/logo.png
--- a/src/assets/index/out.png
+++ b/src/assets/index/out.png
--- a/src/assets/index/title_icon.png
+++ b/src/assets/index/title_icon.png
--- a/src/assets/js/echart.js
+++ b/src/assets/js/echart.js
@@ -0,0 +1,20 @@
 
				+import * as echarts from "echarts/core";

			
 
				+

			
 
				+// 引入折线图、饼状图、柱状图

			
 
				+import { LineChart, PieChart, BarChart } from "echarts/charts";

			
 
				+

			
 
				+// 引入提示框、标题、直角坐标系、数据集、内置数据转换器组件

			
 
				+import {

			
 
				+  TitleComponent,

			
 
				+  TooltipComponent,

			
 
				+  GridComponent,

			
 
				+  DatasetComponent,

			
 
				+  TransformComponent,

			
 
				+  LegendComponent,

			
 
				+} from "echarts/components";

			
 
				+// 标签自动布局，全局过渡动画等特性

			
 
				+import { LabelLayout, UniversalTransition } from "echarts/features";

			
 
				+

			
 
				+echarts.use([LineChart, PieChart, BarChart, TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, LegendComponent, LabelLayout, UniversalTransition]);

			
 
				+

			
 
				+export default echarts;

			
--- a/src/assets/leftBottom/background.png
+++ b/src/assets/leftBottom/background.png
--- a/src/assets/leftcenter/background.png
+++ b/src/assets/leftcenter/background.png
--- a/src/assets/lefttop/background.png
+++ b/src/assets/lefttop/background.png
--- a/src/assets/lefttop/dianfei.png
+++ b/src/assets/lefttop/dianfei.png
--- a/src/assets/lefttop/dianliang.png
+++ b/src/assets/lefttop/dianliang.png
--- a/src/assets/lefttop/shuifei.png
+++ b/src/assets/lefttop/shuifei.png
--- a/src/assets/lefttop/shuiliang.png
+++ b/src/assets/lefttop/shuiliang.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/rightBottom/background.png
+++ b/src/assets/rightBottom/background.png
--- a/src/assets/rightBottom/tongji.png
+++ b/src/assets/rightBottom/tongji.png
--- a/src/assets/rightCenter/background.png
+++ b/src/assets/rightCenter/background.png
--- a/src/assets/rightTop/background.png
+++ b/src/assets/rightTop/background.png
--- a/src/assets/rightTop/guisu.png
+++ b/src/assets/rightTop/guisu.png
--- a/src/assets/style/border.css
+++ b/src/assets/style/border.css
@@ -0,0 +1,182 @@
 
				+@charset "utf-8";

			
 
				+.border,

			
 
				+.border-top,

			
 
				+.border-right,

			
 
				+.border-bottom,

			
 
				+.border-left,

			
 
				+.border-topbottom,

			
 
				+.border-rightleft,

			
 
				+.border-topleft,

			
 
				+.border-rightbottom,

			
 
				+.border-topright,

			
 
				+.border-bottomleft {

			
 
				+    position: relative;

			
 
				+}

			
 
				+.border::before,

			
 
				+.border-top::before,

			
 
				+.border-right::before,

			
 
				+.border-bottom::before,

			
 
				+.border-left::before,

			
 
				+.border-topbottom::before,

			
 
				+.border-topbottom::after,

			
 
				+.border-rightleft::before,

			
 
				+.border-rightleft::after,

			
 
				+.border-topleft::before,

			
 
				+.border-topleft::after,

			
 
				+.border-rightbottom::before,

			
 
				+.border-rightbottom::after,

			
 
				+.border-topright::before,

			
 
				+.border-topright::after,

			
 
				+.border-bottomleft::before,

			
 
				+.border-bottomleft::after {

			
 
				+    content: "\0020";

			
 
				+    overflow: hidden;

			
 
				+    position: absolute;

			
 
				+}

			
 
				+/* border

			
 
				+ * 因，边框是由伪元素区域遮盖在父级

			
 
				+ * 故，子级若有交互，需要对子级设置

			
 
				+ * 定位 及 z轴

			
 
				+ */

			
 
				+.border::before {

			
 
				+    box-sizing: border-box;

			
 
				+    top: 0;

			
 
				+    left: 0;

			
 
				+    height: 100%;

			
 
				+    width: 100%;

			
 
				+    border: 1px solid #eaeaea;

			
 
				+    transform-origin: 0 0;

			
 
				+}

			
 
				+.border-top::before,

			
 
				+.border-bottom::before,

			
 
				+.border-topbottom::before,

			
 
				+.border-topbottom::after,

			
 
				+.border-topleft::before,

			
 
				+.border-rightbottom::after,

			
 
				+.border-topright::before,

			
 
				+.border-bottomleft::before {

			
 
				+    left: 0;

			
 
				+    width: 100%;

			
 
				+    height: 1px;

			
 
				+}

			
 
				+.border-right::before,

			
 
				+.border-left::before,

			
 
				+.border-rightleft::before,

			
 
				+.border-rightleft::after,

			
 
				+.border-topleft::after,

			
 
				+.border-rightbottom::before,

			
 
				+.border-topright::after,

			
 
				+.border-bottomleft::after {

			
 
				+    top: 0;

			
 
				+    width: 1px;

			
 
				+    height: 100%;

			
 
				+}

			
 
				+.border-top::before,

			
 
				+.border-topbottom::before,

			
 
				+.border-topleft::before,

			
 
				+.border-topright::before {

			
 
				+    border-top: 1px solid #eaeaea;

			
 
				+    transform-origin: 0 0;

			
 
				+}

			
 
				+.border-right::before,

			
 
				+.border-rightbottom::before,

			
 
				+.border-rightleft::before,

			
 
				+.border-topright::after {

			
 
				+    border-right: 1px solid #eaeaea;

			
 
				+    transform-origin: 100% 0;

			
 
				+}

			
 
				+.border-bottom::before,

			
 
				+.border-topbottom::after,

			
 
				+.border-rightbottom::after,

			
 
				+.border-bottomleft::before {

			
 
				+    border-bottom: 1px solid #eaeaea;

			
 
				+    transform-origin: 0 100%;

			
 
				+}

			
 
				+.border-left::before,

			
 
				+.border-topleft::after,

			
 
				+.border-rightleft::after,

			
 
				+.border-bottomleft::after {

			
 
				+    border-left: 1px solid #eaeaea;

			
 
				+    transform-origin: 0 0;

			
 
				+}

			
 
				+.border-top::before,

			
 
				+.border-topbottom::before,

			
 
				+.border-topleft::before,

			
 
				+.border-topright::before {

			
 
				+    top: 0;

			
 
				+}

			
 
				+.border-right::before,

			
 
				+.border-rightleft::after,

			
 
				+.border-rightbottom::before,

			
 
				+.border-topright::after {

			
 
				+    right: 0;

			
 
				+}

			
 
				+.border-bottom::before,

			
 
				+.border-topbottom::after,

			
 
				+.border-rightbottom::after,

			
 
				+.border-bottomleft::after {

			
 
				+    bottom: 0;

			
 
				+}

			
 
				+.border-left::before,

			
 
				+.border-rightleft::before,

			
 
				+.border-topleft::after,

			
 
				+.border-bottomleft::before {

			
 
				+    left: 0;

			
 
				+}

			
 
				+@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {

			
 
				+    /* 默认值，无需重置 */

			
 
				+}

			
 
				+@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {

			
 
				+    .border::before {

			
 
				+        width: 200%;

			
 
				+        height: 200%;

			
 
				+        transform: scale(.5);

			
 
				+    }

			
 
				+    .border-top::before,

			
 
				+    .border-bottom::before,

			
 
				+    .border-topbottom::before,

			
 
				+    .border-topbottom::after,

			
 
				+    .border-topleft::before,

			
 
				+    .border-rightbottom::after,

			
 
				+    .border-topright::before,

			
 
				+    .border-bottomleft::before {

			
 
				+        transform: scaleY(.5);

			
 
				+    }

			
 
				+    .border-right::before,

			
 
				+    .border-left::before,

			
 
				+    .border-rightleft::before,

			
 
				+    .border-rightleft::after,

			
 
				+    .border-topleft::after,

			
 
				+    .border-rightbottom::before,

			
 
				+    .border-topright::after,

			
 
				+    .border-bottomleft::after {

			
 
				+        transform: scaleX(.5);

			
 
				+    }

			
 
				+}

			
 
				+@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {

			
 
				+    .border::before {

			
 
				+        width: 300%;

			
 
				+        height: 300%;

			
 
				+        transform: scale(.33333);

			
 
				+    }

			
 
				+    .border-top::before,

			
 
				+    .border-bottom::before,

			
 
				+    .border-topbottom::before,

			
 
				+    .border-topbottom::after,

			
 
				+    .border-topleft::before,

			
 
				+    .border-rightbottom::after,

			
 
				+    .border-topright::before,

			
 
				+    .border-bottomleft::before {

			
 
				+        transform: scaleY(.33333);

			
 
				+    }

			
 
				+    .border-right::before,

			
 
				+    .border-left::before,

			
 
				+    .border-rightleft::before,

			
 
				+    .border-rightleft::after,

			
 
				+    .border-topleft::after,

			
 
				+    .border-rightbottom::before,

			
 
				+    .border-topright::after,

			
 
				+    .border-bottomleft::after {

			
 
				+        transform: scaleX(.33333);

			
 
				+    }

			
 
				+}

			
--- a/src/assets/style/reset.css
+++ b/src/assets/style/reset.css
@@ -0,0 +1,25 @@
 
				+@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}

			
 
				+body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}

			
 
				+body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}

			
 
				+h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}

			
 
				+h1,h2,h3,h4,h5,h6{font-family:"微软雅黑",tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}

			
 
				+h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}

			
 
				+address,cite,dfn,em,i,optgroup,var{font-style:normal}

			
 
				+table{border-collapse:collapse;border-spacing:0;text-align:left}

			
 
				+caption,th{text-align:inherit}

			
 
				+ul,ol,menu{list-style:none}

			
 
				+fieldset,img{border:0}

			
 
				+img,object,input,textarea,button,select{vertical-align:middle}

			
 
				+article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}

			
 
				+audio,canvas,video{display:inline-block;*display:inline;*zoom:1}

			
 
				+blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}

			
 
				+textarea{overflow:auto;resize:vertical}

			
 
				+input,textarea,button,select,a{outline:0 none;border: none;}

			
 
				+button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}

			
 
				+mark{background-color:transparent}

			
 
				+a,ins,s,u,del{text-decoration:none}

			
 
				+sup,sub{vertical-align:baseline}

			
 
				+html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}

			
 
				+body {font-family: "Microsoft Yahei", Arial,"Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}

			
 
				+hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}

			
 
				+a {color: #25a4bb;text-decoration: none;}

			
--- a/src/common/js/fns.js
+++ b/src/common/js/fns.js
@@ -0,0 +1,33 @@
 
				+// 引入加密解密库
			
 
				+import JSEncrypt from 'jsencrypt'
			
 
				+ 
			
 
				+// 引入RSA密钥
			
 
				+import rsaKeys from '../../store/rsaKeys.js';
			
 
				+ 
			
 
				+ 
			
 
				+ 
			
 
				+ 
			
 
				+// RSA加密
			
 
				+function rsaEncode (content) {
			
 
				+	content = String(content);
			
 
				+	const encryptor = new JSEncrypt();
			
 
				+	encryptor.setPublicKey(rsaKeys.rsaPublicKey);
			
 
				+	return encryptor.encrypt(content);
			
 
				+}
			
 
				+ 
			
 
				+ 
			
 
				+// RSA解密
			
 
				+function rsaDecode (content) {
			
 
				+	const encryptor = new JSEncrypt();
			
 
				+	encryptor.setPublicKey(rsaKeys.rsaPrivateKey);
			
 
				+	return encryptor.decrypt(content);
			
 
				+}
			
 
				+ 
			
 
				+ 
			
 
				+ 
			
 
				+// 输出为 函数合集
			
 
				+export default {
			
 
				+	// 加密解密
			
 
				+	rsaEncode,
			
 
				+	rsaDecode,
			
 
				+}
			
--- a/src/components/centerTop.vue
+++ b/src/components/centerTop.vue
@@ -0,0 +1,208 @@
 
				+<template>
			
 
				+  <div class="cointan">
			
 
				+    <!-- 领导 -->
			
 
				+    <div v-if="lingdao">
			
 
				+      <div class="titleimg"></div>
			
 
				+      <div class="lintitle">
			
 
				+        <span class="scroll_span2" v-if="gun">{{ title }}</span>
			
 
				+        <span class="scroll_span1" id="scroll_span1" v-else>{{ title }}</span>
			
 
				+      </div>
			
 
				+      <div class="bigqu2">
			
 
				+        <div class="red_bg2" v-for="(item,index) in 4" :key="index">
			
 
				+          <div class="rentype" style="margin-top:30px">人员类型：<span style="color:rgba(67, 207, 124, 1)">VIP人员</span></div>
			
 
				+          <div class="renzhuang" style="margin-top:66px">正常通行</div>
			
 
				+          <img class="renImg" src="../assets/centerBottom/moimg.png" style="margin-top:129px">
			
 
				+          <div class="renname" style="margin-top:253px">XXX</div>
			
 
				+          <div class="rentime" style="margin-top:291px">2023-05-16<br/>15:20:20</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <!-- 陌生人 -->
			
 
				+    <div class="bigqu" v-else>
			
 
				+      <div class="red_bg" v-for="(item,index) in moList" :key="index">
			
 
				+        <div class="rentype">人员类型：<span style="color:rgba(67, 207, 124, 1)">{{item.personnelType}}</span></div>
			
 
				+        <div class="renzhuang">禁止通行</div>
			
 
				+        <img class="renImg" :src="item.captureImg" :preview-src-list="[item.captureImg,'']">
			
 
				+        <div class="renname">{{item.name}}</div>
			
 
				+        <div class="rentime" v-if="item.cmpTime!=''">{{item.cmpTime.slice(0,10)}}<br/>{{item.cmpTime.slice(11,19)}}</div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'centerTop',
			
 
				+  data() {
			
 
				+    return {
			
 
				+      lingdao:false,
			
 
				+      title:'欢迎各位领导莅临南昌交通学院参观指导！',
			
 
				+      gun:true,
			
 
				+      moList:[],//陌生人
			
 
				+      build:'',//楼栋
			
 
				+      token:'',//请求头token
			
 
				+    }
			
 
				+  },
			
 
				+  props: {
			
 
				+    msg: String
			
 
				+  },
			
 
				+  created(){
			
 
				+    
			
 
				+  },
			
 
				+  mounted(){
			
 
				+    this.token=sessionStorage.getItem('token')
			
 
				+    this.build=sessionStorage.getItem('build')
			
 
				+    if(this.title.length>19){
			
 
				+      this.gun=false
			
 
				+    }else{
			
 
				+      this.gun=true
			
 
				+    }
			
 
				+    if(this.lingdao){
			
 
				+
			
 
				+    }else{
			
 
				+      this.getMosheng()
			
 
				+    }
			
 
				+  },
			
 
				+  methods:{
			
 
				+    //陌生人
			
 
				+    getMosheng(){
			
 
				+      this.moList=[]
			
 
				+      this.$axios.get('/auto/contrast-failure/list?build='+this.build.split(",")[0]+'-'+this.build.split(",")[1]+'学生公寓',
			
 
				+      {
			
 
				+        headers: {
			
 
				+        "token": this.token,
			
 
				+        },
			
 
				+      }
			
 
				+      ).then(res => {
			
 
				+        if (res.data.success) {
			
 
				+          var shuzu=res.data.data.records
			
 
				+          // 横坐标时间
			
 
				+          shuzu.forEach(data => {
			
 
				+            this.moList.push(data)
			
 
				+          })
			
 
				+        }
			
 
				+      })
			
 
				+    },
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->
			
 
				+<style scoped lang="scss">
			
 
				+.cointan{
			
 
				+  width: 885px;
			
 
				+  height: 484px;
			
 
				+  background-image: url('../assets/centerTop/background.png');
			
 
				+  background-size: 100%;
			
 
				+}
			
 
				+// 整体区域  陌生人
			
 
				+.bigqu{
			
 
				+  position: absolute;
			
 
				+  margin: 58px 0 0 11px;
			
 
				+  width: 893px;
			
 
				+  height: 390px;
			
 
				+  display: flex;
			
 
				+}
			
 
				+.red_bg{
			
 
				+  margin-left: 28px;
			
 
				+  width: 180px;
			
 
				+  height: 390px;
			
 
				+  background-image: url('../assets/centerTop/redBg.png');
			
 
				+  background-size: 100%;
			
 
				+}
			
 
				+.rentype{
			
 
				+  position: absolute;
			
 
				+  margin: 40px 0 0 0px;
			
 
				+  width: 180px;
			
 
				+  text-align: center;
			
 
				+  font-size: 16px;
			
 
				+  font-weight: 900;
			
 
				+  color: rgba(255, 255, 255, 1);
			
 
				+}
			
 
				+.renzhuang{
			
 
				+  position: absolute;
			
 
				+  margin: 86px 0 0 0px;
			
 
				+  width: 180px;
			
 
				+  text-align: center;
			
 
				+  font-size: 20px;
			
 
				+  font-weight: 900;
			
 
				+  color: rgba(242, 36, 36, 1);
			
 
				+}
			
 
				+.renImg{
			
 
				+  position: absolute;
			
 
				+  margin: 153px 0 0 -44px;
			
 
				+  width: 94px;
			
 
				+  height: 94px;
			
 
				+  border-radius: 50%;
			
 
				+}
			
 
				+.renname{
			
 
				+  position: absolute;
			
 
				+  margin: 283px 0 0 50px;
			
 
				+  width: 85px;
			
 
				+  text-align: center;
			
 
				+  font-size: 20px;
			
 
				+  font-weight: 900;
			
 
				+  color: rgba(242, 36, 36, 1);
			
 
				+}
			
 
				+.rentime{
			
 
				+  position: absolute;
			
 
				+  margin: 321px 0 0 50px;
			
 
				+  width: 85px;
			
 
				+  text-align: center;
			
 
				+  font-size: 14px;
			
 
				+  font-weight: 400;
			
 
				+  line-height: 24px;
			
 
				+  color: rgba(255, 255, 255, 1);
			
 
				+}
			
 
				+// 领导
			
 
				+.lintitle{
			
 
				+  position: absolute;
			
 
				+  margin: 22px 0 0 98px;
			
 
				+  width: 738px;
			
 
				+  font-size: 42px;
			
 
				+  font-weight: 400;
			
 
				+  line-height: 55px;
			
 
				+  color: rgba(28, 255, 251, 1);
			
 
				+  font-family : '优设标题黑';
			
 
				+  white-space: nowrap; /*文字不折行*/
			
 
				+  overflow: hidden; /*文字溢出隐藏*/
			
 
				+}
			
 
				+.titleimg{
			
 
				+  position: absolute;
			
 
				+  margin: 32px 0 0 43px;
			
 
				+  width: 38px;
			
 
				+  height: 38px;
			
 
				+  background-image: url('../assets/centerTop/titleimg.png');
			
 
				+  background-size: 100%;
			
 
				+}
			
 
				+.lintitle .scroll_span1 {
			
 
				+  display: inline-block;
			
 
				+  white-space: nowrap;
			
 
				+  /*inline样式不能使用动画*/
			
 
				+  animation: scroll 10s linear infinite; /*滚动动画*/
			
 
				+}
			
 
				+
			
 
				+@keyframes scroll {
			
 
				+  from {
			
 
				+    transform: translateX(738px); /*div多宽就写多宽*/
			
 
				+  }
			
 
				+
			
 
				+  to {
			
 
				+    transform: translateX(-100%);
			
 
				+  }
			
 
				+}
			
 
				+.bigqu2{
			
 
				+  position: absolute;
			
 
				+  margin: 95px 0 0 11px;
			
 
				+  width: 893px;
			
 
				+  height: 360px;
			
 
				+  display: flex;
			
 
				+}
			
 
				+.red_bg2{
			
 
				+  margin-left: 28px;
			
 
				+  width: 180px;
			
 
				+  height: 360px;
			
 
				+  background-image: url('../assets/centerTop/blueBg.png');
			
 
				+  background-size: 100%;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/centerbuttom.vue
+++ b/src/components/centerbuttom.vue
@@ -0,0 +1,203 @@
 
				+<template>
			
 
				+  <div class="cointan">
			
 
				+    <div class="title1">
			
 
				+      <img src="../assets/index/title_icon.png" style="width:22px;height:22px;float: left;">
			
 
				+      <div style="margin-left:25px;line-height: 22px;">宿舍出入人员信息</div>
			
 
				+    </div>
			
 
				+    <!-- 选择选项 -->
			
 
				+    <div class="xuanchu">出</div>
			
 
				+    <div class="xuanru">入</div>
			
 
				+    <!-- 展示时间 -->
			
 
				+    <div class="sushe_san"></div>
			
 
				+    <div class="sushe">{{date}}</div>
			
 
				+    <!-- 滚动 -->
			
 
				+    <el-carousel trigger="click" height="240px" style="height: 240px;width: 830px;margin: 67px 0 0 19px;">
			
 
				+      <el-carousel-item v-for="(list,index) in studentList" :key="index">
			
 
				+        <div class="gun"> 
			
 
				+          <div class="mokuai" v-for="(item,index2) in list" :key="index2">
			
 
				+            <img class="moimg" :src="item.pictureUrl">
			
 
				+            <div class="moyuan">入</div>
			
 
				+            <div class="moname">{{item.name}}</div>
			
 
				+            <div class="motime">15:25:26</div>
			
 
				+            <div class="mobanji">电子信息23届（1）班</div>
			
 
				+            <div class="modidian">{{item.address}}</div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </el-carousel-item>
			
 
				+    </el-carousel>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'centerButtom',
			
 
				+  data() {
			
 
				+    return {
			
 
				+      studentList:[],//进出人员
			
 
				+      date:new Date().toISOString().slice(0, 10),//当前日期
			
 
				+      build:'',//楼栋
			
 
				+      token:'',//请求头token
			
 
				+    }
			
 
				+  },
			
 
				+  props: {
			
 
				+    msg: String
			
 
				+  },
			
 
				+  created(){
			
 
				+    
			
 
				+  },
			
 
				+  mounted(){
			
 
				+    this.token=sessionStorage.getItem('token')
			
 
				+    this.build=sessionStorage.getItem('build')
			
 
				+    this.getJinchu()
			
 
				+  },
			
 
				+  methods:{
			
 
				+    //进出人员
			
 
				+    getJinchu(){
			
 
				+      this.studentList=[]
			
 
				+      this.$axios.get('/auto/face-recognition/list?build='+this.build.split(",")[0]+'-'+this.build.split(",")[1]+'学生公寓进门&date=2023-06-15',
			
 
				+      // +this.date,
			
 
				+      {
			
 
				+        headers: {
			
 
				+        "token": this.token,
			
 
				+        },
			
 
				+      }
			
 
				+      ).then(res => {
			
 
				+        if (res.data.success) {
			
 
				+          // 宿舍进出人员数据
			
 
				+          res.data.data.forEach(data => {
			
 
				+            this.studentList.push(data)
			
 
				+          })
			
 
				+          console.log(this.studentList)
			
 
				+
			
 
				+          let newDataList = []
			
 
				+          let current = 0
			
 
				+          if(this.studentList && this.studentList.length>0){
			
 
				+            for(let i=0;i<=this.studentList.length-1;i++){
			
 
				+              if(i%5 !== 0 || i === 0 ){
			
 
				+                if(!newDataList[current]){
			
 
				+                  newDataList.push([this.studentList[i]])
			
 
				+                }else{
			
 
				+                  newDataList[current].push(this.studentList[i])
			
 
				+                }
			
 
				+              }else{
			
 
				+                current++
			
 
				+                newDataList.push([this.studentList[i]])
			
 
				+              }
			
 
				+            }
			
 
				+          }
			
 
				+          this.studentList = [...newDataList]
			
 
				+        }
			
 
				+      })
			
 
				+    },
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->
			
 
				+<style scoped lang="scss">
			
 
				+.cointan{
			
 
				+  width: 885px;
			
 
				+  height: 309px;
			
 
				+  background-image: url('../assets/centerBottom/background.png');
			
 
				+  background-size: 100%;
			
 
				+}
			
 
				+.title1{
			
 
				+  position: absolute;
			
 
				+  margin: 9px 0 0 10px;
			
 
				+  font-size: 20px;
			
 
				+  font-family : '优设标题黑';
			
 
				+  color: rgba(255, 255, 255, 1);
			
 
				+  font-weight: 400;
			
 
				+}
			
 
				+// 选择选项
			
 
				+.xuanchu{
			
 
				+  position: absolute;
			
 
				+  margin: 44px 0 0 643px;
			
 
				+  font-size: 14px;
			
 
				+  font-weight: 500;
			
 
				+  color: rgba(255, 255, 255, 1);
			
 
				+}
			
 
				+.xuanru{
			
 
				+  position: absolute;
			
 
				+  margin: 44px 0 0 685px;
			
 
				+  font-size: 14px;
			
 
				+  font-weight: 500;
			
 
				+  color: rgba(255, 255, 255, 1);
			
 
				+}
			
 
				+// 展示时间
			
 
				+.sushe_san{
			
 
				+	position: absolute;
			
 
				+	margin: 46px 0 0 745px;
			
 
				+	border:6px solid transparent;
			
 
				+	border-left-color: rgba(0, 218, 216, 1);
			
 
				+}
			
 
				+.sushe{
			
 
				+  position: absolute;
			
 
				+	margin: 44px 0 0 759px;
			
 
				+  font-size: 14px;
			
 
				+  font-weight: 400;
			
 
				+  color: rgba(0, 218, 216, 1);
			
 
				+}
			
 
				+// 走马灯滚动
			
 
				+.gun{
			
 
				+  position: absolute;
			
 
				+  margin: 10px 0 0 0px;
			
 
				+  width: 815px;
			
 
				+  height: 225px;
			
 
				+  display: flex;
			
 
				+}
			
 
				+.mokuai{
			
 
				+  margin-left: 20px;
			
 
				+  width: 145px;
			
 
				+  height: 205px;
			
 
				+  border: 1px solid rgba(56, 105, 110, 1);
			
 
				+  font-size: 12px;
			
 
				+  font-weight: 500;
			
 
				+  color: rgba(255, 255, 255, 1);
			
 
				+}
			
 
				+.moimg{
			
 
				+  position: absolute;
			
 
				+  width: 141px;
			
 
				+  height: 112px;
			
 
				+  margin-left: -70px;
			
 
				+}
			
 
				+.moyuan{
			
 
				+  position: absolute;
			
 
				+	margin: -10px 0 0 133px;
			
 
				+  width: 20px;
			
 
				+  background: rgba(0, 218, 216, 1);
			
 
				+  border-radius: 50%;
			
 
				+  font-size: 14px;
			
 
				+  font-weight: 700;
			
 
				+  line-height: 20px;
			
 
				+  color: rgba(255, 255, 255, 1);
			
 
				+  text-align: center;
			
 
				+}
			
 
				+.moname{
			
 
				+  position: absolute;
			
 
				+	margin: 120px 0 0 0px;
			
 
				+  width: 145px;
			
 
				+  text-align: center;
			
 
				+  font-size: 16px;
			
 
				+  font-weight: 900;
			
 
				+  color: rgba(0, 218, 216, 1);
			
 
				+}
			
 
				+.motime{
			
 
				+  position: absolute;
			
 
				+	margin: 148px 0 0 0px;
			
 
				+  width: 145px;
			
 
				+  text-align: center;
			
 
				+}
			
 
				+.mobanji{
			
 
				+  position: absolute;
			
 
				+	margin: 165px 0 0 0px;
			
 
				+  width: 145px;
			
 
				+  text-align: center;
			
 
				+}
			
 
				+.modidian{
			
 
				+  position: absolute;
			
 
				+	margin: 182px 0 0 0px;
			
 
				+  width: 145px;
			
 
				+  text-align: center;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/leftButtom.vue
+++ b/src/components/leftButtom.vue
@@ -0,0 +1,190 @@
 
				+<template>
			
 
				+  <div class="cointan">
			
 
				+    <div class="title1">
			
 
				+      <img src="../assets/index/title_icon.png" style="width:22px;height:22px;float: left;">
			
 
				+      <div style="margin-left:25px;line-height: 22px;">近30日出归人员统计</div>
			
 
				+    </div>
			
 
				+    <!-- 柱状图 -->
			
 
				+    <div class="chart" ref="chart"></div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'leftButtom',
			
 
				+  data() {
			
 
				+    return {
			
 
				+      tongTime:[],//统计的横坐标时间
			
 
				+      tongNum:[],//出归人数
			
 
				+      build:'',//楼栋
			
 
				+      token:'',//请求头token
			
 
				+    }
			
 
				+  },
			
 
				+  props: {
			
 
				+    msg: String
			
 
				+  },
			
 
				+  created(){
			
 
				+    
			
 
				+  },
			
 
				+  mounted(){
			
 
				+    this.token=sessionStorage.getItem('token')
			
 
				+    this.build=sessionStorage.getItem('build')
			
 
				+    this.getchugui()
			
 
				+  },
			
 
				+  methods:{
			
 
				+    //近30天出归人员统计
			
 
				+    getchugui(){
			
 
				+      this.tongTime=[]
			
 
				+      this.tongNum=[]
			
 
				+      this.$axios.get('/auto/face-recognition/statistics?build='+this.build.split(",")[0]+'-'+this.build.split(",")[1],
			
 
				+      {
			
 
				+        headers: {
			
 
				+        "token": this.token,
			
 
				+        },
			
 
				+      }
			
 
				+      ).then(res => {
			
 
				+        if (res.data.success) {
			
 
				+          var shuzu=(res.data.data).reverse()
			
 
				+          // 横坐标时间
			
 
				+          shuzu.forEach(data => {
			
 
				+            this.tongTime.push(data.date.slice(5,10))
			
 
				+          })
			
 
				+          //纵坐标出归人数
			
 
				+          shuzu.forEach(data => {
			
 
				+            this.tongNum.push(data.count)
			
 
				+          })
			
 
				+          this.getEchartData()
			
 
				+        }
			
 
				+      })
			
 
				+    },
			
 
				+    // 30日出归人员
			
 
				+    getEchartData() {
			
 
				+      let _this = this;
			
 
				+      const chart = this.$refs.chart;
			
 
				+      var option = null;
			
 
				+      const myChart = this.$echarts.init(chart);
			
 
				+      option = {
			
 
				+        color: ['#00DAD8', '#00FF96'],
			
 
				+        title: {
			
 
				+          text: ''
			
 
				+        },
			
 
				+        tooltip: {
			
 
				+          trigger: 'axis',
			
 
				+          axisPointer: {
			
 
				+            type: 'cross',
			
 
				+            label: {
			
 
				+              backgroundColor: '#0FEBFF'
			
 
				+            }
			
 
				+          }
			
 
				+        },
			
 
				+        grid: {
			
 
				+          left: '1%',
			
 
				+          right: '8%',
			
 
				+          bottom: '2%',
			
 
				+          containLabel: true
			
 
				+        },
			
 
				+        xAxis: [
			
 
				+          {
			
 
				+            name:'日',
			
 
				+            nameTextStyle: {
			
 
				+              color: "#FFFFFF",
			
 
				+            },
			
 
				+            axisLabel: {
			
 
				+              show: true,
			
 
				+              fontSize: 12,
			
 
				+              color: "#FFFFFF",//人数的颜色
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              show: true,
			
 
				+              lineStyle: {
			
 
				+                color: "#2E3F44", 
			
 
				+              },
			
 
				+            },
			
 
				+            type: 'category',
			
 
				+            data: this.tongTime
			
 
				+          }
			
 
				+        ],
			
 
				+        yAxis: [
			
 
				+          {
			
 
				+            name:'人',
			
 
				+            nameTextStyle: {
			
 
				+              color: "#FFFFFF",
			
 
				+            },
			
 
				+            axisLabel: {
			
 
				+              show: true,
			
 
				+              fontSize: 12,
			
 
				+              color: "#FFFFFF",
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+              lineStyle: {
			
 
				+                color: "#FFFFFF",
			
 
				+              },
			
 
				+            },
			
 
				+            splitLine: {
			
 
				+              show: true,
			
 
				+              lineStyle: {
			
 
				+              type: [5, 10],
			
 
				+              dashOffset: 5,
			
 
				+              color:'#606060'
			
 
				+            }
			
 
				+            },
			
 
				+            type: 'value'
			
 
				+          }
			
 
				+        ],
			
 
				+        series: [
			
 
				+          {
			
 
				+            name: '人员统计',
			
 
				+            type: 'bar',
			
 
				+            barWidth: "3",
			
 
				+            data: this.tongNum
			
 
				+          },
			
 
				+        ]
			
 
				+      };
			
 
				+      myChart.setOption(option);
			
 
				+
			
 
				+      myChart.off("click");
			
 
				+
			
 
				+      myChart.on("click", function (params) {
			
 
				+        // console.log(params);
			
 
				+        _this.$emit("openPop");
			
 
				+      });
			
 
				+
			
 
				+      window.addEventListener("resize", function () {
			
 
				+        myChart.resize();
			
 
				+      });
			
 
				+      this.$on("hook:destroyed", () => {
			
 
				+        window.removeEventListener("resize", function () {
			
 
				+          chart.resize();
			
 
				+        });
			
 
				+      });
			
 
				+      return option;
			
 
				+    },
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->
			
 
				+<style scoped lang="scss">
			
 
				+.cointan{
			
 
				+  width: 428px;
			
 
				+  height: 349px;
			
 
				+  background-image: url('../assets/leftBottom/background.png');
			
 
				+  background-size: 100%;
			
 
				+}
			
 
				+.title1{
			
 
				+  position: absolute;
			
 
				+  margin: 9px 0 0 10px;
			
 
				+  font-size: 20px;
			
 
				+  font-family : '优设标题黑';
			
 
				+  color: rgba(255, 255, 255, 1);
			
 
				+  font-weight: 400;
			
 
				+}
			
 
				+// 柱状图
			
 
				+.chart{
			
 
				+  position: absolute;
			
 
				+  margin: 50px 0 0 20px;
			
 
				+  width: 390px;
			
 
				+  height: 278px;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/leftCenter.vue
+++ b/src/components/leftCenter.vue
@@ -0,0 +1,276 @@
 
				+<template>
			
 
				+  <div class="cointan">
			
 
				+    <div class="title1">
			
 
				+      <img src="../assets/index/title_icon.png" style="width:22px;height:22px;float: left;">
			
 
				+      <div style="margin-left:25px;line-height: 22px;">近半年水电能耗统计</div>
			
 
				+    </div>
			
 
				+    <!-- 区域图 -->
			
 
				+    <div class="chart" ref="chart"></div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'leftCenter',
			
 
				+  data() {
			
 
				+    return {
			
 
				+      nengTime:[],//能耗时间
			
 
				+      electHao:[],//用电
			
 
				+      waterHao:[],//用水
			
 
				+      build:'',//楼栋
			
 
				+      token:'',//请求头token
			
 
				+    }
			
 
				+  },
			
 
				+  props: {
			
 
				+    msg: String
			
 
				+  },
			
 
				+  created(){
			
 
				+    
			
 
				+  },
			
 
				+  mounted(){
			
 
				+    this.token=sessionStorage.getItem('token')
			
 
				+    this.build=sessionStorage.getItem('build')
			
 
				+    this.getnenghao()
			
 
				+  },
			
 
				+  methods:{
			
 
				+    //近半年能耗
			
 
				+    getnenghao(){
			
 
				+      this.nengTime=[]
			
 
				+      this.electHao=[]
			
 
				+      this.waterHao=[]
			
 
				+      this.$axios.get('/auto/cold-water/all?build='+this.build.split(",")[0]+'栋&build='+this.build.split(",")[1]+'栋',
			
 
				+      {
			
 
				+        headers: {
			
 
				+        "token": this.token,
			
 
				+        },
			
 
				+      }
			
 
				+      ).then(res => {
			
 
				+        if (res.data.success) {
			
 
				+          var shuzu=(res.data.data).reverse()
			
 
				+          // 横坐标时间
			
 
				+          shuzu.forEach(data => {
			
 
				+            this.nengTime.push(data.dateTime)
			
 
				+          })
			
 
				+          // 用电
			
 
				+          shuzu.forEach(data => {
			
 
				+            this.electHao.push(data.electricTotalPower)
			
 
				+          })
			
 
				+          // 用水
			
 
				+          shuzu.forEach(data => {
			
 
				+            this.waterHao.push(data.coldWaterTotalPower)
			
 
				+          })
			
 
				+          this.getEchartData()
			
 
				+        }
			
 
				+      })
			
 
				+    },
			
 
				+    // 用电用水
			
 
				+    getEchartData() {
			
 
				+      let _this = this;
			
 
				+      const chart = this.$refs.chart;
			
 
				+      var option = null;
			
 
				+      const myChart = this.$echarts.init(chart);
			
 
				+      option = {
			
 
				+        color: ['#00E0DB', '#43BAFF'],
			
 
				+        title: {
			
 
				+          text: ''
			
 
				+        },
			
 
				+        tooltip: {
			
 
				+          trigger: 'axis',
			
 
				+          axisPointer: {
			
 
				+            type: 'cross',
			
 
				+            label: {
			
 
				+              backgroundColor: '#0FEBFF'
			
 
				+            }
			
 
				+          }
			
 
				+        },
			
 
				+        legend: {
			
 
				+          type:'scroll',
			
 
				+          data: ['用电', '用水'],
			
 
				+          textStyle:{
			
 
				+            color:'#FFFFFF',
			
 
				+            fontSize:12,
			
 
				+          },
			
 
				+          // left: 460, //图例位置（可设置top,bottom,left,right）
			
 
				+          icon:'roundRect',//图形样式
			
 
				+          // itemHeight: 11, //修改icon图形大小
			
 
				+          // itemWidth:11,//图例图标的宽度
			
 
				+        },
			
 
				+        grid: {
			
 
				+          left: '1%',
			
 
				+          right: '1%',
			
 
				+          bottom: '2%',
			
 
				+          containLabel: true
			
 
				+        },
			
 
				+        xAxis: [
			
 
				+          {
			
 
				+            axisLabel: {
			
 
				+              show: true,
			
 
				+              height: 19,
			
 
				+              fontSize: 12,
			
 
				+              color: "#FFFFFF",//人数的颜色
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              show: true,
			
 
				+              lineStyle: {
			
 
				+                color: "#2E3F44", 
			
 
				+              },
			
 
				+            },
			
 
				+            type: 'category',
			
 
				+            boundaryGap: false,
			
 
				+            data: this.nengTime
			
 
				+          }
			
 
				+        ],
			
 
				+        yAxis: [
			
 
				+          {
			
 
				+            alignTicks: true,
			
 
				+            name:'单位：kw/h',
			
 
				+            nameTextStyle: {
			
 
				+              color: "#00E0DB",
			
 
				+            },
			
 
				+            axisLabel: {
			
 
				+              show: true,
			
 
				+              height: 19,
			
 
				+              fontSize: 12,
			
 
				+              color: "#FFFFFF",
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+              lineStyle: {
			
 
				+                color: "#FFFFFF",
			
 
				+              },
			
 
				+            },
			
 
				+            splitLine: {
			
 
				+              show: true,
			
 
				+              lineStyle: {
			
 
				+                type: [5, 10],
			
 
				+                dashOffset: 5,
			
 
				+                color:'#606060'
			
 
				+              }
			
 
				+            },
			
 
				+            type: 'value'
			
 
				+          },
			
 
				+          {
			
 
				+            name:'单位：t',
			
 
				+            nameTextStyle: {
			
 
				+              color: "#00E0DB",
			
 
				+            },
			
 
				+            axisLine: {
			
 
				+              show: false,
			
 
				+            },
			
 
				+            type: 'value',
			
 
				+            position: 'right',
			
 
				+            alignTicks: true,
			
 
				+            axisLabel: {
			
 
				+              show: true,
			
 
				+              height: 19,
			
 
				+              fontSize: 12,
			
 
				+              color: "#FFFFFF",
			
 
				+            },
			
 
				+            splitLine: {
			
 
				+              show: true,
			
 
				+              lineStyle: {
			
 
				+                type: [5, 10],
			
 
				+                dashOffset: 5,
			
 
				+                color:'#606060'
			
 
				+              }
			
 
				+            },
			
 
				+          }
			
 
				+        ],
			
 
				+        series: [
			
 
				+          {
			
 
				+            name: '用电',
			
 
				+            type: 'line',
			
 
				+            // stack: 'Total',
			
 
				+            smooth: true,
			
 
				+            yAxisIndex: 0,
			
 
				+            showSymbol: false,
			
 
				+            areaStyle: {
			
 
				+              opacity: 0.8,
			
 
				+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
			
 
				+                {
			
 
				+                  offset: 0,
			
 
				+                  color: 'rgba(19, 255, 231, 1)'
			
 
				+                },
			
 
				+                {
			
 
				+                  offset: 1,
			
 
				+                  color: 'rgba(19, 255, 231, 0)'
			
 
				+                }
			
 
				+              ])
			
 
				+            },
			
 
				+            emphasis: {
			
 
				+              focus: 'series'
			
 
				+            },
			
 
				+            data: this.electHao
			
 
				+          },{
			
 
				+            name: '用水',
			
 
				+            type: 'line',
			
 
				+            // stack: 'Total',
			
 
				+            smooth: true,
			
 
				+            yAxisIndex: 1,
			
 
				+            showSymbol: false,
			
 
				+            areaStyle: {
			
 
				+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
			
 
				+                {
			
 
				+                  offset: 0,
			
 
				+                  color: 'rgba(48, 97, 192, 1)'
			
 
				+                },
			
 
				+                {
			
 
				+                  offset: 1,
			
 
				+                  color: 'rgba(48, 97, 192, 0)'
			
 
				+                }
			
 
				+              ])
			
 
				+            },
			
 
				+            emphasis: {
			
 
				+              focus: 'series'
			
 
				+            },
			
 
				+            data: this.waterHao
			
 
				+          },
			
 
				+        ]
			
 
				+      };
			
 
				+      myChart.setOption(option);
			
 
				+
			
 
				+      myChart.off("click");
			
 
				+
			
 
				+      myChart.on("click", function (params) {
			
 
				+        // console.log(params);
			
 
				+        _this.$emit("openPop");
			
 
				+      });
			
 
				+
			
 
				+      window.addEventListener("resize", function () {
			
 
				+        myChart.resize();
			
 
				+      });
			
 
				+      this.$on("hook:destroyed", () => {
			
 
				+        window.removeEventListener("resize", function () {
			
 
				+          chart.resize();
			
 
				+        });
			
 
				+      });
			
 
				+      return option;
			
 
				+    },
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->
			
 
				+<style scoped lang="scss">
			
 
				+.cointan{
			
 
				+  width: 428px;
			
 
				+  height: 349px;
			
 
				+  background-image: url('../assets/leftcenter/background.png');
			
 
				+  background-size: 100%;
			
 
				+}
			
 
				+.title1{
			
 
				+  position: absolute;
			
 
				+  margin: 9px 0 0 10px;
			
 
				+  font-size: 20px;
			
 
				+  font-family : '优设标题黑';
			
 
				+  color: rgba(255, 255, 255, 1);
			
 
				+  font-weight: 400;
			
 
				+}
			
 
				+// 区域图
			
 
				+.chart{
			
 
				+  position: absolute;
			
 
				+  margin: 50px 0 0 20px;
			
 
				+  width: 390px;
			
 
				+  height: 268px;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/leftTop.vue
+++ b/src/components/leftTop.vue
@@ -0,0 +1,164 @@
 
				+<template>
			
 
				+  <div class="cointan">
			
 
				+    <div class="title1">
			
 
				+      <img src="../assets/index/title_icon.png" style="width:22px;height:22px;float: left;">
			
 
				+      <div style="margin-left:25px;line-height: 22px;">宿舍上个月总用能统计</div>
			
 
				+    </div>
			
 
				+    <!-- 用电量 -->
			
 
				+    <div class="dianNum">{{electPower}}</div>
			
 
				+    <div class="dianText">用电量（度）</div>
			
 
				+    <div class="dianImg"></div>
			
 
				+    <!-- 用电费用 -->
			
 
				+    <div class="dianNum" style="margin-left:118px;color:rgba(8, 184, 240, 1)">{{electMoney}}</div>
			
 
				+    <div class="dianText" style="margin-left:118px">用电费用（元）</div>
			
 
				+    <div class="dianImg2"></div>
			
 
				+    <!-- 用水量 -->
			
 
				+    <div class="dianNum" style="margin-left:228px;color:rgba(53, 245, 73, 1)">{{waterPower}}</div>
			
 
				+    <div class="dianText" style="margin-left:228px">用水量（吨）</div>
			
 
				+    <div class="dianImg3"></div>
			
 
				+    <!-- 用水费用 -->
			
 
				+    <div class="dianNum" style="margin-left:327px;color:rgba(245, 209, 65, 1)">{{waterMoney}}</div>
			
 
				+    <div class="dianText" style="margin-left:327px">用水费用（元）</div>
			
 
				+    <div class="dianImg4"></div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'leftTop',
			
 
				+  props: {
			
 
				+    msg: String
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      month:'',//当前月份
			
 
				+      electPower:'',//用电量
			
 
				+      electMoney:'',//用电价格
			
 
				+      waterPower:'',//用水量
			
 
				+      waterMoney:'',//用水价格
			
 
				+      build:'',//楼栋
			
 
				+      token:'',//请求头token
			
 
				+    }
			
 
				+  },
			
 
				+  mounted(){
			
 
				+    this.token=sessionStorage.getItem('token')
			
 
				+    this.build=sessionStorage.getItem('build')
			
 
				+    this.getNowDate()
			
 
				+  },
			
 
				+  methods:{
			
 
				+    //上个月能耗
			
 
				+    getnenghao(){
			
 
				+      this.electPower=''
			
 
				+      this.electMoney=''
			
 
				+      this.waterPower=''
			
 
				+      this.waterMoney=''
			
 
				+      this.$axios.get('/auto/cold-water/all?build='+this.build.split(",")[0]+'栋&build='+this.build.split(",")[1]+'栋',
			
 
				+      {
			
 
				+        headers: {
			
 
				+        "token": this.token,
			
 
				+        },
			
 
				+      }
			
 
				+      ).then(res => {
			
 
				+        if (res.data.success) {
			
 
				+          for(var i=0;i<res.data.data.length;i++){
			
 
				+            if(this.month==res.data.data[i].dateTime){
			
 
				+              this.electPower=res.data.data[i].electricTotalPower
			
 
				+              this.electMoney=res.data.data[i].electricTotalMoney
			
 
				+              this.waterPower=res.data.data[i].coldWaterTotalPower
			
 
				+              this.waterMoney=res.data.data[i].coldWaterTotalMoney
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+      })
			
 
				+    },
			
 
				+    //获取当前时间
			
 
				+    getNowDate() {
			
 
				+      var _this = this;
			
 
				+      // this.timer = setInterval(function() {
			
 
				+        var aData = new Date();
			
 
				+        // console.log(aData) //Wed Aug 21 2019 10:00:58 GMT+0800 (中国标准时间)
			
 
				+        // this.value = aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate();
			
 
				+        var month = aData.getMonth() < 9 ? "0" + (aData.getMonth() + 1-1) : (aData.getMonth()-1) + 1;
			
 
				+        var date = aData.getDate() <= 9 ? "0" + aData.getDate() : aData.getDate();
			
 
				+        var Hour = aData.getHours() <= 9 ? "0" + (aData.getHours()) : aData.getHours();
			
 
				+        var Miunte = aData.getMinutes() <= 9 ? "0" + (aData.getMinutes()) : aData.getMinutes();
			
 
				+        var Seconds = aData.getSeconds() <= 9 ? "0" + (aData.getSeconds()) : aData.getSeconds();
			
 
				+        var week = "星期" + "日一二三四五六".charAt(aData.getDay());
			
 
				+        // console.log(aData.getTime())
			
 
				+        _this.month = aData.getFullYear() + "-" + month;
			
 
				+        _this.week = week
			
 
				+        this.getnenghao()
			
 
				+      // }, 86400000);
			
 
				+    },
			
 
				+  },
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->
			
 
				+<style scoped lang="scss">
			
 
				+.cointan{
			
 
				+  width: 428px;
			
 
				+  height: 203px;
			
 
				+  background-image: url('../assets/lefttop/background.png');
			
 
				+  background-size: 100%;
			
 
				+  
			
 
				+}
			
 
				+.title1{
			
 
				+  position: absolute;
			
 
				+  margin: 9px 0 0 10px;
			
 
				+  font-size: 20px;
			
 
				+  font-family : '优设标题黑';
			
 
				+  color: rgba(255, 255, 255, 1);
			
 
				+  font-weight: 400;
			
 
				+}
			
 
				+// 用电量
			
 
				+.dianNum{
			
 
				+  position: absolute;
			
 
				+  margin: 84px 0 0 21px;
			
 
				+  width: 53px;
			
 
				+  text-align: center;
			
 
				+  font-size: 16px;
			
 
				+  font-weight: 400;
			
 
				+  color: rgba(49, 235, 227, 1);
			
 
				+  font-family : '优设标题黑';
			
 
				+}
			
 
				+.dianText{
			
 
				+  position: absolute;
			
 
				+  margin: 106px 0 0 21px;
			
 
				+  font-size: 11px;
			
 
				+  font-weight: 400;
			
 
				+  color: rgba(221, 221, 221, 0.7);
			
 
				+}
			
 
				+.dianImg{
			
 
				+  position: absolute;
			
 
				+  margin: 130px 0 0 28px;
			
 
				+  width: 52px;
			
 
				+  height: 30px;
			
 
				+  background-image: url('../assets/lefttop/dianliang.png');
			
 
				+  background-size: 100%;
			
 
				+}
			
 
				+.dianImg2{
			
 
				+  position: absolute;
			
 
				+  margin: 130px 0 0 132px;
			
 
				+  width: 52px;
			
 
				+  height: 30px;
			
 
				+  background-image: url('../assets/lefttop/dianfei.png');
			
 
				+  background-size: 100%;
			
 
				+}
			
 
				+.dianImg3{
			
 
				+  position: absolute;
			
 
				+  margin: 130px 0 0 237px;
			
 
				+  width: 52px;
			
 
				+  height: 30px;
			
 
				+  background-image: url('../assets/lefttop/shuiliang.png');
			
 
				+  background-size: 100%;
			
 
				+}
			
 
				+.dianImg4{
			
 
				+  position: absolute;
			
 
				+  margin: 130px 0 0 342px;
			
 
				+  width: 52px;
			
 
				+  height: 30px;
			
 
				+  background-image: url('../assets/lefttop/shuifei.png');
			
 
				+  background-size: 100%;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/rightCenter.vue
+++ b/src/components/rightCenter.vue
@@ -0,0 +1,213 @@
 
				+<template>
			
 
				+  <div class="cointan">
			
 
				+    <div class="title1">
			
 
				+      <img src="../assets/index/title_icon.png" style="width:22px;height:22px;float: left;">
			
 
				+      <div style="margin-left:25px;line-height: 22px;">班级未归人员统计</div>
			
 
				+    </div>
			
 
				+    <!-- 表格 -->
			
 
				+    <div class="xia-table">
			
 
				+      <el-table
			
 
				+        v-loading="loading"
			
 
				+        :data="tableData"  size="mini"
			
 
				+        :row-style="tableRowClassName"
			
 
				+        :header-cell-style="{ color: 'rgba(0, 218, 216, 1)',background: 'transparent',height:'32 !important',fontSize:'16' }"
			
 
				+      >
			
 
				+      <!-- :cell-style="{background: '#4EC8FF'}" -->
			
 
				+        <el-table-column prop="clazz" label="班级名称" align="center"/>
			
 
				+        <el-table-column prop="totalPeople" label="入住人数" align="center" />
			
 
				+        <el-table-column prop="noReturnBedroom" label="闭寝未归" align="center" />
			
 
				+      </el-table>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'rightCenter',
			
 
				+  props: {
			
 
				+    msg: String
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      loading:false,
			
 
				+      tableData:[
			
 
				+        {name:'人工智能1班',num:8,zhuang:3},
			
 
				+        {name:'人工智能1班',num:8,zhuang:3},
			
 
				+        {name:'人工智能1班',num:8,zhuang:3},
			
 
				+        {name:'人工智能1班',num:8,zhuang:3},
			
 
				+        {name:'人工智能1班',num:8,zhuang:3},
			
 
				+        {name:'人工智能1班',num:8,zhuang:3},
			
 
				+        {name:'人工智能1班',num:8,zhuang:3},
			
 
				+        {name:'人工智能1班',num:8,zhuang:3},
			
 
				+      ],
			
 
				+      size:0,//总条数
			
 
				+      build:'',//楼栋
			
 
				+      token:'',//请求头token
			
 
				+    }
			
 
				+  },
			
 
				+  mounted(){
			
 
				+    this.token=sessionStorage.getItem('token')
			
 
				+    this.build=sessionStorage.getItem('build')
			
 
				+    this.getWeigui()
			
 
				+  },
			
 
				+  methods:{
			
 
				+    tableRowClassName({row, rowIndex}) {
			
 
				+      let stylejson = {};
			
 
				+      if(rowIndex%2==1){
			
 
				+        return stylejson;
			
 
				+      }else{
			
 
				+        stylejson.background = "rgba(0, 72, 91, 0.4)";// 背景颜色
			
 
				+        return stylejson;
			
 
				+      }
			
 
				+    },
			
 
				+    //班级未归人员统计
			
 
				+    getWeigui(){
			
 
				+      this.tableData=[]
			
 
				+      this.$axios.get('/auto/face-recognition/classesCounted?build='+this.build.split(",")[0]+'栋&build='+this.build.split(",")[1]+'栋',
			
 
				+      {
			
 
				+        headers: {
			
 
				+        "token": this.token,
			
 
				+        },
			
 
				+      }
			
 
				+      ).then(res => {
			
 
				+        if (res.data.success) {
			
 
				+          this.size=res.data.data.total
			
 
				+          // console.log(this.studentList)
			
 
				+
			
 
				+          this.$axios.get('/auto/face-recognition/classesCounted?build=1栋&build=2栋&size='+this.size,
			
 
				+          {
			
 
				+            headers: {
			
 
				+            "token": this.token,
			
 
				+            },
			
 
				+          }
			
 
				+          ).then(res => {
			
 
				+          if (res.data.success) {
			
 
				+            // 未归班级人员
			
 
				+            res.data.data.records.forEach(data => {
			
 
				+              this.tableData.push(data)
			
 
				+            })
			
 
				+            // console.log(this.studentList)
			
 
				+          }
			
 
				+        })
			
 
				+        }
			
 
				+      })
			
 
				+    }
			
 
				+  },
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->
			
 
				+<style scoped lang="scss">
			
 
				+.cointan{
			
 
				+  width: 428px;
			
 
				+  height: 296px;
			
 
				+  background-image: url('../assets/rightCenter/background.png');
			
 
				+  background-size: 100%;
			
 
				+}
			
 
				+.title1{
			
 
				+  position: absolute;
			
 
				+  margin: 9px 0 0 10px;
			
 
				+  font-size: 20px;
			
 
				+  font-family : '优设标题黑';
			
 
				+  color: rgba(255, 255, 255, 1);
			
 
				+  font-weight: 400;
			
 
				+}
			
 
				+// 表格
			
 
				+.xia-table{
			
 
				+  position: absolute;
			
 
				+  margin: 47px 0 0 21px;
			
 
				+  height: 228px;
			
 
				+  width: 383px;
			
 
				+  overflow-y: auto;
			
 
				+  // overflow-x: hidden;
			
 
				+}
			
 
				+/* eslint-disable */
			
 
				+  ::v-deep .el-table,
			
 
				+  ::v-deep .el-table__expanded-cell {
			
 
				+    background-color: transparent;
			
 
				+  }
			
 
				+  ::v-deep .el-table th,
			
 
				+  ::v-deep .el-table tr,
			
 
				+  ::v-deep .el-table td {
			
 
				+    color: #fff;
			
 
				+    background-color: transparent;
			
 
				+    font-size: 14px !important;
			
 
				+    height: 38px !important;
			
 
				+  }
			
 
				+  ::v-deep .el-table .cell {
			
 
				+    box-sizing: border-box;
			
 
				+    overflow: hidden;
			
 
				+    text-overflow: ellipsis;
			
 
				+    white-space: normal;
			
 
				+    word-break: break-all;
			
 
				+    line-height: 23px;
			
 
				+    padding-left: 0px;
			
 
				+    padding-right: 0px;
			
 
				+}
			
 
				+  // 鼠标悬停时背景颜色设置
			
 
				+  ::v-deep .el-table tbody tr:hover > td {
			
 
				+    background-color: rgba(0, 72, 91, 0.4) !important;
			
 
				+  }
			
 
				+  ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
			
 
				+    background:rgba(0, 72, 91, 0.4);
			
 
				+  }
			
 
				+  ::v-deep .el-table__header-wrapper {
			
 
				+    background-color: transparent;
			
 
				+  }
			
 
				+  // 斑马线隔行换色设置颜色
			
 
				+  ::v-deep
			
 
				+    .el-table--striped
			
 
				+    .el-table__body
			
 
				+    tr.el-table__row--striped.el-table__row--striped.el-table__row--striped
			
 
				+    td {
			
 
				+    background-color: rgba($color: #00485B, $alpha: 0.4);
			
 
				+  }
			
 
				+  // 表格间横线
			
 
				+  // 清除表格默认下边框
			
 
				+  ::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
			
 
				+      border-bottom: 0px solid #EBEEF5;
			
 
				+  }
			
 
				+  ::v-deep .el-table__cell,
			
 
				+  ::v-deep .el-table th.el-table__cell.is-leaf {
			
 
				+    border-bottom: none;
			
 
				+  }
			
 
				+  ::v-deep .el-table::before {
			
 
				+    width: 0 !important;
			
 
				+  }
			
 
				+  ::v-deep .el-table__inner-wrapper::before {
			
 
				+    left: 0;
			
 
				+    bottom: 0;
			
 
				+    width: 100%;
			
 
				+    height: 0px !important;
			
 
				+  }
			
 
				+  ::v-deep .el-input__icon {
			
 
				+    height: 100%;
			
 
				+    width: 25px;
			
 
				+    text-align: center;
			
 
				+    transition: all .3s;
			
 
				+    line-height: 30px !important;
			
 
				+}
			
 
				+// 加载中
			
 
				+>>>.el-loading-mask {
			
 
				+    position: absolute;
			
 
				+    z-index: 2000;
			
 
				+    background-color: rgba(255,255,255,0);
			
 
				+    margin: 0;
			
 
				+    top: 50px;
			
 
				+    right: 0;
			
 
				+    bottom: 0;
			
 
				+    left: 0;
			
 
				+    transition: opacity .3s;
			
 
				+}
			
 
				+::-webkit-scrollbar {
			
 
				+/*隐藏滚轮*/
			
 
				+display: none;
			
 
				+}
			
 
				+// 表格隔行颜色不同
			
 
				+>>>.el-table .warning-row {
			
 
				+    background: #f7faff;
			
 
				+  }
			
 
				+  >>>.el-table .success-row {
			
 
				+    background: #ebf1fb;
			
 
				+  }
			
 
				+</style>
			
--- a/src/components/rightbuttom.vue
+++ b/src/components/rightbuttom.vue
@@ -0,0 +1,169 @@
 
				+<template>
			
 
				+  <div class="cointan">
			
 
				+    <div class="title1">
			
 
				+      <img src="../assets/index/title_icon.png" style="width:22px;height:22px;float: left;">
			
 
				+      <div style="margin-left:25px;line-height: 22px;">宿舍楼未归人员统计</div>
			
 
				+    </div>
			
 
				+    <!-- 滚动块 -->
			
 
				+    <el-carousel trigger="click" height="260px" style="height: 260px;width: 383px;margin: 29px 0 0 21px;">
			
 
				+      <el-carousel-item v-for="(list,index) in shshe" :key="index">
			
 
				+        <div class="gun">
			
 
				+          <div class="mokuai" v-for="(item,index2) in list" :key="index2">
			
 
				+            <div class="loudong">宿舍楼<br/>{{item.build.split("栋")[0]}}</div>
			
 
				+            <div class="bgtu">{{(parseFloat(item.unreturned/item.totalPeople)*100).toFixed(1)+'%'}}</div>
			
 
				+            <div class="zongtext">总人数</div>
			
 
				+            <div class="zongnum">{{item.totalPeople}}</div>
			
 
				+            <div class="zongline"></div>
			
 
				+            <div class="zongtext" style="margin-left:228px;color:rgba(245, 42, 42, 1)">未归人数</div>
			
 
				+            <div class="zongnum" style="margin-left:212px;color:rgba(245, 42, 42, 1)">{{item.unreturned}}</div>
			
 
				+            <div class="zongline" style="margin-left:297px;"></div>
			
 
				+            <div class="zongtext" style="margin-left:316px;color:rgba(73, 235, 137, 1)">归寝人数</div>
			
 
				+            <div class="zongnum" style="margin-left:299px;color:rgba(73, 235, 137, 1)">{{item.returned}}</div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </el-carousel-item>
			
 
				+    </el-carousel>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'rightbuttom',
			
 
				+  data() {
			
 
				+    return {
			
 
				+      shshe:[
			
 
				+      ],
			
 
				+      build:'',//楼栋
			
 
				+      token:'',//请求头token
			
 
				+    }
			
 
				+  },
			
 
				+  props: {
			
 
				+    msg: String
			
 
				+  },
			
 
				+  created(){
			
 
				+    
			
 
				+  },
			
 
				+  mounted(){
			
 
				+    this.token=sessionStorage.getItem('token')
			
 
				+    this.build=sessionStorage.getItem('build')
			
 
				+    this.getAllsushe()
			
 
				+  },
			
 
				+  methods:{
			
 
				+    //宿舍楼未归人员统计
			
 
				+    getAllsushe(){
			
 
				+      this.shshe=[]
			
 
				+      this.$axios.get('/auto/build-total-people/dormitoryBuildingCounted',
			
 
				+      {
			
 
				+        headers: {
			
 
				+        "token": this.token,
			
 
				+        },
			
 
				+      }
			
 
				+      ).then(res => {
			
 
				+        if (res.data.success) {
			
 
				+          // 各楼栋数据
			
 
				+          res.data.data.forEach(data => {
			
 
				+            this.shshe.push(data)
			
 
				+          })
			
 
				+          // console.log(this.qinshi)
			
 
				+
			
 
				+
			
 
				+          let newDataList = []
			
 
				+          let current = 0
			
 
				+          if(this.shshe && this.shshe.length>0){
			
 
				+            for(let i=0;i<=this.shshe.length-1;i++){
			
 
				+              if(i%3 !== 0 || i === 0 ){
			
 
				+                if(!newDataList[current]){
			
 
				+                  newDataList.push([this.shshe[i]])
			
 
				+                }else{
			
 
				+                  newDataList[current].push(this.shshe[i])
			
 
				+                }
			
 
				+              }else{
			
 
				+                current++
			
 
				+                newDataList.push([this.shshe[i]])
			
 
				+              }
			
 
				+            }
			
 
				+          }
			
 
				+          this.shshe = [...newDataList]
			
 
				+        }
			
 
				+      })
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->
			
 
				+<style scoped lang="scss">
			
 
				+.cointan{
			
 
				+  width: 428px;
			
 
				+  height: 296px;
			
 
				+  background-image: url('../assets/rightBottom/background.png');
			
 
				+  background-size: 100%;
			
 
				+}
			
 
				+.title1{
			
 
				+  position: absolute;
			
 
				+  margin: 9px 0 0 10px;
			
 
				+  font-size: 20px;
			
 
				+  font-family : '优设标题黑';
			
 
				+  color: rgba(255, 255, 255, 1);
			
 
				+  font-weight: 400;
			
 
				+}
			
 
				+// 走马灯滚动
			
 
				+.gun{
			
 
				+  position: absolute;
			
 
				+  margin: 10px 0 0 0px;
			
 
				+  width: 383px;
			
 
				+  height: 230px;
			
 
				+}
			
 
				+.mokuai{
			
 
				+  margin-top: 10px;
			
 
				+  width: 383px;
			
 
				+  height: 70px;
			
 
				+  background: rgba(0, 72, 91, 0.14);
			
 
				+  font-size: 12px;
			
 
				+  font-weight: 500;
			
 
				+  color: rgba(255, 255, 255, 1);
			
 
				+}
			
 
				+.loudong{
			
 
				+  position: absolute;
			
 
				+  margin: 16px 0 0 15px;
			
 
				+  font-size: 14px;
			
 
				+  color: rgba(255, 255, 255, 1);
			
 
				+  font-family : '优设标题黑';
			
 
				+}
			
 
				+.bgtu{
			
 
				+  position: absolute;
			
 
				+  margin: 8px 0 0 69px;
			
 
				+  width: 52px;
			
 
				+  height: 52px;
			
 
				+  background-image: url('../assets/rightBottom/tongji.png');
			
 
				+  background-size: 100%;
			
 
				+  font-size: 12px;
			
 
				+  transform: scale(0.8); //12*0.8
			
 
				+  font-weight: 400;
			
 
				+  color: rgba(254, 219, 101, 1);
			
 
				+  font-family : '优设标题黑';
			
 
				+  line-height: 52px;
			
 
				+}
			
 
				+.zongtext{
			
 
				+  position: absolute;
			
 
				+  margin: 16px 0 0 152px;
			
 
				+  font-weight: 700;
			
 
				+  color: rgba(102, 255, 255, 1);
			
 
				+}
			
 
				+.zongnum{
			
 
				+  position: absolute;
			
 
				+  margin: 33px 0 0 127px;
			
 
				+  width: 85px;
			
 
				+  text-align: center;
			
 
				+  font-size: 20px;
			
 
				+  font-family : '优设标题黑';
			
 
				+  color: rgba(102, 255, 255, 1);
			
 
				+}
			
 
				+.zongline{
			
 
				+  position: absolute;
			
 
				+  margin: 23px 0 0 210px;
			
 
				+  width: 0px;
			
 
				+  height: 32px;
			
 
				+  border: 1px solid rgba(255, 255, 255, 0.2);
			
 
				+}
			
 
				+</style>
			
--- a/src/components/righttop.vue
+++ b/src/components/righttop.vue
@@ -0,0 +1,153 @@
 
				+<template>
			
 
				+  <div class="cointan">
			
 
				+    <div class="title1">
			
 
				+      <img src="../assets/index/title_icon.png" style="width:22px;height:22px;float: left;">
			
 
				+      <div style="margin-left:25px;line-height: 22px;">宿舍归寝率排行</div>
			
 
				+    </div>
			
 
				+
			
 
				+    <div class="sushekuang">
			
 
				+      <div class="sushebg">100%
			
 
				+        <div style="transform: scale(0.6);font-weight: 400;color: rgba(255, 255, 255, 1);margin-top: -10px;line-height: 0px;">归宿率</div>
			
 
				+      </div>
			
 
				+      <div class="sushehao">{{qinshi[0]}}</div>
			
 
				+      <div class="sushezhuang">未归 0<span style="margin-left:7px;color:rgba(53, 245, 73, 1)">在寝 8</span></div>
			
 
				+    </div>
			
 
				+    <!-- 第二个 -->
			
 
				+    <div class="sushekuang" style="margin-left:176px">
			
 
				+      <div class="sushebg">100%
			
 
				+        <div style="transform: scale(0.6);font-weight: 400;color: rgba(255, 255, 255, 1);margin-top: -10px;line-height: 0px;">归宿率</div>
			
 
				+      </div>
			
 
				+      <div class="sushehao">{{qinshi[1]}}</div>
			
 
				+      <div class="sushezhuang">未归 0<span style="margin-left:7px;color:rgba(53, 245, 73, 1)">在寝 8</span></div>
			
 
				+    </div>
			
 
				+    <div class="sushekuang" style="margin-left:311px">
			
 
				+      <div class="sushebg">100%
			
 
				+        <div style="transform: scale(0.6);font-weight: 400;color: rgba(255, 255, 255, 1);margin-top: -10px;line-height: 0px;">归宿率</div>
			
 
				+      </div>
			
 
				+      <div class="sushehao">{{qinshi[2]}}</div>
			
 
				+      <div class="sushezhuang">未归 0<span style="margin-left:7px;color:rgba(53, 245, 73, 1)">在寝 8</span></div>
			
 
				+    </div>
			
 
				+    <!-- 第二层 -->
			
 
				+    <div class="sushekuang" style="margin-top:171px">
			
 
				+      <div class="sushebg">100%
			
 
				+        <div style="transform: scale(0.6);font-weight: 400;color: rgba(255, 255, 255, 1);margin-top: -10px;line-height: 0px;">归宿率</div>
			
 
				+      </div>
			
 
				+      <div class="sushehao">{{qinshi[3]}}</div>
			
 
				+      <div class="sushezhuang">未归 0<span style="margin-left:7px;color:rgba(53, 245, 73, 1)">在寝 8</span></div>
			
 
				+    </div>
			
 
				+    <div class="sushekuang" style="margin:171px 0 0 176px">
			
 
				+      <div class="sushebg">100%
			
 
				+        <div style="transform: scale(0.6);font-weight: 400;color: rgba(255, 255, 255, 1);margin-top: -10px;line-height: 0px;">归宿率</div>
			
 
				+      </div>
			
 
				+      <div class="sushehao">{{qinshi[4]}}</div>
			
 
				+      <div class="sushezhuang">未归 0<span style="margin-left:7px;color:rgba(53, 245, 73, 1)">在寝 8</span></div>
			
 
				+    </div>
			
 
				+    <div class="sushekuang" style="margin:171px 0 0 311px">
			
 
				+      <div class="sushebg">100%
			
 
				+        <div style="transform: scale(0.6);font-weight: 400;color: rgba(255, 255, 255, 1);margin-top: -10px;line-height: 0px;">归宿率</div>
			
 
				+      </div>
			
 
				+      <div class="sushehao">{{qinshi[5]}}</div>
			
 
				+      <div class="sushezhuang">未归 0<span style="margin-left:7px;color:rgba(53, 245, 73, 1)">在寝 8</span></div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'righttop',
			
 
				+  data() {
			
 
				+    return {
			
 
				+      qinshi:[],
			
 
				+      build:'',//楼栋
			
 
				+      token:'',//请求头token
			
 
				+      build:'',//楼栋
			
 
				+      token:'',//请求头token
			
 
				+    }
			
 
				+  },
			
 
				+  props: {
			
 
				+    msg: String
			
 
				+  },
			
 
				+  created(){
			
 
				+    
			
 
				+  },
			
 
				+  mounted(){
			
 
				+    this.token=sessionStorage.getItem('token')
			
 
				+    this.build=sessionStorage.getItem('build')
			
 
				+    console.log(this.build.split(",")[0])
			
 
				+    this.getGuiqin()
			
 
				+  },
			
 
				+  methods:{
			
 
				+    //宿舍归寝率
			
 
				+    getGuiqin(){
			
 
				+      this.$axios.get('/auto/face-recognition/returning?build='+this.build.split(",")[0]+'栋&build='+this.build.split(",")[1]+'栋',
			
 
				+      {
			
 
				+        headers: {
			
 
				+        "token": this.token,
			
 
				+        },
			
 
				+      }
			
 
				+      ).then(res => {
			
 
				+        if (res.data.success) {
			
 
				+          // 横坐标时间
			
 
				+          res.data.data.forEach(data => {
			
 
				+            this.qinshi.push(data.dom)
			
 
				+          })
			
 
				+          // console.log(this.qinshi)
			
 
				+        }
			
 
				+      })
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<!-- Add "scoped" attribute to limit CSS to this component only -->
			
 
				+<style scoped lang="scss">
			
 
				+.cointan{
			
 
				+  width: 428px;
			
 
				+  height: 296px;
			
 
				+  background-image: url('../assets/rightTop/background.png');
			
 
				+  background-size: 100%;
			
 
				+}
			
 
				+.title1{
			
 
				+  position: absolute;
			
 
				+  margin: 9px 0 0 10px;
			
 
				+  font-size: 20px;
			
 
				+  font-family : '优设标题黑';
			
 
				+  color: rgba(255, 255, 255, 1);
			
 
				+  font-weight: 400;
			
 
				+}
			
 
				+.sushekuang{
			
 
				+  position: absolute;
			
 
				+  margin: 53px 0 0 40px;
			
 
				+  width: 80px;
			
 
				+  height: 106px;
			
 
				+}
			
 
				+.sushebg{
			
 
				+  position: absolute;
			
 
				+  width: 69px;
			
 
				+  height: 69px;
			
 
				+  background-image: url('../assets/rightTop/guisu.png');
			
 
				+  background-size: 100%;
			
 
				+  font-size: 14px;
			
 
				+  font-weight: 700;
			
 
				+  line-height: 55px;
			
 
				+  color: rgba(0, 224, 219, 1);
			
 
				+  text-align: center;
			
 
				+}
			
 
				+.sushehao{
			
 
				+  position: absolute;
			
 
				+  margin: 69px 0 0 0px;
			
 
				+  width: 67px;
			
 
				+  text-align: center;
			
 
				+  font-size: 12px;
			
 
				+  font-weight: 900;
			
 
				+  color: rgba(255, 255, 255, 1);
			
 
				+}
			
 
				+.sushezhuang{
			
 
				+  position: absolute;
			
 
				+  margin: 89px 0 0 -10px;
			
 
				+  font-size: 12px;
			
 
				+  font-weight: 900;
			
 
				+  color: rgba(245, 44, 44, 1);
			
 
				+  transform: scale(0.8); //12*0.8
			
 
				+}
			
 
				+</style>
			
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,35 @@
 
				+import Vue from 'vue'

			
 
				+// import { createApp } from 'vue'

			
 
				+import App from './App.vue'

			
 
				+import router from './router'

			
 
				+import store from './store'

			
 
				+import ElementUI from 'element-ui';

			
 
				+import 'element-ui/lib/theme-chalk/index.css';

			
 
				+import * as echarts from 'echarts';

			
 
				+import axios from 'axios'

			
 
				+import fns from './common/js/fns'

			
 
				+// import ElementPlus from 'element-plus';

			
 
				+// import 'element-plus/theme-chalk/index.css';

			
 
				+// import locale from 'element-plus/lib/locale/lang/zh-cn'

			
 
				+import './assets/style/border.css'

			
 
				+import './assets/style/reset.css'

			
 
				+

			
 
				+import '@/assets/fonts/font.css'

			
 
				+

			
 
				+

			
 
				+Vue.config.productionTip = false

			
 
				+Vue.prototype.$echarts = echarts;

			
 
				+Vue.prototype.$axios = axios

			
 
				+Vue.prototype.$fns = fns

			
 
				+Vue.use(ElementUI);

			
 
				+// createApp(App).use(router).use(store)

			
 
				+// // .use(ElementPlus, { size: 'small', zIndex: 3000 })

			
 
				+// .mount("#app");

			
 
				+

			
 
				+new Vue({

			
 
				+  fns,

			
 
				+  router,

			
 
				+  store,

			
 
				+  // ElementPlus, 

			
 
				+  render: h => h(App)

			
 
				+}).$mount('#app')
			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,33 @@
 
				+import Vue from 'vue'
			
 
				+import VueRouter from 'vue-router'
			
 
				+import index from '../views/index.vue'
			
 
				+import Login from "../views/Login.vue";
			
 
				+
			
 
				+Vue.use(VueRouter)
			
 
				+
			
 
				+const routes = [
			
 
				+  {
			
 
				+		path: "/",
			
 
				+		name: "Login",
			
 
				+		component: Login,
			
 
				+	},
			
 
				+  {
			
 
				+    path: '/index',
			
 
				+    name: 'index',
			
 
				+    component: index
			
 
				+  },
			
 
				+  // {
			
 
				+  //   path: '/about',
			
 
				+  //   name: 'About',
			
 
				+  //   // route level code-splitting
			
 
				+  //   // this generates a separate chunk (about.[hash].js) for this route
			
 
				+  //   // which is lazy-loaded when the route is visited.
			
 
				+  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
			
 
				+  // }
			
 
				+]
			
 
				+
			
 
				+const router = new VueRouter({
			
 
				+  routes
			
 
				+})
			
 
				+
			
 
				+export default router
			
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -0,0 +1,15 @@
 
				+import Vue from 'vue'
			
 
				+import Vuex from 'vuex'
			
 
				+
			
 
				+Vue.use(Vuex)
			
 
				+
			
 
				+export default new Vuex.Store({
			
 
				+  state: {
			
 
				+  },
			
 
				+  mutations: {
			
 
				+  },
			
 
				+  actions: {
			
 
				+  },
			
 
				+  modules: {
			
 
				+  }
			
 
				+})
			
--- a/src/store/rsaKeys.js
+++ b/src/store/rsaKeys.js
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -0,0 +1,409 @@
 
				+<template>

			
 
				+		<div class="background">

			
 
				+			<!-- <img :src="imgSrc" /> -->

			
 
				+			<div class="title-center">宿舍管理可视化监控平台</div>

			
 
				+

			
 
				+			<div class="center-content">

			
 
				+				<el-form label-width="0px" :model="ruleForm" status-icon :rules="rules" ref="ruleForm"

			
 
				+					class="demo-ruleForm">

			
 
				+					<el-form-item prop="uname" class="user-block">

			
 
				+						<div class="user-icon"></div>

			
 
				+						<el-input ref="zhanghao" placeholder="请输入平台账号" maxlength="16" v-model="ruleForm.uname"

			
 
				+							prefix-icon="el-icon-login-user"></el-input>

			
 
				+					</el-form-item>

			
 
				+					<el-form-item prop="upass" class="pwd-block">

			
 
				+						<div class="pwd-icon"></div>

			
 
				+						<el-input ref="mima" placeholder="请输入平台密码" maxlength="16" type="password" v-model="ruleForm.upass"

			
 
				+							prefix-icon="el-icon-login-pass" @keyup.enter.native="submitForm('ruleForm')">

			
 
				+						</el-input>

			
 
				+					</el-form-item>

			
 
				+					<el-form-item prop="upass" class="build-block">

			
 
				+						<div class="build-icon"></div>

			
 
				+						<el-select class="select" v-model="ruleForm.value" placeholder="请选择楼栋" @change="selectChange">

			
 
				+							<el-option

			
 
				+							v-for="item in ruleForm.options"

			
 
				+							:key="item.value"

			
 
				+							:label="item.label"

			
 
				+							:value="item.value">

			
 
				+							</el-option>

			
 
				+						</el-select>

			
 
				+					</el-form-item>

			
 
				+					<el-form-item>

			
 
				+						<el-button type="primary" class="login-block" @click="submitForm('ruleForm')">登 陆</el-button>

			
 
				+					</el-form-item>

			
 
				+				</el-form>

			
 
				+			</div>

			
 
				+		</div>

			
 
				+</template>

			
 
				+

			
 
				+<script>

			
 
				+	// import userIcon from '../assets/imageIndex/userImg.png'

			
 
				+	// import first from '../assets/images/firstIcon.png'

			
 
				+	export default {

			
 
				+		data() {

			
 
				+			var checkName = (rule, value, callback) => {

			
 
				+				// console.log(rule, value, callback);

			
 
				+				if (!value) {

			
 
				+					return callback(new Error('请输入账号'));

			
 
				+				}

			
 
				+				setTimeout(() => {

			
 
				+					// if (value.length < 5) {

			
 
				+					// 	callback(new Error('账号长度不小于5位'));

			
 
				+					// } else {

			
 
				+					// 	callback();

			
 
				+					// }

			
 
				+				}, 30);

			
 
				+			};

			
 
				+			var validatePass = (rule, value, callback) => {

			
 
				+				// console.log(rule, value, callback);

			
 
				+				if (value === '') {

			
 
				+					callback(new Error('请输入密码'));

			
 
				+				}

			
 
				+				setTimeout(() => {

			
 
				+					if (value.length < 5) {

			
 
				+						callback(new Error('密码长度不小于5位'));

			
 
				+					} else {

			
 
				+						callback();

			
 
				+					}

			
 
				+				}, 30);

			
 
				+			};

			
 
				+			return {

			
 
				+				ruleForm: {

			
 
				+					uname: '',

			
 
				+					upass: '',

			
 
				+					options: [{

			
 
				+					value: '1',

			
 
				+					label: '1-2栋'

			
 
				+					}, {

			
 
				+					value: '2',

			
 
				+					label: '3-4栋'

			
 
				+					}, {

			
 
				+					value: '3',

			
 
				+					label: '5-6栋'

			
 
				+					}, {

			
 
				+					value: '4',

			
 
				+					label: '7-8栋'

			
 
				+					}, {

			
 
				+					value: '5',

			
 
				+					label: '9-10栋'

			
 
				+					},{

			
 
				+					value: '6',

			
 
				+					label: '11-12栋'

			
 
				+					}, {

			
 
				+					value: '7',

			
 
				+					label: '13-14栋'

			
 
				+					}, {

			
 
				+					value: '8',

			
 
				+					label: '15-16栋'

			
 
				+					}],

			
 
				+					value: ''

			
 
				+				},

			
 
				+				rules: {

			
 
				+					uname: [{

			
 
				+						validator: checkName,

			
 
				+						trigger: 'blur'

			
 
				+					}],

			
 
				+					upass: [{

			
 
				+						validator: validatePass,

			
 
				+						trigger: 'blur'

			
 
				+					}]

			
 
				+				},

			
 
				+				resultEncodeP: '',//加密密码

			
 
				+			}

			
 
				+		},

			
 
				+		// created() {

			
 
				+		// 	const IP = sessionStorage.getItem("ip");

			
 
				+		// 	// console.log('222',IP)

			
 
				+		// 	let ipList = [

			
 
				+		// 	"58.17.42.179",

			
 
				+		// 	"218.64.4.4",

			
 
				+		// 	"10.201.5.31",

			
 
				+		// 	"10.205.64.222",

			
 
				+		// 	"171.34.215.31",

			
 
				+		// 	"182.105.82.9",

			
 
				+		// 	"220.175.60.46",

			
 
				+		// 	"39.160.30.198",

			
 
				+		// 	];

			
 
				+		// 	let isip = ipList.includes(IP);

			
 
				+		// 	if (!isip) {

			
 
				+		// 	alert("没有访问权限");

			
 
				+		// 	this.closeWin();

			
 
				+		// 	}

			
 
				+		// },

			
 
				+		methods: {

			
 
				+			//修改下拉框

			
 
				+			selectChange(e){

			
 
				+				this.value=e

			
 
				+			},

			
 
				+			submitForm(formName) {

			
 
				+				let _this = this;

			
 
				+				if(_this.value==undefined){

			
 
				+					_this.$message({

			
 
				+						showClose: true,

			
 
				+						message: "楼栋不能为空",

			
 
				+						type: 'error'

			
 
				+					});

			
 
				+				}else{

			
 
				+					let params = {}

			
 
				+					var username = String(_this.ruleForm.uname).trim()

			
 
				+					var userpass = String(_this.ruleForm.upass).trim()

			
 
				+

			
 
				+					if (username && userpass) {

			
 
				+						params.userName = username

			
 
				+						params.password = userpass

			
 
				+					} else {

			
 
				+						_this.$message.warning('请输入账号和密码！')

			
 
				+						if (!username)

			
 
				+							_this.$refs['zhanghao'].focus()

			
 
				+						else

			
 
				+							_this.$refs['mima'].focus()

			
 
				+						return

			
 
				+					}

			
 
				+					// 开始加密

			
 
				+					_this.resultEncodeP = _this.$fns.rsaEncode(userpass)

			
 
				+					// console.log(_this.resultEncodeP);

			
 
				+

			
 
				+					_this.$axios.post(`/auto/user/login`,

			
 
				+						{

			
 
				+							'user':username,//账号

			
 
				+							'passWord':_this.resultEncodeP,//密码

			
 
				+							'build':_this.value,//楼栋

			
 
				+						},)

			
 
				+						.then(res => {

			
 
				+							console.log(res.data);

			
 
				+							if (res.data.success) {

			
 
				+								_this.$message.success(res.data.message);

			
 
				+								// sessionStorage.setItem('uname', username)

			
 
				+								// sessionStorage.setItem('userType', res.data.data.userType)

			
 
				+								sessionStorage.setItem('token', res.data.data.token)

			
 
				+								sessionStorage.setItem('build', res.data.data.build)

			
 
				+								_this.$router.replace('/index'); //跳转到首页

			
 
				+							} else {

			
 
				+								_this.$message({

			
 
				+									showClose: true,

			
 
				+									message: "登陆异常：" + res.data.message,

			
 
				+									type: 'error'

			
 
				+								});

			
 
				+							}

			
 
				+						})

			
 
				+						.catch(err => {

			
 
				+							// console.log(err);

			
 
				+							_this.$message.error('捕捉异常：' + err)

			
 
				+						})

			
 
				+				}

			
 
				+				

			
 
				+			},

			
 
				+

			
 
				+		}

			
 
				+	}

			
 
				+</script>

			
 
				+

			
 
				+<style>

			
 
				+	.background {

			
 
				+		/* position: relative; */

			
 
				+		width: 1920px;

			
 
				+		height: 1080px;

			
 
				+		background-image: url('../assets/index/loginbg.png');

			
 
				+  		background-size: 100%;

			
 
				+	}

			
 
				+

			
 
				+	.title-center {

			
 
				+		position: absolute;

			
 
				+		z-index: 2;

			
 
				+		top: 181px;

			
 
				+		width: 1920px;

			
 
				+		font-size: 72px;

			
 
				+		font-family : '优设标题黑';

			
 
				+		color: #FFFFFF;

			
 
				+		/* background-image: url(../assets/imageIndex/title.png); */

			
 
				+	}

			
 
				+

			
 
				+	.center-content {

			
 
				+		position: absolute;

			
 
				+		z-index: 2;

			
 
				+		/* left: 502px; */

			
 
				+		top: 0px;

			
 
				+		width: 1920px;

			
 
				+		height: 1373px;

			
 
				+		/* background-image: url(../assets/imageIndex/centerBg.png); */

			
 
				+	}

			
 
				+

			
 
				+	/* .user-block {

			
 
				+		position: absolute;

			
 
				+		z-index: 2;

			
 
				+		left: 251px;

			
 
				+		top: 284px;

			
 
				+		width: 1090px;

			
 
				+		height: 125px;

			
 
				+		background-color: #007C6F;

			
 
				+	}

			
 
				+

			
 
				+	.pwd-block {

			
 
				+		position: absolute;

			
 
				+		z-index: 2;

			
 
				+		left: 251px;

			
 
				+		top: 512px;

			
 
				+		width: 1090px;

			
 
				+		height: 125px;

			
 
				+		background-color: #007C6F;

			
 
				+	} */

			
 
				+

			
 
				+	.user-block .el-input--prefix .el-input__inner {

			
 
				+		position: absolute;

			
 
				+		z-index: 2;

			
 
				+		left: 381px;

			
 
				+		top: 284px;

			
 
				+		width: 1090px;

			
 
				+		height: 115px;

			
 
				+		background-color: rgba(0, 72, 91, 0.4);

			
 
				+		border: none;

			
 
				+		font-size: 36px;

			
 
				+		font-family: MicrosoftYaHei;

			
 
				+		color: rgba(255, 255, 255, 0.5);

			
 
				+		padding-left: 100px;

			
 
				+	}

			
 
				+

			
 
				+	.pwd-block .el-input--prefix .el-input__inner {

			
 
				+		position: absolute;

			
 
				+		z-index: 2;

			
 
				+		left: 381px;

			
 
				+		top: 420px;

			
 
				+		width: 1090px;

			
 
				+		height: 115px;

			
 
				+		background-color: rgba(0, 72, 91, 0.4);

			
 
				+		border: none;

			
 
				+		font-size: 36px;

			
 
				+		font-family: MicrosoftYaHei;

			
 
				+		color: rgba(255, 255, 255, 0.5);

			
 
				+		padding-left: 100px;

			
 
				+	}

			
 
				+	.build-block .select{

			
 
				+		position: absolute;

			
 
				+		z-index: 2;

			
 
				+		left: 381px;

			
 
				+		top: 570px;

			
 
				+		width: 1090px;

			
 
				+		height: 115px;

			
 
				+		background-color: rgba(0, 72, 91, 0.4);

			
 
				+		border: none;

			
 
				+		font-size: 36px;

			
 
				+		font-family: MicrosoftYaHei;

			
 
				+		color: rgba(255, 255, 255, 0.5);

			
 
				+		/* padding-left: 100px; */

			
 
				+	}

			
 
				+	/* 下拉框 */

			
 
				+	.build-block .el-input {

			
 
				+		position: relative;

			
 
				+		font-size: 36px;

			
 
				+		height: 115px;

			
 
				+		/* background-color: rgba(0, 72, 91, 0.4); */

			
 
				+	}

			
 
				+	.build-block .el-input__inner {

			
 
				+		-webkit-appearance: none;

			
 
				+		background-color: rgba(0, 72, 91, 0.4);

			
 
				+		background-image: none;

			
 
				+		border-radius: 4px;

			
 
				+		/* border: 1px solid #DCDFE6; */

			
 
				+		box-sizing: border-box;

			
 
				+		color: #606266;

			
 
				+		display: inline-block;

			
 
				+		height: 100%;

			
 
				+		line-height: 40px;

			
 
				+		outline: 0;

			
 
				+		padding: 0 15px;

			
 
				+		transition: border-color .2s cubic-bezier(.645,.045,.355,1);

			
 
				+		width: 100%;

			
 
				+	}

			
 
				+	/* 下拉框里样式 */

			
 
				+	.build-block .el-select-dropdown__list .el-select-dropdown__item {

			
 
				+		font-size: 20px;

			
 
				+		padding: 0 20px;

			
 
				+		position: relative;

			
 
				+		white-space: nowrap;

			
 
				+		overflow: hidden;

			
 
				+		text-overflow: ellipsis;

			
 
				+		color: #606266;

			
 
				+		height: 34px;

			
 
				+		line-height: 34px;

			
 
				+		box-sizing: border-box;

			
 
				+		cursor: pointer;

			
 
				+	}

			
 
				+

			
 
				+	.login-block {

			
 
				+		position: absolute;

			
 
				+		z-index: 2;

			
 
				+		left: 381px;

			
 
				+		top: 720px;

			
 
				+		width: 1090px;

			
 
				+		height: 123px;

			
 
				+		background: linear-gradient(0deg, #00FFC6 0%, #D8F8FF 100%);

			
 
				+		text-align: center;

			
 
				+		color: #095442;

			
 
				+		font-size: 46.26px !important;

			
 
				+		font-family: MicrosoftYaHei;

			
 
				+		padding-top: 20px;

			
 
				+	}

			
 
				+	::v-deep .el-button {

			
 
				+		display: inline-block;

			
 
				+		line-height: 1;

			
 
				+		white-space: nowrap;

			
 
				+		cursor: pointer;

			
 
				+		background: #FFF;

			
 
				+		border: 1px solid #DCDFE6;

			
 
				+		color: #606266;

			
 
				+		-webkit-appearance: none;

			
 
				+		text-align: center;

			
 
				+		box-sizing: border-box;

			
 
				+		outline: 0;

			
 
				+		margin: 0;

			
 
				+		transition: .1s;

			
 
				+		font-weight: 500;

			
 
				+		padding: 12px 20px;

			
 
				+		font-size: 46px;

			
 
				+		border-radius: 4px;

			
 
				+	}

			
 
				+

			
 
				+	.el-form-item>>>.el-icon-login-user {

			
 
				+		/* margin-left: 22px; */

			
 
				+		/* background: url(../assets/imageIndex/userImg.png) center no-repeat; */

			
 
				+		/* background-size: contain; */

			
 
				+	}

			
 
				+

			
 
				+	.el-form-item>>>.el-icon-login-pass {

			
 
				+		/* margin-left: 22px; */

			
 
				+		/* background: url(../assets/imageIndex/pwdImg.png) center no-repeat; */

			
 
				+		/* background-size: contain; */

			
 
				+	}

			
 
				+

			
 
				+	.user-block .el-form-item__error {

			
 
				+		padding-left: 381px;

			
 
				+		padding-top: 410px;

			
 
				+		font-size: 36px;

			
 
				+	}

			
 
				+

			
 
				+	.pwd-block .el-form-item__error {

			
 
				+		padding-left: 381px;

			
 
				+		padding-top: 540px;

			
 
				+		font-size: 36px;

			
 
				+	}

			
 
				+	

			
 
				+	.user-icon{

			
 
				+		position: absolute;

			
 
				+		z-index: 20;

			
 
				+		left: 270px;

			
 
				+		top: 340px;

			
 
				+		width: 57px;

			
 
				+		height: 57px;

			
 
				+		/* background-image: url(../assets/imageIndex/userImg.png); */

			
 
				+	}

			
 
				+	

			
 
				+	.pwd-icon{

			
 
				+		position: absolute;

			
 
				+		z-index: 20;

			
 
				+		left: 270px;

			
 
				+		top: 500px;

			
 
				+		width: 57px;

			
 
				+		height: 57px;

			
 
				+		/* background-image: url(../assets/imageIndex/pwdImg.png); */

			
 
				+	}

			
 
				+</style>

			
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -0,0 +1,271 @@
 
				+<template>
			
 
				+  <div class="contain">
			
 
				+    <!-- 学校logo -->
			
 
				+    <div class="logo"></div>
			
 
				+    <!-- 具体宿舍楼 -->
			
 
				+    <div class="sushe_san"></div>
			
 
				+    <div class="sushe">{{build}}栋宿舍</div>
			
 
				+    <!-- 时间 -->
			
 
				+    <div class="time">
			
 
				+      <span>{{now_date}}</span>
			
 
				+      <span style="margin-left:15px">{{week}}</span>
			
 
				+      <span style="margin-left:15px">{{ time }}</span>
			
 
				+    </div>
			
 
				+    <div class="loginout" @click="loginout()">
			
 
				+      <div class="outtu"></div>退出登录
			
 
				+    </div>
			
 
				+    <!-- 正中间 -->
			
 
				+    <div class="kuang">
			
 
				+      <div class="kuangNum">{{shshe[2]}}</div>
			
 
				+      <div class="kuangtxt">当前在宿人员</div>
			
 
				+    </div>
			
 
				+    <div class="kuang" style="margin-left:745px;color: rgba(245, 42, 42, 1);">
			
 
				+      <div class="kuangNum">{{shshe[3]}}</div>
			
 
				+      <div class="kuangtxt">闭寝未归人员</div>
			
 
				+    </div>
			
 
				+    <div class="kuang" style="margin-left:969px;">
			
 
				+      <div class="kuangNum">{{shshe[0]}}</div>
			
 
				+      <div class="kuangtxt">入住总人数</div>
			
 
				+    </div>
			
 
				+    <div class="kuang" style="margin-left:1193px;">
			
 
				+      <div class="kuangNum">{{shshe[1]}}</div>
			
 
				+      <div class="kuangtxt">房间数量</div>
			
 
				+    </div>
			
 
				+    <!-- 左上 -->
			
 
				+    <leftTop class="lefttop"></leftTop>
			
 
				+    <!-- 左中 -->
			
 
				+    <leftCenter class="leftcenter"></leftCenter>
			
 
				+    <!-- 左下 -->
			
 
				+    <leftButtom class="leftbuttom"></leftButtom>
			
 
				+    <!-- 中间上层 -->
			
 
				+    <centerTop class="centertop"></centerTop>
			
 
				+    <!-- 中间下层 -->
			
 
				+    <centerbuttom class="centerbuttom"></centerbuttom>
			
 
				+    <!-- 右边上层 -->
			
 
				+    <righttop class="righttop"></righttop>
			
 
				+    <!-- 右边中间 -->
			
 
				+    <rightCenter class="rightcenter"></rightCenter>
			
 
				+    <!-- 右边下层 -->
			
 
				+    <rightbuttom class="rightbuttom"></rightbuttom>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import leftTop from '@/components/leftTop.vue'
			
 
				+import leftCenter from '@/components/leftCenter.vue'
			
 
				+import leftButtom from '@/components/leftButtom.vue'
			
 
				+import centerTop from '@/components/centerTop.vue'
			
 
				+import centerbuttom from '@/components/centerbuttom.vue'
			
 
				+import righttop from '@/components/righttop.vue'
			
 
				+import rightCenter from '@/components/rightCenter.vue'
			
 
				+import rightbuttom from '@/components/rightbuttom.vue'
			
 
				+export default {
			
 
				+  name: 'index',
			
 
				+  components: {
			
 
				+    leftTop,
			
 
				+    leftCenter,
			
 
				+    leftButtom,
			
 
				+    centerTop,
			
 
				+    centerbuttom,
			
 
				+    righttop,
			
 
				+    rightCenter,
			
 
				+    rightbuttom
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      shshe:[],//宿舍人数情况
			
 
				+      now_date:'',//当前时间
			
 
				+      week:'',//周几
			
 
				+      time:'',//具体时间
			
 
				+      build:'',//楼栋
			
 
				+      token:'',//请求头token
			
 
				+      timer:null,//定时器
			
 
				+    }
			
 
				+  },
			
 
				+  mounted(){
			
 
				+    // console.log(sessionStorage.getItem('token'))
			
 
				+    // console.log(sessionStorage.getItem('build'))
			
 
				+    this.token=sessionStorage.getItem('token')
			
 
				+    this.build=sessionStorage.getItem('build')
			
 
				+    this.getNowDate()
			
 
				+    this.getSushe()
			
 
				+  },
			
 
				+  beforeDestroy() {
			
 
				+    // 页面关闭清除定时器
			
 
				+    clearInterval(this.t1)
			
 
				+    // 清除定时器标识
			
 
				+    this.t1 = null
			
 
				+  },
			
 
				+  methods:{
			
 
				+
			
 
				+    //获取当前时间
			
 
				+    getNowDate() {
			
 
				+      var _this = this;
			
 
				+      this.t1 = setInterval(function() {
			
 
				+        var aData = new Date();
			
 
				+        // console.log(aData) //Wed Aug 21 2019 10:00:58 GMT+0800 (中国标准时间)
			
 
				+        // this.value = aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate();
			
 
				+        var month = aData.getMonth() < 9 ? "0" + (aData.getMonth() + 1) : aData.getMonth() + 1;
			
 
				+        var date = aData.getDate() <= 9 ? "0" + aData.getDate() : aData.getDate();
			
 
				+        var Hour = aData.getHours() <= 9 ? "0" + (aData.getHours()) : aData.getHours();
			
 
				+        var Miunte = aData.getMinutes() <= 9 ? "0" + (aData.getMinutes()) : aData.getMinutes();
			
 
				+        var Seconds = aData.getSeconds() <= 9 ? "0" + (aData.getSeconds()) : aData.getSeconds();
			
 
				+        var week = "星期" + "日一二三四五六".charAt(aData.getDay());
			
 
				+        // console.log(aData.getTime())
			
 
				+        _this.now_date = aData.getFullYear() + "-" + month + "-" + date;
			
 
				+        _this.time=Hour+":"+Miunte+":"+Seconds
			
 
				+        _this.week = week
			
 
				+      }, 1000);
			
 
				+    },
			
 
				+
			
 
				+    //宿舍人数和归寝情况
			
 
				+    getSushe(){
			
 
				+      this.$axios.get('/auto/build-total-people/peoples?build='+this.build.split(",")[0]+'栋&build='+this.build.split(",")[1]+'栋',
			
 
				+      {
			
 
				+        headers: {
			
 
				+        "token": this.token,
			
 
				+        },
			
 
				+      }
			
 
				+      ).then(res => {
			
 
				+        if (res.data.success) {
			
 
				+          // 横坐标时间
			
 
				+          res.data.data.forEach(data => {
			
 
				+            this.shshe.push(data.people)
			
 
				+          })
			
 
				+          // console.log(this.shshe)
			
 
				+        }
			
 
				+      })
			
 
				+    },
			
 
				+    //退出登录
			
 
				+    loginout(){
			
 
				+      this.$router.replace('/'); //跳转到首页
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+<style lang="scss" scoped>
			
 
				+.contain{
			
 
				+  width: 1920px;
			
 
				+  height: 1080px;
			
 
				+  background-image: url('../assets/index/background.png');
			
 
				+  background-size: 100%;
			
 
				+  // z-index: 2;
			
 
				+}
			
 
				+// 学校logo
			
 
				+.logo{
			
 
				+  position: absolute;
			
 
				+  margin: 41px 0 0 71px;
			
 
				+  background-image: url('../assets/index/logo.png');
			
 
				+  background-size: 100%;
			
 
				+  width: 155px;
			
 
				+  height: 42px;
			
 
				+}
			
 
				+// 具体宿舍楼
			
 
				+.sushe_san{
			
 
				+	position: absolute;
			
 
				+	margin: 50px 0 0 293px;
			
 
				+	border:13px solid transparent;
			
 
				+	border-left-color: rgba(28, 255, 251, 1);
			
 
				+}
			
 
				+.sushe{
			
 
				+  position: absolute;
			
 
				+	margin: 41px 0 0 315px;
			
 
				+  font-size: 32px;
			
 
				+  font-weight: 400;
			
 
				+  font-family : '优设标题黑';
			
 
				+  line-height: 42px;
			
 
				+  color: rgba(28, 255, 251, 1);
			
 
				+}
			
 
				+// 时间
			
 
				+.time{
			
 
				+  position: absolute;
			
 
				+  margin: 52px 0 0 1508px;
			
 
				+  font-size: 16px;
			
 
				+  font-weight: 500;
			
 
				+  line-height: 22px;
			
 
				+  color: rgba(0, 218, 216, 1);
			
 
				+}
			
 
				+//退出登录
			
 
				+.loginout{
			
 
				+  position: absolute;
			
 
				+  margin: 52px 0 0 1758px;
			
 
				+  font-size: 16px;
			
 
				+  font-weight: 500;
			
 
				+  line-height: 22px;
			
 
				+  color: rgba(0, 218, 216, 1);
			
 
				+  
			
 
				+}
			
 
				+.outtu{
			
 
				+  background-image: url('../assets/index/out.png');
			
 
				+  background-size: 100%;
			
 
				+  width: 22px;
			
 
				+  height: 22px;
			
 
				+  float: left;
			
 
				+}
			
 
				+// 正中间
			
 
				+.kuang{
			
 
				+  position: absolute;
			
 
				+  margin: 101px 0 0 521px;
			
 
				+  background-image: url('../assets/index/juxing.png');
			
 
				+  background-size: 100%;
			
 
				+  width: 214px;
			
 
				+  height: 111px;
			
 
				+  font-size: 28px;
			
 
				+  font-weight: 400;
			
 
				+  color: rgba(102, 255, 255, 1);
			
 
				+  text-align: center;
			
 
				+}
			
 
				+.kuangNum{
			
 
				+  position: absolute;
			
 
				+  margin: 20px 0 0 0px;
			
 
				+  width: 214px;
			
 
				+  font-family : '优设标题黑';
			
 
				+}
			
 
				+.kuangtxt{
			
 
				+  position: absolute;
			
 
				+  margin: 62px 0 0 0px;
			
 
				+  width: 214px;
			
 
				+  font-size: 16px;
			
 
				+  font-weight: 500;
			
 
				+}
			
 
				+// /左上方
			
 
				+.lefttop{
			
 
				+  position: absolute;
			
 
				+  margin: 100px 0 0 70px;
			
 
				+}
			
 
				+// 左中
			
 
				+.leftcenter{
			
 
				+  position: absolute;
			
 
				+  margin: 324px 0 0 70px;
			
 
				+}
			
 
				+// 左下
			
 
				+.leftbuttom{
			
 
				+  position: absolute;
			
 
				+  margin: 693px 0 0 70px;
			
 
				+}
			
 
				+// 中间上层
			
 
				+.centertop{
			
 
				+  position: absolute;
			
 
				+  margin: 231px 0 0 521px;
			
 
				+}
			
 
				+// 中间下层
			
 
				+.centerbuttom{
			
 
				+  position: absolute;
			
 
				+  margin: 734px 0 0 521px;
			
 
				+}
			
 
				+// 右边上层
			
 
				+.righttop{
			
 
				+  position: absolute;
			
 
				+  margin: 102px 0 0 1426px;
			
 
				+}
			
 
				+// 右边中间
			
 
				+.rightcenter{
			
 
				+  position: absolute;
			
 
				+  margin: 423px 0 0 1426px;
			
 
				+}
			
 
				+// 右边下层
			
 
				+.rightbuttom{
			
 
				+  position: absolute;
			
 
				+  margin: 744px 0 0 1426px;
			
 
				+}
			
 
				+</style>
			
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,34 @@
 
				+const CopyWebpackPlugin = require('copy-webpack-plugin');

			
 
				+module.exports = {

			
 
				+    assetsDir: 'static',

			
 
				+    parallel: false,

			
 
				+    publicPath: '/smart_canteen/',

			
 
				+    devServer: {

			
 
				+        open: true,

			
 
				+        proxy: {

			
 
				+            '/auto': {

			
 
				+                target: ' http://192.168.161.224:5555/auto',

			
 
				+                changOrigin: true,

			
 
				+                pathRewrite: {

			
 
				+                    '^/auto': ''

			
 
				+                }

			
 
				+            },

			
 
				+            '/weather': {

			
 
				+                target: 'https://api.map.baidu.com/weather',//天气

			
 
				+                changOrigin: true,

			
 
				+                pathRewrite: {

			
 
				+                    '^/weather': ''

			
 
				+                }

			
 
				+            }

			
 
				+        }

			
 
				+    },

			
 
				+    configureWebpack: {

			
 
				+        plugins: [

			
 
				+          new CopyWebpackPlugin([

			
 
				+              { from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},

			
 
				+              { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},

			
 
				+              { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'},

			
 
				+          ])

			
 
				+        ]

			
 
				+      }

			
 
				+}

			
--- a/yarn.lock
+++ b/yarn.lock