refactor: visualization

adjust some routes

.env

@@ -6,8 +6,6 @@ LOGGER = 'disabled'
 
 # 未开发的功能组件
 __PLACEHOLDER__ = 'disabled'
-# 设备仪表盘
-__DEVICE_DASHBARD__ = 'disabled'
 # 备份设备
 __SUB_DEVICE__ = 'disabled'
 # 设备接管

.env.xuzhou

@@ -1,7 +0,0 @@
-NODE_ENV = 'production'
-
-ENV = 'xuzhou'
-
-__DEVICE_DASHBARD__ = 'enabled'
-
-VUE_APP_SENSOR_ELK = 'https://msr.rondochina.com:15601/app/kibana/app/dashboards#/view/5ccd19f0-9f9d-11ec-80c5-8f1eb0dbee8e?embed=true&_g=(filters%3A!()%2CrefreshInterval%3A(pause%3A!t%2Cvalue%3A0)%2Ctime%3A(from%3Anow-24h%2Fh%2Cto%3Anow))&hide-filter-bar=true'

feature.js

@@ -23,7 +23,6 @@ module.exports = {
     __DEV__: !isProd,
     __STAGING__: isStaging,
     ...createFeature('__PLACEHOLDER__'),
-    ...createFeature('__DEVICE_DASHBARD__'),
     ...createFeature('__SUB_DEVICE__'),
     ...createFeature('__TAKEOVER__'),
     ...createFeature('__WECHAT__')

src/layout/components/Sidebar/Link.vue

@@ -32,7 +32,7 @@ export default {
       }
       if (this.item.meta.internal) {
         return {
-          to: this.item.path.replace(/internal:/, '')
+          to: this.item.path.replace(/^.*internal:/, '')
         }
       }
       return {

src/router/index.js

@@ -17,13 +17,14 @@ Vue.use(Router)
  * sub-menu only appear when route children.length >= 1
  * dev: true,                      if set true, item will not show in production
  * hidden: true,                   if set true, item will not show in the sidebar(default is false)
- * name:'router-name' ,            if it is a manual jump, it must be set!!!
- * include: ['admin'],             control the page roles (you can set multiple roles)
- * access: 'manage-profile',       control the page access
+ * name: 'router-name' ,           if it is a manual jump, it must be set!!!
+ * path: '',                       it must be set!!!
+ * access: 'role'|['role'],        control the page access
  * meta : {
  *   title: 'title',               the name show in sidebar and breadcrumb (recommend set)
- *   icon: 'svg-name'/'el-icon-x', the icon show in the sidebar
- *   cache: 'router-name'          if set, the router will be cached (only in Solo)
+ *   icon: 'svg-name'|'el-icon-x', the icon show in the sidebar
+ *   cache: 'component name'       if set, the router will be cached (only in Solo)
+ *   internal: true                if set true, path will be replaced through /^.*internal:/, e.g. internal:/a/b => /a/b
  * }
  */
 
@@ -389,17 +390,17 @@ export const asyncRoutes = [
         meta: { title: '报表导出' }
       },
       // {
-      //   path: 'internal:dashboard/v0',
+      //   path: 'internal:/v/v0',
       //   access: Access.MANAGE_TENANT,
       //   meta: { title: '大数据V0', internal: true }
       // },
       {
-        path: 'internal:dashboard/devops',
+        path: 'internal:/v/devops',
         access: Access.MANAGE_TENANT,
         meta: { title: '运维大数据', internal: true }
       },
       {
-        path: 'internal:dashboard/business',
+        path: 'internal:/v/business',
         access: Access.MANAGE_TENANT,
         meta: { title: '运营大数据', internal: true }
       }
@@ -608,22 +609,21 @@ export const asyncRoutes = [
   },
   {
     hidden: true,
-    name: 'devops',
-    path: '/d/dashboard/devops',
-    component: () => import('@/views/dashboard/v1/index')
+    name: 'v-devops',
+    path: '/v/devops',
+    component: () => import('@/views/visualization/v1/index')
   },
   {
     hidden: true,
-    name: 'business',
-    path: '/d/dashboard/business',
-    component: () => import('@/views/dashboard/v2/index')
+    name: 'v-business',
+    path: '/v/business',
+    component: () => import('@/views/visualization/v2/index')
   },
   {
-    dev: !__DEVICE_DASHBARD__,
     hidden: true,
-    name: 'device-dashboard',
-    path: '/dm/dashboard/:id',
-    component: () => import('@/views/device/detail/dashboard/index'),
+    name: 'v-device',
+    path: '/v/device/:id',
+    component: () => import('@/views/visualization/device/index'),
     props: true
   },
   // 404 page must be placed at the end !!!

src/views/device/detail/dashboard/LinkState.vue

@@ -1,684 +0,0 @@
-<template>
-  <box
-    title="全链路监测状态"
-    :fullscreen.sync="fullscreen"
-    :empty="!loaded"
-  >
-    <div
-      ref="box"
-      class="l-flex__fill l-flex--row center jcenter"
-    >
-      <div
-        v-if="loaded"
-        class="c-device-dashboard-link-state"
-        :class="{ fullscreen }"
-        :style="scaleStyle"
-      >
-        <div
-          v-for="item in items"
-          :key="item.key"
-          class="co"
-          :class="item.className"
-        >
-          <div
-            v-if="item.multiLines"
-            class="ctext"
-          >
-            <div>{{ item.label[0] }}</div>
-            <div>{{ item.label[1] }}</div>
-          </div>
-          <div
-            v-else
-            class="ctext"
-          >
-            {{ item.label }}
-          </div>
-          <device-player
-            v-if="item.key === 'led'"
-            :class="{ mini: !fullscreen }"
-            :device="device"
-            autoplay
-            retry
-          />
-        </div>
-        <div
-          v-for="line in lines"
-          :key="line.key"
-          class="line"
-          :class="line.className"
-        >
-          <svg
-            v-if="line.linked"
-            class="svg"
-          >
-            <polyline
-              class="polyline"
-              :points="line.points"
-              :style="{
-                strokeDasharray: line.length + 'px',
-                strokeDashoffset: line.length + 'px',
-                animation: line.animation,
-              }"
-            />
-            <ellipse
-              :rx="fullscreen ? 4 : 2"
-              cx="0"
-              :ry="fullscreen ? 2 : 1"
-              cy="0"
-              fill="#0AB4FF"
-            >
-              <animateMotion
-                dur="2s"
-                repeatCount="indefinite"
-                :path="line.path"
-              />
-            </ellipse>
-          </svg>
-        </div>
-      </div>
-    </div>
-  </box>
-</template>
-
-<script>
-import { ThirdPartyDevice } from '@/constant'
-import { getThirdPartyDevicesByThirdPartyDevice } from '@/api/mesh'
-import { getReceivingCard } from '@/api/external'
-import Box from './Box'
-
-const LinkItems = Object.freeze([
-  {
-    key: 'msr',
-    label: '浪潮屏媒安播云平台'
-  },
-  {
-    key: 'device',
-    label: ['浪潮超高清', '媒体播控器'],
-    multiLines: true
-  },
-  {
-    key: 'led',
-    label: 'LED大屏'
-  },
-  {
-    key: ThirdPartyDevice.GATEWAY,
-    alias: 'gateway',
-    label: '浪潮物联网关',
-    canClick: true
-  },
-  {
-    key: ThirdPartyDevice.TRAFFIC_CAMERA,
-    alias: 'traffic_camera',
-    label: '人流量监测摄像头',
-    canClick: true
-  },
-  {
-    key: ThirdPartyDevice.LED_CAMERA,
-    alias: 'led_camera',
-    label: 'LED屏监测摄像头',
-    canClick: true
-  },
-  {
-    key: ThirdPartyDevice.SENDING_CARD,
-    alias: 'sending_card',
-    label: '发送控制设备',
-    canClick: true
-  },
-  {
-    key: ThirdPartyDevice.RECEIVING_CARD,
-    alias: 'receiving_card',
-    label: '接收卡',
-    canClick: true
-  }
-])
-
-const LineFromeTo = {
-  1: ['msr', 'device'],
-  2: ['device', ThirdPartyDevice.SENDING_CARD],
-  3: [ThirdPartyDevice.SENDING_CARD, ThirdPartyDevice.RECEIVING_CARD],
-  4: ['msr', ThirdPartyDevice.GATEWAY, ThirdPartyDevice.LED_CAMERA, ThirdPartyDevice.TRAFFIC_CAMERA],
-  5: ['msr', ThirdPartyDevice.TRAFFIC_CAMERA],
-  6: ['msr', ThirdPartyDevice.LED_CAMERA],
-  7: [ThirdPartyDevice.GATEWAY, 'led'],
-  8: [ThirdPartyDevice.RECEIVING_CARD, 'led']
-}
-
-export default {
-  name: 'LinkState',
-  components: {
-    Box
-  },
-  props: {
-    device: {
-      type: Object,
-      required: true
-    }
-  },
-  data () {
-    return {
-      fullscreen: false,
-      scale: 1,
-      loading: false,
-      loaded: false,
-      linkDeviceMap: null
-    }
-  },
-  computed: {
-    scaleStyle () {
-      return this.fullscreen
-        ? null
-        : { transform: `scale(${this.scale})` }
-    },
-    online () {
-      return this.device.onlineStatus === 1
-    },
-    linkState () {
-      const map = {
-        msr: 1,
-        device: this.online ? 1 : 0,
-        led: this.online ? 1 : 0,
-        [ThirdPartyDevice.GATEWAY]: -1,
-        [ThirdPartyDevice.LED_CAMERA]: -1,
-        [ThirdPartyDevice.TRAFFIC_CAMERA]: -1,
-        [ThirdPartyDevice.SENDING_CARD]: -1,
-        [ThirdPartyDevice.RECEIVING_CARD]: -1
-      }
-      if (this.linkDeviceMap) {
-        this.linkDeviceMap.forEach(({ nodeType, instance }) => {
-          if (instance && (map[nodeType] === 1 || map[nodeType] === -1)) {
-            map[nodeType] = instance.onlineStatus === 0 ? 0 : 1
-          }
-        })
-      }
-      return map
-    },
-    items () {
-      const map = this.linkState
-      return LinkItems.map(({ key, alias, label, multiLines }) => {
-        const status = map[key]
-        return {
-          key, label, status, multiLines,
-          className: alias || key
-        }
-      })
-    },
-    lines () {
-      const map = this.fullscreen
-        ? [
-          null,
-          {
-            points: '0,4 150,4',
-            path: 'M0,4 L150,4',
-            length: 150,
-            animation: this.getAnimation(150)
-          },
-          {
-            points: '0,4 150,4',
-            path: 'M0,4 L150,4',
-            length: 150,
-            animation: this.getAnimation(150)
-          },
-          {
-            points: '0,4 150,4',
-            path: 'M0,4 L150,4',
-            length: 150,
-            animation: this.getAnimation(150)
-          },
-          {
-            points: '4,0 4,137',
-            path: 'M4,0 L4,137',
-            type: 'col',
-            length: 137,
-            animation: this.getAnimation(137)
-          },
-          {
-            points: '0,50 350,50 350,0 400,0',
-            path: 'M0,50 L350,50 L350 0 L400,0',
-            type: 'polygon',
-            length: 450,
-            animation: this.getAnimation(450)
-          },
-          {
-            points: '0,51 350,51 350,100 400,100',
-            path: 'M0,51 L350,51 L350,100 L400,100',
-            type: 'polygon',
-            length: 449,
-            animation: this.getAnimation(449)
-          },
-          {
-            points: '0,4 494,4',
-            path: 'M0,4 L494,4',
-            length: 494,
-            animation: this.getAnimation(494)
-          },
-          {
-            points: '4,0 4,78',
-            path: 'M4,0 L4,78',
-            type: 'col',
-            length: 78,
-            animation: this.getAnimation(78)
-          }
-        ]
-        : [
-          null,
-          {
-            points: '0,4 22,4',
-            path: 'M0,4 L22,4',
-            length: 22,
-            animation: this.getAnimation(22)
-          },
-          {
-            points: '0,4 22,4',
-            path: 'M0,4 L22,4',
-            length: 22,
-            animation: this.getAnimation(22)
-          },
-          {
-            points: '0,4 22,4',
-            path: 'M0,4 L22,4',
-            length: 22,
-            animation: this.getAnimation(22)
-          },
-          {
-            points: '4,0 4,95',
-            path: 'M4,0 L4,95',
-            type: 'col',
-            length: 95,
-            animation: this.getAnimation(95)
-          },
-          {
-            points: '0,18 80,18 80 0 105 0',
-            path: 'M0,18 L80,18 L80 0 L105 0',
-            type: 'polygon',
-            length: 123,
-            animation: this.getAnimation(123)
-          },
-          {
-            points: '0,19 80,19 80 36 105 36',
-            path: 'M0,19 L80,19 L80 36 L105 36',
-            type: 'polygon',
-            length: 122,
-            animation: this.getAnimation(122)
-          },
-          {
-            points: '0,4 119,4',
-            path: 'M0,4 L119,4',
-            length: 119,
-            animation: this.getAnimation(119)
-          },
-          {
-            points: '4,0 4,92',
-            path: 'M4,0 L4,92',
-            type: 'col',
-            length: 92,
-            animation: this.getAnimation(92)
-          }
-        ]
-      const state = this.linkState
-      return Object.keys(LineFromeTo).map(key => {
-        const from = LineFromeTo[key][0]
-        const to = LineFromeTo[key].slice(1)
-        const linked = state[from] === 1 && to.some(key => state[key] === 1)
-        return {
-          ...map[key],
-          linked,
-          key: `line${key}`,
-          className: [`l${key}`, map[key]?.type || '', linked ? '' : 'closed'].join(' ')
-        }
-      })
-    }
-  },
-  created () {
-    this.getThirdPartyDevicesByThirdPartyDevice()
-    this.$timer = setInterval(this.getThirdPartyDevicesByThirdPartyDevice, 10000)
-  },
-  mounted () {
-    const width = this.$refs.box.clientWidth
-    const height = this.$refs.box.clientHeight
-    this.scale = Math.min(278 / width, 244 / height)
-  },
-  beforeDestroy () {
-    clearInterval(this.$timer)
-  },
-  methods: {
-    getAnimation (length, gap, dur = 2, mode = 'linear') {
-      return `${dur}s linkLength${length} ${mode} infinite`
-    },
-    getThirdPartyDevicesByThirdPartyDevice () {
-      Promise.all([
-        getThirdPartyDevicesByThirdPartyDevice(this.targetId, [
-          ThirdPartyDevice.GATEWAY,
-          ThirdPartyDevice.RECEIVING_CARD,
-          ThirdPartyDevice.SENDING_CARD,
-          ThirdPartyDevice.LED_CAMERA,
-          ThirdPartyDevice.TRAFFIC_CAMERA
-        ], { custom: true }),
-        getReceivingCard(this.device.id, { custom: true })
-      ]).then(([{ data: nodes }, { data: receivingCard }]) => {
-        this.linkDeviceMap = [
-          ...nodes,
-          {
-            nodeType: ThirdPartyDevice.RECEIVING_CARD,
-            instance: receivingCard
-          }
-        ]
-        this.loaded = true
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@mixin getPosition($left, $top, $width, $height) {
-  left: $left;
-  top: $top;
-  width: $width;
-  height: $height;
-}
-
-.c-device-dashboard-link-state {
-  position: relative;
-  width: 278px;
-  height: 244px;
-  transform-origin: center;
-
-  .co {
-    position: absolute;
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    z-index: 1;
-  }
-
-  .line {
-    position: absolute;
-    background: #a1c9ff;
-
-    &.closed {
-      background: #d5d9e4;
-    }
-  }
-
-  .svg {
-    position: absolute;
-    top: -4px;
-    left: 0;
-    width: 100%;
-    height: 8px;
-  }
-
-  .col {
-    .svg {
-      position: absolute;
-      top: 0;
-      left: -4px;
-      width: 8px;
-      height: 100%;
-    }
-  }
-
-  .polygon {
-    .svg {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .ctext {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: absolute;
-    left: 0;
-    bottom: -20px;
-    width: 100%;
-    height: 15px;
-    color: #fff;
-    font-size: 12px;
-    line-height: 15px;
-    text-align: center;
-    white-space: nowrap;
-    transform-origin: center top;
-    transform: scale(0.8);
-  }
-
-  .msr {
-    @include getPosition(0, 0, 92px, 92px);
-    background-image: url("~@/assets/link/msr.svg");
-  }
-
-  .device {
-    @include getPosition(108px, 32px, 44px, 48px);
-    background-image: url("~@/assets/link/box_u8h.png");
-  }
-
-  .sending_card {
-    @include getPosition(176px, 32px, 44px, 48px);
-    background-image: url("~@/assets/link/sending_card.png");
-  }
-
-  .receiving_card {
-    @include getPosition(234px, 32px, 44px, 48px);
-    background-image: url("~@/assets/link/receiving_card.png");
-  }
-
-  .traffic_camera {
-    @include getPosition(141px, 107px, 40px, 40px);
-    background-image: url("~@/assets/link/camera.png");
-
-    .ctext {
-      left: 10px;
-      bottom: -10px;
-    }
-  }
-
-  .led_camera {
-    @include getPosition(141px, 145px, 40px, 40px);
-    background-image: url("~@/assets/link/camera.png");
-
-    .ctext {
-      left: -20px;
-      bottom: -10px;
-    }
-  }
-
-  .gateway {
-    @include getPosition(25px, 180px, 40px, 40px);
-    background-image: url("~@/assets/link/gateway.svg");
-  }
-
-  .led {
-    @include getPosition(182px, 168px, 96px, 54px);
-
-    .mini {
-      ::v-deep .o-video__btn {
-        width: 32px;
-        height: 32px;
-        font-size: 24px;
-      }
-    }
-  }
-
-  .l1 {
-    @include getPosition(88px, 63px, 22px, 1px);
-  }
-
-  .l2 {
-    @include getPosition(146px, 63px, 32px, 1px);
-  }
-
-  .l3 {
-    @include getPosition(214px, 63px, 22px, 1px);
-  }
-
-  .l4 {
-    @include getPosition(45px, 88px, 1px, 95px);
-  }
-
-  .l5 {
-    @include getPosition(45px, 122px, 105px, 36px);
-    clip-path: polygon(
-      0 18px,
-      80px 18px,
-      80px 0,
-      105px 0,
-      105px 1px,
-      81px 1px,
-      81px 19px,
-      0 19px
-    );
-  }
-
-  .l6 {
-    @include getPosition(45px, 122px, 105px, 36px);
-    clip-path: polygon(
-      0 19px,
-      81px 19px,
-      81px 35px,
-      105px 35px,
-      105px 36px,
-      80px 36px,
-      80px 20px,
-      0 20px
-    );
-  }
-
-  .l7 {
-    @include getPosition(63px, 206px, 119px, 1px);
-  }
-
-  .l8 {
-    @include getPosition(256px, 76px, 1px, 92px);
-  }
-
-  &.fullscreen {
-    width: 1030px;
-    height: 528px;
-
-    .ctext {
-      bottom: -30px;
-      height: 25px;
-      line-height: 25px;
-      font-size: 18px;
-      transform: none;
-    }
-
-    .msr {
-      @include getPosition(0, 0, 250px, 250px);
-    }
-
-    .device {
-      @include getPosition(389px, 118px, 90px, 90px);
-    }
-
-    .sending_card {
-      @include getPosition(622px, 118px, 90px, 90px);
-    }
-
-    .receiving_card {
-      @include getPosition(854px, 118px, 90px, 90px);
-    }
-
-    .traffic_camera {
-      @include getPosition(511px, 213px, 90px, 90px);
-
-      .ctext {
-        bottom: -20px;
-      }
-    }
-
-    .led_camera {
-      @include getPosition(511px, 308px, 90px, 90px);
-
-      .ctext {
-        bottom: -12px;
-      }
-    }
-
-    .gateway {
-      @include getPosition(80px, 377px, 90px, 90px);
-    }
-
-    .led {
-      @include getPosition(660px, 279px, 370px, 208px);
-    }
-
-    .l1 {
-      @include getPosition(243px, 177px, 150px, 1px);
-    }
-
-    .l2 {
-      @include getPosition(475px, 178px, 150px, 1px);
-    }
-
-    .l3 {
-      @include getPosition(709px, 178px, 150px, 1px);
-    }
-
-    .l4 {
-      @include getPosition(124px, 246px, 1px, 137px);
-    }
-
-    .l5 {
-      @include getPosition(125px, 238px, 400px, 100px);
-      clip-path: polygon(
-        0 50px,
-        350px 50px,
-        350px 0,
-        400px 0,
-        400px 1px,
-        351px 1px,
-        351px 51px,
-        0 51px
-      );
-    }
-
-    .l6 {
-      @include getPosition(125px, 238px, 400px, 100px);
-      clip-path: polygon(
-        0 51px,
-        351px 51px,
-        351px 99px,
-        400px 99px,
-        400px 100px,
-        350px 100px,
-        350px 52px,
-        0 52px
-      );
-    }
-
-    .l7 {
-      @include getPosition(166px, 436px, 494px, 1px);
-    }
-
-    .l8 {
-      @include getPosition(899px, 201px, 1px, 78px);
-    }
-  }
-}
-
-.polyline {
-  fill: none;
-  stroke: #0ab4ff;
-  stroke-width: 1px;
-}
-</style>
-
-<style lang="scss">
-$linkLengthArr: 22, 119, 92, 95, 122, 123, 150, 137, 450, 449, 494, 78;
-
-@each $item in $linkLengthArr {
-  @keyframes linkLength#{$item} {
-    0% {
-      stroke-dashoffset: $item + px;
-    }
-    100% {
-      stroke-dashoffset: 0px;
-    }
-  }
-}
-</style>

src/views/device/detail/index.vue

@@ -11,11 +11,6 @@
           @click="onBack"
         />
         <template v-if="device">
-          <i
-            v-if="useDashboard"
-            class="c-sibling-item near el-icon-full-screen u-font-size--xl has-active"
-            @click="onDashboard"
-          />
           <span
             class="c-sibling-item near c-detail__status u-font-size--sm"
             :class="statusType"
@@ -110,7 +105,6 @@ export default {
   },
   data () {
     return {
-      useDashboard: __DEVICE_DASHBARD__,
       loading: true,
       device: null,
       isActivated: false,
@@ -248,12 +242,6 @@ export default {
       if (this.device && screen) {
         this.$set(this.device, 'volume', screen.volume)
       }
-    },
-    onDashboard () {
-      this.$router.push({
-        name: 'device-dashboard',
-        params: { id: this.deviceId }
-      })
     }
   }
 }

src/views/device/detail/dashboard/DeviceInfo.vue → src/views/visualization/device/DeviceInfo.vue

@@ -27,11 +27,11 @@
 </template>
 
 <script>
-import { publish } from '@/utils/mqtt'
 import {
-  addListener,
-  send
-} from '../monitor'
+  publish,
+  subscribe,
+  unsubscribe
+} from '@/utils/mqtt'
 
 export default {
   props: {
@@ -64,19 +64,40 @@ export default {
       ]
     }
   },
+  computed: {
+    topic () {
+      return `${this.device.productId}/${this.device.id}`
+    }
+  },
   created () {
-    addListener('online', this.onUpdate)
+    subscribe([
+      `${this.topic}/online`,
+      `${this.topic}/offline`
+    ], this.onMessage)
+  },
+  beforeDestroy () {
+    unsubscribe([
+      `${this.topic}/online`,
+      `${this.topic}/offline`
+    ], this.onMessage)
   },
   methods: {
-    onUpdate (online) {
-      this.online = online
-      this.rebooting = false
+    onMessage (topic) {
+      const result = /^\d+\/(\d+)\/(online|offline)$/.exec(topic)
+      if (!result) {
+        return
+      }
+      const deviceId = result[1]
+      if (deviceId === this.device?.id) {
+        this.online = result[2] === 'online'
+        this.rebooting = false
+      }
     },
     onReboot () {
       if (!this.online) {
         this.$message({
           type: 'warning',
-          message: '设备未上线，请稍后再试'
+          message: '设备未上线'
         })
         return
       }
@@ -84,10 +105,19 @@ export default {
         return
       }
       this.$confirm(
-        `立即重启？`,
+        '立即重启？',
+        '操作确认',
         { type: 'warning' }
       ).then(() => {
-        send('/restart/ask').then(
+        const timestamp = `${Date.now()}`
+        publish(
+          `${this.topic}/restart/ask`,
+          JSON.stringify({
+            messageId: `restart_${timestamp}`,
+            timestamp
+          }),
+          true
+        ).then(
           () => {
             this.rebooting = true
           },
@@ -99,30 +129,6 @@ export default {
           }
         )
       })
-    },
-    sendTopic (invoke, inputs = []) {
-      publish(
-        `${this.device.productId}/${this.deviceId}/function/invoke`,
-        JSON.stringify({
-          timestamp: `${Date.now()}`,
-          function: invoke,
-          inputs
-        }),
-        true
-      ).then(
-        () => {
-          this.$message({
-            type: 'success',
-            message: '执行成功'
-          })
-        },
-        () => {
-          this.$message({
-            type: 'warning',
-            message: '正在连接，请稍后再试'
-          })
-        }
-      )
     }
   }
 }

src/views/visualization/device/LinkState.vue

@@ -0,0 +1,39 @@
+<template>
+  <box
+    title="全链路监测状态"
+    :fullscreen.sync="fullscreen"
+  >
+    <div
+      ref="box"
+      class="l-flex__fill l-flex--row center jcenter"
+    >
+      <full-link
+        :key="`${fullscreen}_link`"
+        class="l-flex__fill"
+        :device="device"
+      />
+    </div>
+  </box>
+</template>
+
+<script>
+import Box from './Box'
+
+export default {
+  name: 'LinkState',
+  components: {
+    Box
+  },
+  props: {
+    device: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+      fullscreen: false
+    }
+  }
+}
+</script>

src/views/device/detail/dashboard/Sensor.vue → src/views/visualization/device/Sensor.vue

@@ -133,8 +133,8 @@ export default {
       getSensorRecords({
         deviceId: this.deviceId,
         sensorType: this.type,
-        startTime: parseTime(now - 30000, '{y}-{m}-{d} {h}:{i}:{s}'),
-        endTime: parseTime(now, '{y}-{m}-{d} {h}:{i}:{s}')
+        startTime: now - 30000,
+        endTime: now
       }, { custom: true }).then(({ data }) => {
         this.list = this.transfromData(data)
         this.$refs.tableDialog?.getTable()?.pageTo()
@@ -159,10 +159,9 @@ export default {
     transformSensorData (data) {
       const { port, type, value, time } = data
       return {
-        port,
-        value,
-        time,
-        info: this.transformValue(type, value)
+        port, value,
+        time: parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}'),
+        info: this.transformValue(type, value, data)
       }
     },
     transformValue (type, value) {

src/views/device/detail/dashboard/index.vue → src/views/visualization/device/index.vue

@@ -83,10 +83,6 @@
 import { ThirdPartyDevice } from '@/constant'
 import { getDevice } from '@/api/device'
 import { getThirdPartyDevicesByThirdPartyDevice } from '@/api/mesh'
-import {
-  start,
-  stop
-} from '../monitor'
 import Header from './Header'
 import DeviceInfo from './DeviceInfo'
 import LinkState from './LinkState'
@@ -98,7 +94,7 @@ import Timeline from './Timeline'
 import TrafficStatistics from './TrafficStatistics'
 
 export default {
-  name: 'DeviceDashboard',
+  name: 'DeviceVisualization',
   components: {
     Header,
     DeviceInfo,
@@ -138,7 +134,6 @@ export default {
     }, 5000)
   },
   beforeDestroy () {
-    stop()
     clearInterval(this.$timer)
     window.removeEventListener('resize', this.checkScale)
   },
@@ -153,7 +148,6 @@ export default {
         ({ data }) => {
           if (data) {
             if (!this.device) {
-              start(data)
               this.getCamera()
               this.checkScale()
               window.addEventListener('resize', this.checkScale)

src/views/dashboard/v1/index.vue → src/views/visualization/v1/index.vue

@@ -339,7 +339,7 @@ export default {
     },
     onClickBusiness () {
       this.$router.push({
-        name: 'business',
+        name: 'v-business',
         params: { isFullScreen: this.$refs.Header.getFullScreen() ? '1' : '' }
       })
     }

src/views/dashboard/v2/index.vue → src/views/visualization/v2/index.vue

@@ -217,7 +217,7 @@ export default {
     },
     onClickDevops () {
       this.$router.push({
-        name: 'devops',
+        name: 'v-devops',
         params: { isFullScreen: this.$refs.Header.getFullScreen() ? '1' : '' }
       })
     }