属性面板--公里标调整

src/components/draw-app/properties/AxleCountingProperty.vue

@@ -25,33 +25,38 @@
       lazy-rules
       autogrow
     />
-    <q-select
-      outlined
-      style="margin-top: 10px"
-      v-model="axleCountingModel.kilometerSystem.coordinateSystem"
-      :options="CoordinateSystemOptions"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="坐标系"
-    ></q-select>
-    <q-input
-      outlined
-      style="margin-top: 10px"
-      v-model.number="axleCountingModel.kilometerSystem.kilometer"
-      type="number"
-      @blur="onUpdate"
-      label="公里标(mm):"
-    />
-    <q-select
-      outlined
-      v-model="axleCountingModel.kilometerSystem.direction"
-      :options="directionOptions"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="方向"
-    ></q-select>
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
+        <div>公里标配置</div>
+        <q-select
+          outlined
+          style="margin-top: 10px"
+          v-model="axleCountingModel.kilometerSystem.coordinateSystem"
+          :options="CoordinateSystemOptions"
+          :map-options="true"
+          :emit-value="true"
+          @update:model-value="onUpdate"
+          label="坐标系"
+        ></q-select>
+        <q-input
+          outlined
+          style="margin-top: 10px"
+          v-model.number="axleCountingModel.kilometerSystem.kilometer"
+          type="number"
+          @blur="onUpdate"
+          label="公里标(mm):"
+        />
+        <q-select
+          outlined
+          v-model="axleCountingModel.kilometerSystem.direction"
+          :options="directionOptions"
+          :map-options="true"
+          :emit-value="true"
+          @update:model-value="onUpdate"
+          label="方向"
+        ></q-select>
+      </q-item>
+    </q-list>
     <q-select
       outlined
       v-model="axleCountingModel.type"

src/components/draw-app/properties/CurvatureKiloMarkerProperty.vue

