更新接口连接

src/components/centerTop.vue

@@ -3,16 +3,22 @@
     <div class="title1">
       <div style="margin-left:25px;line-height: 22px;">
         监控实时预览 
-        <span style="font-size:12px">/ 1002教室</span>
+        <span style="font-size:12px">/ {{jiaoshi}}教室</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 v-for="(item,index) in jiankongList" :key="index">
+        <div :class="['mokuai',qie==index?'mokuaidian':'']" v-if="index>=qie">
+          <div class="jiaoshi">{{ item.installationSite }}</div>
           <div class="tubiao"></div>
-        </div>
+        </div></div>
+        <div v-for="(item,index) in jiankongList" :key="index">
+        <div :class="['mokuai',qie==index?'mokuaidian':'']" v-if="index<qie">
+          <div class="jiaoshi">{{ item.installationSite }}</div>
+          <div class="tubiao"></div>
+        </div></div>
       </div>
     </div>
     <!-- 右侧视频 -->
@@ -31,7 +37,11 @@ export default {
     return {
       lingdao:false,
       title:'欢迎各位领导莅临南昌交通学院参观指导！',
-      gun:true,
+      jiaoshi:'',//实时教室
+      jiankongList:[],//教室监控列表
+      totalLength:0,//监控列表长度
+      timers:null,
+      qie:0,
     }
   },
   props: {
@@ -41,10 +51,48 @@ export default {
     
   },
   mounted(){
-    
+    this.getjiaoshiList()
+  },
+  beforeDestroy(){
+    // 每次切换排行板块时清除上一次的定时器,如果不清除的话切换页面定时器就会失效。切换时间就会有问题
+    clearInterval(this.timers)
+    this.timers=null
   },
   methods:{
-    
+    //教室监控列表
+    getjiaoshiList() {
+      this.jiankongList=[]
+      this.$axios.post('/jiao/video/getVideoList',
+      {
+        "curPage": "1",
+        "pageSize": "10"
+      },
+      {
+        headers: {
+        "token": sessionStorage.getItem('token'),//登录获取的token
+        },
+      }
+      ).then(res => {
+        if (res.data.code==200) {
+          this.totalLength=res.data.data.data.length
+          // 教室监控列表
+          res.data.data.data.forEach(data => {
+            this.jiankongList.push(data)
+          })
+          console.log(this.jiankongList)
+
+          // 左侧列表5秒切换一次
+          this.timers=setInterval(()=>{
+            this.qie++
+            this.jiaoshi=this.jiankongList[this.qie].installationSite
+            if(this.qie==this.totalLength){
+              this.qie=0
+            }
+          },5000)
+          this.jiaoshi=this.jiankongList[this.qie].installationSite
+        }
+      })
+    },
   }
 }
 </script>
