openatc-components 0.0.94 → 0.0.95

package/package/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/package/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>

package/package/kisscomps/components/DrawChannelization/drawsvg/drawElement/TextBox.vue

@@ -0,0 +1,91 @@
+/**
+ * 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="text" :class="{  'hasborder': bordervisible, 'noborder': !bordervisible}" @active="onActive()" v-if="!textActive">
+    {{text}}
+  </div>
+  <textarea ref="area" v-model="text" class="textarea" @blur="onBlur" v-else>
+  </textarea>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      text: '',
+      textActive: false,
+      bordervisible: true
+    }
+  },
+  props: {
+    content: {
+      type: String
+    }
+  },
+  watch: {
+    content: {
+      handler: function (val) {
+        this.text = val
+        if (val === '') {
+          this.bordervisible = true
+        } else {
+          this.bordervisible = false
+        }
+      }
+    }
+  },
+  mounted () {
+    this.text = this.content
+    if (this.content === '') {
+      this.bordervisible = true
+    } else {
+      this.bordervisible = false
+    }
+    this.$on('active', this.onActive)
+  },
+  methods: {
+    onActive () {
+      this.textActive = true
+      this.$nextTick(() => {
+        this.$refs.area.focus()
+      })
+    },
+    onBlur () {
+      this.textActive = false
+      this.$parent.$emit('content-inactive')
+      this.$emit('changeText', this.text)
+    }
+  }
+}
+</script>
+
+<style>
+  .text {
+    width: 100%;
+    height: 100%;
+    font-size: 20px; /*默认字体大小*/
+  }
+
+  .hasborder {
+    border: 1px solid  #ccc;
+  }
+
+  .noborder  {
+    border: none;
+  }
+
+  .textarea {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/package/kisscomps/components/DrawChannelization/drawsvg/drawElement/crossMap.vue

@@ -0,0 +1,176 @@
+/**
+ * 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="cross-map-part" ref="crossmap">
+  <div v-if="mapreset && CrossMapData.type === 'vectorgraph'">
+    <!-- 底图可缩放 -->
+    <!-- <drr
+      id="crossmapdrr"
+      :selectable="isSeletable"
+      :x="crossmapitem.x"
+      :y="crossmapitem.y"
+      :w="crossmapitem.w"
+      :h="crossmapitem.h"
+      :angle="crossmapitem.angle"
+      :aspectRatio="true"
+      @dragstop="mapDragStop(crossmapitem, ...arguments)"
+      @resizestop="mapResizeStop(crossmapitem, ...arguments)"
+      @rotatestop="mapRotateStop(crossmapitem, ...arguments)"
+    >
+      <div class="cross-map" v-html="CrossMapData.svgstr"></div>
+    </drr> -->
+
+    <!-- 底图取消操作 -->
+    <div class="cross-map" :style="{'width': crossmapitem.w + 'px', 'height': crossmapitem.h + 'px'}" v-html="CrossMapData.svgstr"></div>
+  </div>
+
+  <div v-if="mapreset && CrossMapData.type === 'picture'" class="cross-map">
+    <img height="100%" :src="CrossMapData.imgfilesrc">
+  </div>
+ </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      crossmapitem: {},
+      mapreset: false
+    }
+  },
+  props: {
+    CrossMapData: {
+      type: Object
+    },
+    isSeletable: {
+      type: Boolean
+    },
+    pointchange: {
+      type: Boolean
+    }
+  },
+  watch: {
+    CrossMapData: {
+      handler: function (val) {
+        this.crossmapitem = {
+          x: 0,
+          y: 0,
+          w: 0,
+          h: 0,
+          angle: 0
+        }
+        if (val.type === 'vectorgraph') {
+          if (val.svgstr === '') {
+            this.mapreset = false
+            return
+          }
+          this.mapreset = true
+          this.crossmapitem = {
+            x: val.x,
+            y: val.y,
+            w: val.w,
+            h: val.h,
+            angle: val.angle
+          }
+        }
+        if (val.type === 'picture') {
+          if (val.imgfilesrc === undefined || val.imgfilesrc === '') {
+            this.mapreset = false
+            return
+          }
+          this.mapreset = true
+        }
+      },
+      deep: true
+    },
+    crossmapitem: {
+      handler: function (newval, oldval) {
+        if ((JSON.stringify(oldval) !== '{}') && !this.isEqual(newval, oldval)) {
+          // 更改原数据的位置大小数据
+          let data = {
+            ...this.CrossMapData,
+            ...newval
+          }
+          let fields = Object.keys(newval)
+          this.$emit('changeCrossMap', data, fields)
+        }
+      }
+    },
+    pointchange: {
+      handler: function (val) {
+        // 解决光标样式被选区样式覆盖问题
+        let dom = document.getElementById('crossmapdrr')
+        if (dom === null || dom === undefined) return
+        if (val) {
+          dom.style.cursor = 'url(resource/pic/icons/magnifier3.cur) 12 12,crosshair'
+          return
+        }
+        dom.style.cursor = 'url(resource/pic/icons/magnifier3.cur) 12 12,default'
+      }
+    }
+  },
+  created () {
+    this.crossmapitem = {
+      x: this.CrossMapData.x,
+      y: this.CrossMapData.y,
+      w: this.CrossMapData.w,
+      h: this.CrossMapData.h,
+      angle: this.CrossMapData.angle
+    }
+  },
+  methods: {
+    mapDragStop (origin, final) {
+      // 底图拖动停止
+      this.crossmapitem = JSON.parse(JSON.stringify(final))
+    },
+    mapResizeStop (origin, final) {
+      // 底图改变大小停止
+      this.resetMapSvg()
+      this.crossmapitem = JSON.parse(JSON.stringify(final))
+      // this.$refs.crossmap.style.height = final.w + 'px'
+      // this.$refs.crossmap.style.width = final.h + 'px'
+    },
+    mapRotateStop (origin, final) {
+      // 底图旋转停止
+      this.crossmapitem = JSON.parse(JSON.stringify(final))
+    },
+    resetMapSvg () {
+      // 重绘底图svg
+      this.mapreset = false
+      this.$nextTick(() => {
+        this.mapreset = true
+      })
+    },
+    isEqual (obj1, obj2) {
+      if (!(obj1 instanceof Object) || !(obj2 instanceof Object)) {
+        return obj1 === obj2
+      }
+      if (Object.keys(obj1).length !== Object.keys(obj2).length) {
+        return false
+      }
+      for (var attr in obj1) { // 逐个值进行判断
+        if (obj1[attr] instanceof Object && obj2[attr] instanceof Object) {
+          return this.isEqual(obj1[attr], obj2[attr])
+        } else if (obj1[attr] !== obj2[attr]) {
+          return false
+        }
+      }
+      return true
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>