Merge branch 'master' of https://gitlink.org.cn/xuos/xiuos_IoT

11111

xiuosiot-frontend/src/layout/components/Navbar.vue

@@ -35,7 +35,7 @@ export default {
     },
     async logout() {
       await this.$store.dispatch('user/logout')
-      this.$router.push('/login')
+      this.$router.push('/home')
     }
   }
 }

xiuosiot-frontend/src/layout/index.vue

@@ -48,7 +48,7 @@ export default {
       }
     },
     showBreadcrumb() {
-      const whiteList = ['overview', 'terminal/add', 'terminal/plc', 'data/value', 'configuration/development', 'dashboard']
+      const whiteList = ['overview', 'terminal/add', 'terminal/plc', 'data/value', 'configuration/development', 'dashboard', 'log/accessLog']
       return whiteList.every((item) => this.$route.path.indexOf(item) === -1)
     }
   },

xiuosiot-frontend/src/permission.js

@@ -2,7 +2,7 @@
  * @Author: 龚祖望 573413756@qq.com
  * @Date: 2022-05-16 09:16:41
  * @LastEditors: 龚祖望 573413756@qq.com
- * @LastEditTime: 2022-10-09 15:28:49
+ * @LastEditTime: 2022-10-19 14:37:55
  * @FilePath: \dashengda\src\permission.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -16,7 +16,7 @@ import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/login', '/home', '/product/M168', '/product/RV400', '/product/RV400-SR100', '/product/RV400-AR100', '/product/M528', '/solution/shengda', '/solution/qianjiang'] // no redirect whitelist
