Home Explore Help
Register Sign In
校园管理
/
jiaoxuelou_data
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

静态页面完成

zhuxiuping 3 years ago
parent
861fb8b401
commit
86787c4645
56 changed files with 37898 additions and 0 deletions
Unified View Show Diff Stats
  1. 23 0
      .gitignore
  2. 5 0
      babel.config.js
  3. 26626 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/jiantou.png
  13. BIN
      src/assets/centerTop/redBg.png
  14. BIN
      src/assets/centerTop/shipin.png
  15. BIN
      src/assets/centerTop/titleimg.png
  16. BIN
      src/assets/centerTop/web_mune_left.png
  17. 8 0
      src/assets/fonts/font.css
  18. BIN
      src/assets/fonts/优设标题黑.ttf
  19. BIN
      src/assets/index/background.png
  20. BIN
      src/assets/index/juxing.png
  21. BIN
      src/assets/index/litterbackground.png
  22. BIN
      src/assets/index/logo.png
  23. BIN
      src/assets/index/scroll.png
  24. BIN
      src/assets/index/scrollkuang.png
  25. BIN
      src/assets/index/title_icon.png
  26. BIN
      src/assets/index/top-bg.png
  27. BIN
      src/assets/index/yujin.png
  28. 20 0
      src/assets/js/echart.js
  29. BIN
      src/assets/leftButtom/background.png
  30. BIN
      src/assets/logo.png
  31. BIN
      src/assets/rightBottom/co2.png
  32. BIN
      src/assets/rightBottom/jiance.png
  33. BIN
      src/assets/rightBottom/pm.png
  34. BIN
      src/assets/rightBottom/shidu.png
  35. BIN
      src/assets/rightBottom/wendu.png
  36. BIN
      src/assets/rightTop/guisu.png
  37. BIN
      src/assets/rightTop/huanxing.png
  38. BIN
      src/assets/rightTop/lin1.png
  39. BIN
      src/assets/rightTop/lin2.png
  40. BIN
      src/assets/rightTop/lin3.png
  41. 182 0
      src/assets/style/border.css
  42. 25 0
      src/assets/style/reset.css
  43. 138 0
      src/components/centerTop.vue
  44. 180 0
      src/components/centerbuttom.vue
  45. 188 0
      src/components/leftButtom.vue
  46. 206 0
      src/components/leftCenter.vue
  47. 237 0
      src/components/leftTop.vue
  48. 456 0
      src/components/rightCenter.vue
  49. 213 0
      src/components/rightbuttom.vue
  50. 214 0
      src/components/righttop.vue
  51. 33 0
      src/main.js
  52. 27 0
      src/router/index.js
  53. 15 0
      src/store/index.js
  54. 276 0
      src/views/index.vue
  55. 34 0
      vue.config.js
  56. 8708 0
      yarn.lock

+ 23 - 0
.gitignore
View File 

@@ -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
View File 

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

File diff suppressed because it is too large
+ 26626 - 0
package-lock.json


+ 35 - 0
package.json
View File 

@@ -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",
 
+    "echarts-gl": "^2.0.9",
 
+    "element-plus": "^2.3.4",
 
+    "element-ui": "^2.15.13",
 
+    "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
View File


+ 17 - 0
public/index.html
View File 

@@ -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
View File 

@@ -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
View File


BIN
src/assets/centerBottom/moimg.png
View File


BIN
src/assets/centerTop/background.png
View File


BIN
src/assets/centerTop/blueBg.png
View File


BIN
src/assets/centerTop/jiantou.png
View File


BIN
src/assets/centerTop/redBg.png
View File


BIN
src/assets/centerTop/shipin.png
View File


BIN
src/assets/centerTop/titleimg.png
View File


BIN
src/assets/centerTop/web_mune_left.png
View File


+ 8 - 0
src/assets/fonts/font.css
View File 

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

+    /* 重命名字体名 */

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

+    /* 引入字体 */

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

+    font-weight: normal;

+    font-style: normal;

+  }

BIN
src/assets/fonts/优设标题黑.ttf
View File


BIN
src/assets/index/background.png
View File


BIN
src/assets/index/juxing.png
View File


BIN
src/assets/index/litterbackground.png
View File


BIN
src/assets/index/logo.png
View File


BIN
src/assets/index/scroll.png
View File


BIN
src/assets/index/scrollkuang.png
View File


BIN
src/assets/index/title_icon.png
View File


BIN
src/assets/index/top-bg.png
View File


BIN
src/assets/index/yujin.png
View File


+ 20 - 0
src/assets/js/echart.js
View File 

@@ -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/leftButtom/background.png
View File


BIN
src/assets/logo.png
View File


BIN
src/assets/rightBottom/co2.png
View File


BIN
src/assets/rightBottom/jiance.png
View File


BIN
src/assets/rightBottom/pm.png
View File


BIN
src/assets/rightBottom/shidu.png
View File


BIN
src/assets/rightBottom/wendu.png
View File


BIN
src/assets/rightTop/guisu.png
View File


BIN
src/assets/rightTop/huanxing.png
View File


BIN
src/assets/rightTop/lin1.png
View File


BIN
src/assets/rightTop/lin2.png
View File


BIN
src/assets/rightTop/lin3.png
View File


+ 182 - 0
src/assets/style/border.css
View File 

@@ -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
View File 

@@ -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;}

+ 138 - 0
src/components/centerTop.vue
View File 

@@ -0,0 +1,138 @@
 
+<template>
 
+  <div class="cointan">
 
+    <div class="title1">
 
+      <div style="margin-left:25px;line-height: 22px;">
 
+        监控实时预览 
+        <span style="font-size:12px">/ 1002教室</span>
 
+      </div>
 
+    </div>
 
+    <!-- 左侧选项 -->
 
+    <div class="left-kuang">
 
+      <div class="waiceng">
 
+        <div class="mokuai" v-for="(item,index) in 7" :key="index">
 
+          <div class="jiaoshi">11</div>
 
+          <div class="tubiao"></div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+    <!-- 右侧视频 -->
 
+    <div class="rightshipin">
 
+      <div class="qian">前</div>
 
+      <div class="shipin"></div>
 
+      <div class="hou">后</div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: 'centerTop',
 
+  data() {
 
+    return {
 
+      lingdao:false,
 
+      title:'欢迎各位领导莅临南昌交通学院参观指导！',
 
+      gun:true,
 
+    }
 
+  },
 
+  props: {
 
+    msg: String
 
+  },
 
+  created(){
 
+    
+  },
 
+  mounted(){
 
+    
+  },
 
+  methods:{
 
+    
+  }
 
+}
 
+</script>
 
+
 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
 
+<style scoped lang="scss">
 
