65

新手指导模块

<el-drawer
      class="drawer"
      :title="$t('新手引导')"
      :visible.sync="drawer"
      size="465.81px"
      :modal="false"
    >
      <div
        style="display:flex;justify-content:center;margin-left:20px;margin-right:10px;margin-top:20px"
        class="detaill"
      >
        <el-tabs v-model="activeName" type="card" class="detail">
          <el-tab-pane :label="$t('Step1相机部署')" name="first"
            ><Step1
          /></el-tab-pane>
          <el-tab-pane :label="$t('Step2盒子管理')" name="second"
            ><Step2
          /></el-tab-pane>
          <el-tab-pane :label="$t('Step3模型组管理')" name="third"
            ><Step3
          /></el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>

这个放在el-container里面就行，因为position是fixed不会影响别的元素。
然后是某Step

<template>
  <div>
    <div class="title">
      <span class="title-blue"></span>
      <p class="title-word" v-html="$t('新增相机部署')"></p>
    </div>
    <div
      class="part"
      v-html="
          $t('进入相机部署页面')
      "
    ></div>
    <br />
    <div style="margin-left:5px;display:flex;justify-content:center">
      <img class="img" src="../assets/image/step1.png" />
    </div>
    <br />
  </div>
</template>

<style lang="scss" scoped>
.img {
  width: 426.19px;
  margin-left: -5px;
}
.title {
  padding: 1px;
}
.title-blue {
  display: inline-block;
  width: 4px;
  height: 16px;
  margin-top: 5px;
  background-color: #3488E2;
  line-height: 2;
}
.title-word {
  margin-top: -20px;
  margin-left: 15px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}
.part {
  margin-left: 2px;
  // margin-right: 10px;
  line-height: 1.5;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}
</style>

因为之前有空格，现在删了，所以没有改。加上‘&npsb；’+就有空格了。
然后就是帮助的图标

