feat: 添加RightBar报障组件

添加右侧浮动工具栏，支持报障和记录功能，跳转至运维系统。

Co-Authored-By: Claude (gemini-claude-opus-4-5-thinking) <noreply@anthropic.com>

.env.development

@@ -24,3 +24,6 @@ VUE_APP_AICEPS_URL = 'http://10.201.62.87:6891/gz-aiceps-manage'
 
 VUE_APP_AICEPS_SERVICE_URL = 'http://localhost:9549'
 
+#运维系统
+VUE_APP_DEVOPS = 'https://www.chinaweal.com.cn:1777/devops-gd'
+

.env.production

@@ -18,3 +18,6 @@ VUE_APP_AICEPS_URL = 'http://10.201.62.87:6891/gz-aiceps-manage'
 # 年报服务地址 无需写/aiceps-service-web 如和aiccs同域名同端口部署则置空
 VUE_APP_AICEPS_SERVICE_URL = ''
 
+#运维系统
+VUE_APP_DEVOPS = 'https://www.chinaweal.com.cn:1777/devops-gd'
+

src/App.vue

@@ -1,13 +1,16 @@
 <template>
   <div id="app">
     <router-view />
+    <RightBar />
   </div>
 </template>
 
 <script>
 import { getSsoToken_CK } from './utils/auth'
+import RightBar from '@/components/RightBar'
 export default {
   name: 'App',
+  components: { RightBar },
   computed: {
     currentSSOToken() {
       return this.$store.state.app.currentSSOToken

src/components/RightBar/index.vue

@@ -0,0 +1,209 @@
+<template>
+  <div id="OM" class="OM" :class="{'slider':isSlider,'sliderLeft':sliderLeft}">
+    <div class="show">
+      <div class="tipPic" :class="{'show-active':isActive}" @click="toggleClick" />
+    </div>
+    <div>
+      <div class="item" style="text-align:center;font-size: 14px" @click="tofillOM">
+        <div class="omlist">
+          <img style="width:100%" src="../../assets/images/devops1.png" alt="">
+        </div>
+        报障
+      </div>
+      <div class="item" style="text-align:center;font-size: 14px" @click="toList">
+        <div class="omlist">
+          <img style="width:100%" src="../../assets/images/devops2.png" alt="">
+        </div>
+        记录
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isSlider: true,
+      sliderLeft: true,
+      isActive: true
+    }
+  },
+  computed: {
+    userInfo() {
+      const user = JSON.parse(sessionStorage.getItem('user') || '{}')
+      return {
+        userId: this.$store.state.user.keys,
+        nickname: this.$store.state.user.name,
+        username: this.$store.state.user.username,
+        unitName: this.$store.state.user.unitName,
+        ...user
+      }
+    }
+  },
+  methods: {
+    hide() {
+      this.isSlider = true
+      this.sliderLeft = false
+    },
+    toggleClick() {
+      this.isActive = !this.isActive
+      if (this.sliderLeft) {
+        this.isSlider = !this.isSlider
+        this.sliderLeft = false
+      } else {
+        this.sliderLeft = !this.sliderLeft
+        this.isSlider = false
+      }
+    },
+    tofillOM() {
+      const { nickname, username, userId, unitName } = this.userInfo
+      if (!userId) {
+        this.$message.warning('请先登录')
+        return
+      }
+      const source = 9
+      window.open(`${process.env.VUE_APP_DEVOPS}/#/auth?info=${btoa(encodeURI(JSON.stringify({ userId, username: username || '', name: nickname || unitName || '游客', ts: Date.now() })))}&source=${source}&roleType=outer&redirect=/repair/outerAdd`)
+    },
+    toList() {
+      const { nickname, username, userId, unitName } = this.userInfo
+      if (!userId) {
+        this.$message.warning('请先登录')
+        return
+      }
+      const source = 9
+      window.open(`${process.env.VUE_APP_DEVOPS}/#/auth?info=${btoa(encodeURI(JSON.stringify({ userId, username: username || '', name: nickname || unitName || '游客', ts: Date.now() })))}&source=${source}&roleType=outer&redirect=/repair/outer`)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.OM {
+  .omlist {
+    width: 40px;
+    height: 40px;
+    margin: 10px  auto;
+    font-size: 13px;
+    img {
+      width: 100%;
+    }
+  }
+  width: 80px;
+  height: auto;
+  background: #fff;
+  padding: 10px 0;
+  position: fixed;
+  margin-right: 42px;
+  border-radius: 20px;
+  right: -100px;
+  bottom: 150px;
+  cursor: pointer;
+  box-shadow: 8px 8px 20px 0 rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .el-card__body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  .show {
+    width: 45px;
+    height: 100%;
+    position: absolute;
+    left: -35px;
+    top: 0;
+    display: flex;
+    align-items: center;
+    z-index: 9999;
+    transform: rotate(0);
+
+  }
+
+  .tipPic {
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    background: url('../../assets/images/show.png');
+    background-size: 100%;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+
+  }
+
+  .tipPic:hover {
+    background: url('../../assets/images/active.png');
+    background-size: 100%;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .show-active {
+    transform: rotate(180deg);
+  }
+
+  .item{
+    margin-bottom: 10px;
+  }
+  .item:last-child{
+    margin-bottom: 0px;
+  }
+}
+.slider {
+  animation: mymove 1s ease-in-out 0s 1 alternate forwards;
+}
+
+.sliderLeft {
+  animation: moveLeft 1s ease-in-out 0s 1 alternate forwards;
+}
+
+@keyframes mymove {
+  0% {
+    right: 0%;
+  }
+
+  100% {
+    right: -100px;
+
+  }
+}
+
+@-webkit-keyframes mymove {
+  0% {
+
+    /* right:6%; */
+    right: 0%;
+  }
+
+  100% {
+    right:-100px;
+    /* right: -6%; */
+  }
+}
+
+@keyframes moveLeft {
+  0% {
+    right: -100px;
+  }
+  100% {
+    right: 0;
+  }
+}
+
+@-webkit-keyframes moveLeft {
+  0% {
+    right: -100px;
+  }
+
+  100% {
+    right: 0;
+  }
+}
+</style>