平面圖新增輪播功能

TEAMModelOS/ClientApp/view/smartclassdashboard/Index.vue

@@ -61,13 +61,22 @@
               <div style="height: 60%;width:100%;">
                 <div style="height: 100%;">
                   <div style="height: 80%;text-align: center;">
-                    <img id="planImg" style="width: 100%;height: 100%;display: none;" src="@/assets/image/floorplan.png" />
-                    <img id="pin" style="display: none;" src="@/assets/pin.svg" />
-                    <img id="greenpin" style="display: none;" src="@/assets/greenpin.svg" />
-                    <img id="redpin" style="display: none;" src="@/assets/redpin.svg" />
-                    <canvas id="floorplan" style="width: 100%;height: 100%;">
-                      当前浏览器不支持canvas
-                    </canvas>
+                    <template v-if="floorPlanData">                      
+                      <Carousel :dots="floorPlanData.length > 1 ? 'inside' :'none'" loop>
+                        <CarouselItem v-for="(item, index) in floorPlanData" :key="index">
+                            <img style="width: 100%;height: 100%;" :src="item" />
+                        </CarouselItem>                        
+                    </Carousel>                      
+                    </template>
+                    <template v-else>
+                      <img id="planImg" style="width: 100%;height: 100%;display: none;" src="@/assets/image/floorplan.png" />
+                      <img id="pin" style="display: none;" src="@/assets/pin.svg" />
+                      <img id="greenpin" style="display: none;" src="@/assets/greenpin.svg" />
+                      <img id="redpin" style="display: none;" src="@/assets/redpin.svg" />
+                      <canvas id="floorplan" style="width: 100%;height: 100%;">
+                        当前浏览器不支持canvas
+                      </canvas>
+                    </template>
                   </div>
                   <div style="height: 20%;padding: 0 5%;border-bottom: 1px solid #94998a;">
                     <Row>
@@ -605,6 +614,12 @@ export default {
     mostEffUser(){
       return this.classData.mostEffUser
     },
+    floorPlanData(){
+      if(!this.classData.floorPlan || (this.classData.floorPlan && this.classData.floorPlan.length == 0)){
+        this.buildDefaultFloorplan();
+      }
+      return this.classData.floorPlan
+    },
   },
   methods:{
     pieHeightLight: function(type, value) {
@@ -668,6 +683,33 @@ export default {
           return 'maintain'
           break;
       }
+    },
+    buildDefaultFloorplan(){
+      this.$nextTick(() => {    
+        var c=document.getElementById("floorplan");
+        var ctx=c.getContext("2d");
+        var img=document.getElementById("planImg");
+        var pin=document.getElementById("pin");
+        var greenpin=document.getElementById("greenpin");
+        var redpin=document.getElementById("redpin");    
+        c.width = img.width;
+        c.height = img.height
+        var pinW = 35;
+        var pinH = 35;
+        ctx.clearRect(0, 0, img.width, img.height);
+        ctx.drawImage(img,0,0);
+        ctx.drawImage(redpin, (c.width*0.595) ,(c.height * 0.67) , pinW, pinH);
+        ctx.drawImage(greenpin, (c.width*0.45) ,(c.height * 0.23) , pinW, pinH);
+        ctx.drawImage(greenpin, (c.width*0.455) ,(c.height * 0.79) , pinW, pinH);
+        ctx.drawImage(greenpin, (c.width*0.595) ,(c.height * 0.79) , pinW, pinH);
+        ctx.drawImage(greenpin, (c.width*0.245) ,(c.height * 0.79) , pinW, pinH);
+        ctx.drawImage(pin, (c.width*0.52) ,(c.height * 0.23) , pinW, pinH);
+        ctx.drawImage(pin, (c.width*0.59) ,(c.height * 0.23) , pinW, pinH);
+        ctx.drawImage(pin, (c.width*0.595) ,(c.height * 0.73) , pinW, pinH);
+        ctx.drawImage(pin, (c.width*0.525) ,(c.height * 0.73) , pinW, pinH);
+        ctx.drawImage(pin, (c.width*0.525) ,(c.height * 0.79) , pinW, pinH);
+        ctx.drawImage(pin, (c.width*0.455) ,(c.height * 0.73) , pinW, pinH);     
+      })
     }
   },
   filters: {
@@ -706,7 +748,7 @@ export default {
         _this.$store.state.classMgmt.data = res
       })      
     } else {
-      this.$api.ClassMgmt.GetTestIoTData({schoolshortcode: 'HABOOK'}).then(res => {
+      this.$api.ClassMgmt.GetTestIoTData({schoolshortcode: 'hbtw'}).then(res => {
         console.log(res)
         _this.$store.state.classMgmt.data = res
       })
@@ -714,29 +756,7 @@ export default {
   },
   mounted(){
     this.$nextTick(() => {    
-      var c=document.getElementById("floorplan");
-      var ctx=c.getContext("2d");
-      var img=document.getElementById("planImg");
-      var pin=document.getElementById("pin");
-      var greenpin=document.getElementById("greenpin");
-      var redpin=document.getElementById("redpin");    
-      c.width = img.width;
-      c.height = img.height
-      var pinW = 35;
-      var pinH = 35;
-      ctx.clearRect(0, 0, img.width, img.height);
-      ctx.drawImage(img,0,0);
-      ctx.drawImage(redpin, (c.width*0.595) ,(c.height * 0.67) , pinW, pinH);
-      ctx.drawImage(greenpin, (c.width*0.45) ,(c.height * 0.23) , pinW, pinH);
-      ctx.drawImage(greenpin, (c.width*0.455) ,(c.height * 0.79) , pinW, pinH);
-      ctx.drawImage(greenpin, (c.width*0.595) ,(c.height * 0.79) , pinW, pinH);
-      ctx.drawImage(greenpin, (c.width*0.245) ,(c.height * 0.79) , pinW, pinH);
-      ctx.drawImage(pin, (c.width*0.52) ,(c.height * 0.23) , pinW, pinH);
-      ctx.drawImage(pin, (c.width*0.59) ,(c.height * 0.23) , pinW, pinH);
-      ctx.drawImage(pin, (c.width*0.595) ,(c.height * 0.73) , pinW, pinH);
-      ctx.drawImage(pin, (c.width*0.525) ,(c.height * 0.73) , pinW, pinH);
-      ctx.drawImage(pin, (c.width*0.525) ,(c.height * 0.79) , pinW, pinH);
-      ctx.drawImage(pin, (c.width*0.455) ,(c.height * 0.73) , pinW, pinH);
+     
     })
   }
 }