<span style="margin-left: auto;">
          <el-dropdown
            @command="handleCommand"
            trigger="click"
            @visible-change="changeColor"
          >
            <span :class="blue?'el-dropdown-link':'origin'">
              <span class="test">
                <img
                  class="operation-icon"
                  src="../assets/image/activehelp.png"
                />
                {{ $t('帮助') }}
              </span>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="document">{{
                $t('帮助文档')
              }}</el-dropdown-item>
              <el-dropdown-item command="guide">{{
                $t('新手引导')
              }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>

这个其实不难但是就是css比较难
一个是那个图片+文字的下拉点击按钮，hover的时候一起变蓝

.operation-icon {
  margin-bottom: -5px;
  margin-right: 0px;
  cursor: pointer;
  width: 20px;
  filter: grayscale(1);
}
.operation-icon:hover {
  margin-bottom: -5px;
  margin-right: 0px;
  cursor: pointer;
  width: 20px;
  filter: grayscale(0);
}
.el-dropdown-link:focus {
  font-family: PingFangSC-Medium, PingFang SC;
  color: #3488e2;
  .test img {
    filter: grayscale(0);
  }
}
.origin {
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-family: PingFangSC-Medium, PingFang SC;
  .test img {
    filter: grayscale(1);
    margin-right: 0px;
  }
}
.origin:hover {
  color: #3488e2;
  font-family: PingFangSC-Medium, PingFang SC;
  .test img {
    filter: grayscale(0);
    margin-right: 0px;
  }
}

不hover的时候设为灰色，也就是灰度置1，hover置0。blue通过点击事件来控制。

changeColor (value) {
      this.blue = value
    },
    handleCommand (command) {
      if (command === 'document') {
        this.jumpToHelp()
      } else {
        this.drawer = true
      }
    },

还有就是drawer打开的时候不让他影响后面的页面点击，drawer的遮罩层设置为false。

.el-drawer__wrapper {
  margin-left: auto;
  width: 500px;
}

放个全的

<template>
    <el-container class="container">
    <el-drawer
      class="drawer"
      :title="$t('新手引导')"
      :visible.sync="drawer"
      size="465.81px"
      :modal="false"
    >
      <div
        style="display:flex;justify-content:center;margin-left:20px;margin-right:10px;margin-top:20px"
        class="detaill"
      >
        <el-tabs v-model="activeName" type="card" class="detail">
          <el-tab-pane :label="$t('Step1相机部署')" name="first"
            ><Step1
          /></el-tab-pane>
          <el-tab-pane :label="$t('Step2盒子管理')" name="second"
            ><Step2
          /></el-tab-pane>
          <el-tab-pane :label="$t('Step3模型组管理')" name="third"
            ><Step3
          /></el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    <!-- <transition name="el-zoom-in-top">
      <div class="container-alert" v-if="websocketLinking">
        <i
          class="el-icon-loading"
          style="font-size: 16px; margin-right: 10px;"
        ></i>
        {{ $t('正在连接服务器') }}
      </div>
    </transition> -->
    <el-container class="container-content">
      <el-header class="container-content-header">
        <img
          style="height: 30px;"
          :key="$store.state.systemInfo.logo"
          :src="$store.state.systemInfo.logo || defaultLogo"
          alt="logo"
        />
        <span style="margin: 0 10px;">|</span
        >{{ $store.state.systemInfo.systemName || $t('系统名称') }}
        <span style="margin-left: auto;">
          <el-dropdown
            @command="handleCommand"
            trigger="click"
            @visible-change="changeColor"
          >
            <span :class="blue?'el-dropdown-link':'origin'">
              <span class="test">
                <img
                  class="operation-icon"
                  src="../assets/image/activehelp.png"
                />
                {{ $t('帮助') }}
              </span>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="document">{{
                $t('帮助文档')
              }}</el-dropdown-item>
              <el-dropdown-item command="guide">{{
                $t('新手引导')
              }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </el-header>
      <el-container style="overflow: hidden;">
        <el-aside class="container-aside" width="150px">
          <el-menu class="container-menu">
            <el-menu-item index="realtimeWatch">
              <router-link
                class="menu-sub-item-content"
                :to="{ name: 'realtimeWatch' }"
              >
                <i class="el-icon-video-play"></i>
                {{ $t('实时查看') }}
              </router-link>
            </el-menu-item>
            <el-menu-item index="cameraDeploy">
              <router-link
                class="menu-sub-item-content"
                :to="{ name: 'cameraDeploy' }"
              >
                <i class="el-icon-video-camera"></i>
                {{ $t('相机部署') }}
              </router-link>
            </el-menu-item>
            <el-menu-item index="boxManage">
              <router-link
                class="menu-sub-item-content"
                :to="{ name: 'boxManage' }"
              >
                <i class="el-icon-box"></i>
                {{ $t('盒子管理') }}
              </router-link>
            </el-menu-item>
            <el-menu-item index="modelManage">
              <router-link
                class="menu-sub-item-content"
                :to="{ name: 'modelManage' }"
              >
                <i class="el-icon-document"></i>
                {{ $t('模型管理') }}
              </router-link>
            </el-menu-item>
            <el-menu-item index="systemManage">
              <router-link
                class="menu-sub-item-content"
                :to="{ name: 'systemManage' }"
              >
                <i class="el-icon-setting"></i>
                {{ $t('系统设置') }}
              </router-link>
            </el-menu-item>
            <el-menu-item index="systemManage">
              <router-link
                class="menu-sub-item-content"
                :to="{ name: 'sampleProject' }"
              >
                <i class="el-icon-bell"></i>
                {{ $t('事件展示') }}
              </router-link>
            </el-menu-item>
          </el-menu>
          <!-- <el-switch
            :active-value="LANG.english"
            :inactive-value="LANG.chinese"
            @change="changeLanguage"
            v-model="language"
            active-text="English"
            inactive-text="中文"
          ></el-switch> -->
        </el-aside>
        <el-main class="container-content-main"
          ><router-view></router-view
        ></el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import Vue from 'vue'
import io from 'socket.io-client'
import { LANG } from '@/constant'
import defaultLogo from '@/assets/logo.png'
import { GetCustomSystemInfo } from '@/api/ports'
import { BASE_URL, BASE_URL_SOCKET } from '@/utils'
import Step1 from '@/components/Step1.vue'
import Step2 from '@/components/Step2.vue'
import Step3 from '@/components/Step3.vue'
export default {
  components: {
    Step1,
    Step2,
    Step3
  },
  data () {
    return {
      blue: false,
      activeName: 'first',
      drawer: false,
      connection: null,
      language: LANG.chinese,
      LANG,
      defaultLogo,
      websocketLinking: false,
      alertHideTimeout: null,
      retryTimeout: null
    }
  },
  mounted () {
    this.stopSocket()
    this.startSocket()
    this.language = this.$store.state.language
    this.$i18n.locale = this.$store.state.language
    this.getSystemNameAndLogoInfo()
    // FIXME:
    // this.startSocket()
    // TODO 获取系统信息
    // this.getSystemUserInfo()
    // this.$API.system.GetCustomSystemInfo().then(res => {
    //     if (res.result){
    //         this.$store.commit('setSystemInfo', {
    //             systemName: res.data.platform_name,
    //             logo: res.data.platform_icon_path ? GetFile(res.data.platform_icon_path) : ''
    //         })
    //     }else {
    //         this.$message.error(res.message)
    //     }
    // })
  },
  methods: {
    changeColor (value) {
      this.blue = value
    },
    handleCommand (command) {
      if (command === 'document') {
        this.jumpToHelp()
      } else {
        this.drawer = true
      }
    },
    getSystemNameAndLogoInfo () {
      GetCustomSystemInfo().then(result => {
        console.log(result)
        if (result) {
          this.GetFile(result.logo)
          this.$store.commit('setSystemInfo', {
            systemName: result.name,
            logo: result.logo ? this.GetFile(result.logo) : ''
          })
        }
      })
    },
    GetFile (path, download = false) {
      return `${BASE_URL}${path}`
    },
    jumpToHelp () {
      window.open(`${BASE_URL}/config/help`)
    },
    async getSystemInfo () {
      const systemInfo = await GetCustomSystemInfo()
      console.log(systemInfo)
    },
    changeLanguage () {
      this.$store.commit('setLanguage', this.language)
      this.$i18n.locale = this.language
    },
    stopSocket () {
      if (Vue.prototype.$WebsocketConnection) {
        Vue.prototype.$WebsocketConnection.close()
        Vue.prototype.$WebsocketConnection = null
      }
    },
    socketOpenWithToken (token) {
      const url = BASE_URL_SOCKET
      Vue.prototype.$WebsocketConnection = io(`${url}/server?token=${token}`, {
        transports: ['websocket'],
        timestampRequests: true
      })
      Vue.prototype.$WebsocketConnection.on('connect_error', e => {
        console.log('socket io connect_error ', url)
        this.websocketLinking = true
        clearTimeout(this.retryTimeout)
        this.retryTimeout = setTimeout(() => {
          const token = localStorage.getItem('token')
          this.socketOpenWithToken(token)
        }, 2000)
      })
      Vue.prototype.$WebsocketConnection.on('disconnect', e => {
        console.log('socket io disconnect ', url)
        this.websocketLinking = true
      })
      Vue.prototype.$WebsocketConnection.on('connect', () => {
        console.log('socket io connect ', url)
        clearTimeout(this.alertHideTimeout)
        this.alertHideTimeout = setTimeout(() => {
          this.websocketLinking = false
        }, 1500)
      })
    },
    startSocket () {
      this.stopSocket()
      const token = localStorage.getItem('token')
      this.socketOpenWithToken(token)
    }
  },
  destroyed () {
    this.stopSocket()
    clearTimeout(this.alertHideTimeout)
    clearTimeout(this.retryTimeout)
  }
}
</script>

<style lang="scss" scoped>
@import '../style/variables';
@import '../style/theme';
.operation-icon {
  margin-bottom: -5px;
  margin-right: 0px;
  cursor: pointer;
  width: 20px;
  filter: grayscale(1);
}
.operation-icon:hover {
  margin-bottom: -5px;
  margin-right: 0px;
  cursor: pointer;
  width: 20px;
  filter: grayscale(0);
}
.el-dropdown-menu__item {
  color: rgba(255, 255, 255, 0.6);
}
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #2f2f2f;
}
.el-drawer__wrapper {
  margin-left: auto;
  width: 500px;
}
.el-tabs__nav-next {
  display: none;
}
.el-tabs__nav-prev {
  display: none;
}
.container {
  overflow: hidden;
  height: 100%;
  &-aside {
    @include var(background-color, color-bg-dark-2);
    text-align: center;
    line-height: 200px;
    height: 100%;
    box-shadow: 2px 0px 0px 0px #000000;
    z-index: 1;
  }
  &-menu {
    @include var(background-color, color-bg-dark-1);
    border-right: none;
    color: rgba(255, 255, 255, 0.6);
  }

  &-content {
    &-header {
      @include var(background-color, color-bg-dark-1);
      box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.6), 0px 2px 0px 0px black;
      z-index: 2;
      display: flex;
      align-items: center;
    }
    &-main {
      display: flex;
      flex-direction: column;
      @include var(background-color, color-bg-dark-1);
      padding: 0;
      overflow: hidden;
    }
  }

  &-alert {
    position: fixed;
    top: 10px;
    left: calc(50% - 200px);
    height: 40px;
    width: 400px;
    line-height: 40px;
    padding: 0 20px;
    background: rgba($color: #e6a23c, $alpha: 0.7);
    z-index: 3;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    text-align: center;
  }
}
.menu-sub-item-content {
  width: 100%;
  height: 100%;
  display: block;
}
.menu-icon {
  color: rgba($color: #fff, $alpha: 0.49);
  font-size: 24px;
  vertical-align: sub;
}
.el-dropdown-link:focus {
  font-family: PingFangSC-Medium, PingFang SC;
  color: #3488e2;
  .test img {
    filter: grayscale(0);
  }
}
.el-dropdown {
    font-family: PingFangSC-Medium, PingFang SC;
    display: inline-block;
    position: relative;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}
.origin {
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-family: PingFangSC-Medium, PingFang SC;
  .test img {
    filter: grayscale(1);
    margin-right: 0px;
  }
}
.origin:hover {
  color: #3488e2;
  font-family: PingFangSC-Medium, PingFang SC;
  .test img {
    filter: grayscale(0);
    margin-right: 0px;
  }
}
</style>
<style lang="scss">
@import '../style/variables';
.drawer .el-drawer__body {
    overflow-y: scroll;
    border-top: solid 1px;
    color: rgba(255, 255, 255, 0.1);
}
.detail.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom-color: #5f5f5f;
  background-color: rgba(255, 255, 255, 0.1);
}
.detail .el-tabs--card > .el-tabs__header .el-tabs__item {
  border-left: none;
  width: 142px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1px 0px 0px 1px;
}
.detail .el-tabs__item {
  padding: 0 23px;
  font-size: 13px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}
.detail .el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  color: rgba(255, 255, 255, 0.8);
}
.detail .el-tabs--card > .el-tabs__header .el-tabs__nav {
  width: 426px;
  height: 36px;
  border-radius: 1px;
  border: 1px solid #5f5f5f;
}
.drawer .el-drawer.rtl {
  background-color: #3b3b3b;
}
.drawer .el-drawer__header {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  line-height: 0px;
  margin-top: -2px;
  margin-bottom: 17px;
}
.detail.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  color: rgba(255, 255, 255, 0.8);
}
.drawer .el-drawer__close-btn :hover {
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: #3488e2;
  background-color: transparent;
}
.detail .el-tabs__nav-scroll {
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.el-menu-item {
  text-align: left;
  padding: 0;
  padding-left: 0;
  height: 80px;
  margin-left: -20px;
  line-height: 80px;
  overflow: hidden;
  box-shadow: 0px 2px 0px 0px #000000;
  &:hover {
    background: #000 !important;
  }
}
.menu-sub-item-content {
  text-decoration: none;
  padding-left: 18px;
  color: #fff;
  &.router-link-exact-active {
    box-shadow: inset 8px 0px 0px 0px $--color-primary;
  }
}
</style>