openatc-components 0.0.88 → 0.0.89

package/src/kisscomps/components/CommonKanban/CommonKanban.vue

@@ -1,118 +1,118 @@
-/**
- * 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="common-board-column">
-    <div class="common-board-column-header">
-      {{headerText}}
-    </div>
-    <div class="common-board-table-header">
-      <div class="common-titlecolumn phase">{{this.$t('openatccomponents.overview.phase')}}</div>
-      <div class="common-titlecolumn mode">
-        <slot name="kanbantitle"></slot>
-      </div>
-    </div>
-    <!-- 开启拖拽调整顺序 -->
-    <draggable v-if="Draggable" class="common-board-column-content" v-model="list" @end="end">
-      <div class="common-board-item" v-for="element in list" :key="element.id">
-        <div class="common-contentcolumn phase">
-            <el-tooltip class="item" effect="dark" placement="left">
-              <div slot="content">{{element.name}}</div>
-              <div class="common-phase-description">
-                <xdrdirselector Width="40px"
-                  Height="40px"
-                  :showlist="element.desc"
-                  :ISActiveMask="ISActiveMask"
-                  :MaskColor="MaskColor"
-                  :roadDirection="roadDirection"></xdrdirselector>
-              </div>
-            </el-tooltip>
-        </div>
-        <div class="common-contentcolumn mode">
-          <slot name="kanbancontent" :element="element"></slot>
-        </div>
-      </div>
-    </draggable>
-    <!-- 关闭拖拽调整顺序 -->
-    <div v-if="!Draggable" class="common-board-column-content">
-      <div class="common-board-item" v-for="element in list" :key="element.id">
-        <div class="common-contentcolumn phase">
-            <el-tooltip class="item" effect="dark" placement="left">
-              <div slot="content">{{element.name}}</div>
-              <div class="common-phase-description">
-                <patternwalksvg :sidewalkPhaseData="sidewalkPhaseData" :showWalk="element.peddirection" Width="38" Height="40"></patternwalksvg>
-                <xdrdirselector Width="40px"
-                  Height="40px"
-                  :showlist="element.desc"
-                  :ISActiveMask="ISActiveMask"
-                  :MaskColor="MaskColor"
-                  :roadDirection="roadDirection"></xdrdirselector>
-              </div>
-            </el-tooltip>
-        </div>
-        <div class="common-contentcolumn mode">
-          <slot name="kanbancontent" :element="element"></slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import xdrdirselector from '../XRDDirSelector/XRDDirSelector'
-import draggable from 'vuedraggable'
-// import PatternWalkSvg from '../IntersectionMap/crossDirection/baseImg/PatternWalkSvg'
-import patternwalksvg from '../PatternWalkSvg/PatternWalkSvg'
-
-export default {
-  name: 'common-kanban',
-  components: {
-    draggable,
-    xdrdirselector,
-    patternwalksvg
-  },
-  props: {
-    headerText: {
-      type: String
-    },
-    list: {
-      type: Array,
-      default () {
-        return []
-      }
-    },
-    ISActiveMask: {
-      type: Boolean,
-      default: true
-    },
-    // 当phase的描述为空时，显示的图形颜色。
-    MaskColor: {
-      type: String,
-      default: '#000000'
-    },
-    Draggable: { // 是否开启拖动调整顺序
-      type: Boolean,
-      default: true
-    },
-    sidewalkPhaseData: {
-      type: Array
-    },
-    roadDirection: {
-      type: String
-    }
-  },
-  methods: {
-    end () {
-      // 拖动结束后，向父组件发送重新排序后的数据
-      this.$emit('handleSort', this.list)
-    }
-  }
-}
-</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="common-board-column">
+    <div class="common-board-column-header">
+      {{headerText}}
+    </div>
+    <div class="common-board-table-header">
+      <div class="common-titlecolumn phase">{{this.$t('openatccomponents.overview.phase')}}</div>
+      <div class="common-titlecolumn mode">
+        <slot name="kanbantitle"></slot>
+      </div>
+    </div>
+    <!-- 开启拖拽调整顺序 -->
+    <draggable v-if="Draggable" class="common-board-column-content" v-model="list" @end="end">
+      <div class="common-board-item" v-for="element in list" :key="element.id">
+        <div class="common-contentcolumn phase">
+            <el-tooltip class="item" effect="dark" placement="left">
+              <div slot="content">{{element.name}}</div>
+              <div class="common-phase-description">
+                <xdrdirselector Width="40px"
+                  Height="40px"
+                  :showlist="element.desc"
+                  :ISActiveMask="ISActiveMask"
+                  :MaskColor="MaskColor"
+                  :roadDirection="roadDirection"></xdrdirselector>
+              </div>
+            </el-tooltip>
+        </div>
+        <div class="common-contentcolumn mode">
+          <slot name="kanbancontent" :element="element"></slot>
+        </div>
+      </div>
+    </draggable>
+    <!-- 关闭拖拽调整顺序 -->
+    <div v-if="!Draggable" class="common-board-column-content">
+      <div class="common-board-item" v-for="element in list" :key="element.id">
+        <div class="common-contentcolumn phase">
+            <el-tooltip class="item" effect="dark" placement="left">
+              <div slot="content">{{element.name}}</div>
+              <div class="common-phase-description">
+                <patternwalksvg :sidewalkPhaseData="sidewalkPhaseData" :showWalk="element.peddirection" Width="38" Height="40"></patternwalksvg>
+                <xdrdirselector Width="40px"
+                  Height="40px"
+                  :showlist="element.desc"
+                  :ISActiveMask="ISActiveMask"
+                  :MaskColor="MaskColor"
+                  :roadDirection="roadDirection"></xdrdirselector>
+              </div>
+            </el-tooltip>
+        </div>
+        <div class="common-contentcolumn mode">
+          <slot name="kanbancontent" :element="element"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import xdrdirselector from '../XRDDirSelector/XRDDirSelector'
+import draggable from 'vuedraggable'
+// import PatternWalkSvg from '../IntersectionMap/crossDirection/baseImg/PatternWalkSvg'
+import patternwalksvg from '../PatternWalkSvg/PatternWalkSvg'
+
+export default {
+  name: 'common-kanban',
+  components: {
+    draggable,
+    xdrdirselector,
+    patternwalksvg
+  },
+  props: {
+    headerText: {
+      type: String
+    },
+    list: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    ISActiveMask: {
+      type: Boolean,
+      default: true
+    },
+    // 当phase的描述为空时，显示的图形颜色。
+    MaskColor: {
+      type: String,
+      default: '#000000'
+    },
+    Draggable: { // 是否开启拖动调整顺序
+      type: Boolean,
+      default: true
+    },
+    sidewalkPhaseData: {
+      type: Array
+    },
+    roadDirection: {
+      type: String
+    }
+  },
+  methods: {
+    end () {
+      // 拖动结束后，向父组件发送重新排序后的数据
+      this.$emit('handleSort', this.list)
+    }
+  }
+}
+</script>

package/src/kisscomps/components/CommonKanban/index.js

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

package/src/kisscomps/components/DrawChannelization/drawsvg/channelizationElements.vue

@@ -0,0 +1,249 @@
+/**
+ * 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="channelization-elements-components"
+    :class="{'show-channelization-elements-components': UsageMode === 'show'}"
+    :style="{'height': allitem.h + 'px', 'width': allitem.w + 'px'}">
+    <drr
+      id="sketchpadArea"
+      :resizable="false"
+      :x="allitem.x"
+      :y="allitem.y"
+      :w="allitem.w"
+      :h="allitem.h"
+      :angle="allitem.angle"
+      :selectable="false"
+      :aspectRatio="true"
+    >
+    <!-- 自定义底图 -->
+    <CrossMap
+      v-if="CrossMapVisible"
+      :UsageMode="UsageMode"
+      :CrossMapData="CrossMapData"
+      :isSeletable="isSeletable"
+      :pointchange="pointchange"
+      @changeCrossMap="changeCrossMap"
+    />
+    <!-- 机动车图标 -->
+    <div v-if="resetflag">
+      <MotorwayIconSvg
+      v-for="motorwaysitem in Motorways"
+      :key="'motor-' + motorwaysitem.index"
+      :UsageMode="UsageMode"
+      :chooseIndex="curChooseIconIndex"
+      :Data="motorwaysitem"
+      :isSeletable="isSeletable"
+      @changeMotorwayItem="changeMotorwayItem"
+      @handleSelectIcon="handleSelectIcon"
+    />
+    </div>
+
+    <!-- 非机动车图标 -->
+    <!-- <BicyclelanesIconSvg
+            :UsageMode="UsageMode"
+            v-for="bicycleitem in Bicyclelanes"
+            :key="bicycleitem.index"
+            :chooseIndex="curChooseIconIndex"
+            :Data="bicycleitem"
+            :isSeletable="isSeletable"
+            @changeBicyclelaneItem="changeBicyclelaneItem"
+            @handleSelectIcon="handleSelectIcon"
+    />-->
+    <!-- 文字图标 -->
+    <!-- <EditableText
+      :UsageMode="UsageMode"
+      v-for="textitem in Texts"
+      :key="textitem.index"
+      :TextData="textitem"
+      :isSeletable="isSeletable"
+      @changeText="changeText"
+    /> -->
+    <!-- 倒计时图标 -->
+    <CountdownIcon
+      :UsageMode="UsageMode"
+      v-for="timeitem in Countdown"
+      :key="timeitem.index"
+      :chooseIndex="curChooseIconIndex"
+      :CountdownData="timeitem"
+      :isSeletable="isSeletable"
+      :CountdownList="CountdownList"
+      :isHasPhase="isHasPhase"
+      @changeTimeItem="changeTimeItem"
+      @handleSelectIcon="handleSelectIcon"
+    />
+    <!-- 人行横道图标 -->
+    <div v-if="resetflag">
+      <PedroadIconSvg
+        :UsageMode="UsageMode"
+        v-for="peditem in Pedwalk"
+        :key="'ped-' + peditem.index"
+        :chooseIndex="curChooseIconIndex"
+        :PedData="peditem"
+        :isSeletable="isSeletable"
+        @changePedItem="changePedItem"
+        @handleSelectIcon="handleSelectIcon"
+      />
+    </div>
+    <DetectorIconSvg
+      :UsageMode="UsageMode"
+      v-for="detectoritem in Detector"
+      :key="'detector-' + detectoritem.index"
+      :chooseIndex="curChooseIconIndex"
+      :DetectorData="detectoritem"
+      :isSeletable="isSeletable"
+      :CurChooseIcon="CurChooseIcon"
+      @changeDetectorItem="changeDetectorItem"
+      @handleSelectIcon="handleSelectIcon"
+      />
+    <DetectorChart
+      :UsageMode="UsageMode"
+      v-for="detchartitem in DetectorChart"
+      :key="'detectorchart-' + detchartitem.index"
+      :chooseIndex="curChooseIconIndex"
+      :DetectorChartData="detchartitem"
+      :isSeletable="isSeletable"
+      @changeDetectorChartItem="changeDetectorChartItem"
+      @handleSelectIcon="handleSelectIcon" />
+  </drr>
+  </div>
+</template>
+
+<script>
+import CrossMap from './drawElement/crossMap'
+import EditableText from './drawElement/editText'
+import MotorwayIconSvg from './iconSvg/motorwayIconSvg'
+import CountdownIcon from './iconSvg/countdownSvg'
+import PedroadIconSvg from './iconSvg/pedroadIconSvg'
+import DetectorIconSvg from './iconSvg/detectorIconSvg'
+import DetectorChart from './iconSvg/detectorChart.vue'
+
+export default {
+  name: 'channelization-elements',
+  components: {
+    CrossMap,
+    EditableText,
+    MotorwayIconSvg,
+    // BicyclelanesIconSvg,
+    CountdownIcon,
+    PedroadIconSvg,
+    DetectorIconSvg,
+    DetectorChart
+  },
+  props: {
+    isSeletable: { // 元素是否可以编辑
+      type: Boolean,
+      default: true
+    },
+    allitem: {
+      type: Object,
+      required: true
+    },
+    CrossMapVisible: {
+      type: Boolean,
+      default: true
+    },
+    CrossMapData: {
+      type: Object,
+      required: true
+    },
+    pointchange: {
+      type: Boolean,
+      default: false
+    },
+    Motorways: {
+      type: Array
+    },
+    Countdown: {
+      type: Array
+    },
+    CountdownList: {
+      type: Array
+    },
+    Pedwalk: {
+      type: Array
+    },
+    curChooseIconIndex: {
+      type: Number,
+      default: -1
+    },
+    UsageMode: {
+      type: String,
+      default: 'draw'
+    },
+    isHasPhase: {
+      type: Boolean,
+      default: true
+    },
+    Detector: {
+      type: Array
+    },
+    DetectorChart: {
+      type: Array
+    },
+    CurChooseIcon: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+      resetflag: true // 离线或者特殊控制后，控制行人相位、车道相位reset标识，主要是清空绿闪样式
+    }
+  },
+  methods: {
+    changeCrossMap (mapdata, fields) {
+      this.$emit('changeCrossMap', mapdata, fields)
+    },
+    changeMotorwayItem (MotorwayItem, fields) {
+      this.$emit('changeMotorwayItem', MotorwayItem, fields)
+    },
+    handleSelectIcon (iconobj) {
+      this.$emit('handleSelectIcon', iconobj)
+    },
+    changeText (textobj, fields) {
+      this.$emit('changeText', textobj, fields)
+    },
+    changeTimeItem (timeItem, fields) {
+      this.$emit('changeTimeItem', timeItem, fields)
+    },
+    changePedItem (PedItem, fields) {
+      this.$emit('changePedItem', PedItem, fields)
+    },
+    changeDetectorItem (detectorItem, fields) {
+      this.$emit('changeDetectorItem', detectorItem, fields)
+    },
+    changeDetectorChartItem (detectorChartItem, fields) {
+      this.$emit('changeDetectorChartItem', detectorChartItem, fields)
+    },
+    resetPhaseStatus () {
+      // 车道相位、行人相位恢复默认状态
+      this.resetflag = false
+      this.$nextTick(() => {
+        this.resetflag = true
+      })
+    }
+  },
+  created () {},
+  mounted () {}
+}
+</script>
+<style lang="scss" scoped>
+.channelization-elements-components {
+  position: relative;
+}
+.show-channelization-elements-components {
+  left: 50%;
+  top: 30px;
+  transform: translateX(-50%);
+  overflow: hidden;
+}
+</style>

package/src/kisscomps/components/DrawChannelization/drawsvg/detectorAssociatedComponent.vue

@@ -0,0 +1,152 @@
+/**
+ * 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="detector-associated-component">
+    <div class="detector-box" v-for="(item, index) in preDetList" :key="index">
+      <div class="single-detector" @click="selectAssociatedDetector(index, item)" :class="preselectDetector == item.id ? 'single-detector-select' : ''">
+        {{item.id}}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex'
+export default {
+  name: 'detector-associated-component',
+  data () {
+    return {
+      preselectDetector: -1,
+      id: 1,
+      isCanAdd: true,
+      preDetList: []
+    }
+  },
+  props: {
+    editData: {
+      type: Object
+    }
+  },
+  computed: {
+    ...mapState({
+      detectorList: state => state.globalParam.tscParam.detectorList,
+      peddetectorList: state => state.globalParam.tscParam.pedestrainDetectorList,
+      roadDirection: state => state.globalParam.roadDirection
+    })
+  },
+  watch: {
+    detectorList: {
+      handler: function (list) {
+      },
+      deep: true
+    },
+    editData: {
+      handler: function (editobj) {
+        this.loadCurDetectorList(editobj)
+        this.initChoosedDetector(editobj)
+      },
+      deep: true
+    }
+  },
+  methods: {
+    initChoosedDetector (editobj) {
+      if (editobj.detectorid !== undefined) {
+        this.preselectDetector = editobj.detectorid
+      } else {
+        this.preselectDetector = -1
+      }
+    },
+    selectAssociatedDetector (index, item) {
+      // 关联相位
+      this.preselectDetector = item.id
+      this.$emit('selectAssociatedDetector', this.preselectDetector)
+    },
+    handleDisassociateDetector (deleteDetectorid) {
+      // 删除相位后，解除相位关联
+      this.$emit('handleDisassociateDetector', deleteDetectorid)
+    },
+    loadCurDetectorList (editobj) {
+      this.detectortype = editobj.detectortype
+      if (editobj.detectortype === 1) {
+        // 车辆检测器
+        this.preDetList = JSON.parse(JSON.stringify(this.detectorList))
+      }
+      if (editobj.detectortype === 2) {
+        // 行人检测器
+        this.preDetList = JSON.parse(JSON.stringify(this.peddetectorList))
+      }
+    }
+  },
+  created () {
+  },
+  mounted () {
+    this.loadCurDetectorList(this.editData)
+    this.initChoosedDetector(this.editData)
+  },
+  destroyed () {
+  }
+}
+</script>
+<style lang="scss">
+.detector-associated-component {
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  .detector-box {
+    float: left;
+    margin-top: 10px;
+      .single-detector {
+        margin-right: 10px;
+        text-align: center;
+        cursor:pointer;
+        width: 35px;
+        height: 35px;
+        background-color: #edf6ff;
+        border-radius: 6px;
+        line-height: 35px;
+        position: relative;
+      }
+      .single-detector-select {
+        background-color: #a2cfff;
+      }
+      .single-detector-name {
+        width: 70PX;
+        margin-top: 3PX;
+        font-size: 12PX;
+        font-weight: normal;
+        font-stretch: normal;
+        line-height: 22PX;
+        letter-spacing: 0PX;
+        color: #606266;
+        text-align: center;
+        height: 40PX;
+      }
+  }
+
+  .add-detector {
+    padding-top: 23px;
+  }
+  .icon-fangda {
+    font-size: 24px;
+    color: #409EFF;
+  }
+  .add-disabled {
+    color: #bcbec2;
+    background-color: #f4f4f5;
+  }
+  .special-lane {
+    display:flex;
+    flex-direction:row;
+    justify-content:center;
+    align-items:center;
+  }
+}
+</style>