Почетна Преглед Помоћ
Регистрација Пријавите се
校园管理
/
studenthotel_data
2
0
Креирај огранак 0
Датотеке Дискусије 0 Захтеви за спајање 0 Вики
Преглед изворни кода

完整代码

zhuxiuping пре 3 година
родитељ
f16cb21acf
комит
f6d695f1a2
54 измењених фајлова са 38089 додато и 0 уклоњено
Један поглед Покажи статистику Diff
  1. 23 0
      .gitignore
  2. 5 0
      babel.config.js
  3. 26605 0
      package-lock.json
  4. 35 0
      package.json
  5. BIN
      public/favicon.ico
  6. 17 0
      public/index.html
  7. 32 0
      src/App.vue
  8. BIN
      src/assets/centerBottom/background.png
  9. BIN
      src/assets/centerBottom/moimg.png
  10. BIN
      src/assets/centerTop/background.png
  11. BIN
      src/assets/centerTop/blueBg.png
  12. BIN
      src/assets/centerTop/redBg.png
  13. BIN
      src/assets/centerTop/titleimg.png
  14. 8 0
      src/assets/fonts/font.css
  15. BIN
      src/assets/fonts/优设标题黑.ttf
  16. BIN
      src/assets/index/background.png
  17. BIN
      src/assets/index/juxing.png
  18. BIN
      src/assets/index/loginbg.png
  19. BIN
      src/assets/index/logo.png
  20. BIN
      src/assets/index/out.png
  21. BIN
      src/assets/index/title_icon.png
  22. 20 0
      src/assets/js/echart.js
  23. BIN
      src/assets/leftBottom/background.png
  24. BIN
      src/assets/leftcenter/background.png
  25. BIN
      src/assets/lefttop/background.png
  26. BIN
      src/assets/lefttop/dianfei.png
  27. BIN
      src/assets/lefttop/dianliang.png
  28. BIN
      src/assets/lefttop/shuifei.png
  29. BIN
      src/assets/lefttop/shuiliang.png
  30. BIN
      src/assets/logo.png
  31. BIN
      src/assets/rightBottom/background.png
  32. BIN
      src/assets/rightBottom/tongji.png
  33. BIN
      src/assets/rightCenter/background.png
  34. BIN
      src/assets/rightTop/background.png
  35. BIN
      src/assets/rightTop/guisu.png
  36. 182 0
      src/assets/style/border.css
  37. 25 0
      src/assets/style/reset.css
  38. 33 0
      src/common/js/fns.js
  39. 208 0
      src/components/centerTop.vue
  40. 203 0
      src/components/centerbuttom.vue
  41. 190 0
      src/components/leftButtom.vue
  42. 276 0
      src/components/leftCenter.vue
  43. 164 0
      src/components/leftTop.vue
  44. 213 0
      src/components/rightCenter.vue
  45. 169 0
      src/components/rightbuttom.vue
  46. 153 0
      src/components/righttop.vue
  47. 35 0
      src/main.js
  48. 33 0
      src/router/index.js
  49. 15 0
      src/store/index.js
  50. 31 0
      src/store/rsaKeys.js
  51. 409 0
      src/views/Login.vue
  52. 271 0
      src/views/index.vue
  53. 34 0
      vue.config.js
  54. 8700 0
      yarn.lock

+ 23 - 0
.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?

+ 5 - 0
babel.config.js
Прегледај датотеку 

@@ -0,0 +1,5 @@
 
+module.exports = {
 
+  presets: [
 
+    '@vue/cli-plugin-babel/preset'
 
+  ]
 
+}

Разлика између датотеке није приказан због своје велике величине
+ 26605 - 0
package-lock.json


+ 35 - 0
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"
 
+  ]
 
+}

BIN
public/favicon.ico
Прегледај датотеку


+ 17 - 0
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>

+ 32 - 0
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>

BIN
src/assets/centerBottom/background.png
Прегледај датотеку


BIN
src/assets/centerBottom/moimg.png
Прегледај датотеку


BIN
src/assets/centerTop/background.png
Прегледај датотеку


BIN
src/assets/centerTop/blueBg.png
Прегледај датотеку


BIN
src/assets/centerTop/redBg.png
Прегледај датотеку


BIN
src/assets/centerTop/titleimg.png
Прегледај датотеку


+ 8 - 0
src/assets/fonts/font.css
Прегледај датотеку 

@@ -0,0 +1,8 @@
 
+@font-face {

+    /* 重命名字体名 */

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

+    /* 引入字体 */

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

+    font-weight: normal;

+    font-style: normal;

+  }

BIN
src/assets/fonts/优设标题黑.ttf
Прегледај датотеку


BIN
src/assets/index/background.png
Прегледај датотеку


BIN
src/assets/index/juxing.png
Прегледај датотеку


BIN
src/assets/index/loginbg.png
Прегледај датотеку


BIN
src/assets/index/logo.png
Прегледај датотеку


BIN
src/assets/index/out.png
Прегледај датотеку


BIN
src/assets/index/title_icon.png
Прегледај датотеку


+ 20 - 0
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;

BIN
src/assets/leftBottom/background.png
Прегледај датотеку


BIN
src/assets/leftcenter/background.png
Прегледај датотеку


BIN
src/assets/lefttop/background.png
Прегледај датотеку


BIN
src/assets/lefttop/dianfei.png
Прегледај датотеку


BIN
src/assets/lefttop/dianliang.png
Прегледај датотеку


BIN
src/assets/lefttop/shuifei.png
Прегледај датотеку


BIN
src/assets/lefttop/shuiliang.png
Прегледај датотеку


BIN
src/assets/logo.png
Прегледај датотеку


BIN
src/assets/rightBottom/background.png
Прегледај датотеку


BIN
src/assets/rightBottom/tongji.png
Прегледај датотеку


BIN
src/assets/rightCenter/background.png
Прегледај датотеку


BIN
src/assets/rightTop/background.png
Прегледај датотеку


BIN
src/assets/rightTop/guisu.png
Прегледај датотеку


+ 182 - 0
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);

+    }

+}

+ 25 - 0
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;}

+ 33 - 0
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,
 
+}

+ 208 - 0
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>

+ 203 - 0
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>

+ 190 - 0
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>

+ 276 - 0
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>

+ 164 - 0
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>

+ 213 - 0
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>

+ 169 - 0
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>

+ 153 - 0
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>

+ 35 - 0
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')

+ 33 - 0
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

+ 15 - 0
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: {
 
+  }
 
+})

Разлика између датотеке није приказан због своје велике величине
+ 31 - 0
src/store/rsaKeys.js


+ 409 - 0
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>

+ 271 - 0
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>

+ 34 - 0
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/'},

+          ])

+        ]

+      }

+}

Разлика између датотеке није приказан због своје велике величине
+ 8700 - 0
yarn.lock