时间表管理&添加通用配置项

src/views/iscs/iscsSystem/config/bas/schedulesChild/schedulesManage.vue

@@ -1,33 +1,119 @@
 <template>
   <div style="width: 100%;display: flex;justify-content: center;">
     <div>
-      <div class="top-content-box">
+      <div class="content-box">
         <div style="width: 950px;font-size: 18px;color: #56E5DE;margin: 10px;">全线车站时间表</div>
         <div style="width: 100%;display: flex;justify-content: center;">
-          <div style="width: 240px;height: 300px;background: #FFF;">
+          <div style="width: 240px;height: 280px;background: #FFF;">
             <el-row>
               <div style="background: #43388A;font-size: 14px;height: 30px;line-height: 30px;color: #FFF;text-align: center;">公用时间列表</div>
             </el-row>
           </div>
           <div style="width: 120px;margin-left: 10px;">
-            <div style="font-size: 18px;color: #56E5DE;width: 100%;text-align: center;margin: 85px 0;">增加时间表名</div>
+            <div style="font-size: 18px;color: #56E5DE;width: 100%;text-align: center;margin: 75px 0;">增加时间表名</div>
             <el-input v-model="tableName" size="mini" />
             <div class="button-box" style="text-align: center;padding: 5px 0;margin: 10px 0;">增加</div>
             <div class="button-box" style="text-align: center;padding: 5px 0">删除</div>
           </div>
-          <div style="width: 110px;height: 300px;padding: 0 15px;border-right: 2px solid #2B5932;margin-left: 40px;">
+          <div style="width: 110px;height: 280px;padding: 0 15px;border-right: 2px solid #2B5932;margin-left: 40px;">
             <div style="font-size: 18px;color: #56E5DE;width: 100%;text-align: center;">下载选择</div>
-            <div class="button-box" style="background: #3F8B66;text-align: center;margin-top: 256px;">立即下发</div>
+            <div class="button-box" style="background: #3F8B66;text-align: center;margin-top: 236px;">立即下发</div>
           </div>
