Merge branch 'dev' of https://git.qcloud.com/joylink/jl-nclient into dev

src/ibp/shape/button.js

@@ -1,163 +1,121 @@
 import Group from 'zrender/src/container/Group';
 import Image from 'zrender/src/graphic/Image';
-// import Eventful from 'zrender/src/mixin/Eventful';
+import redButtonPic from '@/assets/ibp_images/red_button.png';
-
+import redButtonPicOn from '@/assets/ibp_images/red_button_on.png';
-import * as eventTool from 'zrender/src/core/event';
+import greenButtonPicOn from '@/assets/ibp_images/green_button_on.png';
-
+import greenButtonPic from '@/assets/ibp_images/green_button.png';
-import buttonPic from '@/assets/ibp_images/red_button.png';
+import blueButtonPic from '@/assets/ibp_images/blue_button.png';
-import buttonPicOn from '@/assets/ibp_images/red_button_on.png';
+import blueButtonPicOn from '@/assets/ibp_images/blue_button_on.png';
+import yellowButtonPic from '@/assets/ibp_images/yellow_button.png';
+import yellowButtonPicOn from '@/assets/ibp_images/yellow_button_on.png';
+import grayButtonPic from '@/assets/ibp_images/gray_button.png';
+import grayButtonPicOn from '@/assets/ibp_images/gray_button_on.png';
 
 export default class button extends Group {
+	static colors = new Map([
+		['red_on', [redButtonPicOn]],
+		['red_off', [redButtonPic]],
+		['green_on', [greenButtonPicOn]],
+		['green_off', [greenButtonPic]],
+		['blue_on', [blueButtonPicOn]],
+		['blue_off', [blueButtonPic]],
+		['yellow_on', [yellowButtonPicOn]],
+		['yellow_off', [yellowButtonPic]],
+		['gray_on', [grayButtonPicOn]],
+		['gray_off', [grayButtonPic]]
+	]);
 	constructor(model) {
 		super();
 		this.model = model;
 		this.zlevel = model.zlevel;
-		this.z = model.z;
 		this.create();
-		this.createMouseEvent();
 	}
 	create() {
-		const model = this.model;
 		this.imageBg = new Image({
 			zlevel: this.zlevel,
-			z: this.z,
 			style: {
-				image: model.status === '01' ? buttonPic : buttonPicOn,
+				image: this.getImagePic(),
 				x: this.model.point.x,
 				y: this.model.point.y,
-				width: this.model.width,
+				width: 70,
-				height: this.model.height
+				height: 80
 			}
 		});
 		this.add(this.imageBg);
 	}
 
+	getImagePic() {
+		const color = button.colors.get(`${this.model.color}_${this.model.status}`);
+		return color[0];
+	}
+
 	// 设置按钮状态
 	setState(model) {
 		switch (model.status) {
-		case '01': this.close(); break; 				// 关闭
+		case 'on': this.close(); break; 				// 关闭
-		case '02': this.open(); break; 					// 开放
+		case 'off': this.open(); break; 				// 开放
 		}
 	}
 
-	// 绑定按钮事件
+	onclick() {
-	createMouseEvent() {
+		if (!this.model.allowDrag) {
-		this.model.isDraging=true;
+			switch (this.model.status) {
-		if (this.model.isDraging) {
+			case 'off': {
-			// 按钮拖拽事件监听
+				this.open();
-			this.imageBg.on('mousedown', (e) => {
+				this.model.status='on';
-				if (eventTool.notLeftMouse(e)) {
+				break;
-					return;
 			}
-				eventTool.stop(e.event);
+			case 'on': {
+				this.close();
+				this.model.status='off';
+				break;
+			}
+			}
+		}
+	}
+	onmousedown(e) {
+		if (this.model.allowDrag) {
 			var x = e.offsetX;
 			var y = e.offsetY;
 			this._x = x;
 			this._y = y;
 			this._dragginger = true;
-			});
-			this.imageBg.on('mousemove', (e) => {
-				// !this._moveOnMouseMove ||
-				if (eventTool.notLeftMouse(e) || !this._dragginger) {
-					return;
 		}
-				// eventTool.stop(e.event);
+		return true;
+	}
+
+	onmousemove(e) {
+		if (this._dragginger&&this.model.allowDrag) {
 			const oldX = this._x;
 			const oldY = this._y;
 			const dx = e.offsetX - oldX;
 			const dy = e.offsetY - oldY;
 			this._x = e.offsetX;
 			this._y = e.offsetY;
-				debugger;
+			this.model.point.x=this.model.point.x+dx;
-				// this.imageBg.preventDefaultMouseMove && 
+			this.model.point.y=this.model.point.y+dy;
-				eventTool.stop(e.event);
+			this.imageBg.setStyle(this.model.point);
-				// debugger;
+		}
-				this.imageBg.setStyle({x: oldX+dx, y: oldY+dy });
+		return true;
-			});
+	}
 
-			this.imageBg.on('mouseup', (e) => {
+	onmouseup(e) {
-				if (!eventTool.notLeftMouse(e)) {
+		if (this.model.allowDrag) {
 			this._dragginger = false;
+			// this.model.point.y
+			// this.model.point.x
 		}
-			});
+		return true;
-
-		} else {
-			// 按钮的点击监听
-			this.imageBg.on('click', (e) => {
-				switch (this.model.status) {
-				case '01': {
-					this.open();
-					this.model.status='02';
-					break;
 	}
-				case '02': {
-					this.close();
-					this.model.status='01';
-					break;
-				}
-				}
-			});
-		}
-	}
-
-// if (this.model.isDraging) {
-// 	// this.mouseEvent = new EMouse(this);
-// 	// this.add(this.mouseEvent);
-// 	this.imageBg.on('mousedown', (e) => { 
-// 		// debugger;
-// 		if (eventTool.notLeftMouse(e)) {
-// 			return;
-// 		}
-// 		var x = e.offsetX;
-// 		var y = e.offsetY;
-// 		this._x = x;
-// 		this._y = y;
-// 		this._dragging = true;
-// 	});
-// 	this.imageBg.on('mousemove', (e) => {
-// 		if (eventTool.notLeftMouse(e) || !this._moveOnMouseMove ||!this._dragging) {
-// 			return;
-// 		}
-// 		const oldX = this._x;
-// 		const oldY = this._y;
-// 		const dx = e.offsetX - oldX;
-// 		const dy = e.offsetY - oldY;
-// 		this._x = e.offsetX;
-// 		this._y = e.offsetY;
-// 		debugger;
-// 		this.imageBg.preventDefaultMouseMove && eventTool.stop(e.event);
-// 		debugger;
-// 		this.imageBg.setStyle({x: dx, y: dy});
-// 		// this.trigger(this.events.__Pan, { dx, dy, oldX, oldY, newX: this._x, newY: this._y });
-
-// 	});
-// 	this.on('mouseup', (e) => { });
-// }
-// else {
-// 	this.on('mousedown', (e) => { this.mouseEvent.mouseout(e); });
-// 	// this.on('mousemove', (e) => { this.mouseEvent.mouseover(e); });
-// 	this.on('mouseup', (e) => { this.mouseEvent.mouseover(e); });
-// }
-
 	// 关闭
 	close() {
-		this.imageBg.setStyle({image: buttonPic});
+		const color = button.colors.get(`${this.model.color}_off`);
+		this.imageBg.setStyle({image: color[0]});
 	}
 	// 开放
 	open() {
-		this.imageBg.setStyle({image: buttonPicOn});
+		const color = button.colors.get(`${this.model.color}_on`);
-	}
+		this.imageBg.setStyle({image: color[0]});
-
-	getShapeTipPoint() {
-		if (this.imageBg) {
-			var distance = 2;
-			var rect = this.imageBg.getBoundingRect();
-			return {
-				x: rect.x + rect.width / 2,
-				y: rect.y - distance
-			};
-		}
-		return null;
 	}
 
 }

src/views/publish/examRule/draft/editRule.vue

@@ -54,7 +54,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
 import { getLessonTypeNum, getCourseTypeList } from '@/api/management/exam';
 import { getDetailList } from '@/api/management/dictionary';
 
@@ -121,17 +120,12 @@ export default {
 					{ required: true, validator: mark, trigger: 'blur' }
 				]
 			},
-			options: this.course,
+			options: this.$store.state.app.course,
 			typeList: [],
 			operationTypeList: [],
 			trainingOperateTypeMap: {}
 		};
 	},
-	computed: {
-		...mapState([
-			'course'
-		])
-	},
 	watch: {
 		editCourse: function (val) {
 			this.title = '修改规则';
@@ -225,7 +219,7 @@ export default {
 		async refresh() {
 			await getCourseTypeList({ lessonId: this.courseId }).then(res => {
 				const list = [];
-				Array.sort(res.data);
+				res.data.sort();
 				res.data.forEach(ele => {
 					this.typeList.forEach(v => {
 						if (ele == v.code) {