增加自适应组件

project/fengdu/AppBIBoard/AppBIBoard.vue

@@ -0,0 +1,51 @@
+<template>
+  <section class="AppBIBoard" :class="{fullscreen}">
+    <ai-fit-view>
+      <ai-dv-wrapper ref="fddv">
+        <template v-slot:head="head">
+          <fengdu-head v-bind="head" @fullscreen="handleFullScreen" @setting="handleSetting"/>
+        </template>
+        <ai-dv-viewer v-bind="$props"/>
+      </ai-dv-wrapper>
+    </ai-fit-view>
+  </section>
+</template>
+<script>
+import AiFitView from "dui/packages/layout/AiFitView.vue";
+import FengduHead from "./components/fengduHead.vue";
+
+export default {
+  name: "AppBIBoard",
+  label: "丰都指挥舱",
+  components: {FengduHead, AiFitView},
+  props: {
+    instance: Function,
+    dict: Object
+  },
+  data() {
+    return {
+      fullscreen: false
+    }
+  },
+  methods: {
+    handleFullScreen() {
+      this.fullscreen = this.$refs.fddv.handleFullScreen()
+    },
+    handleSetting(v) {
+      this.$refs.fddv.dialog = v
+    }
+  },
+}
+</script>
+<style scoped lang="scss">
+.AppBIBoard {
+  &.fullscreen {
+    position: fixed;
+    z-index: 202310111819;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+}
+</style>

project/fengdu/AppBIBoard/components/fengduHead.vue

@@ -0,0 +1,180 @@
+<template>
+  <section class="fengduHead">
+    <div flex class="content">
+      <b class="headerTitle" v-text="title"/>
+      <el-tabs class="fill" v-model="current" @tab-click="$emit('change', current)">
+        <el-tab-pane v-for="tab in tabs" :key="tab.id" :label="tab.label" :name="tab.id"/>
+      </el-tabs>
+      <div class="rightPane" flex>
+        <div class="item" v-text="currentTime"/>
+        <div class="item setting mar-l24" @click.stop="$emit('setting',true)"/>
+        <div class="item fullscreen mar-l14" @click.stop="$emit('fullscreen')"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "fengduHead",
+  model: {
+    prop: "active",
+    event: "change"
+  },
+  props: {
+    title: String,
+    views: {default: () => []},
+    active: String,
+    currentTime: {default: null}
+  },
+  computed: {
+    tabs: v => [
+      ...v.views,
+      // {label: "测试哦哦", id: 1},
+      // {label: "测试哦哦", id: 2},
+      // {label: "测试哦哦", id: 3},
+      // {label: "测试哦哦", id: 4},
+      // {label: "测试哦哦", id: 5},
+      // {label: "测试哦哦", id: 6},
+      // {label: "测试哦哦", id: 7},
+      // {label: "测试哦哦", id: 8},
+      // {label: "测试哦哦", id: 9},
+      // {label: "测试哦哦", id: 10},
+    ]
+  },
+  data() {
+    return {
+      current: ""
+    }
+  },
+  watch: {
+    active: {
+      immediate: true,
+      handler(v) {
+        if (v != this.current) this.current = this.$copy(this.active)
+      }
+    }
+  },
+  methods: {
+    getWeather() {
+      this.$request.post("/app/weather/queryWeather").then(res => {
+        if (res?.data) {
+
+        }
+      })
+    }
+  },
+  created() {
+    // this.getWeather()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fengduHead {
+  width: 100%;
+  height: 96px;
+  padding: 0 48px;
+  box-sizing: border-box;
+  color: #fff;
+
+  .content {
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: left bottom, right bottom;
+    font-family: PingFang-SC;
+
+    .headerTitle {
+      font-family: fangfang;
+      font-size: 38px;
+      font-weight: 400;
+      line-height: 62px;
+      letter-spacing: 1.52px;
+      color: #fff;
+    }
+
+    :deep(.el-tabs) {
+      margin-left: 92px;
+
+      .el-tabs__header {
+        margin-bottom: 0;
+      }
+
+      .el-tabs__nav-wrap {
+        padding: 0 24px;
+
+        &:after {
+          content: none;
+        }
+      }
+
+      .el-tabs__active-bar {
+        width: 88px;
+        background: linear-gradient(270deg, #02feff00 0%, #02feffff 51%, #02feff00 100%);
+      }
+
+      .el-tabs__item {
+        color: #fff;
+        font-size: 20px;
+        font-weight: 400;
+        font-family: PingFang-SC;
+        user-select: none;
+
+        &.is-active {
+          color: #02FEFF;
+        }
+      }
+
+      .el-tabs__nav-prev {
+        padding-right: 14px;
+        background-image: linear-gradient(270deg, #0b0d0cff 0%, #0f3031ff 72%, #02feffff 100%);
+
+        background-repeat: no-repeat;
+        background-position: right center;
+        background-size: 6px 32px;
+
+        .el-icon-arrow-left:before {
+          color: #02FEFF;
+          content: "◀";
+        }
+      }
+
+
+      .el-tabs__nav-next {
+        padding-left: 14px;
+        background-image: linear-gradient(270deg, #02feffff 0%, #0f3031ff 28%, #0b0d0cff 100%);
+        background-repeat: no-repeat;
+        background-position: left center;
+        background-size: 6px 32px;
+
+        .el-icon-arrow-right:before {
+          color: #02FEFF;
+          content: "▶";
+        }
+      }
+    }
+  }
+
+  .rightPane {
+    margin-left: 75px;
+    padding: 0 11px 0 0;
+
+    .item {
+      padding-left: 30px;
+      height: 30px;
+      line-height: 30px;
+      background-image: url("../assets/timeIcon.png");
+      background-repeat: no-repeat;
+      background-position: left center;
+
+      &.setting {
+        background-image: url("../assets/settingIcon.png") !important;
+      }
+
+      &.fullscreen {
+        background-image: url("../assets/fullscreenIcon.png") !important;
+      }
+    }
+  }
+}
+</style>