+const whiteList = ['/login', '/home', '/product/M168', '/product/RV400', '/product/RV400-SR100', '/product/RV400-AR100', '/product/M528', '/solution/shengda', '/solution/qianjiang', '/configuration/development', '/configuration/transferStation', '/configuration/AiCity', '/configuration/bridgeMachine'] // no redirect whitelist
 
 router.beforeEach(async(to, from, next) => {
   // start progress bar

xiuosiot-frontend/src/router/index.js

@@ -172,6 +172,7 @@ export const constantRoutes = [
       {
         path: 'ota',
         name: 'OTA',
+        component: () => import('@/views/terminal/OTA/index'),
         meta: { title: 'OTA升级', disabled: true }
       }
     ]
@@ -238,19 +239,19 @@ export const constantRoutes = [
     path: '/log',
     component: Layout,
     name: 'Log',
-    meta: { title: '日志管理', icon: 'log', disabled: true },
+    meta: { title: '日志管理', icon: 'log' },
     children: [
       {
         path: 'accessLog',
         name: 'AccessLog',
-        // component: () => import(''),
-        meta: { title: '访问日志', disabled: true }
+        component: () => import('@/views/log/accessLog/index'),
+        meta: { title: '访问日志' }
       },
       {
         path: 'systemLog',
         name: 'SystemLog',
-        // component: () => import('@/views/terminal/add/index'),
-        meta: { title: '系统日志', disabled: true }
+        component: () => import('@/views/log/systemLog/index'),
+        meta: { title: '系统日志' }
       }
     ]
   },

xiuosiot-frontend/src/views/log/accessLog/index.vue

@@ -0,0 +1,413 @@
+<template>
+  <div class="app-container" style="min-height: calc(100vh - 50px)">
+    <el-row
+      type="flex"
+      justify="space-between"
+      style="align-items: baseline; margin-bottom: 30px"
+    >
+      <div class="header">
+        <h1 class="title">访问日志</h1>
+        <span class="date">{{ date }}</span>
+      </div>
+    </el-row>
+    <div v-for="(item, index) in logList" :key="index" class="log-container">
+      <p class="ip"><img src="@/assets/images/ip.png" width="40px">访问IP</p>
+      <p class="ip_val">{{ item.ip }}</p>
+      <div class="line" />
+      <p class="content"><img src="@/assets/images/take_time.png">请求耗时</p>
+      <p class="content_val">{{ item.requestTime }}</p>
+      <p class="content"><img src="@/assets/images/path.png">请求路径</p>
+      <p class="content_val">{{ item.path }}</p>
+      <p class="content"><img src="@/assets/images/timestamp.png">请求时间</p>
+      <p class="content_val">{{ item.time }}</p>
+      <div class="footer">
+        <span class="usr">
+          <img src="@/assets/images/usr.png">{{ item.user }}
+        </span>
+        <span
+          class="detail"
+          @click="showDetail(item)"
+        >查看详情<img
+          src="@/assets/images/arrow_three.png"
+        ></span>
+      </div>
+    </div>
+
+    <!-- 详情弹窗 -->
+    <div v-show="visible" class="dialog_wrapper">
+      <div class="dialog-container">
+        <div class="dialog_header">
+          <p class="ip">
+            <img src="@/assets/images/ip_white_border.png" width="40px">访问IP
+          </p>
+          <p class="ip_val">{{ current.ip }}</p>
+          <div class="remove_icon" @click="close">X</div>
+        </div>
+        <div class="dialog_content">
+          <el-row style="text-align: center; padding: 35px 0">
+            <el-radio-group v-model="radio" class="radio">
+              <el-radio-button label="基本信息" />
+              <el-radio-button label="详细信息" />
+            </el-radio-group>
+          </el-row>
+          <div v-show="radio === '基本信息'" class="form">
+            <div class="form_content">
+              <div class="item_title">
+                <img src="@/assets/images/clip.png">URL
+              </div>
+              <div class="item_content">XXXXXXX</div>
+              <div class="item_title">
+                <img
+                  src="@/assets/images/ip_without_border.png"
+                  style="margin-right: 20px"
+                >IP
+              </div>
+              <div class="item_content">XXXXX</div>
+            </div>
+            <div class="line" />
+            <div class="form_content">
+              <div class="item_title">
+                <img src="@/assets/images/http_method.png">请求<br>方法
+              </div>
+              <div class="item_content">XXXXXXX</div>
+              <div class="item_title">
+                <img
+                  src="@/assets/images/timestamp_without_border.png"
+                >请求<br>时间
+              </div>
+              <div class="item_content">XXXXX</div>
+            </div>
+            <div class="line" />
+            <div class="form_content">
+              <div class="item_title">
+                <img src="@/assets/images/action.png">动作
+              </div>
+              <div class="item_content">XXXXXXX</div>
+              <div class="item_title">
+                <img
+                  src="@/assets/images/take_time_without_border.png"
+                >请求<br>耗时
+              </div>
+              <div class="item_content">XXXXX</div>
+            </div>
+            <div class="line" />
+          </div>
+          <div v-show="radio === '详细信息'" class="form">
+            <div class="form_content">
+              <div class="item_title">
+                <img src="@/assets/images/class.png">类名
+              </div>
+              <div class="item_content">XXXXXXX</div>
+              <div class="item_title">
+                <img
+                  src="@/assets/images/method.png"
+                >方法<br>名
+              </div>
+              <div class="item_content">XXXXX</div>
+            </div>
+            <div class="line" />
+            <div class="form_content">
+              <div class="item_title">
+                <img src="@/assets/images/header.png">请求<br>头
+              </div>
+              <div class="item_content">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
+            </div>
+            <div class="line" />
+            <div class="form_content">
+              <div class="item_title">
+                <img
+                  src="@/assets/images/param.png"
+                >请求<br>参数
+              </div>
+              <div class="item_content">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
+            </div>
+            <div class="line" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      date: '',
+      logList: [
+        {
+          ip: '196.105.55.103',
+          requestTime: '35ms',
+          path: '/device/select?activestatus=0',
+          time: '2022-11-14 0:11:54',
+          user: '大胜达'
+        },
+        {
+          ip: '196.105.55.103',
+          requestTime: '35ms',
+          path: '/device/select?activestatus=0',
+          time: '2022-11-14 0:11:54',
+          user: '大胜达'
+        },
+        {
+          ip: '196.105.55.103',
+          requestTime: '35ms',
+          path: '/device/select?activestatus=0',
+          time: '2022-11-14 0:11:54',
+          user: '大胜达'
+        },
+        {
+          ip: '196.105.55.103',
+          requestTime: '35ms',
+          path: '/device/select?activestatus=0',
+          time: '2022-11-14 0:11:54',
+          user: '大胜达'
+        },
+        {
+          ip: '196.105.55.103',
+          requestTime: '35ms',
+          path: '/device/select?activestatus=0',
+          time: '2022-11-14 0:11:54',
+          user: '大胜达'
+        },
+        {
+          ip: '196.105.55.103',
+          requestTime: '35ms',
+          path: '/device/select?activestatus=0',
+          time: '2022-11-14 0:11:54',
+          user: '大胜达'
+        },
+        {
+          ip: '196.105.55.103',
+          requestTime: '35ms',
+          path: '/device/select?activestatus=0',
+          time: '2022-11-14 0:11:54',
+          user: '大胜达'
+        }
+      ],
+      visible: false,
+      radio: '基本信息',
+      current: {}
+    }
+  },
+  mounted() {
+    this.date = new Date().toLocaleDateString()
+  },
+  methods: {
+    showDetail(item) {
+      this.current = item
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  font-family: Lato;
+  .title {
+    color: #174a84;
+  }
+  .date {
+    color: #a5c9ff;
+  }
+}
+.log-container {
+  display: inline-block;
+  margin: auto 25px;
+  background: url('~@/assets/images/log_box.png') no-repeat;
+  background-size: 100% 100%;
+  height: 400px;
+  width: 275px;
+  text-align: center;
+  font-family: Microsoft YaHei;
+  padding: 10px;
+  position: relative;
+  p {
+    margin-block-start: 0.5em;
+    margin-block-end: 0.5em;
+  }
+  img {
+    vertical-align: middle;
+  }
+  .ip {
+    img {
+      margin-right: 13px;
+    }
+    font-size: 24px;
+    color: #8f58ea;
+  }
+  .ip_val {
+    font-size: 18px;
+    font-weight: bold;
+    color: #915ef6;
+    margin-bottom: 30px;
+  }
+  .line {
+    position: absolute;
+    width: 85%;
+    left: 8%;
+    top: 105px;
+    height: 2px;
+    background-image: linear-gradient(
+      to right,
+      #905bf0 0%,
+      #905bf0 50%,
+      transparent 50%
+    );
+    background-size: 18px 100%;
+    background-repeat: repeat-x;
+  }
+  .content {
+    img {
+      margin-right: 9px;
+    }
+    color: #5f6874;
+  }
+  .content_val {
+    color: #8f57e8;
+  }
+  .footer {
+    position: absolute;
+    bottom: 25px;
+    left: 25px;
+    color: #fff;
+    .usr {
+      img {
+        margin-right: 5px;
+      }
+      margin-right: 55px;
+    }
+    .detail {
+      font-weight: bold;
+      cursor: pointer;
+      img {
+        margin-left: 5px;
+      }
+    }
+  }
+}
+.dialog_wrapper {
+  z-index: 2;
+  position: fixed;
+  left: 230px;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: 0;
+  &::before {
+    content: '';
+    position: absolute;
+    left: -230px;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 2;
+  }
+  .dialog-container {
+    z-index: 10;
+    width: 800px;
+    transform: none;
+    margin: 15vh auto;
+    position: relative;
+    border-radius: 8px;
+    border: 2px solid #8f59eb;
+    font-family: Microsoft YaHei;
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+    .dialog_header {
+      background-color: #8f59eb;
+      text-align: center;
+      color: #fff;
+      padding: 5px;
+      position: relative;
+      p {
+        img {
+          vertical-align: middle;
+          margin-right: 12px;
+        }
+        font-size: 24px;
+        font-weight: bold;
+        margin: 5px auto;
+      }
+      .ip_val {
+        font-size: 26px;
+      }
+      .remove_icon {
+        position: absolute;
+        font-size: 18px;
+        right: 15px;
+        top: 10px;
+        cursor: pointer;
+      }
+    }
+    .dialog_content {
+      background-color: #fff;
+      border-radius: 0 0 8px 8px;
+      padding-bottom: 80px;
+      .form {
+        width: 80%;
+        margin: auto;
+        .form_content {
+          display: flex;
+          width: 100%;
+          div {
+            justify-content: center;
+            display: flex;
+            align-items: center;
+            img {
+              vertical-align: middle;
+              margin-right: 10px;
+            }
+          }
+          .item_title {
+            text-align: center;
+            background: rgba(241, 236, 249, 0.4);
+            width: 110px;
+            min-height: 90px;
+            font-size: 20px;
+            color: #8f59eb;
+          }
+          .item_content {
+            flex: 1;
+            word-break: break-all;
+            padding: 9px;
+          }
+        }
+        .line {
+          width: 100%;
+          height: 2px;
+          background-image: linear-gradient(
+            to right,
+            #905bf0 0%,
+            #905bf0 50%,
+            transparent 50%
+          );
+          background-size: 18px 100%;
+          background-repeat: repeat-x;
+        }
+      }
+    }
+
+    .radio {
+      ::v-deep .el-radio-button__inner {
+        color: #8f59eb;
+        border-color: #8f59eb;
+      }
+      ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+        background-color: #8f59eb;
+        color: #fff;
+      }
+      ::v-deep .el-radio-button:first-child .el-radio-button__inner {
+        border-radius: 9px 0 0 9px;
+      }
+      ::v-deep .el-radio-button:last-child .el-radio-button__inner {
+        border-radius: 0 9px 9px 0;
+      }
+    }
+  }
+}
+</style>