+.cointan{
 
+  width: 915px;
 
+  height: 505px;
 
+  background-image: url('../assets/centerTop/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;
 
+}
 
+// 左侧选项
 
+.left-kuang{
 
+  position: absolute;
 
+  margin: 59px 0 0 15px;
 
+  width: 233px;
 
+  height: 431px;
 
+  background-image: url('../assets/centerTop/web_mune_left.png');
 
+  background-size: 100%;
 
+}
 
+.waiceng{
 
+  position: absolute;
 
+  margin: 11px 0 0 30px;
 
+  width: 171px;
 
+  height: 378px;
 
+}
 
+.mokuai{
 
+  margin: 9px 0 0 0px;
 
+  width: 171px;
 
+  height: 34px;
 
+  background: linear-gradient(90deg, rgba(103, 255, 255, 0.2), rgba(17, 104, 172, 0) 100%);
 
+}
 
+.jiaoshi{
 
+  position: absolute;
 
+  margin: 7px 0 0 40px;
 
+  font-size: 14px;
 
+  font-weight: 500;
 
+  line-height: 22px;
 
+  color: rgba(255, 255, 255, 1);
 
+}
 
+.tubiao{
 
+  position: absolute;
 
+  margin: 9px 0 0 131px;
 
+  width: 16px;
 
+  height: 16px;
 
+  background-image: url('../assets/centerTop/jiantou.png');
 
+  background-size: 100%;
 
+}
 
+// 右侧视频
 
+.rightshipin{
 
+  position: absolute;
 
+  margin: 61px 0 0 257px;
 
+  width: 640px;
 
+  height: 419px;
 
+  background-image: url('../assets/centerTop/shipin.png');
 
+  background-size: 100%;
 
+}
 
+.qian{
 
+  position: absolute;
 
+  margin: 14px 0 0 18px;
 
+  font-size: 18px;
 
+  font-weight: 400;
 
+  line-height: 26.06px;
 
+  color: rgba(0, 0, 0, 1);
 
+}
 
+.shipin{
 
+  position: absolute;
 
+  margin: 294px 0 0 22px;
 
+  width: 179px;
 
+  height: 117px;
 
+  background-image: url('../assets/centerTop/shipin.png');
 
+  background-size: 100%;
 
+}
 
+.hou{
 
+  position: absolute;
 
+  margin: 300px 0 0 30px;
 
+  font-size: 18px;
 
+  font-weight: 400;
 
+  line-height: 26.06px;
 
+  color: rgba(0, 0, 0, 1);
 
+}
 
+</style>

+ 180 - 0
src/components/centerbuttom.vue
View File 

@@ -0,0 +1,180 @@
 
+<template>
 
+  <div class="cointan">
 
+    <div class="title1">
 
+      <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' }"
 
+      >
 
+        <el-table-column prop="name" label="教室名称" align="center"/>
 
+        <el-table-column prop="num" label="专业名称" align="center" />
 
+        <el-table-column prop="zhuang" label="课名" align="center" />
 
+        <el-table-column prop="name" label="上课教师" align="center"/>
 
+        <el-table-column prop="num" label="上课人数" align="center" />
 
+        <el-table-column prop="zhuang" label="时间" align="center" />
 
+      </el-table>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: 'centerButtom',
 
+  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},
 
+      ],
 
+    }
 
+  },
 
+  props: {
 
+    msg: String
 
+  },
 
+  created(){
 
+    
+  },
 
+  mounted(){
 
+    
+  },
 
+  methods:{
 
+    tableRowClassName({row, rowIndex}) {
 
+      let stylejson = {};
 
+      if(rowIndex%2==1){
 
+        return stylejson;
 
+      }else{
 
+        stylejson.background = "rgba(0, 72, 91, 0.4)";// 背景颜色
 
+        return stylejson;
 
+      }
 
+    }
 
+  }
 
+}
 
+</script>
 
+
 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
 
+<style scoped lang="scss">
 
+.cointan{
 
+  width: 913px;
 
+  height: 318px;
 
+  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;
 
+}
 
+// 表格
 