@@ -78,7 +126,12 @@ export default {
   position: absolute;
   margin: 11px 0 0 30px;
   width: 171px;
-  height: 378px;
+  height: 389px;
+  overflow-y: auto;
+}
+::-webkit-scrollbar {
+/*隐藏滚轮*/
+display: none;
 }
 .mokuai{
   margin: 9px 0 0 0px;
@@ -86,6 +139,13 @@ export default {
   height: 34px;
   background: linear-gradient(90deg, rgba(103, 255, 255, 0.2), rgba(17, 104, 172, 0) 100%);
 }
+//点击效果
+.mokuaidian{
+  margin: 9px 0 0 0px;
+  width: 171px;
+  height: 34px;
+  background: linear-gradient(90deg, rgba(103, 255, 255, 0.6) , rgba(17, 104, 172, 0) 100%);
+}
 .jiaoshi{
   position: absolute;
   margin: 7px 0 0 40px;

src/components/centerbuttom.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="cointan">
     <div class="title1">
-      <div style="margin-left:25px;line-height: 22px;">宿舍出入人员信息</div>
+      <div style="margin-left:25px;line-height: 22px;">教室排课表</div>
     </div>
     <!-- 表格 -->
     <div class="xia-table">
@@ -47,9 +47,32 @@ export default {
     
   },
   mounted(){
-    
+    this.getKecheng()
   },
   methods:{
+    //教室排课表
+    getKecheng() {
+      this.tableData=[]
+      this.$axios.post('/jiao/api/listCourse',
+      {
+        "pageNum": 1,
+        "pageSize": 10,
+        "building": "博学楼"
+      },
+      {
+        headers: {
+        "token": sessionStorage.getItem('token'),//登录获取的token
+        },
+      }
+      ).then(res => {
+        if (res.data.code==200) {
+          // 课程表
+          res.data.list.forEach(data => {
+            this.tableData.push(data)
+          })
+        }
+      })
+    },
     tableRowClassName({row, rowIndex}) {
       let stylejson = {};
       if(rowIndex%2==1){

src/components/leftButtom.vue

@@ -1,35 +1,35 @@
 <template>
   <div class="cointan">
     <div class="title1">
-      <div style="margin-left:25px;line-height: 22px;">设备数量</div>
+      <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 class="huannum">{{total}}</div>
+      <div class="huantxt">空调总数</div>
     </div>
     <!-- 两边介绍 -->
     <div class="jieshao">
-      200<br/>
+      {{zaixian}}<br/>
       在线数
       <div class="circle"></div>
     </div>
 
-    <div class="jieshao" style="margin-left:349px">
-      40<br/>
+    <div class="jieshao" style="margin-left:349px;margin-top: 112px;">
+      {{lixian}}<br/>
       离线数
       <div class="circle" style="background: #F9DA4F;"></div>
     </div>
 
-    <div class="jieshao" style="margin-top:183px">
+    <!-- <div class="jieshao" style="margin-top:183px">
       10<br/>
       故障数
       <div class="circle" style="background: #23BE72;"></div>
-    </div>
+    </div> -->
 
     <div class="jieshao" style="margin:183px 0 0 349px">
-      10<br/>
+      {{gaojin}}<br/>
       告警数
       <div class="circle" style="background: #7D5AFB;"></div>
     </div>
@@ -41,7 +41,10 @@ export default {
   name: 'leftButtom',
   data() {
     return {
-      
+      total:'',//空调总数
+      zaixian:'',//在线数
+      lixian:'',//离线数
+      gaojin:'',//告警数
     }
   },
   props: {
@@ -51,9 +54,34 @@ export default {
     
   },
   mounted(){
-    this.getEchartData()
+    this.getJiang()
   },
   methods:{
+    //空调状况分析
+    getJiang() {
+      this.$axios.post('/jiao/video/getAirConditionAnalysis',
+      {
+        
+      },
+      {
+        headers: {
+        "token": sessionStorage.getItem('token'),//登录获取的token
+        },
+      }
+      ).then(res => {
+        if (res.data.code==200) {
+          this.total=res.data.data.total_equipment
+          this.zaixian=res.data.data.num_of_online
+          this.lixian=res.data.data.num_of_offline
+          this.gaojin=res.data.data.num_of_alarms
+          
+          this.getEchartData()
+        }
+      }).catch(err => {
+        console.log(err);
+        this.$message.error('捕捉异常：' + err)
+      })
+    },
     getEchartData(){
       let _this = this;
       const chart = this.$refs.chart;
@@ -61,7 +89,7 @@ export default {
       const myChart = this.$echarts.init(chart);
 
       option = {
-        color: ['#00D1C8','#23BE72','#F9DA4F','#7D5AFB' ],
+        color: ['#00D1C8','#F9DA4F','#7D5AFB' ],
         tooltip: {
           trigger: 'item'
         },
@@ -86,10 +114,9 @@ export default {
               show: false
             },
             data: [
-              { value: 1048, name: '在线数' },
-              { value: 735, name: '故障数' },
-              { value: 580, name: '离线数' },
-              { value: 484, name: '告警数' }
+              { value: this.zaixian, name: '在线数' },
+              { value: this.lixian, name: '离线数' },
+              { value: this.gaojin, name: '告警数' }
             ]
           }
         ]
@@ -170,7 +197,7 @@ export default {
 // 两边介绍
 .jieshao{
   position: absolute;
-  margin: 110px 0 0 39px;
+  margin: 135px 0 0 39px;
   width: 55px;
   font-size: 14px;
   font-weight: 400;

src/components/leftCenter.vue

@@ -13,7 +13,8 @@ export default {
   name: 'leftCenter',
   data() {
     return {
-      
+      tableData:[],//设备总数
+      tableUsing:[],//设备使用数
     }
   },
   props: {
@@ -23,9 +24,48 @@ export default {
     
   },
   mounted(){
-    this.getEchartData()
+    this.getShebei()
   },
   methods:{
+    //设备使用情况
+    getShebei() {
+      this.tableData=[]
+      this.tableUsing=[]
+      this.$axios.post('/jiao/video/getEquipmentUsage',
+      {
+        
+      },
+      {
+        headers: {
+        "token": sessionStorage.getItem('token'),//登录获取的token
+        },
+      }
+      ).then(res => {
+        if (res.data.code==200) {
+          var diannao=''
+          var shexiangtou=''
+          var kongtiao=''
+          var diannao2=''
+          var shexiangtou2=''
+          var kongtiao2=''
+          // 设备总数
+          diannao=res.data.data.computerUsage.computer_total
+          shexiangtou=res.data.data.projectorUsage.projector_total
+          kongtiao=res.data.data.airUsage.air_total
+          this.tableData.push(diannao,shexiangtou,kongtiao)
+          // console.log(this.tableData)
+          // 设备使用数
+          diannao2=res.data.data.computerUsage.computer_on_using
+          shexiangtou2=res.data.data.projectorUsage.projector_on_using
+          kongtiao2=res.data.data.airUsage.air_on_using
+          this.tableUsing.push(diannao2,shexiangtou2,kongtiao2)
+          this.getEchartData()
+        }
+      }).catch(err => {
+        console.log(err);
+        this.$message.error('捕捉异常：' + err)
+      })
+    },
     // 用电用水
     getEchartData() {
       let _this = this;
@@ -79,7 +119,7 @@ export default {
               },
             },
             type: 'category',
-            data: ['投影仪', '电脑', '空调', '摄像头']
+            data: ['电脑', '摄像头', '空调']
           }
         ],
         yAxis: [
@@ -132,7 +172,7 @@ export default {
                 }
               ])
             },
-            data: [120, 282, 111, 234, 220, 340, 310]
+            data: this.tableData//[120, 282, 111, 234, 220, 340, 310]
           },{
             name: '使用设备',
             type: 'bar',
@@ -153,7 +193,7 @@ export default {
                 }
               ])
             },
-            data: [30, 32, 71, 264, 90, 340, 250]
+            data: this.tableUsing//[30, 32, 71, 264, 90, 340, 250]
           },
         ]
       };

src/components/leftTop.vue

@@ -1,10 +1,27 @@
 <template>
   <div class="cointan">
     <div class="title1">
-      <div style="margin-left:25px;line-height: 22px;">近30日能耗管理</div>
+      <div style="margin-left:25px;line-height: 22px;font-family : '优设标题黑';">
+        各学院学生人数
+        <span class="xiaobiao">/  学院数量：{{xuelength}}</span>
+      </div>
     </div>
-    <!-- 区域图 -->
-    <div class="chart" ref="chart"></div>
+    <!-- 滚动块 -->
+    <el-carousel trigger="click" height="260px" style="height: 260px;width: 390px;margin: 44px 0 0 28px;">
+      <el-carousel-item v-for="(list,index) in xueyuan" :key="index">
+        <div class="gun">
+          <div class="mokuai" v-for="(item,index2) in list" :key="index2">
+            <div class="loudong"></div>
+            <div class="bgtu">{{item.college}}</div>
+            <div class="zongtext">
+              <div class="xueyuanshu">{{item.num}}</div>
+            </div>
+            <div class="zongnum">人</div>
+            <div class="zongline"></div>
+          </div>
+        </div>
+      </el-carousel-item>
+    </el-carousel>
   </div>
 </template>
 
@@ -16,195 +33,52 @@ export default {
   },
   data() {
     return {
-      
+      xueyuan:[],//各学院
+      xuelength:'',//学院数量
     }
   },
   mounted(){
-    this.getEchartData()
+    this.getxueyuan()
   },
   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: ''
+    //各学院人数
+    getxueyuan() {
+      this.xueyuan=[]
+      this.$axios.post('/jiao/api/getNumberInCollege',
+      {
+      },
+      {
+        headers: {
+        "token": sessionStorage.getItem('token'),//登录获取的token
         },
-        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'
+      }
+      ).then(res => {
+        if (res.data.code==200) {
+          this.xuelength=res.data.data.length
+          // 课程表
+          res.data.data.forEach(data => {
+            this.xueyuan.push(data)
+          })
+          
+          let newDataList = []
+          let current = 0
+          if(this.xueyuan && this.xueyuan.length>0){
+            for(let i=0;i<=this.xueyuan.length-1;i++){
+              if(i%6 !== 0 || i === 0 ){
+                if(!newDataList[current]){
+                  newDataList.push([this.xueyuan[i]])
+                }else{
+                  newDataList[current].push(this.xueyuan[i])
+                }
+              }else{
+                current++
+                newDataList.push([this.xueyuan[i]])
               }
-            },
+            }
           }
-        ],
-        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;
+          this.xueyuan = [...newDataList]
+        }
+      })
     },
   },
 }
