From 7094b1d497e1b7631a1653c1468a904f2018ed5e Mon Sep 17 00:00:00 2001
From: joylink_cuiweidong <364937672@qq.com>
Date: Thu, 20 May 2021 15:05:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=97=E4=BA=AC=E4=BA=8C=E5=8F=B7=E7=BA=BF?=
 =?UTF-8?q?=20=E5=88=97=E8=BD=A6=E8=AF=A6=E8=A7=88=E9=A1=B5=E9=9D=A2=20?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../theme/nanjing_02/menus/dialog/tra.vue     |  13 +-
 .../menus/dialog/trainTrunkDetail.vue         | 344 ++++++++++++++++++
 2 files changed, 354 insertions(+), 3 deletions(-)
 create mode 100644 src/jmapNew/theme/nanjing_02/menus/dialog/trainTrunkDetail.vue

diff --git a/src/jmapNew/theme/nanjing_02/menus/dialog/tra.vue b/src/jmapNew/theme/nanjing_02/menus/dialog/tra.vue
index a6154d6e3..b715c6460 100644
--- a/src/jmapNew/theme/nanjing_02/menus/dialog/tra.vue
+++ b/src/jmapNew/theme/nanjing_02/menus/dialog/tra.vue
@@ -14,22 +14,25 @@
           <div class="eachTrainViewIn">
             <div class="eachTrainViewInRhom" />
             <div class="eachTrainTrunkS">{{ 'W'+eachTrainView+'0' }}</div>
-            <div class="eachTrainTrunkD">
+            <div class="eachTrainTrunkD" @click="toTrainTrunkDetail(index)">
               <img :src="trainTrunkDown" class="trainTrunkDown">
             </div>
             <div class="eachTrainTrunkE">{{ 'W'+eachTrainView+'6' }}</div>
-            <!--  -->
           </div>
         </div>
       </div>
     </div>
+    <train-trunk-detail ref="trainTrunkDetail" :train-view-list="trainViewList" />
   </el-dialog>
 </template>
 <script>
 import trainTrunkDown from '@/assets/baSiDi/up.png';