+.xia-table{
 
+  position: absolute;
 
+  margin: 70px 0 0 28px;
 
+  height: 228px;
 
+  width: 857px;
 
+  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>

+ 188 - 0
src/components/leftButtom.vue
View File 

@@ -0,0 +1,188 @@
 
+<template>
 
+  <div class="cointan">
 
+    <div class="title1">
 
+      <div style="margin-left:25px;line-height: 22px;">设备数量</div>
 
+    </div>
 
+    <!-- 柱状图 -->
 
+    <div class="backg">
 
+      <div class="chart" ref="chart"></div>
 
+      <div class="huannum">458</div>
 
+      <div class="huantxt">设备总数</div>
 
+    </div>
 
+    <!-- 两边介绍 -->
 
+    <div class="jieshao">
 
+      200<br/>
 
+      在线数
 
+      <div class="circle"></div>
 
+    </div>
 
+
 
+    <div class="jieshao" style="margin-left:349px">
 
+      40<br/>
 
+      离线数
 
+      <div class="circle" style="background: #F9DA4F;"></div>
 
+    </div>
 
+
 
+    <div class="jieshao" style="margin-top:183px">
 
+      10<br/>
 
+      故障数
 
+      <div class="circle" style="background: #23BE72;"></div>
 
+    </div>
 
+
 
+    <div class="jieshao" style="margin:183px 0 0 349px">
 
+      10<br/>
 
+      告警数
 
+      <div class="circle" style="background: #7D5AFB;"></div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: 'leftButtom',
 
+  data() {
 
+    return {
 
+      
+    }
 
+  },
 
+  props: {
 
+    msg: String
 
+  },
 
+  created(){
 
+    
+  },
 
+  mounted(){
 
+    this.getEchartData()
 
+  },
 
+  methods:{
 
+    getEchartData(){
 
+      let _this = this;
 
+      const chart = this.$refs.chart;
 
+      var option = null;
 
+      const myChart = this.$echarts.init(chart);
 
+
 
+      option = {
 
+        color: ['#00D1C8','#23BE72','#F9DA4F','#7D5AFB' ],
 
+        tooltip: {
 
+          trigger: 'item'
 
+        },
 
+        series: [
 
+          {
 
+            name: '',
 
+            type: 'pie',
 
+            radius: ['80%', '100%'],
 
+            avoidLabelOverlap: false,
 
+            label: {
 
+              show: false,
 
+              position: 'center'
 
+            },
 
+            emphasis: {
 
+              label: {
 
+                show: true,
 
+                fontSize: 40,
 
+                fontWeight: 'bold'
 
+              }
 
+            },
 
+            labelLine: {
 
+              show: false
 
+            },
 
+            data: [
 
+              { value: 1048, name: '在线数' },
 
+              { value: 735, name: '故障数' },
 
+              { value: 580, name: '离线数' },
 
+              { value: 484, name: '告警数' }
 
+            ]
 
+          }
 
+        ]
 
+      };
 
+      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: 450px;
 
+  height: 302px;
 
+  background-image: url('../assets/index/litterbackground.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;
 
+}
 
+// 柱状图
 
+.backg{
 
+  position: absolute;
 
+  margin: 63px 0 0 116px;
 
+  width: 212px;
 
+  height: 212px;
 
+  background-image: url('../assets/leftButtom/background.png');
 
+  background-size: 100%;
 
+}
 
+.chart{
 
+  position: absolute;
 
+  margin: 28px 0 0 20px;
 
+  width: 174px;
 
+  height: 157px;
 
+}
 
+.huannum{
 
+  position: absolute;
 
+  margin: 78px 0 0 50px;
 
+  width: 112px;
 
+  text-align: center;
 
+  font-size: 28px;
 
+  font-weight: 400;
 
+  line-height: 36px;
 
+  color: rgba(102, 255, 255, 1);
 
+  font-family : '优设标题黑';
 
+}
 
+.huantxt{
 
+  position: absolute;
 
+  margin: 116px 0 0 74px;
 
+  font-size: 16px;
 
+  font-weight: 400;
 
+  line-height: 23.17px;
 
+  color: rgba(255, 255, 255, 1);
 
+}
 
+// 两边介绍
 
+.jieshao{
 
+  position: absolute;
 
+  margin: 110px 0 0 39px;
 
+  width: 55px;
 
+  font-size: 14px;
 
+  font-weight: 400;
 
+  color: rgba(255, 255, 255, 1);
 
+  text-align: center;
 
+  line-height: 16px;
 
+}
 
+.circle{
 
+  width: 8px;
 
+  height: 8px;
 
+  background: #00D1C8;
 
+  border-radius: 50%;
 
+  margin: 5px 0 0 22px;
 
+}
 
+</style>

+ 206 - 0
src/components/leftCenter.vue
View File 

@@ -0,0 +1,206 @@
 
+<template>
 
+  <div class="cointan">
 
+    <div class="title1">
 
+      <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 {
 
+      
+    }
 
+  },
 
+  props: {
 
+    msg: String
 
+  },
 
+  created(){
 
+    
+  },
 
+  mounted(){
 
+    this.getEchartData()
 
+  },
 
+  methods:{
 
+    // 用电用水
 
+    getEchartData() {
 
+      let _this = this;
 
+      const chart = this.$refs.chart;
 
+      var option = null;
 
+      const myChart = this.$echarts.init(chart);
 
+      option = {
 
+        color: ['#0A93ED', '#0AA992'],
 
+        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: '8%',
 
+          bottom: '2%',
 
+          containLabel: true
 
+        },
 
+        xAxis: [
 
+          {
 
+            axisLabel: {
 
+              show: true,
 
+              height: 19,
 
+              fontSize: 12,
 
+              color: "#FFFFFF",//人数的颜色
 
+            },
 
+            axisLine: {
 
+              show: true,
 
+              lineStyle: {
 
+                color: "#2E3F44", 
+              },
 
+            },
 
+            type: 'category',
 
+            data: ['投影仪', '电脑', '空调', '摄像头']
 
+          }
 
+        ],
 
+        yAxis: [
 
+          {
 
+            alignTicks: true,
 
+            name:'',
 
+            nameTextStyle: {
 
+              color: "#00E0DB",
 
+            },
 
+            axisLabel: {
 
+              show: true,
 
+              height: 19,
 
+              fontSize: 12,
 
+              color: "rgba(255, 255, 255, 0.45)",
 
+            },
 
+            axisLine: {
 
+              show: false,
 
+              lineStyle: {
 
+                color: "#FFFFFF",
 
+              },
 
+            },
 
+            splitLine: {
 
+              show: true,
 
+              lineStyle: {
 
+                color:'rgba(255, 255, 255, 0.15)'
 
+              }
 
+            },
 
+            type: 'value'
 
+          }
 
+        ],
 
+        series: [
 
+          {
 
+            name: '总设备',
 
+            type: 'bar',
 
+            showBackground: true,
 
+            backgroundStyle: {
 
+              color: 'rgba(180, 180, 180, 0.2)'
 
+            },
 
+            barWidth: "10%",
 
+            itemStyle: {
 
+              opacity: 0.8,
 
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
 
+                {
 
+                  offset: 0,
 
+                  color: '#0A93ED'
 
+                },
 
+                {
 
+                  offset: 1,
 
+                  color: '#66FFFF'
 
+                }
 
+              ])
 
+            },
 
+            data: [120, 282, 111, 234, 220, 340, 310]
 
+          },{
 
+            name: '使用设备',
 
+            type: 'bar',
 
+            showBackground: true,
 
+            backgroundStyle: {
 
+              color: 'rgba(180, 180, 180, 0.2)'
 
+            },
 
+            barWidth: "10%",
 
+            itemStyle: {
 
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
 
+                {
 
+                  offset: 0,
 
+                  color: '#0AA992'
 
+                },
 
+                {
 
+                  offset: 1,
 
+                  color: '#0BE18B'
 
+                }
 
+              ])
 
+            },
 
+            data: [30, 32, 71, 264, 90, 340, 250]
 
+          },
 
+        ]
 
+      };
 
+      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: 450px;
 
+  height: 302px;
 
+  background-image: url('../assets/index/litterbackground.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: 60px 0 0 30px;
 
+  width: 420px;
 
+  height: 220px;
 
+}
 
+</style>

+ 237 - 0
src/components/leftTop.vue
View File 

@@ -0,0 +1,237 @@
 
+<template>
 
+  <div class="cointan">
 
+    <div class="title1">
 
+      <div style="margin-left:25px;line-height: 22px;">近30日能耗管理</div>
 
+    </div>
 
+    <!-- 区域图 -->
 
+    <div class="chart" ref="chart"></div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: 'leftTop',
 
+  props: {
 
+    msg: String
 
+  },
 
+  data() {
 
+    return {
 
+      
+    }
 
+  },
 
+  mounted(){
 
+    this.getEchartData()
 
+  },
 
+  methods:{
 
+    // 用电用水
 
+    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: '8%',
 
+          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: ['02-01', '02-02', '02-03', '02-04', '02-05', '02-06', '02-07']
 
+          }
 
+        ],
 
+        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: [30, 32, 71, 264, 90, 340, 250]
 
+          },{
 
+            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: [120, 282, 111, 234, 220, 340, 310]
 
+          },
 
+        ]
 
+      };
 
+      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: 450px;
 
+  height: 302px;
 
+  background-image: url('../assets/index/litterbackground.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: 60px 0 0 30px;
 
+  width: 420px;
 
+  height: 220px;
 
+}
 
+</style>

+ 456 - 0
src/components/rightCenter.vue
View File 

@@ -0,0 +1,456 @@
 
+<template>
 
+  <div class="cointan">
 
+    <div class="title1">
 
+      <div style="margin-left:25px;line-height: 22px;">各年级竞赛获奖情况</div>
 
+    </div>
 
+    <!-- 3d环形图 -->
 
+    <div class="chart" id="cityGreenLand-charts"></div>
 
+    <div class="huannum">230</div>
 
+    <div class="huantxt">总获奖数</div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: 'rightCenter',
 
+  props: {
 
+    msg: String
 
+  },
 