@@ -223,15 +97,75 @@ export default {
   position: absolute;
   margin: 9px 0 0 10px;
   font-size: 20px;
-  font-family : '优设标题黑';
   color: rgba(255, 255, 255, 1);
   font-weight: 400;
 }
-// 区域图
-.chart{
+.xiaobiao{
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0px;
+  color: rgba(255, 255, 255, 1);
+}
+// 走马灯滚动
+.gun{
+  position: absolute;
+  margin: 0px 0 0 0px;
+  width: 390px;
+  height: 260px;
+}
+.mokuai{
+  // margin-top: 10px;
+  width: 390px;
+  height: 38px;
+}
+.loudong{
+  position: absolute;
+  margin: 21px 0 0 0px;
+  width: 7px;
+  height: 7px;
+  background: rgba(204, 204, 204, 1);
+}
+.bgtu{
+  position: absolute;
+  margin: 11px 0 0 14px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 23.17px;
+  color: rgba(255, 255, 255, 1);
+}
+.zongtext{
+  position: absolute;
+  margin: 8px 0 0 241px;
+  background-image: url('../assets/leftTop/bg.png');
+  background-size: 100%;
+  width: 122px;
+  height: 24px;
+}
+.xueyuanshu{
+  position: absolute;
+  width: 86px;
+  height: 24px;
+  margin: 0px 0 0 36px;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 24px;
+  color: rgba(255, 255, 255, 1);
+  font-family : '优设标题黑';
+  text-align: center;
+}
+.zongnum{
+  position: absolute;
+  margin: 17px 0 0 367px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 17.38px;
+  color: rgba(255, 255, 255, 1);
+}
+.zongline{
   position: absolute;
-  margin: 60px 0 0 30px;
-  width: 420px;
-  height: 220px;
+  margin: 37px 0 0 0px;
+  width: 380px;
+  height: 1px;
+  background: rgba(61, 90, 94, 1);
 }
 </style>

src/components/rightCenter.vue

@@ -5,7 +5,7 @@
     </div>
     <!-- 3d环形图 -->
     <div class="chart" id="cityGreenLand-charts"></div>
-    <div class="huannum">230</div>
+    <div class="huannum">{{ totalNum }}</div>
     <div class="huantxt">总获奖数</div>
   </div>
 </template>
@@ -43,14 +43,49 @@ export default {
           color: 'rgba(248, 201, 59, 0.6)',
         }
       }],
