南京二号线列监调整--暂提
This commit is contained in:
parent
5bd0f380b6
commit
0d27da9d3b
@ -1,212 +1,220 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog
|
<!--<el-dialog-->
|
||||||
v-dialogDrag
|
<!--v-dialogDrag-->
|
||||||
class="route-setting"
|
<!--class="route-setting"-->
|
||||||
:title="title"
|
<!--:title="title"-->
|
||||||
:visible.sync="show"
|
<!--:visible.sync="show"-->
|
||||||
width="900px"
|
<!--width="900px"-->
|
||||||
label-position="top"
|
<!--label-position="top"-->
|
||||||
:before-close="doClose"
|
<!--:before-close="doClose"-->
|
||||||
:z-index="2009"
|
<!--:z-index="2009"-->
|
||||||
:modal="false"
|
<!--:modal="false"-->
|
||||||
:close-on-click-modal="false"
|
<!--:close-on-click-modal="false"-->
|
||||||
>
|
<!-->-->
|
||||||
<div style="padding: 5px;">
|
<div v-if="dialogShow" id="faultChoose">
|
||||||
<el-row>
|
<div class="falutChooseTitle">{{ title }}</div>
|
||||||
<el-col :span="12"><span>所选位置:</span></el-col>
|
<div class="closeFalutChoose" @click="doClose">
|
||||||
<el-col :span="12"><span>列车号:</span></el-col>
|
<span class="el-icon-close closeFalutChooseIn" />
|
||||||
</el-row>
|
</div>
|
||||||
<el-row style="margin-top: 10px;">
|
<div class="card" style="padding: 20px;">
|
||||||
<el-col :span="12">
|
<div style="padding: 5px;">
|
||||||
<el-input v-model="sectionName" size="mini" style="width: 400px;" :disabled="true" />
|
<el-row>
|
||||||
</el-col>
|
<el-col :span="12"><span>所选位置:</span></el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12"><span>列车号:</span></el-col>
|
||||||
<el-input v-model="trainCode" :max-length="7" size="mini" style="width: 310px;" />
|
</el-row>
|
||||||
<el-button size="mini" icon="el-icon-search" @click="trainFind" />
|
<el-row style="margin-top: 10px;">
|
||||||
<el-button size="mini" icon="el-icon-refresh-left" @click="resetTrainCode" />
|
<el-col :span="12">
|
||||||
</el-col>
|
<el-input v-model="sectionName" size="mini" style="width: 400px;" :disabled="true" />
|
||||||
</el-row>
|
</el-col>
|
||||||
<div style="display: flex;justify-content: space-around;margin-top: 20px;">
|
<el-col :span="12">
|
||||||
<el-button size="mini" style="width: 280px;" :disabled="operationType === 'show'" @click="changeOperationType('show')">显示列车信息</el-button>
|
<el-input v-model="trainCode" :max-length="7" size="mini" style="width: 310px;" />
|
||||||
<el-button size="mini" style="width: 280px;" :disabled="operationType === 'update'" @click="changeOperationType('update')">修改列车资料</el-button>
|
<el-button size="mini" icon="el-icon-search" @click="trainFind" />
|
||||||
<el-button size="mini" style="width: 280px;" :disabled="operationType === 'create'" @click="changeOperationType('create')">创建列车号</el-button>
|
<el-button size="mini" icon="el-icon-refresh-left" @click="resetTrainCode" />
|
||||||
</div>
|
</el-col>
|
||||||
<div style="display: flex;justify-content: space-around;margin-top: 10px;">
|
</el-row>
|
||||||
<el-button size="mini" style="width: 280px;" :disabled="operationType === 'delete'" @click="changeOperationType('delete')">删除列车号</el-button>
|
<div style="display: flex;justify-content: space-around;margin-top: 20px;">
|
||||||
<el-button size="mini" style="width: 280px;" :disabled="operationType === 'move'" @click="changeOperationType('move')">步进列车号</el-button>
|
<el-button size="mini" style="width: 280px;" :disabled="operationType === 'show'" @click="changeOperationType('show')">显示列车信息</el-button>
|
||||||
<el-button size="mini" style="width: 280px;" :disabled="operationType === 'resort'" @click="changeOperationType('resort')">重排列车号</el-button>
|
<el-button size="mini" style="width: 280px;" :disabled="operationType === 'update'" @click="changeOperationType('update')">修改列车资料</el-button>
|
||||||
</div>
|
<el-button size="mini" style="width: 280px;" :disabled="operationType === 'create'" @click="changeOperationType('create')">创建列车号</el-button>
|
||||||
<div v-if="operationType === 'show'">
|
</div>
|
||||||
<el-table :data="tableData" border style="width: 100%;margin-top: 20px;" height="200">
|
<div style="display: flex;justify-content: space-around;margin-top: 10px;">
|
||||||
<el-table-column prop="date" label="方向" />
|
<el-button size="mini" style="width: 280px;" :disabled="operationType === 'delete'" @click="changeOperationType('delete')">删除列车号</el-button>
|
||||||
<el-table-column prop="name" label="列车号" />
|
<el-button size="mini" style="width: 280px;" :disabled="operationType === 'move'" @click="changeOperationType('move')">步进列车号</el-button>
|
||||||
<el-table-column prop="address" label="位置" />
|
<el-button size="mini" style="width: 280px;" :disabled="operationType === 'resort'" @click="changeOperationType('resort')">重排列车号</el-button>
|
||||||
<el-table-column prop="address" label="ARS" />
|
</div>
|
||||||
<el-table-column prop="address" label="晚点" />
|
<div v-if="operationType === 'show'">
|
||||||
</el-table>
|
<el-table :data="tableData" border style="width: 100%;margin-top: 20px;" height="200">
|
||||||
</div>
|
<el-table-column prop="date" label="方向" />
|
||||||
<div v-else-if="operationType === 'create'" style="display: flex;justify-content: space-between;">
|
<el-table-column prop="name" label="列车号" />
|
||||||
<div>
|
<el-table-column prop="address" label="位置" />
|
||||||
<el-table :data="tableData" border style="width: 280px;margin-top: 20px;" height="200">
|
<el-table-column prop="address" label="ARS" />
|
||||||
<el-table-column prop="date" label="方向" width="60" />
|
<el-table-column prop="address" label="晚点" />
|
||||||
<el-table-column prop="name" label="列车号" width="157" />
|
|
||||||
<el-table-column prop="address" label="位置" width="60" />
|
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div v-else-if="operationType === 'create'" style="display: flex;justify-content: space-between;">
|
||||||
<div style="margin-top: 20px;display: flex;justify-content: space-between;padding: 5px;align-items: center;">
|
<div>
|
||||||
<span>位置:</span>
|
<el-table :data="tableData" border style="width: 280px;margin-top: 20px;" height="200">
|
||||||
<el-select v-model="nowSectionCode" :disabled="true" size="mini" style="width: 150px">
|
<el-table-column prop="date" label="方向" width="60" />
|
||||||
<el-option
|
<el-table-column prop="name" label="列车号" width="157" />
|
||||||
v-for="item in sectionList"
|
<el-table-column prop="address" label="位置" width="60" />
|
||||||
:key="item.code"
|
</el-table>
|
||||||
:label="item.name"
|
|
||||||
:value="item.code"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;margin-top: 5px;">
|
<div>
|
||||||
<span>新列车号:</span>
|
<div style="margin-top: 20px;display: flex;justify-content: space-between;padding: 5px;align-items: center;">
|
||||||
<el-input v-model="newTrainCode" size="mini" style="width: 150px;" />
|
<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" 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" size="mini" style="width: 60px;" />
|
||||||
|
<div style="border: 1px solid #DCDFE6;padding: 4px 5px;border-radius: 3px;"><></div>
|
||||||
|
<el-input v-model="groupNumber2" :disabled="true" size="mini" style="width: 60px;" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex;justify-content: space-between;padding: 5px;margin-top: 5px;">
|
<div>
|
||||||
<span>方向:</span>
|
<div style="margin-top: 20px;height: 20px;">插入位置(之前):</div>
|
||||||
<el-select v-model="direction" :disabled="true" size="mini" style="width: 80px" placeholder="请选择">
|
<el-table :data="tableData" border style="width: 280px;" height="180">
|
||||||
<el-option
|
<el-table-column prop="date" label="方向" width="60" />
|
||||||
v-for="item in directionList"
|
<el-table-column prop="name" label="列车号" width="157" />
|
||||||
:key="item.value"
|
<el-table-column prop="address" label="位置" width="60" />
|
||||||
:label="item.label"
|
</el-table>
|
||||||
: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" size="mini" style="width: 60px;" />
|
|
||||||
<div style="border: 1px solid #DCDFE6;padding: 4px 5px;border-radius: 3px;"><></div>
|
|
||||||
<el-input v-model="groupNumber2" :disabled="true" size="mini" style="width: 60px;" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div v-else-if="operationType === 'update'" style="display: flex;justify-content: flex-start;">
|
||||||
<div style="margin-top: 20px;height: 20px;">插入位置(之前):</div>
|
<div>
|
||||||
<el-table :data="tableData" border style="width: 280px;" height="180">
|
<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="date" label="方向" width="60" />
|
||||||
<el-table-column prop="name" label="列车号" width="157" />
|
<el-table-column prop="name" label="列车号" width="157" />
|
||||||
<el-table-column prop="address" label="位置" width="60" />
|
<el-table-column prop="address" label="位置" width="60" />
|
||||||
</el-table>
|
</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 prop="name" label="列车号" width="157" />
|
|
||||||
<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-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>
|
||||||
<div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;margin-top: 5px;">
|
<div>
|
||||||
<span>新列车号:</span>
|
<div style="margin-top: 20px;display: flex;justify-content: space-between;padding: 5px;align-items: center;">
|
||||||
<el-input v-model="newTrainCode" size="mini" :max-length="8" style="width: 150px;" />
|
<span>位置:</span>
|
||||||
</div>
|
<el-select v-model="nowSectionCode" size="mini" style="width: 150px">
|
||||||
<div style="display: flex;justify-content: space-between;padding: 5px;margin-top: 5px;">
|
<el-option
|
||||||
<span>方向:</span>
|
v-for="item in sectionList"
|
||||||
<el-select v-model="direction" size="mini" style="width: 80px">
|
:key="item.code"
|
||||||
<el-option
|
:label="item.name"
|
||||||
v-for="item in directionList"
|
:value="item.code"
|
||||||
:key="item.value"
|
/>
|
||||||
:label="item.label"
|
</el-select>
|
||||||
:value="item.value"
|
</div>
|
||||||
/>
|
<div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;margin-top: 5px;">
|
||||||
</el-select>
|
<span>新列车号:</span>
|
||||||
</div>
|
<el-input v-model="newTrainCode" size="mini" :max-length="8" style="width: 150px;" />
|
||||||
<div style="display: flex;justify-content: space-between;padding: 5px;margin-top: 5px;">
|
</div>
|
||||||
<span>设置该列车为自动排列:</span>
|
<div style="display: flex;justify-content: space-between;padding: 5px;margin-top: 5px;">
|
||||||
<el-radio v-model="autoArrange" label="true">开启</el-radio>
|
<span>方向:</span>
|
||||||
<el-radio v-model="autoArrange" label="false">关闭</el-radio>
|
<el-select v-model="direction" size="mini" style="width: 80px">
|
||||||
</div>
|
<el-option
|
||||||
<div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;margin-top: 5px;">
|
v-for="item in directionList"
|
||||||
<span>车组号:</span>
|
:key="item.value"
|
||||||
<el-input v-model="groupNumber1" size="mini" style="width: 60px;" />
|
:label="item.label"
|
||||||
<div style="border: 1px solid #DCDFE6;padding: 4px 5px;border-radius: 3px;"><></div>
|
:value="item.value"
|
||||||
<el-input v-model="groupNumber2" size="mini" style="width: 60px;" />
|
/>
|
||||||
|
</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" size="mini" style="width: 60px;" />
|
||||||
|
<div style="border: 1px solid #DCDFE6;padding: 4px 5px;border-radius: 3px;"><></div>
|
||||||
|
<el-input v-model="groupNumber2" size="mini" style="width: 60px;" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div v-else-if="operationType === 'delete'" style="display: flex;">
|
||||||
<div v-else-if="operationType === 'delete'" style="display: flex;">
|
<div>
|
||||||
<div>
|
<el-table :data="tableData" border style="width: 280px;margin-top: 20px;" height="200">
|
||||||
<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="date" label="方向" width="60" />
|
<el-table-column prop="name" label="列车号" width="157" />
|
||||||
<el-table-column prop="name" label="列车号" width="157" />
|
<el-table-column prop="address" label="位置" width="60" />
|
||||||
<el-table-column prop="address" label="位置" width="60" />
|
</el-table>
|
||||||
</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" />
|
|
||||||
<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>
|
||||||
<div style="display: flex;justify-content: space-between;padding: 5px;align-items: center;">
|
<div style="width: 250px;display: flex;justify-content: space-between;margin-top: 20px;margin-left: 10px;align-items: center;height: 25px;">
|
||||||
<span>当前位置:</span>
|
<div>所选列车号:</div>
|
||||||
<el-select v-model="nowSectionCode" size="mini" style="width: 150px">
|
<el-input v-model="nowTrainCode" style="width: 150px;" size="mini" />
|
||||||
<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>
|
||||||
</div>
|
<div v-else-if="operationType === 'move'" style="display: flex;justify-content: flex-start;">
|
||||||
<div style="display: flex;justify-content: flex-end;margin-top: 10px;border-top: 1px solid #c0c0c0;padding-top: 10px;">
|
<div>
|
||||||
<el-button v-if="operationType === 'update'" size="mini" @click="trainCommit">修改</el-button>
|
<el-table :data="tableData" border style="width: 280px;margin-top: 20px;" height="200">
|
||||||
<el-button v-if="operationType === 'create'" size="mini" @click="trainCommit">创建</el-button>
|
<el-table-column prop="date" label="方向" width="60" />
|
||||||
<el-button v-if="operationType === 'delete'" size="mini" @click="trainCommit">删除</el-button>
|
<el-table-column prop="name" label="列车号" width="157" />
|
||||||
<el-button size="mini" @click="doClose">关闭</el-button>
|
<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>
|
</div>
|
||||||
</el-dialog>
|
</div>
|
||||||
|
<!--</el-dialog>-->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -254,6 +262,7 @@ export default {
|
|||||||
const device = this.$store.state.menuOperation.selected;
|
const device = this.$store.state.menuOperation.selected;
|
||||||
if (device && device.code && device._type === 'Section') {
|
if (device && device.code && device._type === 'Section') {
|
||||||
// this.deviceSelect(device);
|
// this.deviceSelect(device);
|
||||||
|
this.nowSectionCode = device.code;
|
||||||
} else if (device && device.code && device._type === 'Train') {
|
} else if (device && device.code && device._type === 'Train') {
|
||||||
this.doShow(device);
|
this.doShow(device);
|
||||||
}
|
}
|
||||||
@ -345,33 +354,187 @@ export default {
|
|||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
this.doClose();
|
this.doClose();
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
<style lang="scss">
|
||||||
.route-setting {
|
#faultChoose .card .queryList .el-card .el-card__body .el-table--border .el-table__body-wrapper{
|
||||||
.content_box {
|
height: 135px !important;
|
||||||
margin-bottom: 10px;
|
overflow-y: auto !important;
|
||||||
.el-button{
|
|
||||||
&.active{
|
|
||||||
background: #969696;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.table_content_box{
|
#faultChoose .el-button--mini {
|
||||||
margin-bottom: 20px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
/deep/ {
|
.triggerFaultListLeft{
|
||||||
.table{
|
display: inline-block;
|
||||||
.table_header_box{
|
float: left;
|
||||||
.cell{
|
width: 730px;
|
||||||
text-align: center;
|
}
|
||||||
word-break: break-word;
|
// 谷歌、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>
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user