+  data() {
 
+    return {
 
+      optionData: [{
 
+        name: '2020级',
 
+        value: 780,
 
+        itemStyle: {
 
+          color: 'rgba(128, 212, 253, 0.6)',
 
+        }
 
+      }, {
 
+        name: '2021级',
 
+        value: 490,
 
+        itemStyle: {
 
+          color: 'rgba(82, 217, 138, 0.6)'
 
+        }
 
+      }, {
 
+        name: '2022级',
 
+        value: 350,
 
+        itemStyle: {
 
+          color: 'rgba(73, 110, 239, 0.6)'
 
+        }
 
+      },{
 
+        name: '2023级',
 
+        value: 250,
 
+        itemStyle: {
 
+          color: 'rgba(248, 201, 59, 0.6)',
 
+        }
 
+      }],
 
+    }
 
+  },
 
+  mounted(){
 
+    this.$nextTick(function() {
 
+      this.init();
 
+    });
 
+  },
 
+  methods:{
 
+    init() {
 
+      //构建3d饼状图
 
+      let myChart = this.$echarts.init(document.getElementById('cityGreenLand-charts'));
 
+      // 传入数据生成 option
 
+      this.option = this.getPie3D(this.optionData, 0.8);
 
+      myChart.setOption(this.option);
 
+      //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
 
+      this.option.series.push({
 
+        name: 'pie2d',
 
+        type: 'pie',
 
+        labelLine:{
 
+          length:0,
 
+          length2:0
 
+        },
 
+        startAngle: -20 , //起始角度，支持范围[0, 360]。
 
+        clockwise: false,//饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
 
+        radius: ['30%', '60%'],
 
+        center: ['10%', '50%'],//没用
 
+        data: this.optionData,
 
+        itemStyle:{
 
+          opacity:0
 
+        }
 
+      });
 
+      myChart.setOption(this.option);
 
+      this.bindListen(myChart);
 
+    },
 
+
 
+    getPie3D(pieData, internalDiameterRatio) {
 
+      //internalDiameterRatio:透明的空心占比
 
+      let that = this;
 
+      let series = [];
 
+      let sumValue = 0;
 
+      let startValue = 0;
 
+      let endValue = 0;
 
+      let legendData = [];
 
+      let legendBfb = [];
 
+      let k = 1 - internalDiameterRatio;
 
+      pieData.sort((a, b) => {
 
+        return (b.value - a.value);
 
+      });
 
+      // 为每一个饼图数据，生成一个 series-surface 配置
 
+      for (let i = 0; i < pieData.length; i++) {
 
+        sumValue += pieData[i].value;
 
+        let seriesItem = {
 
+          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
 
+          value: typeof pieData[i].value === 'undefined' ? `series${i}` : pieData[i].value,
 
+          type: 'surface',
 
+          parametric: true,
 
+          wireframe: {
 
+            show: false
 
+          },
 
+          pieData: pieData[i],
 
+          pieStatus: {
 
+            selected: false,
 
+            hovered: false,
 
+            k: k
 
+          },
 
+          // radius: ['50%', '80%'],
 
+          // center: ['30%', '50%']
 
+        };
 
+
 
+        if (typeof pieData[i].itemStyle != 'undefined') {
 
+          let itemStyle = {};
 
+          typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
 
+          typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
 
+          seriesItem.itemStyle = itemStyle;
 
+        }
 
+        series.push(seriesItem);
 
+      }
 
+
 
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
 
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
 
+      legendData = [];
 
+      legendBfb = [];
 
+      for (let i = 0; i < series.length; i++) {
 
+        endValue = startValue + series[i].pieData.value;
 
+        series[i].pieData.startRatio = startValue / sumValue;
 
+        series[i].pieData.endRatio = endValue / sumValue;
 
+        series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
 
+          false, false, k, series[i].pieData.value);
 
+        startValue = endValue;
 
+        let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
 
+        legendData.push({
 
+          name: series[i].name,
 
+          value: bfb,
 
+          
+        });
 
+        legendBfb.push({
 
+          name: series[i].name,
 
+          value: bfb,
 
+          value:series[i].value,
 
+        });
 
+      }
 
+      let boxHeight = this.getHeight3D(series, 24);//通过传参设定3d饼/环的高度，26代表26px
 
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
 
+      let option = {
 
+        legend: {
 
+          data: legendData,
 
+          orient: 'scroll',
 
+          right: 10,
 
+          top: 10,
 
+          itemGap: 10,
 
+          textStyle: {
 
+            color: '#A1E2FF',
 
+          },
 
+          icon:'roundRect',//图形样式
 
+          show: true,
 
+          formatter: function(param) {
 
+            let item = legendBfb.filter(item => item.name == param)[0];
 
+            // let bfs = that.fomatFloat(item.value * 100, 2) + "%";
 
+            return `${item.name}  ${item.value}`;
 
+          }
 
+        },
 
+        labelLine: {
 
+          show: true,
 
+          lineStyle: {
 
+            color: '#7BC0CB'
 
+          }
 
+        },
 
+        tooltip: {
 
+          formatter: params => {
 
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
 
+              let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
 
+                100).toFixed(2);
 
+              return `${params.seriesName}<br/>` +
 
+                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
 
+                `${ bfb }%`;
 
+            }
 
+          }
 
+        },
 
+        xAxis3D: {
 
+          min: -1,
 
+          max: 1
 
+        },
 
+        yAxis3D: {
 
+          min: -1,
 
+          max: 1
 
+        },
 
+        zAxis3D: {
 
+          min: -1,
 
+          max: 1
 
+        },
 
+        grid3D: {
 
+          show: false,
 
+          boxHeight: boxHeight, //圆环的高度
 
+          // innerWidth:'100%',
 
+          top:'-35%',//3d图位置
 
+          left:'-20%',//3d图位置
 
+          height:450,//3d图大小
 
+          viewControl: { //3d效果可以放大、旋转等，请自己去查看官方配置
 
+            alpha: 30, //角度
 
+            distance: 300,//调整视角到主体的距离，类似调整zoom
 
+            rotateSensitivity: 0, //设置为0无法旋转
 
+            zoomSensitivity: 0, //设置为0无法缩放
 
+            panSensitivity: 0, //设置为0无法平移
 
+            autoRotate: false //自动旋转
 
+          }
 
+        },
 
+        series: series,
 
+      };
 
+      return option;
 
+    },
 
+
 
+    //获取3d丙图的最高扇区的高度
 
+    getHeight3D(series, height) {
 
+      series.sort((a, b) => {
 
+        return (b.pieData.value - a.pieData.value);
 
+      })
 
+      return height * 25 / series[0].pieData.value;
 
+    },
 
+
 
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
 
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
 
+      // 计算
 
+      let midRatio = (startRatio + endRatio) / 2;
 
+      let startRadian = startRatio * Math.PI * 2;
 
+      let endRadian = endRatio * Math.PI * 2;
 
+      let midRadian = midRatio * Math.PI * 2;
 
+      // 如果只有一个扇形，则不实现选中效果。
 
+      if (startRatio === 0 && endRatio === 1) {
 
+        isSelected = false;
 
+      }
 
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
 
+      k = typeof k !== 'undefined' ? k : 1 / 3;
 
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
 
