创建新仓库

src/renderer/components/myHeaderAll/setTool/setTool.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="setTool">
+    <div v-for="(item, i) of setList2" :key="item.id" class="set_item" @click="item.callback">
+      <svg-icon :icon-class="item.icon" :class-name="['air', 'header_public']"></svg-icon>
+      <div class="airList" v-show="airShow">
+        <div class="airList_item" v-for="item in list" :key="item.value" @click="handleCommand(item.value)">
+          {{ item.label }}
+        </div>
+      </div>
+    </div>
+    <div class="set_item" :title="$t('headerTitles.iconTitle.' + item.icon)" v-for="(item, i) of setList" :key="item.id"
+      @click="item.callback(item)" @dblclick="item.dbcallback ? item.dbcallback(item) : ''">
+      <svg-icon :icon-class="item.icon" :class-name="[
+        item.icon,
+        item.className,
+        LocateCurrent && item.icon == 'locate' ? 'selected' : '',
+        item.icon == 'locate' && (isSuccess ? '' : 'satelliteFail'),
+      ]"></svg-icon>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixins from "./js/setTool";
+
+export default {
+  name: "setTool",
+  mixins: [mixins],
+  data() {
+    return {
+      list: [
+        {
+          label: "机场",
+          value: "dock",
+        },
+        // {
+        //   label: "遥控器",
+        //   value: "remote",
+        // },
+      ],
+      setList2: [
+        // {
+        //   id: 6,
+        //   index: 6,
+        //   icon: "air",
+        //   className: "header_public",
+        //   dbcallback: null,
+        //   callback: this.hhhhhh, //this.airLine
+        // },
+      ],
+      setList: [
+        //北斗图标
+        // 标准版本
+        {
+          id: 0,
+          index: 0,
+          icon: "locate",
+          className: "header_public",
+          dbcallback: this.flyTo,
+          callback: this.locate,
+        },
+        {
+          id: 1,
+          index: 1,
+          icon: "reset",
+          className: "header_public",
+          dbcallback: null,
+          callback: this.resetShow,
+        },
+        {
+          id: 2,
+          index: 2,
+          icon: "fullScreen",
+          className: "header_public",
+          dbcallback: null,
+          callback: this.fullScreen,
+        },
+        // 青海海东excel文件预览
+        // {
+        //   id: 5,
+        //   index: 5,
+        //   icon: "excel",
+        //   className: "header_public",
+        //   dbcallback: null,
+        //   callback: this.tableSet,
+        // },
+        {
+          id: 3,
+          index: 3,
+          icon: "set",
+          className: "header_public",
+          dbcallback: null,
+          callback: this.setShow,
+        },
+        // {id: 4, index: 2, icon: 'layerTitleBg', className: 'header_public', callback: this.setShow},
+        {
+          id: 4,
+          index: 4,
+          icon: "logout",
+          className: "header_public",
+          dbcallback: null,
+          callback: this.logout,
+        },
+      ],
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss">
+.setTool {
+  height: 36px;
+  position: absolute;
+  right: 70px;
+  top: 7%;
+  border-radius: 5px;
+  background: var(--svg-headColorbg);
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--svg-headColor3);
+  padding: 10px 0;
+
+  >div {
+    margin: 0 10px;
+  }
+
+  ::v-deep .el-dialog__body {
+    padding: 10px;
+  }
+
+  .airList {
+    position: absolute;
+    top: 40px;
+    left: 0;
+    width: 80px;
+    height: 100px;
+    background: rgba(0, 0, 0, 0.6);
+    border: 1px solid rgba(0, 255, 255, 0.5);
+    border-radius: 5px;
+    color: #fff;
+    text-align: center;
+
+    .airList_item {
+      line-height: 30px;
+      cursor: pointer;
+    }
+  }
+}
+
+.el-dropdown-menu {
+  background-color: rgba(0, 0, 0, 1);
+  border-color: rgba(0, 255, 255, 0.5);
+  border-width: 2px;
+}
+
+.el-dropdown-menu__item {
+  color: #fff;
+}
+
+.el-dropdown-menu__item:focus,
+.el-dropdown-menu__item:not(.is-disabled):hover {
+  background: rgba(0, 255, 255, 0.2);
+  color: rgba(0, 255, 255, 1);
+}
+
+.el-popper[x-placement^="bottom"] .popper__arrow {
+  display: none;
+}
+</style>