+      totalNum:0,//年级总获奖人数
     }
   },
   mounted(){
-    this.$nextTick(function() {
-      this.init();
-    });
+    this.getJiang()
+    
   },
   methods:{
+    //各年级获奖人数
+    getJiang() {
+      this.$axios.post('/jiao/api/getNumbOfAwardWinners',
+      {
+        
+      },
+      {
+        headers: {
+        "token": sessionStorage.getItem('token'),//登录获取的token
+        },
+      }
+      ).then(res => {
+        if (res.data.code==200) {
+          // console.log(res.data.data)
+          var shuzu=res.data.data
+          // 年级
+          this.optionData[0].name=shuzu[0].grade
+          this.optionData[1].name=shuzu[1].grade
+          this.optionData[2].name=shuzu[2].grade
+          this.optionData[3].name=shuzu[3].grade
+
+          this.optionData[0].value=parseInt(shuzu[0].number)
+          this.optionData[1].value=parseInt(shuzu[1].number)
+          this.optionData[2].value=parseInt(shuzu[2].number)
+          this.optionData[3].value=parseInt(shuzu[3].number)
+          this.totalNum=this.optionData[0].value+this.optionData[1].value+this.optionData[2].value+this.optionData[3].value
+          this.$nextTick(function() {
+            this.init();
+          });
+        }
+      }).catch(err => {
+        console.log(err);
+        this.$message.error('捕捉异常：' + err)
+      })
+    },
     init() {
       //构建3d饼状图
       let myChart = this.$echarts.init(document.getElementById('cityGreenLand-charts'));

src/components/rightbuttom.vue

@@ -3,13 +3,13 @@
     <div class="title1">
       <div style="margin-left:25px;line-height: 22px;">教学环境监测</div>
     </div>
-    <!-- 空气质量图 -->
-    <div class="zhiliangtu">30%</div>
+    <!-- 空气质量图 30%-->
+    <div class="zhiliangtu"></div>
     <div class="kongqi">空气质量</div>
-    <div class="kongqizhuang">优</div>
+    <div class="kongqizhuang">{{zhiliang}}</div>
     <div class="fuyang">负氧离子</div>
     <div class="fuyangzhuang">
-      <span style="font-family : '优设标题黑';">2</span>
+      <span style="font-family : '优设标题黑';">{{fuyang}}</span>
       <span style="font-size: 12px;">m³</span>
     </div>
     <!-- 温度 -->
@@ -18,7 +18,7 @@
       <div class="lefttu"></div>
       <div class="lefttxt">温度</div>
       <div class="leftbgdanwei">
-        <span style="font-family : '优设标题黑';">21</span>
+        <span style="font-family : '优设标题黑';">{{tempera}}</span>
         <span style="font-size: 12px;">℃</span>
       </div>
     </div>
@@ -28,7 +28,7 @@
       <div class="lefttu2"></div>
       <div class="lefttxt">湿度</div>
       <div class="leftbgdanwei">
-        <span style="font-family : '优设标题黑';">71</span>
+        <span style="font-family : '优设标题黑';">{{shidu}}</span>
         <span style="font-size: 12px;">%RH</span>
       </div>
     </div>
@@ -38,7 +38,7 @@
       <div class="lefttu3"></div>
       <div class="lefttxt">PM2.5</div>
       <div class="leftbgdanwei">
-        <span style="font-family : '优设标题黑';">51</span>
+        <span style="font-family : '优设标题黑';">{{pm25}}</span>
         <span style="font-size: 12px;">g/m³</span>
       </div>
     </div>
@@ -48,7 +48,7 @@
       <div class="lefttu4"></div>
       <div class="lefttxt">二氧化碳</div>
       <div class="leftbgdanwei">
-        <span style="font-family : '优设标题黑';">61</span>
+        <span style="font-family : '优设标题黑';"></span>
         <span style="font-size: 12px;">m³</span>
       </div>
     </div>
@@ -60,7 +60,12 @@ export default {
   name: 'rightbuttom',
   data() {
     return {
-      
+      zhiliang:'',//空气质量
+      fuyang:'',//负氧离子
+      tempera:'',//温度
+      shidu:'',//湿度
+      pm25:'',//pm2.5
+      co2:'',//co2
     }
   },
   props: {
@@ -70,10 +75,45 @@ export default {
     
   },
   mounted(){
-    
+    this.getHuanjing()
   },
   methods:{
-    
+    //教学环境监测
+    getHuanjing() {
+      this.$axios.post('/jiao/api/teaEnvTesting',
+      {
+        
+      },
+      {
+        headers: {
+        "token": sessionStorage.getItem('token'),//登录获取的token
+        },
+      }
+      ).then(res => {
+        if (res.data.code==200) {
+          this.fuyang=res.data.data[0].negaticeO2Ion
+          this.tempera=res.data.data[0].temperature
+          this.shidu=res.data.data[0].humidity
+          this.pm25=res.data.data[0].pm25
+          // this.co2=res.data.data.
+          if(this.pm25<12){
+            this.zhiliang='优'
+          }else if(12.1<this.pm25<35.4 ){
+            this.zhiliang='良'
+          }
+          else if(35.5<this.pm25<150.4 ){
+            this.zhiliang='不健康'
+          }else if(150.5<this.pm25<250.4 ){
+            this.zhiliang='非常不健康'
+          }else if(250.4<this.pm25){
+            this.zhiliang='危险'
+          }
+        }
+      }).catch(err => {
+        console.log(err);
+        this.$message.error('捕捉异常：' + err)
+      })
+    },
   }
 }
 </script>

src/components/righttop.vue

@@ -13,54 +13,82 @@
       <div class="zongtu"></div>
       <div class="zongtxt">房间总数</div>
     </div>
-    <div class="zongshu">241</div>
+    <div class="zongshu">{{ total }}</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="zongshu" style="margin-top:174px;">{{ totalusing }}</div>
     <div class="zongline"></div>
-    <div class="zongbai">55%</div>
+    <div class="zongbai">{{ usingPrecent }}</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="zongshu" style="margin-top:236px;">{{ totalunnsing }}</div>
     <div class="zongline" style="margin-top:249px;"></div>
-    <div class="zongbai" style="margin-top:238px;">45%</div>
+    <div class="zongbai" style="margin-top:238px;">{{ unusingPrecent }}</div>
   </div>
 </template>
 
 <script>
+import axios from 'axios'
 export default {
   name: 'righttop',
   data() {
     return {
-      
+      total: '',//房间总数
+      totalusing: '',//使用中
+      usingPrecent: '',//使用中的比例
+      totalunnsing: '',//空闲
+      unusingPrecent: '',//空闲的比例
     }
   },
   props: {
     msg: String
   },
-  created(){
-    
+  created() {
+
   },
-  mounted(){
-    this.getEchartData()
+  mounted() {
+    this.getJiaoshi()
   },
-  methods:{
-    getEchartData(){
+  methods: {
+    //教室使用情况
+    getJiaoshi() {
+      this.$axios.post('/jiao/api/theClassrooms',
+      {
+        "building":"博学楼",
+      },
+      {
+        headers: {
+        "token": sessionStorage.getItem('token'),//登录获取的token
+        },
+      }
+      ).then(res => {
+        if (res.data.code==200) {
+          this.total=parseInt(res.data.data.total)
+          this.totalusing=parseInt(res.data.data.totalUsing)
+          this.usingPrecent=parseFloat(res.data.data.totalUsingPercent)+'%'
+          this.totalunnsing=parseInt(res.data.data.totalUnusing)
+          this.unusingPrecent=parseFloat(res.data.data.totalUnusingPercent)+'%'
+          
+          this.getEchartData()
+        }
+      })
+    },
+    getEchartData() {
       let _this = this;
       const chart = this.$refs.chart;
       var option = null;
       const myChart = this.$echarts.init(chart);
 
       option = {
-        color: ['#66FFFF','#F9DB50'],
+        color: ['#66FFFF', '#F9DB50'],
         tooltip: {
           trigger: 'item'
         },
@@ -85,8 +113,8 @@ export default {
               show: false
             },
             data: [
-              { value: 48, name: '使用中' },
-              { value: 135, name: '空闲' }
+              { value: this.totalusing, name: '使用中' },
+              { value: this.totalunnsing, name: '空闲' }
             ]
           }
         ]
@@ -116,22 +144,24 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-.cointan{
+.cointan {
   width: 450px;
   height: 302px;
   background-image: url('../assets/index/litterbackground.png');
   background-size: 100%;
 }
-.title1{
+
+.title1 {
   position: absolute;
   margin: 9px 0 0 10px;
   font-size: 20px;
-  font-family : '优设标题黑';
+  font-family: '优设标题黑';
   color: rgba(255, 255, 255, 1);
   font-weight: 400;
 }
+
 // 左侧环形图
-.huankuang{
+.huankuang {
   position: absolute;
   margin: 87px 0 0 41px;
   width: 151px;
@@ -139,14 +169,16 @@ export default {
   background-image: url('../assets/rightTop/huanxing.png');
   background-size: 100%;
 }
-.chart{
+
+.chart {
   position: absolute;
   margin: 5px 0 0 5px;
   width: 141px;
   height: 141px;
 }
+
 // 右侧信息
-.zongkuang{
+.zongkuang {
   position: absolute;
   margin: 83px 0 0 227px;
   width: 171px;
@@ -158,7 +190,8 @@ export default {
   line-height: 28px;
   color: rgba(255, 255, 255, 1);
 }
-.zongtu{
+
+.zongtu {
   position: absolute;
   margin: 0px 0 0 -15px;
   width: 28px;
@@ -166,7 +199,8 @@ export default {
   background-image: url('../assets/rightTop/lin1.png');
   background-size: 100%;
 }
-.zongtu2{
+
+.zongtu2 {
   position: absolute;
   margin: 0px 0 0 -15px;
   width: 28px;
@@ -174,7 +208,8 @@ export default {
   background-image: url('../assets/rightTop/lin2.png');
   background-size: 100%;
 }
-.zongtu3{
+
+.zongtu3 {
   position: absolute;
   margin: 0px 0 0 -15px;
   width: 28px;
@@ -182,20 +217,23 @@ export default {
   background-image: url('../assets/rightTop/lin3.png');
   background-size: 100%;
 }
-.zongtxt{
+
+.zongtxt {
   position: absolute;
   margin: 0px 0 0 31px;
 }
-.zongshu{
+
+.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 : '优设标题黑';
+  font-family: '优设标题黑';
 }
-.zongline{
+
+.zongline {
   position: absolute;
   margin: 188px 0 0 306px;
   width: 42px;
@@ -203,12 +241,12 @@ export default {
   opacity: 0.5;
   border: 1px dashed rgba(255, 255, 255, 1);
 }
-.zongbai{
+
+.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>
+}</style>

src/router/index.js

@@ -1,12 +1,18 @@
 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: '/',
+		path: "/",
+		name: "Login",
+		component: Login,
+	},
+  {
+    path: '/index',
     name: 'index',
     component: index
   },

src/views/Login.vue

@@ -0,0 +1,307 @@
+<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>
+						<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: '',
+				},
+				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: {
+			submitForm(formName) {
+				let _this = this;
+				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(`/jiao/login`,
+					{
+						'username':username,//账号
+						'password':userpass,//密码
+					},)
+					.then(res => {
+						console.log(res.data);
+						if (res.data.code==200) {
+							_this.$message.success(res.data.message);
+							// sessionStorage.setItem('uname', username)
+							// sessionStorage.setItem('userType', res.data.data.userType)
+							sessionStorage.setItem('token', res.data.data.token)
+							_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: 470px;
+		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;
+	}
+
+	.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>

src/views/index.vue

@@ -4,9 +4,9 @@
     <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>
+      <span>{{now_date}}</span>
+      <span style="margin-left:5px">{{week}}</span>
+      <span style="margin-left:5px">{{time}}</span>
     </div>
     <!-- 中间滚动警告 -->
     <div class="jingao">
@@ -70,9 +70,14 @@ export default {
         // {alarmContent:'1201教室空调未关，请及时关闭'},
       ],//预警滚动信息
       now_date:'',//当前时间
+      week:'',//周几
+      time:'',//具体时间
+      t1:null,//定时器
     }
   },
   mounted(){
+    this.getNowDate()
+    console.log(sessionStorage.getItem('token'))
     setTimeout(() => {//告警信息滚动
       
     }, 10)
@@ -92,7 +97,12 @@ export default {
       })
     }, 1000)
   },
-  
+  beforeDestroy() {
+    // 页面关闭清除定时器
+    clearInterval(this.t1)
+    // 清除定时器标识
+    this.t1 = null
+  },
   methods:{
     // 获取margin属性
     getMargin (obj) {
@@ -128,7 +138,7 @@ export default {
     //获取当前时间
     getNowDate() {
       var _this = this;
-      // this.timer = setInterval(function() {
+      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();
@@ -139,9 +149,10 @@ export default {
         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.now_date = aData.getFullYear() + "-" + month + "-" + date;
+        _this.time=Hour+":"+Miunte+":"+Seconds
         _this.week = week
-      // }, 86400000);
+      }, 1000);
     },
   }
 }

vue.config.js

@@ -2,15 +2,15 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 module.exports = {
     assetsDir: 'static',
     parallel: false,
-    publicPath: '/smart_canteen/',
+    publicPath: '/smart/',
     devServer: {
         open: true,
         proxy: {
-            '/smart_canteen_api': {
-                target: ' http://daweilinli.com/smart_canteen_api',
+            '/jiao': {
+                target: 'http://172.16.20.77:8088',
                 changOrigin: true,
                 pathRewrite: {
-                    '^/smart_canteen_api': ''
+                    '^/jiao': ''
                 }
             },
             '/weather': {