+      let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
 
+      let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
 
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
 
+      let hoverRate = isHovered ? 1.05 : 1;
 
+      // 返回曲面参数方程
 
+      return {
 
+        u: {
 
+          min: -Math.PI,
 
+          max: Math.PI * 3,
 
+          step: Math.PI / 32
 
+        },
 
+        v: {
 
+          min: 0,
 
+          max: Math.PI * 2,
 
+          step: Math.PI / 20
 
+        },
 
+        x: function(u, v) {
 
+          if (u < startRadian) {
 
+            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
 
+          }
 
+          if (u > endRadian) {
 
+            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
 
+          }
 
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
 
+        },
 
+        y: function(u, v) {
 
+          if (u < startRadian) {
 
+            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
 
+          }
 
+          if (u > endRadian) {
 
+            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
 
+          }
 
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
 
+        },
 
+        z: function(u, v) {
 
+          if (u < -Math.PI * 0.5) {
 
+            return Math.sin(u);
 
+          }
 
+          if (u > Math.PI * 2.5) {
 
+            return Math.sin(u) * h * .1;
 
+          }
 
+          return Math.sin(v) > 0 ? 1 * h * .1 : -1;
 
+        }
 
+      };
 
+    },
 
+
 
+    fomatFloat(num, n) {
 
+      var f = parseFloat(num);
 
+      if (isNaN(f)) {
 
+        return false;
 
+      }
 
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂   
+      var s = f.toString();
 
+      var rs = s.indexOf('.');
 
+      //判定如果是整数，增加小数点再补0
 
+      if (rs < 0) {
 
+        rs = s.length;
 
+        s += '.';
 
+      }
 
+      while (s.length <= rs + n) {
 
+        s += '0';
 
+      }
 
+      return s;
 
+    },
 
+    
+    bindListen(myChart) {
 
+      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
 
+      let that = this;
 
+      let selectedIndex = '';
 
+      let hoveredIndex = '';
 
+      // 监听点击事件，实现选中效果（单选）
 
+      myChart.on('click', function(params) {
 
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
 
+        let isSelected = !that.option.series[params.seriesIndex].pieStatus.selected;
 
+        let isHovered = that.option.series[params.seriesIndex].pieStatus.hovered;
 
+        let k = that.option.series[params.seriesIndex].pieStatus.k;
 
+        let startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
 
+        let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
 
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
 
+        if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
 
+          that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
 
+              selectedIndex].pieData
 
+            .startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
 
+              selectedIndex].pieData
 
+            .value);
 
+          that.option.series[selectedIndex].pieStatus.selected = false;
 
+        }
 
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
 
+        that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
 
+          isSelected,
 
+          isHovered, k, that.option.series[params.seriesIndex].pieData.value);
 
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
 
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
 
+        isSelected ? selectedIndex = params.seriesIndex : null;
 
+        // 使用更新后的 option，渲染图表
 
+        myChart.setOption(that.option);
 
+      });
 
+      // 监听 mouseover，近似实现高亮（放大）效果
 
+      myChart.on('mouseover', function(params) {
 
+        // 准备重新渲染扇形所需的参数
 
+        let isSelected;
 
+        let isHovered;
 
+        let startRatio;
 
+        let endRatio;
 
+        let k;
 
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
 
+        if (hoveredIndex === params.seriesIndex) {
 
+          return;
 
+          // 否则进行高亮及必要的取消高亮操作
 
+        } else {
 
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
 
+          if (hoveredIndex !== '') {
 
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
 
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected;
 
+            isHovered = false;
 
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio;
 
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio;
 
+            k = that.option.series[hoveredIndex].pieStatus.k;
 
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
 
+            that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
 
+              isSelected,
 
+              isHovered, k, that.option.series[hoveredIndex].pieData.value);
 
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
 
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
 
+            hoveredIndex = '';
 
+          }
 
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
 
+          if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
 
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
 
+            isSelected = that.option.series[params.seriesIndex].pieStatus.selected;
 
+            isHovered = true;
 
+            startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
 
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
 
+            k = that.option.series[params.seriesIndex].pieStatus.k;
 
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
 
+            that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
 
+              isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5);
 
+            that.option.series[params.seriesIndex].pieStatus.hovered = isHovered;
 
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
 
+            hoveredIndex = params.seriesIndex;
 
+          }
 
+          // 使用更新后的 option，渲染图表
 
+          myChart.setOption(that.option);
 
+        }
 
+      });
 
+      // 修正取消高亮失败的 bug
 
+      myChart.on('globalout', function() {
 
+        // 准备重新渲染扇形所需的参数
 
+        let isSelected;
 
+        let isHovered;
 
+        let startRatio;
 
+        let endRatio;
 
+        let k;
 
+        if (hoveredIndex !== '') {
 
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
 
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected;
 
+          isHovered = false;
 
+          k = that.option.series[hoveredIndex].pieStatus.k;
 
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio;
 
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio;
 
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
 
+          that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
 
+            isSelected,
 
+            isHovered, k, that.option.series[hoveredIndex].pieData.value);
 
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
 
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
 
+          hoveredIndex = '';
 
+        }
 
+        // 使用更新后的 option，渲染图表
 
+        myChart.setOption(that.option);
 
+      });
 
+    }
 
+  },
 
+}
 
+</script>
 
+
 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
 
+<style scoped lang="scss">
 