@@ -24,64 +24,68 @@ const directionOptions = [
 
 <template>
   <q-form class="q-gutter-sm">
-    <q-input
-      outlined
-      readonly
-      v-model="kiloMarkerModel.id"
-      label="id"
-      hint=""
-    />
-    <q-select
-      outlined
-      v-model="kiloMarkerModel.kilometerSystem[0].coordinateSystem"
-      :options="CoordinateSystemOptions"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="坐标系"
-    ></q-select>
-    <q-input
-      outlined
-      v-model.number="kiloMarkerModel.kilometerSystem[0].kilometer"
-      type="number"
-      @blur="onUpdate"
-      label="公里标(mm):"
-    />
-    <q-select
-      outlined
-      v-model="kiloMarkerModel.kilometerSystem[0].direction"
-      :options="directionOptions"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="方向"
-    ></q-select>
-    <q-select
-      outlined
-      class="q-mt-lg"
-      v-model="kiloMarkerModel.kilometerSystem[1].coordinateSystem"
-      :options="CoordinateSystemOptions"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="坐标系"
-    ></q-select>
-    <q-input
-      outlined
-      v-model.number="kiloMarkerModel.kilometerSystem[1].kilometer"
-      type="number"
-      @blur="onUpdate"
-      label="公里标(mm):"
-    />
-    <q-select
-      outlined
-      v-model="kiloMarkerModel.kilometerSystem[1].direction"
-      :options="directionOptions"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="方向"
-    ></q-select>
+    <q-input outlined readonly v-model="kiloMarkerModel.id" label="id" />
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
+        <div>公里标配置</div>
+        <q-select
+          outlined
+          v-model="kiloMarkerModel.kilometerSystem[0].coordinateSystem"
+          :options="CoordinateSystemOptions"
+          :map-options="true"
+          :emit-value="true"
+          @update:model-value="onUpdate"
+          label="坐标系"
+        ></q-select>
+        <q-input
+          outlined
+          v-model.number="kiloMarkerModel.kilometerSystem[0].kilometer"
+          type="number"
+          @blur="onUpdate"
+          label="公里标(mm):"
+        />
+        <q-select
+          outlined
+          v-model="kiloMarkerModel.kilometerSystem[0].direction"
+          :options="directionOptions"
+          :map-options="true"
+          :emit-value="true"
+          @update:model-value="onUpdate"
+          label="方向"
+        ></q-select>
+      </q-item>
+    </q-list>
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
+        <div>公里标配置</div>
+        <q-select
+          outlined
+          class="q-mt-lg"
+          v-model="kiloMarkerModel.kilometerSystem[1].coordinateSystem"
+          :options="CoordinateSystemOptions"
+          :map-options="true"
+          :emit-value="true"
+          @update:model-value="onUpdate"
+          label="坐标系"
+        ></q-select>
+        <q-input
+          outlined
+          v-model.number="kiloMarkerModel.kilometerSystem[1].kilometer"
+          type="number"
+          @blur="onUpdate"
+          label="公里标(mm):"
+        />
+        <q-select
+          outlined
+          v-model="kiloMarkerModel.kilometerSystem[1].direction"
+          :options="directionOptions"
+          :map-options="true"
+          :emit-value="true"
+          @update:model-value="onUpdate"
+          label="方向"
+        ></q-select>
+      </q-item>
+    </q-list>
   </q-form>
 </template>
 

src/components/draw-app/properties/SignalProperty.vue

@@ -1,6 +1,6 @@
 <template>
-  <q-form>
-    <q-input outlined readonly v-model="signalModel.id" label="id" hint="" />
+  <q-form class="q-gutter-sm">
+    <q-input outlined readonly v-model="signalModel.id" label="id" />
     <q-input
       outlined
       v-model="signalModel.code"
@@ -15,34 +15,39 @@
       @blur="onUpdate"
       label="索引"
     />
-    <q-select
-      outlined
-      class="q-mt-sm"
-      v-model="signalModel.kilometerSystem.coordinateSystem"
-      :options="CoordinateSystemOptions"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="坐标系"
-    ></q-select>
-    <q-select
-      outlined
-      class="q-mt-sm"
-      v-model="signalModel.kilometerSystem.direction"
-      :options="directionOptions"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="方向"
-    ></q-select>
-    <q-input
-      outlined
-      class="q-mt-sm"
-      v-model.number="signalModel.kilometerSystem.kilometer"
-      type="number"
-      @blur="onUpdate"
-      label="公里标(mm):"
-    />
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
+        <div>公里标配置</div>
+        <q-select
+          outlined
+          class="q-mt-sm"
+          v-model="signalModel.kilometerSystem.coordinateSystem"
+          :options="CoordinateSystemOptions"
+          :map-options="true"
+          :emit-value="true"
+          @update:model-value="onUpdate"
+          label="坐标系"
+        ></q-select>
+        <q-select
+          outlined
+          class="q-mt-sm"
+          v-model="signalModel.kilometerSystem.direction"
+          :options="directionOptions"
+          :map-options="true"
+          :emit-value="true"
+          @update:model-value="onUpdate"
+          label="方向"
+        ></q-select>
+        <q-input
+          outlined
+          class="q-mt-sm"
+          v-model.number="signalModel.kilometerSystem.kilometer"
+          type="number"
+          @blur="onUpdate"
+          label="公里标(mm):"
+        />
+      </q-item>
+    </q-list>
     <q-select
       outlined
       class="q-mt-sm"

src/components/draw-app/properties/SlopeKiloMarkerProperty.vue

@@ -24,58 +24,68 @@ const directionOptions = [
 
 <template>
   <QForm class="q-gutter-sm">
-    <QInput outlined readonly v-model="kiloMarkerModel.id" label="id" hint="" />
-    <QSelect
-      outlined
-      v-model="kiloMarkerModel.kilometerSystem[0].coordinateSystem"
-      :options="CoordinateSystemOptions"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="坐标系"
-    ></QSelect>
-    <QInput
-      outlined
-      v-model.number="kiloMarkerModel.kilometerSystem[0].kilometer"
-      type="number"
-      @blur="onUpdate"
-      label="公里标(mm):"
-    />
-    <QSelect
-      outlined
-      v-model="kiloMarkerModel.kilometerSystem[0].direction"
-      :options="directionOptions"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="方向"
-    ></QSelect>
-    <QSelect
-      outlined
-      class="q-mt-lg"
-      v-model="kiloMarkerModel.kilometerSystem[1].coordinateSystem"
-      :options="CoordinateSystemOptions"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="坐标系"
-    ></QSelect>
-    <QInput
-      outlined
-      v-model.number="kiloMarkerModel.kilometerSystem[1].kilometer"
-      type="number"
-      @blur="onUpdate"
-      label="公里标(mm):"
-    />
-    <QSelect
-      outlined
-      v-model="kiloMarkerModel.kilometerSystem[1].direction"
-      :options="directionOptions"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="方向"
-    ></QSelect>
+    <QInput outlined readonly v-model="kiloMarkerModel.id" label="id" />
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
+        <div>公里标配置</div>
+        <QSelect
+          outlined
+          v-model="kiloMarkerModel.kilometerSystem[0].coordinateSystem"
+          :options="CoordinateSystemOptions"
+          :map-options="true"
+          :emit-value="true"
+          @update:model-value="onUpdate"
+          label="坐标系"
+        ></QSelect>
+        <QInput
+          outlined
+          v-model.number="kiloMarkerModel.kilometerSystem[0].kilometer"
+          type="number"
+          @blur="onUpdate"
+          label="公里标(mm):"
+        />
+        <QSelect
+          outlined
+          v-model="kiloMarkerModel.kilometerSystem[0].direction"
+          :options="directionOptions"
+          :map-options="true"
+          :emit-value="true"
+          @update:model-value="onUpdate"
+          label="方向"
+        ></QSelect>
+      </q-item>
+    </q-list>
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
+        <div>公里标配置</div>
+        <QSelect
+          outlined
+          class="q-mt-lg"
+          v-model="kiloMarkerModel.kilometerSystem[1].coordinateSystem"
+          :options="CoordinateSystemOptions"
+          :map-options="true"
+          :emit-value="true"
+          @update:model-value="onUpdate"
+          label="坐标系"
+        ></QSelect>
+        <QInput
+          outlined
+          v-model.number="kiloMarkerModel.kilometerSystem[1].kilometer"
+          type="number"
+          @blur="onUpdate"
+          label="公里标(mm):"
+        />
+        <QSelect
+          outlined
+          v-model="kiloMarkerModel.kilometerSystem[1].direction"
+          :options="directionOptions"
+          :map-options="true"
+          :emit-value="true"
+          @update:model-value="onUpdate"
+          label="方向"
+        ></QSelect>
+      </q-item>
+    </q-list>
   </QForm>
 </template>
 

src/components/draw-app/properties/StationProperty.vue

@@ -17,45 +17,50 @@
       @blur="onUpdate"
       label="索引"
     />
-    <template v-if="stationModel.kilometerSystem">
-      <q-select
-        outlined
-        class="q-mt-md"
-        v-model="stationModel.kilometerSystem.coordinateSystem"
-        :options="CoordinateSystemOptions"
-        :map-options="true"
-        :emit-value="true"
-        @update:model-value="onUpdate"
-        label="坐标系"
-      ></q-select>
-      <q-input
-        outlined
-        class="q-mt-md"
-        v-model.number="stationModel.kilometerSystem.kilometer"
-        type="number"
-        @blur="onUpdate"
-        label="公里标(mm):"
-      />
-      <q-select
-        outlined
-        class="q-mt-md"
-        v-model="stationModel.kilometerSystem.direction"
-        :options="directionOptions"
-        map-options
-        emit-value
-        @update:model-value="onUpdate"
-        label="方向"
-      ></q-select>
-      <q-select
-        outlined
-        @blur="onUpdate"
-        v-model="stationModel.concentrationStations"
-        :options="optionsControl"
-        map-options
-        emit-value
-        label="是否集中站"
-      />
-    </template>
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
+        <template v-if="stationModel.kilometerSystem">
+          <div>公里标配置</div>
+          <q-select
+            outlined
+            class="q-mt-md"
+            v-model="stationModel.kilometerSystem.coordinateSystem"
+            :options="CoordinateSystemOptions"
+            :map-options="true"
+            :emit-value="true"
+            @update:model-value="onUpdate"
+            label="坐标系"
+          ></q-select>
+          <q-input
+            outlined
+            class="q-mt-md"
+            v-model.number="stationModel.kilometerSystem.kilometer"
+            type="number"
+            @blur="onUpdate"
+            label="公里标(mm):"
+          />
+          <q-select
+            outlined
+            class="q-mt-md"
+            v-model="stationModel.kilometerSystem.direction"
+            :options="directionOptions"
+            map-options
+            emit-value
+            @update:model-value="onUpdate"
+            label="方向"
+          ></q-select>
+        </template>
+      </q-item>
+    </q-list>
+    <q-select
+      outlined
+      @blur="onUpdate"
+      v-model="stationModel.concentrationStations"
+      :options="optionsControl"
+      map-options
+      emit-value
+      label="是否集中站"
+    />
   </q-form>
 </template>
 

src/components/draw-app/properties/StopPositionProperty.vue

@@ -1,12 +1,6 @@
 <template>
-  <q-form>
-    <q-input
-      outlined
-      readonly
-      v-model="stopPositionModel.id"
-      label="id"
-      hint=""
-    />
+  <q-form class="q-gutter-sm">
+    <q-input outlined readonly v-model="stopPositionModel.id" label="id" />
     <q-input
       outlined
       v-model.number="stopPositionModel.index"
@@ -24,36 +18,41 @@
       @update:model-value="onUpdate"
       label="编组数量"
     />
-    <template v-if="stopPositionModel.kilometerSystem">
-      <q-select
-        outlined
-        class="q-mt-md"
-        v-model="stopPositionModel.kilometerSystem.coordinateSystem"
-        :options="CoordinateSystemOptions"
-        :map-options="true"
-        :emit-value="true"
-        @update:model-value="onUpdate"
-        label="坐标系"
-      ></q-select>
-      <q-select
-        outlined
-        class="q-mt-md"
-        v-model="stopPositionModel.kilometerSystem.direction"
-        :options="directionOptions"
-        :map-options="true"
-        :emit-value="true"
-        @update:model-value="onUpdate"
-        label="方向"
-      ></q-select>
-      <q-input
-        outlined
-        class="q-mt-md"
-        v-model.number="stopPositionModel.kilometerSystem.kilometer"
-        type="number"
-        @blur="onUpdate"
-        label="公里标(mm):"
-      />
-    </template>
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
+        <template v-if="stopPositionModel.kilometerSystem">
+          <div>公里标配置</div>
+          <q-select
+            outlined
+            class="q-mt-md"
+            v-model="stopPositionModel.kilometerSystem.coordinateSystem"
+            :options="CoordinateSystemOptions"
+            :map-options="true"
+            :emit-value="true"
+            @update:model-value="onUpdate"
+            label="坐标系"
+          ></q-select>
+          <q-select
+            outlined
+            class="q-mt-md"
+            v-model="stopPositionModel.kilometerSystem.direction"
+            :options="directionOptions"
+            :map-options="true"
+            :emit-value="true"
+            @update:model-value="onUpdate"
+            label="方向"
+          ></q-select>
+          <q-input
+            outlined
+            class="q-mt-md"
+            v-model.number="stopPositionModel.kilometerSystem.kilometer"
+            type="number"
+            @blur="onUpdate"
+            label="公里标(mm):"
+          />
+        </template>
+      </q-item>
+    </q-list>
     <q-select
       outlined
       class="q-mt-md"

src/components/draw-app/properties/TransponderProperty.vue

@@ -1,12 +1,6 @@
 <template>
-  <q-form>
-    <q-input
-      outlined
-      readonly
-      v-model="transponderModel.id"
-      label="id"
-      hint=""
-    />
+  <q-form class="q-gutter-sm">
+    <q-input outlined readonly v-model="transponderModel.id" label="id" />
     <q-input
       outlined
       class="q-mt-md"
@@ -21,36 +15,41 @@
       @blur="onUpdate"
       label="索引"
     />
-    <template v-if="transponderModel.kilometerSystem">
-      <q-select
-        outlined
-        class="q-mt-md"
-        v-model="transponderModel.kilometerSystem.coordinateSystem"
-        :options="CoordinateSystemOptions"
-        :map-options="true"
-        :emit-value="true"
-        @update:model-value="onUpdate"
-        label="坐标系"
-      ></q-select>
-      <q-input
-        outlined
-        class="q-mt-md"
-        v-model.number="transponderModel.kilometerSystem.kilometer"
-        type="number"
-        @blur="onUpdate"
-        label="公里标(mm):"
-      />
-      <q-select
-        outlined
-        class="q-mt-md"
-        v-model="transponderModel.kilometerSystem.direction"
-        :options="directionOptions"
-        :map-options="true"
-        :emit-value="true"
-        @update:model-value="onUpdate"
-        label="方向"
-      ></q-select>
-    </template>
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
+        <template v-if="transponderModel.kilometerSystem">
+          <div>公里标配置</div>
+          <q-select
+            outlined
+            class="q-mt-md"
+            v-model="transponderModel.kilometerSystem.coordinateSystem"
+            :options="CoordinateSystemOptions"
+            :map-options="true"
+            :emit-value="true"
+            @update:model-value="onUpdate"
+            label="坐标系"
+          ></q-select>
+          <q-input
+            outlined
+            class="q-mt-md"
+            v-model.number="transponderModel.kilometerSystem.kilometer"
+            type="number"
+            @blur="onUpdate"
+            label="公里标(mm):"
+          />
+          <q-select
+            outlined
+            class="q-mt-md"
+            v-model="transponderModel.kilometerSystem.direction"
+            :options="directionOptions"
+            :map-options="true"
+            :emit-value="true"
+            @update:model-value="onUpdate"
+            label="方向"
+          ></q-select>
+        </template>
+      </q-item>
+    </q-list>
     <q-select
       outlined
       class="q-mt-md"

src/components/draw-app/properties/TurnoutProperty.vue

@@ -1,6 +1,6 @@
 <template>
-  <q-form>
-    <q-input outlined readonly v-model="turnoutModel.id" label="id" hint="" />
+  <q-form class="q-gutter-sm">
+    <q-input outlined readonly v-model="turnoutModel.id" label="id" />
     <q-input
       outlined
       v-model="turnoutModel.code"
@@ -15,62 +15,72 @@
       @blur="onUpdate"
       label="索引"
     />
-    <q-select
-      outlined
-      class="q-mt-sm"
-      v-model="turnoutModel.kilometerSystem[0].coordinateSystem"
-      :options="CoordinateSystemOptions"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="坐标系"
-    ></q-select>
-    <q-input
-      outlined
-      class="q-mt-sm"
-      v-model.number="turnoutModel.kilometerSystem[0].kilometer"
-      type="number"
-      @blur="onUpdate"
-      label="公里标(mm):"
-    />
-    <q-select
-      outlined
-      class="q-mt-sm"
-      v-model="turnoutModel.kilometerSystem[0].direction"
-      :options="directionOptions"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="方向"
-    ></q-select>
-    <q-select
-      outlined
-      class="q-mt-sm"
-      v-model="turnoutModel.kilometerSystem[1].coordinateSystem"
-      :options="CoordinateSystemOptions"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="坐标系"
-    ></q-select>
-    <q-input
-      outlined
-      class="q-mt-sm"
-      v-model.number="turnoutModel.kilometerSystem[1].kilometer"
-      type="number"
-      @blur="onUpdate"
-      label="公里标2(mm):"
-    />
-    <q-select
-      outlined
-      class="q-mt-sm"
-      v-model="turnoutModel.kilometerSystem[1].direction"
-      :options="directionOptions"
-      :map-options="true"
-      :emit-value="true"
-      @update:model-value="onUpdate"
-      label="方向"
-    ></q-select>
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
+        <div>公里标配置</div>
+        <q-select
+          outlined
+          class="q-mt-sm"
+          v-model="turnoutModel.kilometerSystem[0].coordinateSystem"
+          :options="CoordinateSystemOptions"
+          :map-options="true"
+          :emit-value="true"
+          @update:model-value="onUpdate"
+          label="坐标系"
+        ></q-select>
+        <q-input
+          outlined
+          class="q-mt-sm"
+          v-model.number="turnoutModel.kilometerSystem[0].kilometer"
+          type="number"
+          @blur="onUpdate"
+          label="公里标(mm):"
+        />
+        <q-select
+          outlined
+          class="q-mt-sm"
+          v-model="turnoutModel.kilometerSystem[0].direction"
+          :options="directionOptions"
+          :map-options="true"
+          :emit-value="true"
+          @update:model-value="onUpdate"
+          label="方向"
+        ></q-select>
+      </q-item>
+    </q-list>
+    <q-list bordered separator class="rounded-borders">
+      <q-item no-wrap class="q-gutter-y-sm column">
+        <div>公里标配置</div>
+        <q-select
+          outlined
+          class="q-mt-sm"
+          v-model="turnoutModel.kilometerSystem[1].coordinateSystem"
+          :options="CoordinateSystemOptions"
+          :map-options="true"
+          :emit-value="true"
+          @update:model-value="onUpdate"
+          label="坐标系"
+        ></q-select>
+        <q-input
+          outlined
+          class="q-mt-sm"
+          v-model.number="turnoutModel.kilometerSystem[1].kilometer"
+          type="number"
+          @blur="onUpdate"
+          label="公里标2(mm):"
+        />
+        <q-select
+          outlined
+          class="q-mt-sm"
+          v-model="turnoutModel.kilometerSystem[1].direction"
+          :options="directionOptions"
+          :map-options="true"
+          :emit-value="true"
+          @update:model-value="onUpdate"
+          label="方向"
+        ></q-select>
+      </q-item>
+    </q-list>
     <q-select
       outlined
       class="q-mt-sm"