地图编辑-应答器增加一键关联到信号机功能

src/jmapNew/shape/graph/Responder/index.js

@@ -143,7 +143,7 @@ export default class Responder extends Group {
         if (!this.isShowShape) return;
         const responderStyle = this.style.Responder || defaultStyle;
         const style = responderStyle.block.mapStyle[model.type] || {fill: '#000'};
-        this.block.setStyle(style);
+        this.block && this.block.setStyle(style);
         [this.delta1, this.delta2].forEach(el => {
             model.type == 'IB' ? el.show() : el.hide();
         });

src/views/newMap/newMapdraft/mapoperate/responder/index.vue

@@ -44,6 +44,13 @@
         @deviceChange="deviceChange"
         @deviceSelect="deviceSelect" />
     </el-tab-pane>
+    <el-tab-pane class="view-control" label="批量操作" name="fourth" :lazy="lazy">
+        <responder-batch-operate
+        :responder-list="responderList"
+        :section-list="filterSectionList"
+        :signal-list="signalList"
+         />
+    </el-tab-pane>
   </el-tabs>
 </template>
 
@@ -53,13 +60,15 @@ import ConstConfig from '@/scripts/ConstConfig';
 import ResponderCreate from './responderCreate';
 import ResponderModel from './responderModel';
 import ResponderBatch from './responderBatch';
+import ResponderBatchOperate from './responderBatchOperate';
 
 export default {
     name: 'ResponderDraft',
     components: {
         ResponderCreate,
         ResponderModel,
-        ResponderBatch
+        ResponderBatch,
+        ResponderBatchOperate
     },
     props: {
         selected: {

src/views/newMap/newMapdraft/mapoperate/responder/responderBatchOperate.vue

@@ -0,0 +1,86 @@
+<template>
+	<div class="content">
+		<el-button type="primary" size="mini" @click="batchConnectHandler"
+			>一键关联信号机</el-button
+		>
+		<div class="desc">一键将未关联信号机的可变应答器关联到最近的信号机</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "responderBatchOperate",
+	props: ["responderList", "sectionList", "signalList"],
+	data() {
+		return {};
+	},
+	methods: {
+		batchConnectHandler() {
+			try {
+				let models = this.responderList.filter(
+					el => el.type === "VB" && !el.signalCode
+				);
+				models.forEach(responder => {
+					const sectionCode = responder.sectionCode;
+					let signals = this.signalList.filter(
+						signal => signal.sectionCode === sectionCode
+					);
+					if (signals.length === 1) {
+						responder.signalCode = signals[0].code;
+					} else if (signals.length > 1) {
+						let signalsPosition = signals.map(_ => _.position);
+						let nearestSignalCode =
+							signals[
+								this.chooseNearestSignal(
+									responder.position,
+									signalsPosition
+								)
+							].code;
+						responder.signalCode = nearestSignalCode;
+					}
+				});
+				this.$emit("updateMapModel", models);
+				this.$message.success("关联成功");
+			} catch (error) {
+				this.$message.info(error);
+			}
+		},
+
+		/**
+		 * 计算最近的信号机的序号
+		 * @param {Object} respPos
+		 * @param {Number} respPos.x
+		 * @param {Number} respPos.y
+		 * @returns {Number} index of the Nearest element
+		 */
+		chooseNearestSignal(respPos, sigPos) {
+			let [minDistance, idx] = [Infinity, -1];
+			sigPos.forEach((s, i) => {
+				let distance = this.distanceOf(respPos, s);
+				if (distance < minDistance) [minDistance, idx] = [distance, i];
+			});
+			return idx;
+		},
+
+		// 只是用来比较就不开根号了, 同一个区段的信号机距离应该不会溢出
+		distanceOf(a, b) {
+			return (b.x - a.x) ** 2 + (b.y - a.y) ** 2;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	.desc {
+		font-size: 12px;
+		color: gray;
+		margin-top: 10px;
+	}
+}
+</style>