openatc-components 0.4.7 → 0.4.9

package/package/kisscomps/components/PhasePedSelect/index.vue

@@ -1,206 +1,206 @@
-/**
- * Copyright (c) 2020 kedacom
- * OpenATC is licensed under Mulan PSL v2.
- * You can use this software according to the terms and conditions of the Mulan PSL v2.
- * You may obtain a copy of Mulan PSL v2 at:
- * http://license.coscl.org.cn/MulanPSL2
- * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
- * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
- * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
- * See the Mulan PSL v2 for more details.
- **/
-<template>
-  <div class="PhasePedSelect">
-    <div class="item">
-      <div class="name">{{$t('openatccomponents.channel.phaseVehicle')}}</div>
-      <div class="content">
-        <template v-for="(ring, index) in phaseDirection">
-          <div :class="ring.selected ? 'card-selected' : 'card'" :key="ring" @click="onCardClick(ring, index)" :style="getStyle(ring)">
-            <xdrdirselector
-                  Width="75PX"
-                  Height="75PX"
-                  Widths="65PX"
-                  Heights="65PX"
-                  :Data="Data"
-                  :showlist="ring.desc"
-                  :roadDirection="roadDirection"></xdrdirselector>
-            <div class="num">{{ring.id}}</div>
-          </div>
-        </template>
-      </div>
-    </div>
-    <div class="item">
-      <div class="name">{{$t('openatccomponents.channel.phasePedestrian')}}</div>
-      <div class="content">
-        <template v-for="(ring, index) in pedDirection">
-          <div :class="ring.selected ? 'card-selected' : 'card'" :key="ring" @click="onCardClick(ring, index)">
-            <xdrdirselector
-                  Width="75PX"
-                  Height="75PX"
-                  Widths="65PX"
-                  Heights="65PX"
-                  :Datas="Datas"
-                  :showlist="ring.desc"
-                  :roadDirection="roadDirection"></xdrdirselector>
-            <div class="num">{{ring.id}}</div>
-          </div>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import xdrdirselector from '../XRDDirSelector/XRDDirSelector.vue'
-import { getTheme } from '../../../utils/auth'
-
-export default {
-  name: 'PhasePedSelect',
-  components: {
-    xdrdirselector
-    // patternwalksvg
-  },
-  props: {
-    closePhaseRings: {
-      type: Array,
-      default: () => []
-    },
-    sidewalkPhaseData: {
-      type: Array,
-      default: () => []
-    },
-    headerText: {
-      type: String
-    },
-    list: {
-      type: Array,
-      default () {
-        return []
-      }
-    },
-    roadDirection: {
-      type: String
-    }
-  },
-  data () {
-    return {
-      Data: {
-        left: '10PX',
-        top: '10PX'
-      },
-      Datas: {
-        left: '12PX',
-        top: '8PX'
-      },
-      themeColor: getTheme() === 'light' ? '#606266' : '#fff',
-      backgroundBase: getTheme() === 'light' ? '#606266' : '#fff',
-      backgroundSelected: getTheme() === 'light' ? '#606266' : '#fff',
-      phaseList: [],
-      pedPhaseList: [],
-      phaseDirection: [],
-      pedDirection: [],
-      style: {},
-      params: {
-        'phases':
-          [
-            {
-              'id': 1,
-              'type': 0
-            },
-            {
-              'id': 2,
-              'type': 2
-            },
-            {
-              'id': 3,
-              'type': 3
-            }
-          ]
-      }
-    }
-  },
-  watch: {
-    closePhaseRings (val) {
-      console.log('closePhaseRings', val)
-      console.log('sidewalkPhaseData', this.sidewalkPhaseData)
-      let tempPhaseList = []
-      for (let ring of this.closePhaseRings) {
-        let phases = ring.phases
-        tempPhaseList = [...tempPhaseList, ...phases]
-      }
-      tempPhaseList = tempPhaseList.sort((a, b) => a.id - b.id)
-      let tempPhaseListCopy = JSON.parse(JSON.stringify(tempPhaseList))
-      tempPhaseList = tempPhaseList.map(item => {
-        item.selected = false
-        item.desc.map(des => {
-          des.color = this.themeColor
-          des.peddirection = []
-          return des
-        })
-        return item
-      })
-      this.phaseDirection = JSON.parse(JSON.stringify(tempPhaseList))
-      let tempPedList = tempPhaseListCopy.filter(item => item.peddirection && item.peddirection.length > 0)
-      console.log('tempPhaseList', tempPedList)
-      tempPedList = tempPedList.map(item => {
-        item.selected = false
-        item.desc.map(des => {
-          des.id = 0
-          des.color = this.themeColor
-          des.peddirection = des.peddirection.map(dir => {
-            dir.color = this.themeColor
-            return dir
-          })
-          return des
-        })
-        return item
-      })
-      this.pedDirection = JSON.parse(JSON.stringify(tempPedList))
-    }
-  },
-  methods: {
-    getStyle (ring) {
-      return this.style
-    },
-    onCardClick (item, index) {
-      item.selected = !item.selected
-      let res = this.getParams()
-      this.$emit('onPhasePedSelectChange', res)
-    },
-    getParams () {
-      console.log('phaseDirection', this.phaseDirection)
-      console.log('pedDirection', this.pedDirection)
-      console.log('closePhaseRings', this.closePhaseRings)
-      this.params.phases = []
-      for (let i = 0; i < this.phaseDirection.length; i++) {
-        let type = 0
-        let phase = this.phaseDirection[i]
-        let id = phase.id
-        let isPhaseSelected = phase.selected
-        if (isPhaseSelected) {
-          type = 2
-        }
-        let ped = this.pedDirection.find(item => item.id === id)
-        if (ped) {
-          let isPedSelected = ped.selected
-          if (isPhaseSelected && isPedSelected) {
-            type = 1
-          } else if (isPhaseSelected && !isPedSelected) {
-            type = 2
-          } else if (!isPhaseSelected && isPedSelected) {
-            type = 3
-          } else if (!isPhaseSelected && !isPedSelected) {
-            type = 0
-          }
-        }
-        let phaseItem = {
-          id: id,
-          type: type
-        }
-        this.params.phases.push(phaseItem)
-      }
-      let res = this.params.phases
-      return res
-    }
-  }
-}
-</script>
+/**
+ * Copyright (c) 2020 kedacom
+ * OpenATC is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ * http://license.coscl.org.cn/MulanPSL2
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ **/
+<template>
+  <div class="PhasePedSelect">
+    <div class="item">
+      <div class="name">{{$t('openatccomponents.channel.phaseVehicle')}}</div>
+      <div class="content">
+        <template v-for="(ring, index) in phaseDirection">
+          <div :class="ring.selected ? 'card-selected' : 'card'" :key="ring" @click="onCardClick(ring, index)" :style="getStyle(ring)">
+            <xdrdirselector
+                  Width="75PX"
+                  Height="75PX"
+                  Widths="65PX"
+                  Heights="65PX"
+                  :Data="Data"
+                  :showlist="ring.desc"
+                  :roadDirection="roadDirection"></xdrdirselector>
+            <div class="num">{{ring.id}}</div>
+          </div>
+        </template>
+      </div>
+    </div>
+    <div class="item">
+      <div class="name">{{$t('openatccomponents.channel.phasePedestrian')}}</div>
+      <div class="content">
+        <template v-for="(ring, index) in pedDirection">
+          <div :class="ring.selected ? 'card-selected' : 'card'" :key="ring" @click="onCardClick(ring, index)">
+            <xdrdirselector
+                  Width="75PX"
+                  Height="75PX"
+                  Widths="65PX"
+                  Heights="65PX"
+                  :Datas="Datas"
+                  :showlist="ring.desc"
+                  :roadDirection="roadDirection"></xdrdirselector>
+            <div class="num">{{ring.id}}</div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import xdrdirselector from '../XRDDirSelector/XRDDirSelector.vue'
+import { getTheme } from '../../../utils/auth'
+
+export default {
+  name: 'PhasePedSelect',
+  components: {
+    xdrdirselector
+    // patternwalksvg
+  },
+  props: {
+    closePhaseRings: {
+      type: Array,
+      default: () => []
+    },
+    sidewalkPhaseData: {
+      type: Array,
+      default: () => []
+    },
+    headerText: {
+      type: String
+    },
+    list: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    roadDirection: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      Data: {
+        left: '10PX',
+        top: '10PX'
+      },
+      Datas: {
+        left: '12PX',
+        top: '8PX'
+      },
+      themeColor: getTheme() === 'light' ? '#606266' : '#fff',
+      backgroundBase: getTheme() === 'light' ? '#606266' : '#fff',
+      backgroundSelected: getTheme() === 'light' ? '#606266' : '#fff',
+      phaseList: [],
+      pedPhaseList: [],
+      phaseDirection: [],
+      pedDirection: [],
+      style: {},
+      params: {
+        'phases':
+          [
+            {
+              'id': 1,
+              'type': 0
+            },
+            {
+              'id': 2,
+              'type': 2
+            },
+            {
+              'id': 3,
+              'type': 3
+            }
+          ]
+      }
+    }
+  },
+  watch: {
+    closePhaseRings (val) {
+      console.log('closePhaseRings', val)
+      console.log('sidewalkPhaseData', this.sidewalkPhaseData)
+      let tempPhaseList = []
+      for (let ring of this.closePhaseRings) {
+        let phases = ring.phases
+        tempPhaseList = [...tempPhaseList, ...phases]
+      }
+      tempPhaseList = tempPhaseList.sort((a, b) => a.id - b.id)
+      let tempPhaseListCopy = JSON.parse(JSON.stringify(tempPhaseList))
+      tempPhaseList = tempPhaseList.map(item => {
+        item.selected = false
+        item.desc.map(des => {
+          des.color = this.themeColor
+          des.peddirection = []
+          return des
+        })
+        return item
+      })
+      this.phaseDirection = JSON.parse(JSON.stringify(tempPhaseList))
+      let tempPedList = tempPhaseListCopy.filter(item => item.peddirection && item.peddirection.length > 0)
+      console.log('tempPhaseList', tempPedList)
+      tempPedList = tempPedList.map(item => {
+        item.selected = false
+        item.desc.map(des => {
+          des.id = 0
+          des.color = this.themeColor
+          des.peddirection = des.peddirection.map(dir => {
+            dir.color = this.themeColor
+            return dir
+          })
+          return des
+        })
+        return item
+      })
+      this.pedDirection = JSON.parse(JSON.stringify(tempPedList))
+    }
+  },
+  methods: {
+    getStyle (ring) {
+      return this.style
+    },
+    onCardClick (item, index) {
+      item.selected = !item.selected
+      let res = this.getParams()
+      this.$emit('onPhasePedSelectChange', res)
+    },
+    getParams () {
+      console.log('phaseDirection', this.phaseDirection)
+      console.log('pedDirection', this.pedDirection)
+      console.log('closePhaseRings', this.closePhaseRings)
+      this.params.phases = []
+      for (let i = 0; i < this.phaseDirection.length; i++) {
+        let type = 0
+        let phase = this.phaseDirection[i]
+        let id = phase.id
+        let isPhaseSelected = phase.selected
+        if (isPhaseSelected) {
+          type = 2
+        }
+        let ped = this.pedDirection.find(item => item.id === id)
+        if (ped) {
+          let isPedSelected = ped.selected
+          if (isPhaseSelected && isPedSelected) {
+            type = 1
+          } else if (isPhaseSelected && !isPedSelected) {
+            type = 2
+          } else if (!isPhaseSelected && isPedSelected) {
+            type = 3
+          } else if (!isPhaseSelected && !isPedSelected) {
+            type = 0
+          }
+        }
+        let phaseItem = {
+          id: id,
+          type: type
+        }
+        this.params.phases.push(phaseItem)
+      }
+      let res = this.params.phases
+      return res
+    }
+  }
+}
+</script>