+.cointan{
 
+  width: 450px;
 
+  height: 302px;
 
+  background-image: url('../assets/index/litterbackground.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;
 
+}
 
+// 3d环形图
 
+.chart{
 
+  position: absolute;
 
+  margin: 90px 0 0 30px;
 
+  width: 370px;
 
+  height: 400px;
 
+}
 
+.huannum{
 
+  position: absolute;
 
+  margin: 141px 0 0 40px;
 
+  width: 205px;
 
+  text-align: center;
 
+  font-size: 24px;
 
+  font-weight: 700;
 
+  line-height: 35.52px;
 
+  color: rgba(255, 255, 255, 1);
 
+}
 
+.huantxt{
 
+  position: absolute;
 
+  margin: 171px 0 0 120px;
 
+  font-size: 12px;
 
+  font-weight: 400;
 
+  line-height: 17.76px;
 
+  color: rgba(168, 214, 255, 1);
 
+}
 
+</style>

+ 213 - 0
src/components/rightbuttom.vue
View File 

@@ -0,0 +1,213 @@
 
+<template>
 
+  <div class="cointan">
 
+    <div class="title1">
 
+      <div style="margin-left:25px;line-height: 22px;">教学环境监测</div>
 
+    </div>
 
+    <!-- 空气质量图 -->
 
+    <div class="zhiliangtu">30%</div>
 
+    <div class="kongqi">空气质量</div>
 
+    <div class="kongqizhuang">优</div>
 
+    <div class="fuyang">负氧离子</div>
 
+    <div class="fuyangzhuang">
 
+      <span style="font-family : '优设标题黑';">2</span>
 
+      <span style="font-size: 12px;">m³</span>
 
+    </div>
 
+    <!-- 温度 -->
 
+    <div class="wendukuang">
 
+      <div class="leftbg"></div>
 
+      <div class="lefttu"></div>
 
+      <div class="lefttxt">温度</div>
 
+      <div class="leftbgdanwei">
 
+        <span style="font-family : '优设标题黑';">21</span>
 
+        <span style="font-size: 12px;">℃</span>
 
+      </div>
 
+    </div>
 
+    <!-- 湿度 -->
 
+    <div class="wendukuang" style="margin-left:241px">
 
+      <div class="leftbg"></div>
 
+      <div class="lefttu2"></div>
 
+      <div class="lefttxt">湿度</div>
 
+      <div class="leftbgdanwei">
 
+        <span style="font-family : '优设标题黑';">71</span>
 
+        <span style="font-size: 12px;">%RH</span>
 
+      </div>
 
+    </div>
 
+    <!-- PM -->
 
+    <div class="wendukuang" style="margin-top:224px">
 
+      <div class="leftbg"></div>
 
+      <div class="lefttu3"></div>
 
+      <div class="lefttxt">PM2.5</div>
 
+      <div class="leftbgdanwei">
 
+        <span style="font-family : '优设标题黑';">51</span>
 
+        <span style="font-size: 12px;">g/m³</span>
 
+      </div>
 
+    </div>
 
+    <!-- co2 -->
 
+    <div class="wendukuang" style="margin:224px 0 0 241px">
 
+      <div class="leftbg"></div>
 
+      <div class="lefttu4"></div>
 
+      <div class="lefttxt">二氧化碳</div>
 
+      <div class="leftbgdanwei">
 
+        <span style="font-family : '优设标题黑';">61</span>
 
+        <span style="font-size: 12px;">m³</span>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: 'rightbuttom',
 
+  data() {
 
+    return {
 
+      
+    }
 
+  },
 
+  props: {
 
+    msg: String
 
+  },
 
+  created(){
 
+    
+  },
 
+  mounted(){
 
+    
+  },
 
+  methods:{
 
+    
+  }
 
+}
 
+</script>
 
+
 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
 
+<style scoped lang="scss">
 