-          <div style="width: 110px;height: 300px;margin-left: 15px;">
+          <div style="width: 70px;height: 280px;margin-left: 15px;">
-            <div style="color: #56E5DE;font-size: 13px;"><div class="check-box" />星期一</div>
+            <div style="display: flex;align-items: center;cursor: pointer;" @click="selectedAllStationDate('Mon')">
-            <div style="color: #56E5DE;font-size: 13px;"><div class="check-box" />星期二</div>
+              <div class="check-box" :style="{background: allStationDate.includes('Mon')?'#0F0':'#BFC1C1'}" />
-            <div style="color: #56E5DE;font-size: 13px;"><div class="check-box" />星期三</div>
+              <div class="check-text">星期一</div>
-            <div style="color: #56E5DE;font-size: 13px;"><div class="check-box" />星期四</div>
+            </div>
-            <div style="color: #56E5DE;font-size: 13px;"><div class="check-box" />星期五</div>
+            <div style="display: flex;align-items: center;cursor: pointer;" @click="selectedAllStationDate('Tues')">
-            <div style="color: #56E5DE;font-size: 13px;"><div class="check-box" />星期六</div>
+              <div class="check-box" :style="{background: allStationDate.includes('Tues')?'#0F0':'#BFC1C1'}" />
-            <div style="color: #56E5DE;font-size: 13px;"><div class="check-box" />星期日</div>
+              <div class="check-text">星期二</div>
-            <div class="button-box" style="background: #3F8B66;text-align: center;margin-top: 100px;">排定下发</div>
+            </div>
+            <div style="display: flex;align-items: center;cursor: pointer;" @click="selectedAllStationDate('Wed')">
+              <div class="check-box" :style="{background: allStationDate.includes('Wed')?'#0F0':'#BFC1C1'}" />
+              <div class="check-text">星期三</div>
+            </div>
+            <div style="display: flex;align-items: center;cursor: pointer;" @click="selectedAllStationDate('Thurs')">
+              <div class="check-box" :style="{background: allStationDate.includes('Thurs')?'#0F0':'#BFC1C1'}" />
+              <div class="check-text">星期四</div>
+            </div>
+            <div style="display: flex;align-items: center;cursor: pointer;" @click="selectedAllStationDate('Fri')">
+              <div class="check-box" :style="{background: allStationDate.includes('Fri')?'#0F0':'#BFC1C1'}" />
+              <div class="check-text">星期五</div>
+            </div>
+            <div style="display: flex;align-items: center;cursor: pointer;" @click="selectedAllStationDate('Sta')">
+              <div class="check-box" :style="{background: allStationDate.includes('Sta')?'#0F0':'#BFC1C1'}" />
+              <div class="check-text">星期六</div>
+            </div>
+            <div style="display: flex;align-items: center;cursor: pointer;" @click="selectedAllStationDate('Sun')">
+              <div class="check-box" :style="{background: allStationDate.includes('Sun')?'#0F0':'#BFC1C1'}" />
+              <div class="check-text">星期日</div>
+            </div>
+            <div class="button-box" style="background: #3F8B66;text-align: center;margin-top: 80px;">排定下发</div>
+          </div>
+        </div>
+      </div>
+      <div class="content-box">
+        <div style="width: 950px;font-size: 18px;color: #56E5DE;margin: 10px;">车站时间表</div>
+        <div style="width: 100%;display: flex;justify-content: center;">
+          <div style="width: 180px;height: 280px;background: #FFF;">
+            <el-row>
+              <div style="background: #43388A;font-size: 14px;height: 30px;line-height: 30px;color: #FFF;text-align: center;">车站选择</div>
+            </el-row>
+          </div>
+          <div class="border-box" style="width: 380px;height: 280px;display: flex;justify-content: center;padding: 10px;margin-left: 20px;">
+            <div style="width: 240px;height: 260px;background: #FFF;">
+              <el-row>
+                <div style="background: #43388A;font-size: 14px;height: 30px;line-height: 30px;color: #FFF;text-align: center;">车站时间列表</div>
+              </el-row>
+            </div>
+            <div style="width: 110px;height: 260px;margin-left: 10px;">
+              <div style="width: 100%;font-size: 18px;color: #56E5DE;">新时间表名</div>
+              <el-input v-model="newTableName" size="mini" style="margin: 10px 0;" />
+              <div class="button-box" style="padding: 5px 10px;width: 50px;text-align: center;font-size: 12px;">改名</div>
+              <div style="padding: 10px 0; border-top: 2px solid #2B5932;margin-top: 10px;display: flex;justify-content: center;">
+                <div class="button-box" style="width: 45px;font-size: 12px;height: 65px;text-align: center;line-height: 65px;margin-right: 10px;">删除</div>
+                <div class="button-box" style="width: 55px;font-size: 12px;height: 65px;text-align: center;padding-top: 18px;">增到共用时间表列</div>
+              </div>
+              <div style="display: flex;justify-content: center;">
+                <div class="button-box" style="width: 45px;font-size: 12px;height: 65px;text-align: center;margin-right: 10px;padding-top: 18px;">编辑时间表</div>
+                <div class="button-box" style="width: 55px;font-size: 12px;height: 65px;line-height: 65px;text-align: center;">查看</div>
+              </div>
+            </div>
+          </div>
+          <div style="width: 110px;height: 280px;padding: 0 15px;border-right: 2px solid #2B5932;margin-left: 40px;">
+            <div style="font-size: 18px;color: #56E5DE;width: 100%;text-align: center;">下载选择</div>
+            <div class="button-box" style="background: #3F8B66;text-align: center;margin-top: 236px;">立即下发</div>
+          </div>
+          <div style="width: 70px;height: 280px;margin-left: 15px;">
+            <div style="display: flex;align-items: center;cursor: pointer;" @click="selectedStationDate('Mon')">
+              <div class="check-box" :style="{background: stationDate.includes('Mon')?'#0F0':'#BFC1C1'}" />
+              <div class="check-text">星期一</div>
+            </div>
+            <div style="display: flex;align-items: center;cursor: pointer;" @click="selectedStationDate('Tues')">
+              <div class="check-box" :style="{background: stationDate.includes('Tues')?'#0F0':'#BFC1C1'}" />
+              <div class="check-text">星期二</div>
+            </div>
+            <div style="display: flex;align-items: center;cursor: pointer;" @click="selectedStationDate('Wed')">
+              <div class="check-box" :style="{background: stationDate.includes('Wed')?'#0F0':'#BFC1C1'}" />
+              <div class="check-text">星期三</div>
+            </div>
+            <div style="display: flex;align-items: center;cursor: pointer;" @click="selectedStationDate('Thurs')">
+              <div class="check-box" :style="{background: stationDate.includes('Thurs')?'#0F0':'#BFC1C1'}" />
+              <div class="check-text">星期四</div>
+            </div>
+            <div style="display: flex;align-items: center;cursor: pointer;" @click="selectedStationDate('Fri')">
+              <div class="check-box" :style="{background: stationDate.includes('Fri')?'#0F0':'#BFC1C1'}" />
+              <div class="check-text">星期五</div>
+            </div>
+            <div style="display: flex;align-items: center;cursor: pointer;" @click="selectedStationDate('Sta')">
+              <div class="check-box" :style="{background: stationDate.includes('Sta')?'#0F0':'#BFC1C1'}" />
+              <div class="check-text">星期六</div>
+            </div>
+            <div style="display: flex;align-items: center;cursor: pointer;" @click="selectedStationDate('Sun')">
+              <div class="check-box" :style="{background: stationDate.includes('Sun')?'#0F0':'#BFC1C1'}" />
+              <div class="check-text">星期日</div>
+            </div>
+            <div class="button-box" style="background: #3F8B66;text-align: center;margin-top: 80px;">排定下发</div>
           </div>
         </div>
       </div>
