openatc-components 0.5.2 → 0.5.3

package/package/kisscomps/components/PatternStatus/PatternStatus.vue

@@ -50,7 +50,7 @@
       <div v-if="(this.contrloType === 'ring' || !this.contrloType) && patternType !== 'rcp'">
         <div class="ring-first" v-for="(list, index1) in patternInfo" :key="index1">
           <draggable :move="move" @end="endDrag(index1)" :disabled="isMove" :list="list">
-            <div style="position: relative;" :style="{'height': '35px','float':'left','width':((item.split+(item.sum?item.sum:0)) / (max?max:item.cycle) * 100) + '%'}"  v-for="(item,index2) in list" :key="index2" :class="item.mode === 7 ? 'direction' : isBorder ? 'hovercell' : ''">
+            <div class="cell-click-area" @click="cellClick(item.id)" style="position: relative;" :style="{'height': '35px','float':'left','width':((item.split+(item.sum?item.sum:0)) / (max?max:item.cycle) * 100) + '%'}"  v-for="(item,index2) in list" :key="index2" :class="item.mode === 7 ? 'direction' : isBorder ? 'hovercell' : ''">
               <div class="first-1" :class="item.mode === 8 ? 'mask' : item.mode === 9 ? 'yellowClass' : ''" :style="{'width':Number(item.greenWidth.replace('%', ''))/Number((((item.split+(item.sum?item.sum:0)) / (max?max:item.cycle) * 100) + '%').replace('%', ''))*100+'%','height':'34px','background':'#7ccc66'}">
                 <el-tooltip placement="top-start" effect="light">
                   <div slot="content">{{$t('openatccomponents.phase.phase')}}{{item.id}}:{{item.split}}</div>
@@ -63,7 +63,7 @@
                       <div @click="focusInput(item.id)" class="ring-nums">{{$t('openatccomponents.phase.phase')}}{{item.id}}</div>
                       <div v-if="isMove" class="ring-nums">{{item.split}}</div>
                       <el-input-number
-                        v-if="!isMove"
+                        v-if="!isMove && !controlStates[item.id]"
                         class="ring-nums"
                         :ref="'inputNumbers' + item.id"
                         size="small"
@@ -77,6 +77,21 @@
                     </div>
                   </div>
                 </el-tooltip>
+                 <div
+                v-if="isShowTip"
+                class="box"
+                style="position: absolute; width:40px;left: 35px; top: 1px;z-index:999"
+              >
+              <el-input-number
+                  v-if="controlStates[item.id]"
+                  :ref="'inputNumbers' + item.id"
+                  size="small"
+                  :min="0"
+                  :step="1"
+                  v-model.number="item.split"
+                  @change="handleEdit(item)"
+                ></el-input-number>
+                </div>
                 <div style="width:50px;" v-for="(bus,index3) in busPhaseData" :key="index3">
                   <i class="iconfont icon-lukouzhilu" style="position: absolute;top: 8px;left:70px;font-size:12px;color:#454545;" v-if="bus.controltype === 1 && bus.phaseid===item.id"></i>
                   <i class="iconfont icon-BRT" style="position: absolute;top: 8px;left:70px;font-size:12px;color:#454545;" v-if="bus.controltype === 4 && bus.phaseid===item.id"></i>
@@ -165,6 +180,7 @@ export default {
       barrierHeight: '',
       stageCycle: '',
       barrierList: [],
+      controlStates: {},
       barrierArr: [],
       newCycle: this.cycles,
       patternIds: this.patternId,
@@ -426,6 +442,12 @@ export default {
       // 深度观察监听
       deep: true
     }
+  },
+   mounted () {
+    document.addEventListener('click', this.handleDocumentClick)
+  },
+  beforeDestroy () {
+    document.removeEventListener('click', this.handleDocumentClick)
   },
   created () {
     this.globalParamModel = this.$store.getters.globalParamModel
@@ -451,6 +473,29 @@ export default {
     }
   },
   methods: {
+    cellClick (itemId) {
+      for (const key in this.controlStates) {
+        if (key !== itemId) {
+          this.$set(this.controlStates, key, false)
+        }
+      }
+      this.$set(this.controlStates, itemId, !this.controlStates[itemId])
+    },
+    handleDocumentClick (event) {
+      const path = event.composedPath ? event.composedPath() : []
+      const clickedInsideCell = path.some(el => {
+        return el.classList && (el.classList.contains('cell-click-area') || el.classList.contains('ring-first'))
+      })
+
+      if (clickedInsideCell) {
+        return
+      }
+      for (const key in this.controlStates) {
+        if (this.controlStates[key]) {
+          this.$set(this.controlStates, key, false)
+        }
+      }
+    },
     move (e) {
       // 这里的e表示即将停靠的元素。
       let result = this.barrierArr.filter(item => item.includes(e.relatedContext.element.id))[0]