+.cointan{
 
+  width: 450px;
 
+  height: 302px;
 
+  background-image: url('../assets/index/litterbackground.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;
 
+}
 
+// 空气质量图
 
+.zhiliangtu{
 
+  position: absolute;
 
+  margin: 56px 0 0 53px;
 
+  width: 75px;
 
+  height: 79px;
 
+  background-image: url('../assets/rightBottom/jiance.png');
 
+  background-size: 100%;
 
+  font-size: 18px;
 
+  font-weight: 400;
 
+  font-family : '优设标题黑';
 
+  color: rgba(255, 255, 255, 1);
 
+  text-align: center;
 
+  line-height: 100px;
 
+}
 
+.kongqi{
 
+  position: absolute;
 
+  margin: 64px 0 0 158px;
 
+  font-size: 16px;
 
+  font-weight: 400;
 
+  line-height: 23.17px;
 
+  color: rgba(255, 255, 255, 1);
 
+}
 
+.kongqizhuang{
 
+  position: absolute;
 
+  margin: 95px 0 0 158px;
 
+  width: 64px;
 
+  font-size: 24px;
 
+  font-weight: 400;
 
+  line-height: 23.17px;
 
+  color: rgba(255, 255, 255, 1);
 
+  text-align: center;
 
+  font-family : '优设标题黑';
 
+}
 
+.fuyang{
 
+  position: absolute;
 
+  margin: 64px 0 0 296px;
 
+  font-size: 16px;
 
+  font-weight: 400;
 
+  line-height: 23.17px;
 
+  color: rgba(255, 255, 255, 1);
 
+}
 
+.fuyangzhuang{
 
+  position: absolute;
 
+  margin: 95px 0 0 296px;
 
+  width: 64px;
 
+  font-size: 24px;
 
+  font-weight: 400;
 
+  line-height: 23.17px;
 
+  color: rgba(255, 255, 255, 1);
 
+  text-align: center;
 
+}
 
+// 温度
 
+.wendukuang{
 
+  position: absolute;
 
+  margin: 154px 0 0 47px;
 
+  width: 162px;
 
+  height: 50px;
 
+  border-radius: 4px;
 
+  border: 1px solid rgba(40, 89, 60, 1);
 
+}
 
+.leftbg{
 
+  position: absolute;
 
+  margin: 0px 0 0 0px;
 
+  width: 50px;
 
+  height: 50px;
 
+  border-radius: 4px;
 
+  background: rgba(67, 207, 124, 0.15);
 
+  border: 1px solid rgba(40, 89, 60, 1);
 
+}
 
+.lefttu{
 
+  position: absolute;
 
+  margin: 6px 0 0 5px;
 
+  width: 40px;
 
+  height: 40px;
 
+  background-image: url('../assets/rightBottom/wendu.png');
 
+  background-size: 100%;
 
+}
 
+.lefttu2{
 
+  position: absolute;
 
+  margin: 6px 0 0 5px;
 
+  width: 40px;
 
+  height: 40px;
 
+  background-image: url('../assets/rightBottom/shidu.png');
 
+  background-size: 100%;
 
+}
 
+.lefttu3{
 
+  position: absolute;
 
+  margin: 6px 0 0 5px;
 
+  width: 40px;
 
+  height: 40px;
 
+  background-image: url('../assets/rightBottom/pm.png');
 
+  background-size: 100%;
 
+}
 
+.lefttu4{
 
+  position: absolute;
 
+  margin: 6px 0 0 5px;
 
+  width: 40px;
 
+  height: 40px;
 
+  background-image: url('../assets/rightBottom/co2.png');
 
+  background-size: 100%;
 
+}
 
+.lefttxt{
 
+  position: absolute;
 
+  margin: 3px 0 0 63px;
 
+  font-size: 14px;
 
+  line-height: 20.27px;
 
+  color: rgba(255, 255, 255, 1);
 
+}
 
+.leftbgdanwei{
 
+  position: absolute;
 
+  margin: 23px 0 0 63px;
 
+  font-size: 20px;
 
+  line-height: 26px;
 
+  color: rgba(255, 255, 255, 1);
 
+}
 
+</style>

+ 214 - 0
src/components/righttop.vue
View File 

@@ -0,0 +1,214 @@
 
+<template>
 
+  <div class="cointan">
 
+    <div class="title1">
 
+      <div style="margin-left:25px;line-height: 22px;">教学楼教室使用情况</div>
 
+    </div>
 
+
 
+    <!-- 左侧环形图 -->
 
+    <div class="huankuang">
 
+      <div class="chart" ref="chart"></div>
 
+    </div>
 
+    <!-- 右侧信息 -->
 
+    <div class="zongkuang">
 
+      <div class="zongtu"></div>
 
+      <div class="zongtxt">房间总数</div>
 
+    </div>
 
+    <div class="zongshu">241</div>
 
+
 
+    <div class="zongkuang" style="margin-top:143px;
 
+    background: linear-gradient(90deg, rgba(103, 255, 255, 0.2), rgba(163, 248, 255, 0) 100%);">
 
+      <div class="zongtu2"></div>
 
+      <div class="zongtxt">使用中</div>
 
+    </div>
 
+    <div class="zongshu" style="margin-top:174px;">121</div>
 
+    <div class="zongline"></div>
 
+    <div class="zongbai">55%</div>
 
+
 
+    <div class="zongkuang" style="margin-top:204px;
 
+    background: linear-gradient(90deg, rgba(249, 219, 80, 0.2) , rgba(163, 248, 255, 0) 100%);">
 
+      <div class="zongtu3"></div>
 
+      <div class="zongtxt">空闲</div>
 
+    </div>
 
+    <div class="zongshu" style="margin-top:236px;">100</div>
 
+    <div class="zongline" style="margin-top:249px;"></div>
 
+    <div class="zongbai" style="margin-top:238px;">45%</div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: 'righttop',
 
+  data() {
 
+    return {
 
+      
+    }
 
+  },
 
+  props: {
 
+    msg: String
 
+  },
 
+  created(){
 
+    
+  },
 
+  mounted(){
 
+    this.getEchartData()
 
+  },
 
+  methods:{
 
+    getEchartData(){
 
+      let _this = this;
 
+      const chart = this.$refs.chart;
 
+      var option = null;
 
+      const myChart = this.$echarts.init(chart);
 
+
 
+      option = {
 
+        color: ['#66FFFF','#F9DB50'],
 
+        tooltip: {
 
+          trigger: 'item'
 
+        },
 
+        series: [
 
+          {
 
+            name: '',
 
+            type: 'pie',
 
+            radius: ['73%', '92%'],
 
+            avoidLabelOverlap: false,
 
+            label: {
 
+              show: false,
 
+              position: 'center'
 
+            },
 
+            emphasis: {
 
+              label: {
 
+                show: true,
 
+                fontSize: 40,
 
+                fontWeight: 'bold'
 
+              }
 
+            },
 
+            labelLine: {
 
+              show: false
 
+            },
 
+            data: [
 
+              { value: 48, name: '使用中' },
 
+              { value: 135, name: '空闲' }
 
+            ]
 
+          }
 
+        ]
 
+      };
 
+      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: 450px;
 
+  height: 302px;
 
+  background-image: url('../assets/index/litterbackground.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;
 
+}
 
+// 左侧环形图
 
+.huankuang{
 
+  position: absolute;
 
+  margin: 87px 0 0 41px;
 
+  width: 151px;
 
+  height: 151px;
 
+  background-image: url('../assets/rightTop/huanxing.png');
 
+  background-size: 100%;
 
+}
 
+.chart{
 
+  position: absolute;
 
+  margin: 5px 0 0 5px;
 
+  width: 141px;
 
+  height: 141px;
 
+}
 
+// 右侧信息
 
+.zongkuang{
 
+  position: absolute;
 
+  margin: 83px 0 0 227px;
 
+  width: 171px;
 
+  height: 28px;
 
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(163, 248, 255, 0) 100%);
 
+  font-size: 16px;
 
+  font-weight: 400;
 
+  letter-spacing: 3px;
 
+  line-height: 28px;
 
+  color: rgba(255, 255, 255, 1);
 
+}
 
+.zongtu{
 
+  position: absolute;
 
+  margin: 0px 0 0 -15px;
 
+  width: 28px;
 
+  height: 28px;
 
+  background-image: url('../assets/rightTop/lin1.png');
 
+  background-size: 100%;
 
+}
 
+.zongtu2{
 
+  position: absolute;
 
+  margin: 0px 0 0 -15px;
 
+  width: 28px;
 
+  height: 28px;
 
+  background-image: url('../assets/rightTop/lin2.png');
 
+  background-size: 100%;
 
+}
 
+.zongtu3{
 
+  position: absolute;
 
+  margin: 0px 0 0 -15px;
 
+  width: 28px;
 
+  height: 28px;
 
+  background-image: url('../assets/rightTop/lin3.png');
 
+  background-size: 100%;
 
+}
 
+.zongtxt{
 
+  position: absolute;
 
+  margin: 0px 0 0 31px;
 
+}
 
+.zongshu{
 
+  position: absolute;
 
+  margin: 115px 0 0 258px;
 
+  font-size: 20px;
 
+  font-weight: 400;
 
+  line-height: 26px;
 
+  color: rgba(255, 255, 255, 1);
 
+  font-family : '优设标题黑';
 
+}
 
+.zongline{
 
+  position: absolute;
 
+  margin: 188px 0 0 306px;
 
+  width: 42px;
 
+  height: 0px;
 
+  opacity: 0.5;
 
+  border: 1px dashed rgba(255, 255, 255, 1);
 
+}
 
+.zongbai{
 
+  position: absolute;
 
+  margin: 177px 0 0 357px;
 
+  font-size: 14px;
 
+  font-weight: 400;
 
+  line-height: 20.27px;
 
+  color: rgba(255, 255, 255, 1);
 
+}
 
+</style>

+ 33 - 0
src/main.js
View File 

@@ -0,0 +1,33 @@
 
+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 'echarts-gl' // 3d图表库

+import axios from 'axios'

+// 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.use(ElementUI);

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

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

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

+

+new Vue({

+  router,

+  store,

+  // ElementPlus, 

+  render: h => h(App)

+}).$mount('#app')

+ 27 - 0
src/router/index.js
View File 

@@ -0,0 +1,27 @@
 
+import Vue from 'vue'
 
+import VueRouter from 'vue-router'
 
+import index from '../views/index.vue'
 
+
 
+Vue.use(VueRouter)
 
+
 
+const routes = [
 
+  {
 
+    path: '/',
 
+    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
View File 

@@ -0,0 +1,15 @@
 
+import Vue from 'vue'
 
+import Vuex from 'vuex'
 
+
 
+Vue.use(Vuex)
 
+
 
+export default new Vuex.Store({
 
+  state: {
 
+  },
 
+  mutations: {
 
+  },
 
+  actions: {
 
+  },
 
+  modules: {
 
+  }
 
+})

+ 276 - 0
src/views/index.vue
View File 

@@ -0,0 +1,276 @@
 
+<template>
 
+  <div class="contain">
 
+    <!-- 学校logo -->
 
+    <div class="logo"></div>
 
+    <!-- 时间 -->
 
+    <div class="time">
 
+      <span>2023-05-16</span>
 
+      <span style="margin-left:5px">星期二</span>
 
+      <span style="margin-left:5px">16:51:15</span>
 
+    </div>
 
+    <!-- 中间滚动警告 -->
 
+    <div class="jingao">
 
+      <div class="jingtop"></div>
 
+      <div class="jingtu"></div>
 
+      <div class="jingtxt">预警信息</div>
 
+    </div>
 
+    <!-- 滚动部分 -->
 
+    <div class="my-inbox1" @click="clickYujin">
 
+      <div class="my-inbox" ref='box'>
 
+        <div class="my-list" v-for="(item,index) in tableData2" :key='index' ref='list'>
 
+          <!--{{item.name}}刚刚购买了产品-->
 
+          <span class="my-uname">{{item.alarmContent}}</span>
 
+        </div>
 
+      </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 {
 
+      tableData2:[
 
+        {alarmContent:'1201教室空调未关，请及时关闭'},
 
+        // {alarmContent:'1201教室空调未关，请及时关闭'},
 
+      ],//预警滚动信息
 
+      now_date:'',//当前时间
 
+    }
 
+  },
 
+  mounted(){
 
+    setTimeout(() => {//告警信息滚动
 
+      
+    }, 10)
 
+
 
+    setTimeout(() => {//告警信息滚动
 
+      this.$nextTick(() => {
 
+        this.item = this.$refs.list
 
+        console.log(this.length)
 
+        var arr = []
 
+        var margin = this.getMargin(this.item[0])
 
+        for (var i = 0; i < this.length; i++) {
 
+          arr.push(this.item[i].clientWidth + margin) // 把宽度和 margin 加起来就是每一个元素需要移动的距离
 
+        }
 
+        this.disArr = arr
 
+        console.log(arr)
 
+        // this.moveLeft()
 
+      })
 
+    }, 1000)
 
+  },
 
+  
+  methods:{
 
+    // 获取margin属性
 
+    getMargin (obj) {
 
+      var marg = window.getComputedStyle(obj, null)['margin-right']
 
+      marg = marg.replace('px', '')
 
+      return Number(marg) // 强制转化成数字
 
+    },
 
+    // 移动的方法
 
+    moveLeft () {
 
+      var that = this
 
+      var outbox = this.$refs.box
 
+      // 初始位置
 
+      var startDis = 0
 
+      this.nowTime = setInterval(function () {
 
+        startDis -= 0.4
 
+        // console.log('初始化移动：', startDis)
 
+        // console.log('初始化移动：', Math.abs(startDis) > Math.abs(that.disArr[0]))
 
+        // console.log('初始化移动2：', Math.abs(that.disArr[0]))
 
+        if (Math.abs(startDis) > Math.abs(that.disArr[0])) {
 
+          // 每次移动完一个元素的距离，就把这个元素的宽度
 
+          that.disArr.push(that.disArr.shift())
 
+          // 每次移动完一个元素的距离，就把列表数据的第一项放到最后一项
 
+          that.tableData2.push(that.tableData2.shift())
 
+          startDis = 0
 
+          // console.log('移动',that.tableData)
 
+        } else {
 
+          // console.log('不来不来就不来...')
 
+        }
 
+        outbox.style = `transform: translateX(${startDis}px)`
 
+      }, 1000 / 60)
 
+    },
 
+
 
+    //获取当前时间
 
+    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) : 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.week = week
 
+      // }, 86400000);
 
+    },
 
+  }
 
+}
 
