openatc-components 0.0.55 → 0.0.58

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

@@ -1,205 +1,205 @@
-<template>
-<div class="overLap" v-if="checked" :style="{'width':tentative?'100%':'852px','margin':this.controlData ? '20px 0 0 0' :tentative ? '0' : '0 0 0 377px'}">
-    <div class="ring-first" v-for="(list, index1) in this.overlapDatas" :key="index1">
-        <div v-for="(item,index2) in list.stageLists" :key="index2" >
-            <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">
-                        P{{ids}}<span v-if="index3+1!==list.includedphases.length">,</span>
-                    </span>
-                </div>
-                <div style="cursor:pointer;">
-                    <div class="ring-phase">
-                        <patternwalksvg :sidewalkPhaseData="list.sidewalkPhaseData" :showWalk="list.peddirection" :Width="'32'" :Height="'34'"></patternwalksvg>
-                        <xdrdirselector  Width="36px" Height="34px" :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">
-                                P{{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':'34px','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: []
-    }
-  },
-  props: {
-    overlap: {
-      type: Array,
-      default () {
-        return []
-      }
-    },
-    stageList: {
-      type: Array
-    },
-    checked: {
-      type: Boolean
-    },
-    tentative: {
-      type: Boolean,
-      default: false
-    },
-    cycle: {
-      type: Number
-    },
-    controlData: {
-      type: Object
-    }
-  },
-  watch: {
-    controlData: {
-      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) {
-        i.map(item => {
-          direction.push({
-            id: item,
-            color: '#454545'
-          })
-        })
-      }
-      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,
-              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.stages.includes(i))
-          if (findItems.length) findIndexs.push(...findItems.map(m => m.key))
-        })
-        findIndexs = Array.from(new Set(findIndexs))
-        return {
-          ...item,
-          sidewalkPhaseData: this.getPedPhasePos(item.peddirection),
-          stageLists: stageList.map(sta => {
-            const find = findIndexs.includes(sta.key)
-            return {
-              ...sta,
-              direction: this.getRoad(item.direction),
-              peddirection: this.getPedPhasePos(item.peddirection),
-              greenWidth: find ? (sta.split / this.cycle * 100).toFixed(3) + '%' : '0%',
-              redWidth: !find ? (sta.split / 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;
-    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="{'width':tentative?'100%':'852px','margin':this.controlData ? '20px 0 0 0' :tentative ? '0' : '0 0 0 377px'}">
+    <div class="ring-first" v-for="(list, index1) in this.overlapDatas" :key="index1">
+        <div v-for="(item,index2) in list.stageLists" :key="index2" >
+            <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">
+                        P{{ids}}<span v-if="index3+1!==list.includedphases.length">,</span>
+                    </span>
+                </div>
+                <div style="cursor:pointer;">
+                    <div class="ring-phase">
+                        <patternwalksvg :sidewalkPhaseData="list.sidewalkPhaseData" :showWalk="list.peddirection" :Width="'32'" :Height="'34'"></patternwalksvg>
+                        <xdrdirselector  Width="36px" Height="34px" :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">
+                                P{{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':'34px','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: []
+    }
+  },
+  props: {
+    overlap: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    stageList: {
+      type: Array
+    },
+    checked: {
+      type: Boolean
+    },
+    tentative: {
+      type: Boolean,
+      default: false
+    },
+    cycle: {
+      type: Number
+    },
+    controlData: {
+      type: Object
+    }
+  },
+  watch: {
+    controlData: {
+      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) {
+        i.map(item => {
+          direction.push({
+            id: item,
+            color: '#454545'
+          })
+        })
+      }
+      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,
+              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.stages.includes(i))
+          if (findItems.length) findIndexs.push(...findItems.map(m => m.key))
+        })
+        findIndexs = Array.from(new Set(findIndexs))
+        return {
+          ...item,
+          sidewalkPhaseData: this.getPedPhasePos(item.peddirection),
+          stageLists: stageList.map(sta => {
+            const find = findIndexs.includes(sta.key)
+            return {
+              ...sta,
+              direction: this.getRoad(item.direction),
+              peddirection: this.getPedPhasePos(item.peddirection),
+              greenWidth: find ? (sta.split / this.cycle * 100).toFixed(3) + '%' : '0%',
+              redWidth: !find ? (sta.split / 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;
+    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>

package/package/kisscomps/components/OverLap/index.js

@@ -1,2 +1,2 @@
-import OverLap from './OverLap.vue'
-export default OverLap
+import OverLap from './OverLap.vue'
+export default OverLap