openatc-components 0.4.61 → 0.4.62

package/src/kisscomps/components/OverLap/OverLap.vue

@@ -1,237 +1,237 @@
-<template>
-<div class="overLap" v-if="checked" :style="{'margin':this.controlData ? '20px 0 0 0' :tentative ? '0' : '0 147px 0 468px'}">
-    <div class="ring-first" v-for="(list, index1) in this.overlapDatas" :key="index1">
-        <div v-for="(item,index2) in list.stageLists" :key="index2" >
-          <!-- {{list.peddirection}} -->
-            <div class="first-2">
-              <el-tooltip v-if="item.greenWidth" placement="top-start" effect="light">
-                <div slot="content">
-                    O{{list.id}}-
-                    <span v-for="(ids,index3) in list.includedphases" :key="index3">
-                        {{$t('openatccomponents.phase.phase')}}{{ids}}<span v-if="index3+1!==list.includedphases.length">,</span>
-                    </span>
-                </div>
-                <div style="cursor:pointer;">
-                    <div class="ring-phase">
-                        <!-- <patternwalksvg :showWalk="list.peddirection" :Width="'32'" :Height="'34'"></patternwalksvg> -->
-                        <xdrdirselector  Width="60px" Height="60px" Widths="50px" Heights="50px" :showlist="item.direction"></xdrdirselector>
-                    </div>
-                    <div class="box">
-                        <div class="ring-nums">
-                            O{{list.id}}-
-                            <span v-for="(ids,index3) in list.includedphases" :key="index3">
-                                {{$t('openatccomponents.phase.phase')}}{{ids}}<span v-if="index3+1!==list.includedphases.length">,</span>
-                            </span>
-                        </div>
-                    </div>
-                </div>
-            </el-tooltip>
-            </div>
-            <div class="first-1" :style="{'width':item.greenWidth,'height':'34px','background':'#7ccc66'}"></div>
-            <div class="first-1" :style="{'width':item.redWidth,'height':'17px',marginTop: '9px','background':'#f27979'}"></div>
-        </div>
-    </div>
-</div>
-</template>
-
-<script>
-import PhaseDataModel from '../IntersectionMap/crossDirection/utils.js'
-import CrossDiagramMgr from '../../../EdgeMgr/controller/crossDiagramMgr.js'
-import xdrdirselector from '../XRDDirSelector/XRDDirSelector'
-// import patternwalksvg from '../PatternWalkSvg/PatternWalkSvg'
-export default {
-  name: 'over-lap',
-  components: {
-    // patternwalksvg,
-    xdrdirselector
-  },
-  data () {
-    return {
-      overlapDatas: [],
-      max: ''
-    }
-  },
-  props: {
-    overlap: {
-      type: Array,
-      default () {
-        return []
-      }
-    },
-    stageList: {
-      type: Array
-    },
-    checked: {
-      type: Boolean
-    },
-    tentative: {
-      type: Boolean,
-      default: false
-    },
-    cycleChange: {
-      type: Boolean,
-      default: false
-    },
-    cycle: {
-      type: Number
-    },
-    controlData: {
-      type: Object
-    }
-  },
-  watch: {
-    controlData: {
-      handler: function (val, oldVal) {
-        this.doAdd(this.stageList, this.overlap)
-      },
-      // 深度观察监听
-      deep: true
-    },
-    cycleChange: {
-      handler: function (val, oldVal) {
-        this.doAdd(this.stageList, this.overlap)
-      },
-      // 深度观察监听
-      deep: true
-    },
-    stageList: {
-      handler: function (val, oldVal) {
-        this.doAdd(this.stageList, this.overlap)
-      },
-      // 深度观察监听
-      deep: true
-    }
-  },
-  created () {
-    this.PhaseDataModel = new PhaseDataModel()
-    this.CrossDiagramMgr = new CrossDiagramMgr()
-    this.doAdd(this.stageList, this.overlap)
-  },
-  methods: {
-    getRoad (i) {
-      let direction = []
-      if (i.direction && i.direction.length > 0) {
-        i.direction.map(item => {
-          direction.push({
-            id: item,
-            peddirection: this.getPedPhasePos(i.peddirection),
-            color: '#454545'
-          })
-        })
-      } else {
-        direction.push({
-          id: '',
-          color: '#454545',
-          peddirection: this.getPedPhasePos(i.peddirection)
-        })
-      }
-      return direction
-    },
-    getPedPhasePos (i) {
-      // 行人相位信息
-      let sidewalkPhaseData = []
-      if (i) {
-        i.forEach((dir, index) => {
-          // 行人相位
-          if (this.PhaseDataModel.getSidePos(dir)) {
-            sidewalkPhaseData.push({
-              key: this.CrossDiagramMgr.getUniqueKey('pedphase'),
-              phaseid: i.id, // 相位id，用于对应相位状态
-              id: dir,
-              color: '#454545',
-              name: this.PhaseDataModel.getSidePos(dir).name
-            })
-          }
-        })
-      }
-      return sidewalkPhaseData
-    },
-    doAdd (stageList, overlap) { // 阶段显示颜色
-      let overlapData = overlap.map(item => {
-        let findIndexs = []
-        item.includedphases.forEach(i => {
-          const findItems = stageList.filter(j => (j.phases ? j.phases : j.stages).includes(i))
-          if (findItems.length) findIndexs.push(...findItems.map(m => m.key))
-        })
-        findIndexs = Array.from(new Set(findIndexs))
-        if (this.cycleChange) {
-          const globalParamModel = this.$store.getters.globalParamModel
-          let pattern = globalParamModel.getParamsByType('patternList')
-          const allCycle = pattern.map(item => item.cycle)
-          let cycle = Math.max(...allCycle)
-          this.max = cycle
-        } else {
-          this.max = ''
-        }
-        return {
-          ...item,
-          peddirection: this.getPedPhasePos(item.peddirection),
-          sidewalkPhaseData: this.getPedPhasePos(item.peddirection),
-          stageLists: stageList.map(sta => {
-            const find = findIndexs.includes(sta.key)
-            return {
-              ...sta,
-              direction: this.getRoad(item),
-              // peddirection: this.getPedPhasePos(item.peddirection),
-              greenWidth: find ? (sta.split / (this.max ? this.max : this.cycle) * 100).toFixed(3) + '%' : '0%',
-              redWidth: !find ? (sta.split / (this.max ? this.max : this.cycle) * 100).toFixed(3) + '%' : '0%'
-            }
-          })
-        }
-      })
-      this.overlapDatas = overlapData
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.ring-first {
-  margin-top: 1px;
-  width: 100%;
-  height: 34px;
-  .first-1 {
-   float: left;
-// text-align: center;
-  }
-  .first-2{
-   position: absolute;
-   color: #333333;
-  }
-  .ring-nums {
-    // float: left;
-    // margin-top:7px;
-    // margin-left: 5px;
-    padding-top: 10px;
-    padding-left: 43px;
-    font-size: 12px;
-    height: 14px;
-    font-weight: normal;
-    font-stretch: normal;
-    // line-height: 22px;
-    letter-spacing: 0px;
-    color: #333333;//#33333361
-  }
-  .ring-phase {
-    position: relative;
-    float: left;
-    // margin-left: 5px;
-    height: 34px;
-    width: 36px;
-    z-index: 999;
-    background: rgba(30, 96, 12, 0.07);
-    // margin-top:1px;
-  }
-  .ring-phase::after {
-    position: absolute;
-    display: block;
-    content: '';
-    height: 0;
-    width: 0;
-    top: 11px;
-    left: 36px;
-    border: 5px solid transparent;
-    border-left-color: rgba(30, 96, 12, 0.07);
-  }
-}
-</style>
+<template>
+<div class="overLap" v-if="checked" :style="{'margin':this.controlData ? '20px 0 0 0' :tentative ? '0' : '0 147px 0 468px'}">
+    <div class="ring-first" v-for="(list, index1) in this.overlapDatas" :key="index1">
+        <div v-for="(item,index2) in list.stageLists" :key="index2" >
+          <!-- {{list.peddirection}} -->
+            <div class="first-2">
+              <el-tooltip v-if="item.greenWidth" placement="top-start" effect="light">
+                <div slot="content">
+                    O{{list.id}}-
+                    <span v-for="(ids,index3) in list.includedphases" :key="index3">
+                        {{$t('openatccomponents.phase.phase')}}{{ids}}<span v-if="index3+1!==list.includedphases.length">,</span>
+                    </span>
+                </div>
+                <div style="cursor:pointer;">
+                    <div class="ring-phase">
+                        <!-- <patternwalksvg :showWalk="list.peddirection" :Width="'32'" :Height="'34'"></patternwalksvg> -->
+                        <xdrdirselector  Width="60px" Height="60px" Widths="50px" Heights="50px" :showlist="item.direction"></xdrdirselector>
+                    </div>
+                    <div class="box">
+                        <div class="ring-nums">
+                            O{{list.id}}-
+                            <span v-for="(ids,index3) in list.includedphases" :key="index3">
+                                {{$t('openatccomponents.phase.phase')}}{{ids}}<span v-if="index3+1!==list.includedphases.length">,</span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </el-tooltip>
+            </div>
+            <div class="first-1" :style="{'width':item.greenWidth,'height':'34px','background':'#7ccc66'}"></div>
+            <div class="first-1" :style="{'width':item.redWidth,'height':'17px',marginTop: '9px','background':'#f27979'}"></div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+import PhaseDataModel from '../IntersectionMap/crossDirection/utils.js'
+import CrossDiagramMgr from '../../../EdgeMgr/controller/crossDiagramMgr.js'
+import xdrdirselector from '../XRDDirSelector/XRDDirSelector'
+// import patternwalksvg from '../PatternWalkSvg/PatternWalkSvg'
+export default {
+  name: 'over-lap',
+  components: {
+    // patternwalksvg,
+    xdrdirselector
+  },
+  data () {
+    return {
+      overlapDatas: [],
+      max: ''
+    }
+  },
+  props: {
+    overlap: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    stageList: {
+      type: Array
+    },
+    checked: {
+      type: Boolean
+    },
+    tentative: {
+      type: Boolean,
+      default: false
+    },
+    cycleChange: {
+      type: Boolean,
+      default: false
+    },
+    cycle: {
+      type: Number
+    },
+    controlData: {
+      type: Object
+    }
+  },
+  watch: {
+    controlData: {
+      handler: function (val, oldVal) {
+        this.doAdd(this.stageList, this.overlap)
+      },
+      // 深度观察监听
+      deep: true
+    },
+    cycleChange: {
+      handler: function (val, oldVal) {
+        this.doAdd(this.stageList, this.overlap)
+      },
+      // 深度观察监听
+      deep: true
+    },
+    stageList: {
+      handler: function (val, oldVal) {
+        this.doAdd(this.stageList, this.overlap)
+      },
+      // 深度观察监听
+      deep: true
+    }
+  },
+  created () {
+    this.PhaseDataModel = new PhaseDataModel()
+    this.CrossDiagramMgr = new CrossDiagramMgr()
+    this.doAdd(this.stageList, this.overlap)
+  },
+  methods: {
+    getRoad (i) {
+      let direction = []
+      if (i.direction && i.direction.length > 0) {
+        i.direction.map(item => {
+          direction.push({
+            id: item,
+            peddirection: this.getPedPhasePos(i.peddirection),
+            color: '#454545'
+          })
+        })
+      } else {
+        direction.push({
+          id: '',
+          color: '#454545',
+          peddirection: this.getPedPhasePos(i.peddirection)
+        })
+      }
+      return direction
+    },
+    getPedPhasePos (i) {
+      // 行人相位信息
+      let sidewalkPhaseData = []
+      if (i) {
+        i.forEach((dir, index) => {
+          // 行人相位
+          if (this.PhaseDataModel.getSidePos(dir)) {
+            sidewalkPhaseData.push({
+              key: this.CrossDiagramMgr.getUniqueKey('pedphase'),
+              phaseid: i.id, // 相位id，用于对应相位状态
+              id: dir,
+              color: '#454545',
+              name: this.PhaseDataModel.getSidePos(dir).name
+            })
+          }
+        })
+      }
+      return sidewalkPhaseData
+    },
+    doAdd (stageList, overlap) { // 阶段显示颜色
+      let overlapData = overlap.map(item => {
+        let findIndexs = []
+        item.includedphases.forEach(i => {
+          const findItems = stageList.filter(j => (j.phases ? j.phases : j.stages).includes(i))
+          if (findItems.length) findIndexs.push(...findItems.map(m => m.key))
+        })
+        findIndexs = Array.from(new Set(findIndexs))
+        if (this.cycleChange) {
+          const globalParamModel = this.$store.getters.globalParamModel
+          let pattern = globalParamModel.getParamsByType('patternList')
+          const allCycle = pattern.map(item => item.cycle)
+          let cycle = Math.max(...allCycle)
+          this.max = cycle
+        } else {
+          this.max = ''
+        }
+        return {
+          ...item,
+          peddirection: this.getPedPhasePos(item.peddirection),
+          sidewalkPhaseData: this.getPedPhasePos(item.peddirection),
+          stageLists: stageList.map(sta => {
+            const find = findIndexs.includes(sta.key)
+            return {
+              ...sta,
+              direction: this.getRoad(item),
+              // peddirection: this.getPedPhasePos(item.peddirection),
+              greenWidth: find ? (sta.split / (this.max ? this.max : this.cycle) * 100).toFixed(3) + '%' : '0%',
+              redWidth: !find ? (sta.split / (this.max ? this.max : this.cycle) * 100).toFixed(3) + '%' : '0%'
+            }
+          })
+        }
+      })
+      this.overlapDatas = overlapData
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ring-first {
+  margin-top: 1px;
+  width: 100%;
+  height: 34px;
+  .first-1 {
+   float: left;
+// text-align: center;
+  }
+  .first-2{
+   position: absolute;
+   color: #333333;
+  }
+  .ring-nums {
+    // float: left;
+    // margin-top:7px;
+    // margin-left: 5px;
+    padding-top: 10px;
+    padding-left: 43px;
+    font-size: 12px;
+    height: 14px;
+    font-weight: normal;
+    font-stretch: normal;
+    // line-height: 22px;
+    letter-spacing: 0px;
+    color: #333333;//#33333361
+  }
+  .ring-phase {
+    position: relative;
+    float: left;
+    // margin-left: 5px;
+    height: 34px;
+    width: 36px;
+    z-index: 999;
+    background: rgba(30, 96, 12, 0.07);
+    // margin-top:1px;
+  }
+  .ring-phase::after {
+    position: absolute;
+    display: block;
+    content: '';
+    height: 0;
+    width: 0;
+    top: 11px;
+    left: 36px;
+    border: 5px solid transparent;
+    border-left-color: rgba(30, 96, 12, 0.07);
+  }
+}
+</style>