+</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: 0px 0 0 0px;
 
+  background-image: url('../assets/index/top-bg.png');
 
+  background-size: 100%;
 
+  width: 1920px;
 
+  height: 98px;
 
+}
 
+// 时间
 
+.time{
 
+  position: absolute;
 
+  margin: 55px 0 0 1683px;
 
+  font-size: 16px;
 
+  font-weight: 500;
 
+  line-height: 22px;
 
+  color: rgba(255, 255, 255, 0.7);
 
+}
 
+// /左上方
 
+.lefttop{
 
+  position: absolute;
 
+  margin: 122px 0 0 30px;
 
+}
 
+// 左中
 
+.leftcenter{
 
+  position: absolute;
 
+  margin: 439px 0 0 30px;
 
+}
 
+// 左下
 
+.leftbuttom{
 
+  position: absolute;
 
+  margin: 754px 0 0 30px;
 
+}
 
+// 中间上层
 
+.centertop{
 
+  position: absolute;
 
+  margin: 211px 0 0 502px;
 
+}
 
+// 中间下层
 
+.centerbuttom{
 
+  position: absolute;
 
+  margin: 735px 0 0 502px;
 
+}
 
+// 右边上层
 
+.righttop{
 
+  position: absolute;
 
+  margin: 124px 0 0 1435px;
 
+}
 
+// 右边中间
 
+.rightcenter{
 
+  position: absolute;
 
+  margin: 440px 0 0 1435px;
 
+}
 
+// 右边下层
 
+.rightbuttom{
 
+  position: absolute;
 
+  margin: 756px 0 0 1435px;
 
+}
 
+
 
+// 中间滚动警告
 
+.jingao{
 
+  position: absolute;
 
+  margin: 124px 0 0 510px;
 
+  width: 882px;
 
+  height: 61px;
 
+  background-image: url('../assets/index/scrollkuang.png');
 
+  background-size: 100%;
 
+}
 
+.jingtop{
 
+  position: absolute;
 
+  width: 882px;
 
+  height: 9px;
 
+  background-image: url('../assets/index/scroll.png');
 
+  background-size: 100%;
 
+}
 
+.jingtu{
 
+  position: absolute;
 
+  margin: 7px 0 0 9px;
 
+  width: 52px;
 
+  height: 52px;
 
+  background-image: url('../assets/index/yujin.png');
 
+  background-size: 100%;
 
+}
 
+.jingtxt{
 
+  position: absolute;
 
+  margin: 12px 0 0 68px;
 
+  font-size: 30px;
 
+  font-weight: 400;
 
+  line-height: 39px;
 
+  color: rgba(255, 186, 26, 1);
 
+  font-family : '优设标题黑';
 
+}
 
+// 滚动部分
 
+.my-inbox1{
 
+    position: absolute;
 
+    margin: 136px 0 0 700px;
 
+    width: 690px;
 
+    overflow: hidden;
 
+  }
 
+  .my-inbox{
 
+    white-space: nowrap;
 
+    .my-inin{
 
+      margin: 0px 0 0 20px;
 
+      width: 670px;
 
+      height: 40px;
 
+    }
 
+    .my-list{
 
+      margin-right: 100px;
 
+      display: inline-block;
 
+      font-size: 20px;
 
+      // height: 20px;
 
+      text-indent:30px;
 
+      line-height: 40px;
 
+      .my-uname{
 
+        /*color: #FF8900;*/
 
+        color: #FFFFFF;
 
+      }
 
+    }
 
+  }
 
+</style>

+ 34 - 0
vue.config.js
View File 

@@ -0,0 +1,34 @@
 
+const CopyWebpackPlugin = require('copy-webpack-plugin');

+module.exports = {

+    assetsDir: 'static',

+    parallel: false,

+    publicPath: '/smart_canteen/',

+    devServer: {

+        open: true,

+        proxy: {

+            '/smart_canteen_api': {

+                target: ' http://daweilinli.com/smart_canteen_api',

+                changOrigin: true,

+                pathRewrite: {

+                    '^/smart_canteen_api': ''

+                }

+            },

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

+          ])

+        ]

+      }

+}

File diff suppressed because it is too large
+ 8708 - 0
yarn.lock