xiuosiot-frontend/src/views/log/systemLog/index.vue

@@ -0,0 +1,359 @@
+<template>
+  <div class="app-container" style="min-height: calc(100vh - 50px)">
+    <el-row
+      type="flex"
+      justify="space-between"
+      style="align-items: baseline; margin-bottom: 30px"
+    >
+      <div class="header">
+        <h1 class="title">系统日志</h1>
+        <span class="date">{{ date }}</span>
+      </div>
+    </el-row>
+    <div v-for="(item, index) in logList" :key="index" class="log-container" :style="{'background-image':'url('+getBgImg(item.level)+')'}">
+      <p class="ip"><img src="@/assets/images/sysLog_type.png" width="40px">设备名称</p>
+      <p class="ip_val">{{ item.type }}</p>
+      <div class="line" />
+      <p class="content"><img src="@/assets/images/sysLog_no.png">设备序列号</p>
+      <p class="content_val">{{ item.no }}</p>
+      <p class="content"><img src="@/assets/images/sysLog_time.png">日志时间</p>
+      <p class="content_val">{{ item.time }}</p>
+      <p class="content"><img src="@/assets/images/sysLog_thread.png">线程</p>
+      <p class="content_val">{{ item.thread }}</p>
+      <div class="footer">
+        <span class="usr" :style="getColor(item.level)">
+          {{ item.level }}
+        </span>
+        <span
+          class="detail"
+          @click="showDetail(item)"
+        >查看详情<img
+          src="@/assets/images/arrow_three.png"
+        ></span>
+      </div>
+    </div>
+
+    <!-- 详情弹窗 -->
+    <div v-show="visible" class="dialog_wrapper">
+      <div class="dialog-container">
+        <div class="dialog_header">
+          <p class="ip">
+            <img src="@/assets/images/sysLog_type_white.png" width="40px">设备名称
+          </p>
+          <p class="ip_val">{{ current.type }}</p>
+          <div class="remove_icon" @click="close">X</div>
+        </div>
+        <div class="dialog_content">
+          <div class="form">
+            <div class="form_content">
+              <div class="item_title">
+                <img src="@/assets/images/sysLog_link.png">链路<br>ID
+              </div>
+              <div class="item_content">XXXXXXX</div>
+              <div class="item_title">
+                <img
+                  src="@/assets/images/sysLog_msg.png"
+                >消息<br>ID
+              </div>
+              <div class="item_content">XXXXX</div>
+            </div>
+            <div class="line" />
+            <div class="form_content">
+              <div class="item_title">
+                <img
+                  src="@/assets/images/sysLog_content.png"
+                >日志<br>内容
+              </div>
+              <div class="item_content">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
+            </div>
+            <div class="line" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      date: '',
+      logList: [
+        {
+          type: 'RV400-NPU16T-5G-AR100',
+          no: 'A000008',
+          thread: 'thread1',
+          time: '2022-11-14 0:11:54',
+          level: 'Info'
+        },
+        {
+          type: 'RV400-NPU16T-5G-AR100',
+          no: 'A000008',
+          thread: 'thread1',
+          time: '2022-11-14 0:11:54',
+          level: 'Warning'
+        },
+        {
+          type: 'RV400-NPU16T-5G-AR100',
+          no: 'A000008',
+          thread: 'thread1',
+          time: '2022-11-14 0:11:54',
+          level: 'Error'
+        },
+        {
+          type: 'RV400-NPU16T-5G-AR100',
+          no: 'A000008',
+          thread: 'thread1',
+          time: '2022-11-14 0:11:54',
+          level: 'Error'
+        },
+        {
+          type: 'RV400-NPU16T-5G-AR100',
+          no: 'A000008',
+          thread: 'thread1',
+          time: '2022-11-14 0:11:54',
+          level: 'Info'
+        },
+        {
+          type: 'RV400-NPU16T-5G-AR100',
+          no: 'A000008',
+          thread: 'thread1',
+          time: '2022-11-14 0:11:54',
+          level: 'Info'
+        }
+      ],
+      visible: false,
+      current: {}
+    }
+  },
+  mounted() {
+    this.date = new Date().toLocaleDateString()
+  },
+  methods: {
+    getBgImg(level) {
+      if (level === 'Info') {
+        return require('@/assets/images/systemlog_box_info.png')
+      }
+      if (level === 'Warning') {
+        return require('@/assets/images/systemlog_box_warning.png')
+      }
+      if (level === 'Error') {
+        return require('@/assets/images/systemlog_box_error.png')
+      }
+    },
+    getColor(level) {
+      if (level === 'Info') {
+        return 'color:#FAF200'
+      }
+      if (level === 'Warning') {
+        return 'color:#FFB300'
+      }
+      if (level === 'Error') {
+        return 'color:#FF4E00'
+      }
+    },
+    showDetail(item) {
+      this.current = item
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+  <style lang="scss" scoped>
+  .header {
+    font-family: Lato;
+    .title {
+      color: #174a84;
+    }
+    .date {
+      color: #a5c9ff;
+    }
+  }
+  .log-container {
+    display: inline-block;
+    margin: auto 25px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    height: 400px;
+    width: 275px;
+    text-align: center;
+    font-family: Microsoft YaHei;
+    padding: 10px;
+    position: relative;
+    p {
+      margin-block-start: 0.5em;
+      margin-block-end: 0.5em;
+    }
+    img {
+      vertical-align: middle;
+    }
+    .ip {
+      img {
+        margin-right: 13px;
+      }
+      font-size: 24px;
+      color: #00CCF2;
+    }
+    .ip_val {
+      font-size: 18px;
+      font-weight: bold;
+      color: #00CCF2;
+      margin-bottom: 30px;
+    }
+    .line {
+      position: absolute;
+      width: 85%;
+      left: 8%;
+      top: 105px;
+      height: 2px;
+      background-image: linear-gradient(
+        to right,
+        #00CCF2 0%,
+        #00CCF2 50%,
+        transparent 50%
+      );
+      background-size: 18px 100%;
+      background-repeat: repeat-x;
+    }
+    .content {
+      img {
+        margin-right: 9px;
+      }
+      color: #5f6874;
+    }
+    .content_val {
+      color: #00CCF2;
+    }
+    .footer {
+      position: absolute;
+      bottom: 20px;
+      left: 25px;
+      color: #fff;
+      .usr {
+        font-size: 22px;
+        font-weight: bold;
+        text-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+        display: inline-block;
+        width: 120px;
+        text-align: left;
+      }
+      .detail {
+        font-weight: bold;
+        cursor: pointer;
+        img {
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+  .dialog_wrapper {
+    z-index: 2;
+    position: fixed;
+    left: 230px;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: 0;
+    &::before {
+      content: '';
+      position: absolute;
+      left: -230px;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.4);
+      z-index: 2;
+    }
+    .dialog-container {
+      z-index: 10;
+      width: 800px;
+      transform: none;
+      margin: 15vh auto;
+      position: relative;
+      border-radius: 8px;
+      font-family: Microsoft YaHei;
+      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+      .dialog_header {
+        background-color: #00CCF2;
+        text-align: center;
+        color: #fff;
+        padding: 5px;
+        position: relative;
+        border-radius: 8px 8px 0 0;
+        p {
+          img {
+            vertical-align: middle;
+            margin-right: 12px;
+          }
+          font-size: 24px;
+          font-weight: bold;
+          margin: 5px auto;
+        }
+        .ip_val {
+          font-size: 26px;
+        }
+        .remove_icon {
+          position: absolute;
+          font-size: 18px;
+          right: 15px;
+          top: 10px;
+          cursor: pointer;
+        }
+      }
+      .dialog_content {
+        background-color: #fff;
+        border-radius: 0 0 8px 8px;
+        padding-bottom: 80px;
+        padding-top: 40px;
+        .form {
+          width: 80%;
+          margin: auto;
+          .form_content {
+            display: flex;
+            width: 100%;
+            div {
+              justify-content: center;
+              display: flex;
+              align-items: center;
+              img {
+                vertical-align: middle;
+                margin-right: 10px;
+              }
+            }
+            .item_title {
+              text-align: center;
+              background: rgba(0,204,242,0.02);
+              width: 110px;
+              min-height: 90px;
+              font-size: 20px;
+              color: #00CCF2;
+            }
+            .item_content {
+              flex: 1;
+              word-break: break-all;
+              padding: 9px;
+            }
+          }
+          .line {
+            width: 100%;
+            height: 2px;
+            background-image: linear-gradient(
+              to right,
+              #00CCF2 0%,
+              #00CCF2 50%,
+              transparent 50%
+            );
+            background-size: 18px 100%;
+            background-repeat: repeat-x;
+          }
+        }
+      }
+    }
+  }
+  </style>
+

xiuosiot-frontend/src/views/terminal/OTA/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="app-container" />
+</template>