@@ -40,14 +126,35 @@ export default {
     name: 'SchedulesManage',
     data() {
         return {
-            tableName: ''
+            tableName: '',
+            newTableName: '',
+            stationDate: [],
+            allStationDate: []
         };
+    },
+    methods: {
+        selectedStationDate(day) {
+            const index = this.stationDate.indexOf(day);
+            if (index < 0) {
+                this.stationDate.push(day);
+            } else {
+                this.stationDate.splice(index, 1);
+            }
+        },
+        selectedAllStationDate(day) {
+            const index = this.allStationDate.indexOf(day);
+            if (index < 0) {
+                this.allStationDate.push(day);
+            } else {
+                this.allStationDate.splice(index, 1);
+            }
+        }
     }
 };
 </script>
 
 <style scoped>
-	.top-content-box {
+	.content-box {
 		width: 950px;
 		margin-top: 10px;
 		border-top: 2px solid #A4A3A0;
@@ -56,10 +163,24 @@ export default {
 		border-right: 2px solid #E5F1FE;
 		padding-bottom: 10px;
 	}
+	.border-box{
+		border-top: 2px solid #FFFFFE;
+		border-right: 2px solid #797977;
+		border-bottom: 2px solid #797977;
+		border-left: 2px solid #FFFFFE;
+	}
+	.check-text {
+		display: inline-block;
+		color: #56E5DE;
+		font-size: 13px;
+		height: 25px;
+		line-height: 25px;
+		margin-left: 5px;
+	}
 	.check-box {
 		display: inline-block;
-		height: 10px;
+		height: 14px;
-		width: 10px;
+		width: 14px;
 		background: #BFC1C1;
 		border-top: 2px solid #FFFFFE;
 		border-right: 2px solid #797977;

src/views/system/configLine/config.vue

@@ -71,9 +71,9 @@ export default {
             height: 800,
             roadData: [],
             focus: false,
-            booleanList: ['lockFirst', 'switchSingleHandle', 'switchNRTurnChain', 'switchSingleLockChain', 'signalForceCancelRoute'],
+            booleanList: ['lockFirst', 'switchSingleHandle', 'switchNRTurnChain', 'switchSingleLockChain', 'signalForceCancelRoute', 'initSingleLockSwitch'],
             selectList: ['upDirection', 'runMode'],
-            generalConfig: ['lockFirst', 'switchSingleHandle', 'upDirection', 'switchNRTurnChain', 'switchSingleLockChain', 'signalForceCancelRoute', 'runMode'],
+            generalConfig: ['lockFirst', 'switchSingleHandle', 'upDirection', 'switchNRTurnChain', 'switchSingleLockChain', 'signalForceCancelRoute', 'runMode', 'initSingleLockSwitch'],
             numberList: [],
             optionsMap: {
                 upDirection: [{label: 'right', value: 'right'}, {label: 'left', value: 'left'}],
@@ -86,7 +86,8 @@ export default {
                 switchNRTurnChain:'道岔正/反操是否联动',
                 switchSingleLockChain:'道岔单解/锁是否联动',
                 signalForceCancelRoute:'是否强制取消进路/在接近区段占用时是否依旧强制执行取消进路',
-                runMode:'列车控制模式/级别'
+                runMode:'列车控制模式/级别',
+                initSingleLockSwitch: '初始加载设备时是否默认单锁正线道岔'
             }
         };
     },