rt-sim-training-client/src/views/newMap/displayBaSiDi/tmt.vue

<template>
  <!--<el-dialog-->
  <!--v-dialogDrag-->
  <!--class="route-setting"-->
  <!--:title="title"-->
  <!--:visible.sync="show"-->
  <!--width="900px"-->
  <!--label-position="top"-->
  <!--:before-close="doClose"-->
  <!--:z-index="2009"-->
  <!--:modal="false"-->
  <!--:close-on-click-modal="false"-->
  <!--&gt;-->
  <div v-if="dialogShow" id="faultChoose">
    <div class="falutChooseTitle">{{ title }}</div>
    <div class="closeFalutChoose" @click="doClose">
      <span class="el-icon-close closeFalutChooseIn" />
    </div>
    <div class="card" style="padding: 20px;">
      <div style="padding: 5px;">
        <el-row>
          <el-col :span="12"><span>所选位置：</span></el-col>
          <el-col :span="12"><span>列车号：</span></el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="12">
            <el-input v-model="sectionName" size="mini" style="width: 400px;" :disabled="true" />
          </el-col>
          <el-col :span="12">
            <el-input v-model="trainCode" :maxlength="7" size="mini" style="width: 310px;" />
            <el-button size="mini" icon="el-icon-search" @click="trainFind" />
            <el-button size="mini" icon="el-icon-refresh-left" @click="resetTrainCode" />
          </el-col>
        </el-row>
        <div style="display: flex;justify-content: space-around;margin-top: 20px;">
          <el-button size="mini" style="width: 280px;" :disabled="operationType === 'show'" @click="changeOperationType('show')">显示列车信息</el-button>
          <el-button size="mini" style="width: 280px;" :disabled="operationType === 'update'" @click="changeOperationType('update')">修改列车资料</el-button>
          <el-button size="mini" style="width: 280px;" :disabled="operationType === 'create'" @click="changeOperationType('create')">创建列车号</el-button>
        </div>
        <div style="display: flex;justify-content: space-around;margin-top: 10px;">
          <el-button size="mini" style="width: 280px;" :disabled="operationType === 'delete'" @click="changeOperationType('delete')">删除列车号</el-button>
          <el-button size="mini" style="width: 280px;" :disabled="operationType === 'move'" @click="changeOperationType('move')">步进列车号</el-button>
          <el-button size="mini" style="width: 280px;" :disabled="operationType === 'resort'" @click="changeOperationType('resort')">重排列车号</el-button>
        </div>
        <div v-if="operationType === 'show'">
          <el-table :data="tableData" border style="width: 100%;margin-top: 20px;" height="200">
            <el-table-column prop="date" label="方向">
              <template slot-scope="scope">
                <span>{{ scope.row.right ? '>':'<' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="列车号">
              <template slot-scope="scope">
                <span>{{ getTrainCode(scope.row) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="位置">
              <template slot-scope="scope">
                <span>{{ getSectionPosition(scope.row.sectionCode) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="ARS" />
            <el-table-column prop="address" label="晚点" />
          </el-table>
        </div>
        <div v-else-if="operationType === 'create'" style="display: flex;justify-content: space-between;">
          <div>
            <el-table :data="tableData" border style="width: 280px;margin-top: 20px;" height="200">
              <el-table-column prop="date" label="方向" width="60">
                <template slot-scope="scope">
                  <span>{{ scope.row.right ? '>':'<' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="列车号" width="157">
                <template slot-scope="scope">
                  <span>{{ getTrainCode(scope.row) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="位置" width="60">
                <template slot-scope="scope">
                  <span>{{ getSectionPosition(scope.row.sectionCode) }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div>
            <div style="margin-top: 20px;display: flex;justify-content: space-between;padding: 5px;align-items: center;">
              <span>位置：</span>
              <el-select v-model="nowSectionCode" :disabled="true" size="mini" style="width: 150px">
                <el-option
                  v-for="item in sectionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </div>
            <div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;margin-top: 5px;">
              <span>新列车号：</span>
              <el-input v-model="newTrainCode" :maxlength="8" size="mini" style="width: 150px;" />
            </div>
            <div style="display: flex;justify-content: space-between;padding: 5px;margin-top: 5px;">
              <span>方向：</span>
              <el-select v-model="direction" :disabled="true" size="mini" style="width: 80px" placeholder="请选择">
                <el-option
                  v-for="item in directionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div style="display: flex;justify-content: space-between;padding: 5px;margin-top: 5px;">
              <span>设置该列车为自动排列：</span>
              <el-radio v-model="autoArrange" :disabled="true" label="true">开启</el-radio>
              <el-radio v-model="autoArrange" :disabled="true" label="false">关闭</el-radio>
            </div>
            <div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;margin-top: 5px;">
              <span>车组号：</span>
              <el-input v-model="groupNumber1" :maxlength="4" size="mini" style="width: 60px;" />
              <div style="border: 1px solid #DCDFE6;padding: 4px 5px;border-radius: 3px;">&lt;&gt;</div>
              <el-input v-model="groupNumber2" :maxlength="4" :disabled="true" size="mini" style="width: 60px;" />
            </div>
          </div>
          <div>
            <div style="margin-top: 20px;height: 20px;">插入位置（之前）：</div>
            <el-table :data="tableData" border style="width: 280px;" height="180">
              <el-table-column prop="date" label="方向" width="60">
                <template slot-scope="scope">
                  <span>{{ scope.row.right ? '>':'<' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="列车号" width="157">
                <template slot-scope="scope">
                  <span>{{ getTrainCode(scope.row) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="位置" width="60">
                <template slot-scope="scope">
                  <span>{{ getSectionPosition(scope.row.sectionCode) }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div v-else-if="operationType === 'update'" style="display: flex;justify-content: flex-start;">
          <div>
            <el-table :data="tableData" border style="width: 280px;margin-top: 20px;" height="200">
              <el-table-column prop="date" label="方向" width="60" />
              <el-table-column label="列车号" width="157">
                <template slot-scope="scope">
                  <span>{{ getTrainCode(scope.row) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="位置" width="60">
                <template slot-scope="scope">
                  <span>{{ getSectionPosition(scope.row.sectionCode) }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div>
            <div style="margin-top: 20px;display: flex;justify-content: space-between;padding: 5px;align-items: center;">
              <span>位置：</span>
              <el-select v-model="nowSectionCode" size="mini" style="width: 150px">
                <el-option
                  v-for="item in sectionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </div>
            <div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;margin-top: 5px;">
              <span>新列车号：</span>
              <el-input v-model="newTrainCode" size="mini" :maxlength="8" style="width: 150px;" />
            </div>
            <div style="display: flex;justify-content: space-between;padding: 5px;margin-top: 5px;">
              <span>方向：</span>
              <el-select v-model="direction" size="mini" style="width: 80px">
                <el-option
                  v-for="item in directionList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div style="display: flex;justify-content: space-between;padding: 5px;margin-top: 5px;">
              <span>设置该列车为自动排列：</span>
              <el-radio v-model="autoArrange" label="true">开启</el-radio>
              <el-radio v-model="autoArrange" label="false">关闭</el-radio>
            </div>
            <div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;margin-top: 5px;">
              <span>车组号：</span>
              <el-input v-model="groupNumber1" :maxlength="4" size="mini" style="width: 60px;" />
              <div style="border: 1px solid #DCDFE6;padding: 4px 5px;border-radius: 3px;">&lt;&gt;</div>
              <el-input v-model="groupNumber2" :maxlength="4" size="mini" style="width: 60px;" />
            </div>
          </div>
        </div>
        <div v-else-if="operationType === 'delete'" style="display: flex;">
          <div>
            <el-table :data="tableData" border style="width: 280px;margin-top: 20px;" height="200">
              <el-table-column prop="date" label="方向" width="60" />
              <el-table-column prop="name" label="列车号" width="157">
                <template slot-scope="scope">
                  <span>{{ getTrainCode(scope.row) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="位置" width="60">
                <template slot-scope="scope">
                  <span>{{ getSectionPosition(scope.row.sectionCode) }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="width: 250px;display: flex;justify-content: space-between;margin-top: 20px;margin-left: 10px;align-items: center;height: 25px;">
            <div>所选列车号：</div>
            <el-input v-model="nowTrainCode" style="width: 150px;" size="mini" />
          </div>
        </div>
        <div v-else-if="operationType === 'move'" style="display: flex;justify-content: flex-start;">
          <div>
            <el-table :data="tableData" border style="width: 280px;margin-top: 20px;" height="200">
              <el-table-column prop="date" label="方向" width="60" />
              <el-table-column prop="name" label="列车号" width="157">
                <template slot-scope="scope">
                  <span>{{ getTrainCode(scope.row) }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="位置" width="60" />
            </el-table>
          </div>
          <div>
            <div style="margin-top: 20px;display: flex;justify-content: space-between;padding: 5px;align-items: center;">
              <span>所选列车号：</span>
              <el-input size="mini" style="width: 150px;" />
            </div>
            <div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;">
              <span>当前位置：</span>
              <el-select v-model="nowSectionCode" size="mini" style="width: 150px">
                <el-option
                  v-for="item in sectionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </div>
            <div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;">
              <span>新位置：</span>
              <el-select v-model="newSectionCode" size="mini" style="width: 150px">
                <el-option
                  v-for="item in sectionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </div>
          </div>
        </div>
        <div style="display: flex;justify-content: flex-end;margin-top: 10px;border-top: 1px solid #c0c0c0;padding-top: 10px;">
          <el-button v-if="operationType === 'update'" size="mini" @click="trainCommit">修改</el-button>
          <el-button v-if="operationType === 'create'" size="mini" @click="trainCommit">创建</el-button>
          <el-button v-if="operationType === 'delete'" size="mini" @click="trainCommit">删除</el-button>
          <el-button size="mini" @click="doClose">关闭</el-button>
        </div>
      </div>
    </div>
  </div>
  <!--</el-dialog>-->
</template>

<script>
import { mapGetters } from 'vuex';
import { OperationEvent } from '@/scripts/cmdPlugin/OperationHandler';
import CMD from '@/scripts/cmdPlugin/CommandEnum';

export default {
    name: 'RouteCreate',
    data() {
        return {
            dialogShow: false,
            loading: false,
            selected: null,
            tableData: [],
            sectionName: '',
            trainCode: '',
            operationType: 'create',
            autoArrange: false,
            nowSectionCode: '',
            direction: '',
            newTrainCode: '',
            groupNumber1: '',
            groupNumber2: '',
            nowTrainCode: '',
            newSectionCode: '',
            directionList: [{ label: '>', value: 'right' }, { label: '<', value: 'left' }],
            trainModel: ''
        };
    },
    computed: {
        ...mapGetters('map', [
            'stationList',
            'sectionList'
        ]),
        show() {
            return this.dialogShow && !this.$store.state.menuOperation.break;
        },
        title() {
            return '列监';
        }
    },
    watch: {
        '$store.state.menuOperation.selectedCount':function(em) {
            const device = this.$store.state.menuOperation.selected;
            if (device && device.code && device._type === 'Section') {
                // this.deviceSelect(device);
                this.nowSectionCode = device.code;
            } else if (device && device.code && device._type === 'Train') {
                this.doShow(device);
            }
        }
    },
    methods: {
        doShow(selected) {
            this.dialogShow = true;
            // console.log(selected, '000000');
            if (selected) {
                this.selected = selected;
                this.tableData = [selected];
                this.nowTrainCode = selected.destinationCode + selected.serviceNumber + (selected.tripNumber.substr(1, 2));
                this.nowSectionCode = selected.sectionCode;
            }

            this.$nextTick(function () {
                this.dragEvent();
                this.$store.dispatch('training/emitTipFresh');
            });
        },
        doClose() {
            this.loading = false;
            this.dialogShow = false;
            this.$store.dispatch('training/emitTipFresh');
        },
        handleSelect(tab) {
            this.activeIndex = tab;
        },
        trainFind() {
            if (this.trainCode) {
                const train = this.$store.getters['map/getDeviceByCode'](this.trainCode);
                this.tableData = train ? [train] : [];
            } else { this.tableData = []; }
            this.operationType = 'show';
        },
        resetTrainCode() {
            this.trainCode = '';
            this.tableData = [];
        },
        changeOperationType(type) {
            this.operationType = type;
        },
        trainCommit() {
            const params = {};
            const step = {
                over: true
            };
            if (this.operationType === 'update') {
                params.groupNumber = this.trainModel.groupNumber;
                params.serviceNumber = this.newTrainCode.slice(3, 6);
                params.tripNumber = '0' + this.newTrainCode.slice(6, 8);
                step.cmdType = CMD.TrainWindow.CMD_TRAIN_SET_PLAN;
                step.operation = OperationEvent.Train.setPlanTrainId.menu.operation;
                step.param = params;
            } else if (this.operationType === 'create') {
                params.sectionCode = this.nowSectionCode;
                params.groupNumber = this.groupNumber1;
                params.dn = this.newTrainCode.slice(0, 3);
                params.sn = this.newTrainCode.slice(3, 6);
                params.tn = '0' + this.newTrainCode.slice(6, 8);
                step.cmdType = CMD.TrainWindow.CMD_TRAIN_ADD_TRAIN_TRACE;
                step.operation = OperationEvent.Train.addTrainId.menu.operation;
                step.param = params;
            } else if (this.operationType === 'delete') {
                params.groupNumber = this.groupNumber1;
                step.cmdType = CMD.TrainWindow.CMD_TRAIN_REMOVE_TRAIN_TRACE;
                step.operation = OperationEvent.Train.delTrainId.menu.operation;
                step.param = params;
            } else if (this.operationType === 'move') {
                params.groupNumber = this.groupNumber1;
                params.sectionCode = this.newSectionCode;
                step.cmdType = CMD.TrainWindow.CMD_TRAIN_MOVE_TRAIN_TRACE;
                step.operation = OperationEvent.Train.moveTrainId.menu.operation;
                step.param = params;
            }
            this.$store.dispatch('training/nextNew', step).then(({ valid }) => {
                if (valid) {
                    this.$store.dispatch('menuOperation/handleBreakFlag', { break: true });
                    this.changeShowMode('');
                }
            }).catch((error) => {
                console.error(error);
            });
        },
        changeShowMode() {
            this.operationType = 'show';
            this.nowSectionCode = '';
            this.newSectionCode = '';
            this.newTrainCode = '';
        },
        cancel() {
            const operate = {
                operation: OperationEvent.Command.cancel.menu.operation
            };
            this.$store.dispatch('training/nextNew', operate).then(({ valid }) => {
                if (valid) {
                    this.doClose();
                }
            }).catch(() => {
                this.doClose();
            });
        },
        getTrainCode(train) {
            if (train) {
                return train.destinationCode + train.serviceNumber + (train.tripNumber.substr(1, 2));
            }
        },
        getSectionPosition(sectionCode) {
            const section = this.$store.getters['map/getDeviceByCode'](sectionCode);
            if (section.type === '02') {
                const parentSection = this.$store.getters['map/getDeviceByCode'](section.parentCode);
                return parentSection.name + '-' + section.name;
            } else {
                return section.name;
            }
        },
        dragEvent() {
            const offset = this.offset;
            const dialogHeaderEl = document.querySelector('.falutChooseTitle');
            const dragDom = document.querySelector('#faultChoose');
            dialogHeaderEl.style.cursor = 'move';

            /** 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);*/
            const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);

            dialogHeaderEl.onmousedown = (e) => {
                /**  鼠标按下，计算当前元素距离可视区的距离*/
                const disX = e.clientX - dialogHeaderEl.offsetLeft;
                const disY = e.clientY - dialogHeaderEl.offsetTop;

                /**  获取到的值带px 正则匹配替换*/
                let styL, styT;

                /**  注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px*/
                if (sty.left.includes('%')) {
                    // eslint-disable-next-line no-useless-escape
                    styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
                    styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
                } else {
                    // eslint-disable-next-line no-useless-escape
                    styL = +sty.left.replace(/\px/g, '');
                    // eslint-disable-next-line no-useless-escape
                    styT = +sty.top.replace(/\px/g, '');
                }

                document.onmousemove = function (e) {
                    /** 通过事件委托，计算移动的距离*/
                    const l = e.clientX - disX;
                    const t = e.clientY - disY;

                    /** 移动当前元素*/
                    // dragDom.style.left = `${l + styL}px`;
                    // dragDom.style.top = `${t + styT}px`;

                    /** 移动当前元素*/
                    if (l + styL < 0) {
                        dragDom.style.left = `0px`;
                    } else if (l + styL > document.body.clientWidth - dragDom.clientWidth - 10) {
                        dragDom.style.left = `${document.body.clientWidth - dragDom.clientWidth - 10}px`;
                    } else {
                        dragDom.style.left = `${l + styL}px`;
                    }
                    if (t + styT <= offset) {
                        dragDom.style.top = offset + `px`;
                    } else if (t + styT > document.body.clientHeight - dragDom.clientHeight - 10) {
                        dragDom.style.top = `${document.body.clientHeight - dragDom.clientHeight - 10}px`;
                    } else {
                        dragDom.style.top = `${t + styT}px`;
                    }

                    /** 将此时的位置传出去*/
                    // binding.value({ x: e.pageX, y: e.pageY });
                };

                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            };
        }
    }
};
</script>

<style lang="scss">
	#faultChoose .card .queryList .el-card .el-card__body .el-table--border .el-table__body-wrapper{
		height: 135px !important;
		overflow-y: auto !important;
	}
	#faultChoose .el-button--mini {
		margin-left: 5px;
	}
	.triggerFaultListLeft{
		display: inline-block;
		float: left;
		width: 730px;
	}
	// 谷歌、safari、qq浏览器、360浏览器滚动条样式
	// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
	#faultChoose .el-table__body-wrapper::-webkit-scrollbar {
		width: 6px;
		height: 6px;
		// height: 110px;
		background-color: #FFFFFF;
	}
	/*定义滚动条轨道 内阴影+圆角*/
	#faultChoose .el-table__body-wrapper::-webkit-scrollbar-track {
		// box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
		border-radius: 10px;
		background-color: #FFFFFF;;
	}
	/*定义滑块 内阴影+圆角*/
	#faultChoose .el-table__body-wrapper::-webkit-scrollbar-thumb {
		border-radius: 10px;
		// box-shadow: inset 0 0 6px rgba(0,0,0,.3);
		background-color: #eaeaea;
	}
	/*滑块效果*/
	#faultChoose .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
		border-radius: 5px;
		// box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
		background: rgba(0,0,0,0.4);
	}
	/*IE滚动条颜色*/
	html {
		scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
		scrollbar-highlight-color:#000;
		scrollbar-3dlight-color:#000;
		scrollbar-darkshadow-color:#000;
		scrollbar-Shadow-color:#adadad;/*滑块边色*/
		scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
		scrollbar-track-color:#eeeeee;/*背景颜色*/
	}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
	.triggerFaultInfo{
		margin-bottom:10px;
		padding: 10px 0px 10px 15px;
	}
	.triggerFaultList{
		font-size: 14px;
		margin-top: 10px;
		line-height: 20px;
	}
	.triggerFaultTitle{
		font-size: 15px;
		font-weight: bold;
	}
	.falutChooseTitle{
		cursor: all-scroll;
		background-color: #c0c0c0;
		height: 30px;
		line-height: 30px;
		color: #000;
		padding-left: 10px;
		border-radius: 6px 6px 0 0;
	}
	#faultChoose{
		width: 1000px;
		position: absolute;
		left: 30%;
		top: 20%;
		padding:0px 0px 15px 0px;
		// transform: translate3d(-50%,-50%,0);
		border-radius: 6px;
		z-index:2009;
		background-color: #E2E2E2;
	}
	.faultChooseFoot{
		display: inline-block;
		float: right;
		margin-right: 20px;
		margin-top: 20px;
	}
	.closeFalutChoose{
		position: absolute;
		right: 0px;
		top: 0px;
		width: 30px;
		height: 30px;
		cursor: pointer;
		line-height: 30px;
	}
	.closeFalutChooseIn{
		font-size: 20px;
		margin-left: 5px;
		background-color: #f00;
		color: #FFF;
		border: 1px solid #fff;
		border-radius: 5px;
	}
	/deep/ .el-table th{
		background-color: #E2E2E2;
		padding: 0;
	}
	/deep/.el-table td{
		padding: 0;
	}
</style>