Explorar o código

添加keyTips组件,在信息点和添加设备时,
右侧底部添加键盘操作提示

yx %!s(int64=4) %!d(string=hai) anos
pai
achega
a405d946ce

+ 5 - 1
src/components/edit/attrInfo.vue

@@ -38,6 +38,8 @@
             <a-button @click='handleAttach(1)' size='small' type='primary'>添加</a-button>
             <a-button @click='handleAttach(-1)' size='small' v-show='infoData.AttachObjectIds.length' type='danger'>删除</a-button>
         </div>
+        <!-- 键盘操作提示 -->
+        <KeyTips/>
     </div>
 </template>
 <script>
@@ -45,6 +47,8 @@ import bus from '@/bus'
 import { log } from 'util'
 import Swatches from 'vue-swatches'
 import { cloneDeep } from 'lodash'
+import KeyTips from './keyTips'
+
 export default {
     name: 'equipmentAttr',
     props: {
@@ -55,7 +59,7 @@ export default {
             },
         },
     },
-    components: { Swatches },
+    components: { Swatches,KeyTips },
     data() {
         return {
             infoData: {},

+ 2 - 2
src/components/edit/attr_select.vue

@@ -309,9 +309,9 @@ export default {
         "background: #fff;overflow: hidden;  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);border:0",
       keyboardOperation: [
         { value: "拖动画布:", keys: "Space", events: "Click" },
-        { value: "加选对象:", keys: "Ctrl", events: "Press" },
+        // { value: "加选对象:", keys: "Ctrl", events: "Press" },
         { value: "确认操作:", keys: "Enter" },
-        { value: "取消对象:", keys: "Enter" }
+        // { value: "取消对象:", keys: "Enter" }
       ],
       numberValue: 3,
       fontSize: 12, //字体大小

+ 5 - 1
src/components/edit/baseInfo.vue

@@ -31,6 +31,9 @@
             <a-textarea v-model='baseInfo.Note' class='base-input' @change='changeBaseInfo' :rows='4' />
             <!-- <a-input style='width: 180px' /> -->
         </div>
+
+        <!-- 快捷操作提示-->
+        <keyTips />
     </div>
 </template>
 <script>
@@ -38,6 +41,7 @@ import { log } from 'util'
 import bus from '@/bus'
 import bus2 from '@/bus2'
 import { cloneDeep } from 'lodash'
+import keyTips from './keyTips'
 export default {
     name: '',
     props: {},
@@ -53,7 +57,7 @@ export default {
             },
         }
     },
-    components: {},
+    components: { keyTips },
     beforeMount() {},
     mounted() {
         // 监听 baseEditer.vue文件 读取json文件后,传入的项目基本信息

+ 6 - 2
src/components/edit/equipmentAttr.vue

@@ -48,6 +48,8 @@
             <a-button @click='addInfo' type='primary'>添加信息点</a-button>
             <a-button @click='delInfo' v-show='info.length' type='danger'>删除信息点</a-button>
         </div>
+        <!-- 键盘操作提示 -->
+        <KeyTips />
     </div>
 </template>
 <script>
@@ -55,6 +57,8 @@ import bus from '@/bus'
 import { log } from 'util'
 import Swatches from 'vue-swatches'
 import { cloneDeep } from 'lodash'
+import KeyTips from './keyTips'
+
 export default {
     name: 'equipmentAttr',
     props: {
@@ -65,7 +69,7 @@ export default {
             },
         },
     },
-    components: { Swatches },
+    components: { Swatches, KeyTips },
     data() {
         return {
             equipmentName: '',
@@ -98,7 +102,7 @@ export default {
             this.init()
         },
         /**
-         * @description 
+         * @description
          */
         addInfo() {
             bus.$emit('addEquipmentInfo')

+ 64 - 0
src/components/edit/keyTips.vue

@@ -0,0 +1,64 @@
+<template>
+    <div style='position: fixed;bottom: 0;right:0;width: 280px;' class='key-boards'>
+        <a-collapse :bordered='false' expand-icon-position='right'>
+            <template #expandIcon='props'>
+                <a-icon type='caret-up' :rotate='props.isActive ? 180 : 0' />
+            </template>
+            <a-collapse-panel key='1' :style='customStyle'>
+                <template slot='header'>
+                    <div style='font-size: 12px;color: #8D9399;'>
+                        <a-icon type='exclamation-circle' />
+                        <span style='margin-left: 5px;'>键盘操作提示</span>
+                    </div>
+                </template>
+
+                <p v-for='item in keyboardOperation' :key='item.value' style='display: flex;margin-top: 13px;'>
+                    <span>{{item.value}}</span>
+                    <span class='key-board'>{{item.keys}}</span>
+                    <span v-if='item.events' style='margin: 0 5px;'>
+                        +
+                        <img style='width:13px;height:18px;' src='./../../assets/images/shubiao.png' alt />
+                    </span>
+                    <span>{{item.events}}</span>
+                </p>
+            </a-collapse-panel>
+        </a-collapse>
+    </div>
+</template>
+<script>
+export default {
+    name: '',
+    props: {},
+    data() {
+        return {
+            customStyle: 'background: #fff;overflow: hidden;  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);border:0',
+            keyboardOperation: [
+                { value: '拖动画布:', keys: 'Space', events: 'Click' },
+                // { value: "加选对象:", keys: "Ctrl", events: "Press" },
+                { value: '确认操作:', keys: 'Enter' },
+                // { value: "取消对象:", keys: "Enter" }
+            ],
+        }
+    },
+    components: {},
+    beforeMount() {},
+    mounted() {},
+    methods: {},
+}
+</script>
+<style lang='less' scoped>
+.key-boards {
+    .key-board {
+        width: 52px;
+        height: 24px;
+        border-radius: 3px;
+        border: 1px solid rgba(195, 199, 203, 1);
+        font-size: 14px;
+        color: #646a73;
+        text-align: center;
+    }
+    /deep/ .ant-collapse-content {
+        border-top: 1px solid #eff0f1;
+    }
+}
+</style>