-// import alarmpic from 'ibp_images/alarm.png';
+import TrainTrunkDetail from './trainTrunkDetail.vue';
 export default {
     name:'Tra',
+    components:{
+        TrainTrunkDetail
+    },
     data() {
         return {
             dialogShow: false,
@@ -63,6 +66,9 @@ export default {
             // this.loading = false;
             this.dialogShow = false;
             this.$store.dispatch('training/emitTipFresh');
+        },
+        toTrainTrunkDetail(index) {
+            this.$refs.trainTrunkDetail.doShow(index);
         }
     }
 };
@@ -141,6 +147,7 @@ export default {
         position: absolute;
         left: 99px;
         top: 16px;
+        cursor: pointer;
     }
     .trainTrunkDown{
         width: 25px;
diff --git a/src/jmapNew/theme/nanjing_02/menus/dialog/trainTrunkDetail.vue b/src/jmapNew/theme/nanjing_02/menus/dialog/trainTrunkDetail.vue
new file mode 100644
index 000000000..1a1548357
--- /dev/null
+++ b/src/jmapNew/theme/nanjing_02/menus/dialog/trainTrunkDetail.vue
@@ -0,0 +1,344 @@
+<template>
+  <el-dialog
+    class="haerbin-01__systerm"
+    :width="'1000px'"
+    :modal="false"
+    :close-on-click-modal="false"
+    :title="title"
+    :visible.sync="show"
+    :before-close="doClose"
+  >
+    <!-- :fullscreen="true" -->
+    <div class="trainTrunkView">
+      <div class="trainTrunkViewT">
+        <img :src="trainTrunkUp" class="trainTrunkUp" @click="doClose">
+        <div class="trainTrunkTtext">
+          <div class="trainTrunkTtextIn">OBCU</div>
+          <div class="trainTrunkTtextIn">Overview</div>
+        </div>
+      </div>
+      <div class="trainTrunkViewM">
+        <div class="trainTrunkViewMT">
+          <div class="eachTrunkViewInRhom" />
+          <div class="trainTrunkViewMTL">
+            <div class="trainTrunkViewMTL1">
+              <div class="trainTrunkViewMTLEach">ATP</div>
+              <div class="trainTrunkViewMTLEach">ATO</div>
+            </div>
+            <div class="trainTrunkViewMTL2">
+              <div class="trainTrunkViewMTL2L" />
+              <div class="trainTrunkViewMTL2R">
+                <div class="trainTrunkViewLine">
+                  <div class="trainTrunkViewDot" style="top: -3px;left: -3px;" />
+                  <div class="trainTrunkViewDot" style="top: -3px;left: 103px;" />
+                </div>
+              </div>
+            </div>
+            <div class="trainTrunkViewMTL3">
+              <div class="trainTrunkViewMTLEach">ITF</div>
+              <div class="trainTrunkViewMTLEach">HMI</div>
+              <div class="trainTrunkViewMTLEach">TMS</div>
+            </div>
+          </div>
+          <div class="trainTrunkViewMTR">
+            <div class="trainTrunkViewMTR1">
+              <div class="trainTrunkViewMTLEach">ATO</div>
+              <div class="trainTrunkViewMTLEach">ATP</div>
+            </div>
+            <div class="trainTrunkViewMTR2">
+              <div class="trainTrunkViewMTR2L">
+                <div class="trainTrunkViewLine">
+                  <div class="trainTrunkViewDot" style="top: -3px;left: -3px;" />
+                  <div class="trainTrunkViewDot" style="top: -3px;left: 103px;" />
+                </div>
+              </div>
+              <div class="trainTrunkViewMTR2R" />
+            </div>
+            <div class="trainTrunkViewMTR3">
+              <div class="trainTrunkViewMTLEach">TMS</div>
+              <div class="trainTrunkViewMTLEach">HMI</div>
+              <div class="trainTrunkViewMTLEach">ITF</div>
+            </div>
+          </div>
+        </div>
+        <div class="trainTrunkViewMB">
+          <div class="trainTrunkViewMBL">{{ 'W'+trainCode+'0' }}</div>
+          <div class="trainTrunkViewMBR">{{ 'W'+trainCode+'6' }}</div>
+        </div>
+      </div>
+      <div class="trainTrunkViewB">
+        <div v-if="prev" class="trainTrunkViewBL">
+          <img :src="trainTrunkUp" class="trainTrunkLeft" @click="doPrev">
+          <div class="trainTrunkViewBLIn">
+            <div class="trainTrunkViewBLInRhom" />
+            <div class="trainTrunkViewBLInL">{{ 'W'+prev+'0' }}</div>
+            <div class="trainTrunkViewBLInR">{{ 'W'+prev+'6' }}</div>
+          </div>
+        </div>
+        <div v-if="next" class="trainTrunkViewBB">
+          <div class="trainTrunkViewBRIn">
+            <div class="trainTrunkViewBLInRhom" />
+            <div class="trainTrunkViewBLInL">{{ 'W'+next+'0' }}</div>
+            <div class="trainTrunkViewBLInR">{{ 'W'+next+'6' }}</div>
+          </div>
+          <img :src="trainTrunkUp" class="trainTrunkRight" @click="doNext">
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import trainTrunkUp from '@/assets/baSiDi/up.png';
+export default {
+    name:'TrainTrunkDetail',
+    props:{
+        trainViewList:{
+            type:Array,
+            required:true
+        }
+    },
+    data() {
+        return {
+            dialogShow: false,
+            trainCode:'',
+            prev:'',
+            next:'',
+            index:0,
+            trainTrunkUp:trainTrunkUp
+        };
+    },
+    computed: {
+        show() {
+            return this.dialogShow && !this.$store.state.menuOperation.break;
+        },
+        title() {
+            return '列车详览';
+        }
+    },
+    methods:{
+        doShow(index) {
+            this.index = index;
+            this.dialogShow = true;
+            this.init();
+        },
+        init() {
+            this.trainCode = this.trainViewList[this.index];
+            this.prev = '';
+            if (this.index > 0) {
+                this.prev = this.trainViewList[this.index - 1];
+            }
+            this.next = '';
+            if ((this.index + 1) < this.trainViewList.length) {
+                this.next = this.trainViewList[this.index + 1];
+            }
+        },
+        doClose() {
+            this.dialogShow = false;
+            this.$store.dispatch('training/emitTipFresh');
+        },
+        doPrev() {
+            this.index--;
+            this.init();
+        },
+        doNext() {
+            this.index++;
+            this.init();
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.trainTrunkView{
+    width: 100%;
+    background: #000;
+    display: inline-block;
+    padding: 20px 30px;
+}
+.trainTrunkUp{
+    width: 60px;
+    margin-left: 433px;
+    display: inline-block;
+    cursor: pointer;
+}
+.trainTrunkTtext{
+    display: inline-block;
+    vertical-align: top;
+    margin-left: 0px;
+    color: #fff;
+    font-size: 26px;
+}
+.trainTrunkTtextIn{margin-bottom:5px;letter-spacing: 2px;}
+.trainTrunkViewMT{
+    width: 800px;
+    height: 210px;
+    margin-left: 58px;
+    margin-top: 25px;
+    position: relative;
+}
+.eachTrunkViewInRhom{
+    width: 800px;
+    height: 210px;
+    border-left: 1px #828282 solid;
+    transform: skew(-30deg, 0deg);
+    -webkit-transform-origin: bottom center;
+    transform-origin: bottom center;
+    border-bottom: 1px #828282 solid;
+    overflow: hidden;
+}
+.eachTrunkViewInRhom:before{
+    content: '';
+    transform: skew(50deg, 0deg);
+    transform-origin: bottom center;
+    position:absolute;
+    width:100%;
+    height: 100%;
+    border-top: 1px #828282 solid;
+    border-right: 1px #828282 solid;
+}
+.trainTrunkViewMTL{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 400px;
+    height: 100%;
+    border-right: 1px #fff dashed;
+    font-size:0;
+}
+.trainTrunkViewMTR{
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 400px;
+    height: 100%;
+    font-size: 0;
+}
+.trainTrunkViewMTL1{margin-left: 177px;margin-top: 28px;font-size: 0;}
+.trainTrunkViewMTR1{margin-left: 34px;margin-top: 28px;font-size: 0;}
+.trainTrunkViewMTL2{height: 59px;margin-left:100px;display: inline-block;}
+.trainTrunkViewMTL2L{
+    width: 117px;
+    border-left: 1px #fff solid;
+    height: 34px;
+    margin-top: 25px;
+    border-top: 1px #fff solid;
+    display: inline-block;
+}
+.trainTrunkViewMTR2R{width: 106px;border-top: 1px #fff solid;display: inline-block;margin-top: 25px;border-right: 1px #fff solid;height: 34px;}
+.trainTrunkViewMTR2{height: 59px;margin-left:75px;display: inline-block;}
+.trainTrunkViewMTR2L{
+    width: 108px;
+    height: 59px;
+    border-left: 1px #fff solid;
+    display: inline-block;
+    vertical-align: top;
+    border-right: 1px #fff solid;
+}
+.trainTrunkViewMTL2R{
+    width: 108px;
+    height: 59px;
+    border-left: 1px #fff solid;
+    display: inline-block;
+    vertical-align: top;
+    border-right: 1px #fff solid;
+}
+.trainTrunkViewMTL3{margin-left: 65px;font-size: 0;}
+.trainTrunkViewMTR3{margin-left: 34px;font-size: 0;}
+.trainTrunkViewMTLEach{
+    padding: 10px 0px;
+    width:80px;
+    text-align:center;
+    font-size: 24px;
+    color: #5F5F5F;
+    border: 1px #5F5F5F solid;
+    display: inline-block;
+    letter-spacing: 4px;
+    margin-right: 30px;
+    cursor: pointer;
+}
+.trainTrunkViewDot{
+    position:absolute;
+    width: 6px;
+    height: 6px;
+    border-radius: 5px;
+    background: #fff;
+}
+.trainTrunkViewLine{
+    width: 107px;
+    height: 33px;
+    border-top: 1px #fff solid;
+    margin-top: 25px;
+    position: relative;
+}
+.trainTrunkViewMB{padding: 20px 123px;}
+.trainTrunkViewMBL{font-size: 40px;color: #fff;display:inline-block;margin-left: 75px;letter-spacing: 5px;}
+.trainTrunkViewMBR{font-size: 40px;color: #fff;display:inline-block;float:right;margin-right:75px;letter-spacing: 5px;}
+.trainTrunkViewBL{display: inline-block;}
+.trainTrunkLeft{
+    width: 60px;
+    transform-origin: center center;
+    transform: rotate(-90deg);
+    cursor: pointer;
+}
+.trainTrunkViewB{margin-top: 20px;}
+.trainTrunkViewBB{display: inline-block;float: right;}
+.trainTrunkRight{
+    width: 60px;
+    transform-origin: center center;
+    transform: rotate(90deg);
+    cursor: pointer;
+}
+.trainTrunkViewBLIn,.trainTrunkViewBRIn{
+    width: 220px;
+    height: 50px;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+}
+.trainTrunkViewBLIn{margin-left: 20px;}
+.trainTrunkViewBRIn{margin-right: 20px;}
+.trainTrunkViewBLInRhom{
+    width: 100%;
+    height: 100%;
+    border-left: 1px #828282 solid;
+    transform: skew(-30deg, 0deg);
+    -webkit-transform-origin: bottom center;
+    transform-origin: bottom center;
+    border-bottom: 1px #828282 solid;
+    overflow: hidden;
+}
+.trainTrunkViewBLInRhom:before{
+    content: '';
+    transform: skew(50deg, 0deg);
+    transform-origin: bottom center;
+    position:absolute;
+    width:100%;
+    height: 100%;
+    border-top: 1px #828282 solid;
+    border-right: 1px #828282 solid;
+}
+.trainTrunkViewBLInL{
+    position: absolute;
+    width: 110px;
+    height: 100%;
+    left: 0;
+    top: 0;
+    border-right: 1px #fff dashed;
+    font-size: 20px;
+    color: #fff;
+    padding-top: 16px;
+    letter-spacing: 2px;
+    padding-left:27px;
+}
+.trainTrunkViewBLInR{
+    position: absolute;
+    width: 110px;
+    height: 100%;
+    right: 0;
+    top: 0;
+    font-size: 20px;
+    color: #fff;
+    padding-top: 16px;
+    letter-spacing: 2px;
+    padding-left: 10px;
+}
+</style>