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