增加车场弹窗

src/views/newMap/displayBaSiDi/baSiDi.vue

@@ -34,7 +34,7 @@
               <div style="padding: 5px;height:20px;line-height: 20px;border-top: 2px solid #DDD9CA;display: flex;justify-content: space-between;">
                 <div>
                   <div class="div-simulate-button" style="width: 40px;" @click="rpsClick">背投</div>
-                  <div class="div-simulate-button" style="width: 40px;">车场</div>
+                  <div class="div-simulate-button" style="width: 40px;" @click="handleCarPark">车场</div>
                   <div class="div-simulate-button" style="width: 40px;" @click="troClick">轨道</div>
                   <div class="div-simulate-button" style="width: 40px;">系统</div>
                   <div class="div-simulate-button" style="width: 40px;">列车</div>
@@ -285,7 +285,11 @@ export default {
             this.$emit('rpsClick');
         },
         troClick() {
-        	this.$emit('troClick');
+            this.$emit('troClick');
+        },
+        // 车场
+        handleCarPark() {
+            this.$emit('handleCarPark');
         },
         selectBeginTime() {
             this.$emit('selectBeginTime');

src/views/newMap/displayBaSiDi/carPack.vue

@@ -0,0 +1,261 @@
+<template>
+  <el-dialog v-dialogDrag class="nanjing-02__systerm route-setting" :title="title" :visible.sync="show" width="900px" label-position="top" :before-close="doClose" :z-index="2000" :modal="false" :close-on-click-modal="false">
+    <div style="padding: 5px;">
+      <div class="content_box">
+        <div class="el-button" :class="activeIndex == 0 ? 'active' : ''" style="width: 49%;" @click="handleSelect(0)">Mileage and inspection</div>
+        <div class="el-button" :class="activeIndex == 1 ? 'active' : ''" style="width: 49%;" @click="handleSelect(1)">Cargroup management</div>
+      </div>
+      <div v-if="activeIndex == 0" class="table">
+        <span>Range of car group number: 401(1/6) - 450(1/6)</span>
+        <el-table
+          ref="tempTable"
+          class="table_content_box"
+          :data="tempData1"
+          border
+          style="width: 100%"
+          header-cell-class-name="table_header_box"
+          size="mini"
+          highlight-current-row
+          :height="340"
+        >
+          <el-table-column prop="firstGroup" label="First car group" style="margin-left:30px" :width="100" />
+          <el-table-column prop="lastGroup" label="Last car group" :width="100" />
+          <el-table-column prop="totalmileage" label="Total mileage" :width="95" />
+          <el-table-column prop="recentDate" label="Recent inspection date" :width="150" />
+          <el-table-column prop="mileageSince" label="Mileage since recent inspection" :width="200" />
+          <el-table-column prop="correction" label="Correction mileage" />
+          <el-table-column label="Carry out inspection" :width="100">
+            <template slot-scope="scope">
+              <el-checkbox v-model="scope.row.carryOut" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-if="activeIndex == 1" class="table">
+        <span>Range of car group number: 401(1/6) - 450(1/6)</span>
+        <el-table
+          ref="tempTable"
+          class="table_content_box"
+          :data="tempData"
+          border
+          style="width: 100%"
+          header-cell-class-name="table_header_box"
+          size="mini"
+          highlight-current-row
+          :height="340"
+        >
+          <el-table-column prop="serviceNo" label="Train service No." style="margin-left:30px" :width="90" />
+          <el-table-column prop="trainId" label="Train-ID" :width="80" />
+          <el-table-column prop="firstGroup" label="First car group" :width="70" />
+          <el-table-column prop="lastGroup" label="Last car group" :width="70" />
+          <el-table-column prop="startStation" label="Start station" :width="110">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.startStation" clearable placeholder="请选择" size="mini">
+                <el-option
+                  v-for="item in stationList"
+                  :key="item.code"
+                  :label="item.name"
+                  :value="item.code"
+                />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column prop="startTime" label="Start time">
+            <template slot-scope="scope">
+              <span>{{ scope.row.startTime }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="terminalStation" label="Terminal station" :width="110">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.terminalStation" clearable placeholder="请选择" size="mini">
+                <el-option
+                  v-for="item in stationList"
+                  :key="item.code"
+                  :label="item.name"
+                  :value="item.code"
+                />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column prop="terminalTime" label="Terminal time">
+            <template slot-scope="scope">
+              <span>{{ scope.row.terminalTime }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="In service" :width="65">
+            <template slot-scope="scope">
+              <el-checkbox v-model="scope.row.inService" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div style="overflow: hidden;">
+        <el-button style="float: left;" @click="cancel">Refresh</el-button>
+        <el-button style="float: left;" @click="cancel">Load</el-button>
+        <el-button style="float: left;" @click="cancel">Delete</el-button>
+        <el-button style="float: left;" @click="cancel">Insert</el-button>
+
+        <el-button style="float: right;" @click="cancel">Close</el-button>
+        <el-button class="disabled" :loading="loading" style="float: right;" @click="commit">Execute</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
+// import { EventBus } from '@/scripts/event-bus';
+// import CMD from '@/scripts/cmdPlugin/CommandEnum';
+
+export default {
+    name: 'RouteCreate',
+    data() {
+        return {
+            dialogShow: false,
+            loading: false,
+            selected: null,
+            activeIndex: 0,
+            tempData1: [
+                {
+                    firstGroup: '4011',
+                    lastGroup: '4016',
+                    totalmileage: '0',
+                    recentDate: '01.01.1970',
+                    mileageSince: '0',
+                    correction: '0',
+                    carryOut: false
+                },
+                {
+                    firstGroup: '4021',
+                    lastGroup: '4026',
+                    totalmileage: '0',
+                    recentDate: '01.01.1970',
+                    mileageSince: '0',
+                    correction: '0',
+                    carryOut: false
+                }
+            ],
+            tempData: [
+                {
+                    serviceNo: 47,
+                    trainId: '07474807',
+                    firstGroup: '',
+                    lastGroup: '',
+                    startStation: '',
+                    startTime: '24.07.2008 22:08:51',
+                    terminalStation: '',
+                    terminalTime: '24.07.2008 22:08:51',
+                    inService: false
+                },
+                {
+                    serviceNo: 67,
+                    trainId: '07474808',
+                    firstGroup: '',
+                    lastGroup: '',
+                    startStation: '',
+                    startTime: '24.07.2008 22:08:51',
+                    terminalStation: '',
+                    terminalTime: '24.07.2008 22:08:51',
+                    inService: false
+                }
+            ]
+        };
+    },
+    computed: {
+        ...mapGetters('map', [
+            'map',
+            'stationList'
+        ]),
+        show() {
+            return this.dialogShow && !this.$store.state.menuOperation.break;
+        },
+        title() {
+            return '[bjdvt1/a1bj]-0-Process/Realtime - Depot Service';
+        }
+    },
+    methods: {
+        loadInitData(map) {
+            console.log(map, 11111);
+        },
+        doShow(operate, selected) {
+            this.dialogShow = true;
+            this.selected = selected;
+
+            this.loadInitData(this.map);
+
+            this.$nextTick(function () {
+                this.$store.dispatch('training/emitTipFresh');
+            });
+        },
+        doClose() {
+
+            this.loading = false;
+            this.dialogShow = false;
+            this.$store.dispatch('training/emitTipFresh');
+        },
+        handleSelect(tab) {
+            this.activeIndex = tab;
+        },
+        commit() {
+            // const operate = {
+            //     send: true,
+
+            //     operation: OperationEvent.Section.newtrain.menu.operation,
+            //     cmdType: CMD.Section.CMD_NEW_TRAIN,
+            //     val: '' + this.direction + '::' + this.trainCode
+            // };
+            // this.loading = true;
+            // this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
+            //     this.loading = false;
+            //     if (valid) {
+            //         this.doClose();
+            //     }
+            // }).catch(() => {
+            //     this.loading = false;
+            //     this.doClose();
+            //     EventBus.$emit('sendMsg', {message: '命令执行失败！'});
+            // });
+        },
+        cancel() {
+            const operate = {
+                operation: OperationEvent.Command.cancel.menu.operation
+            };
+
+            this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
+                if (valid) {
+                    this.doClose();
+                }
+            }).catch(() => {
+                this.doClose();
+            });
+        }
+    }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.route-setting {
+	.content_box {
+		margin-bottom: 10px;
+		.el-button{
+			&.active{
+				background: #969696;
+			}
+		}
+	}
+	.table_content_box{
+		margin-bottom: 20px;
+	}
+	/deep/ {
+		.table{
+			.table_header_box{
+				.cell{
+					text-align: center;
+					word-break: break-word;
+				}
+			}
+		}
+	}
+}
+</style>

src/views/newMap/displayBaSiDi/index.vue

@@ -6,12 +6,14 @@
       :data-error="dataError"
       @rpsClick="rpsClick"
       @troClick="troClick"
+      @handleCarPark="handleCarPark"
       @end="end"
       @back="back"
       @selectBeginTime="selectBeginTime"
     />
     <rps-dialog ref="rpsDialog" :train-list="trainList" />
     <tro-dialog ref="troDialog" :train-list="trainList" :station-list="stationList" />
+    <car-pack ref="carPack" />
     <set-time ref="setTime" @ConfirmSelectBeginTime="start" />
   </div>
 </template>
@@ -31,6 +33,7 @@ import { getMemberListCommon, getUserListCommon } from '@/api/rtSimulation';
 import BaSiDi from './baSiDi';
 import RpsDialog from './rps';
 import TroDialog from './tro';
+import CarPack from './carPack';
 import parseStatus from '@/utils/parseStatus';
 
 export default {
@@ -40,7 +43,8 @@ export default {
         BaSiDi,
         SetTime,
         RpsDialog,
-        TroDialog
+        TroDialog,
+        CarPack
     },
     data() {
         return {
@@ -411,9 +415,73 @@ export default {
         },
         troClick() {
             this.$refs.troDialog.doShow();
+        },
+        handleCarPark() {
+            this.$refs.carPack.doShow();
         }
     }
 };
 </script>
-<style rel="stylesheet/scss" lang="scss" scoped>
+<style>
+.nanjing-02__systerm .el-dialog {
+    background: #d8d8d8;
+    border: 2px solid rgb(144, 144, 144, 0.8);
+    border-radius: 6px;
+    color: #000;
+    font-size: 14px;
+}
+.nanjing-02__systerm .el-dialog .el-dialog__header {
+    padding: 5px;
+    height: 30px;
+	background-image: linear-gradient(#A5A5BA, #FDFEFD);
+	border-radius: 4px 4px 0 0;
+}
+.nanjing-02__systerm .el-dialog .el-dialog__title {
+    position: absolute;
+    top: 4px;
+    color: #000;
+    border-radius: 4px;
+    padding: 0px 2px;
+    height: 20px;
+    line-height: 24px;
+	font-size: 15px;
+}
+.nanjing-02__systerm .el-dialog .el-dialog__headerbtn {
+    background: linear-gradient(#CD98A0, #C27D6E, #B63022, #C68770);
+    border: 1px solid #fff;
+    border-radius: 4px;
+    top: 6px;
+    right: 5px;
+    line-height: 16px;
+}
+.nanjing-02__systerm .el-dialog .el-dialog__headerbtn .el-dialog__close{
+	color: #fff;
+}
+.nanjing-02__systerm .el-dialog .el-dialog__body {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 5px;
+    padding-right: 5px;
+    margin: 0px 1px 1px;
+	border: 2px solid rgb(212 212 212);
+    box-shadow: 1px hsla(240, 0%, 100%, 0.5) inset;
+    background: #E6E6E6;
+    opacity: 1;
+}
+.nanjing-02__systerm .el-dialog .el-button {
+    height: 26px;
+    line-height: 24px;
+	font-size: 13px;
+    padding: 0px;
+    width: 80px;
+    border: 1px solid #8B958A;
+    border-radius: 0px !important;
+    color: #000;
+    background: #E6E6E6;
+}
+.nanjing-02__systerm .el-dialog .el-button.disabled {
+    border: 1px solid #B1B1B1;
+    color: #ABABAB;
+}
+
 </style>