1.重构全局页面结构，从之前每个页面独立绘制改为路由嵌套 2.全局页面样式优化，如滚动条、标题栏等

xiaoxie

2022-04-21 fb843d41c1e186b2109bfeea73509cad2b135cdc

 web_src/src/components/DeviceList.vue

@@ -1,14 +1,10 @@
<template>
   <div id="app">
      <el-container>
         <el-header>
            <uiHeader></uiHeader>
         </el-header>
         <el-main>
            <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
               <span style="font-size: 1rem; font-weight: bold;">设备列表</span>
               <div style="position: absolute; right: 1rem; top: 0.3rem;">
                  <el-button icon="el-icon-refresh-right" circle size="mini" :loading="getDeviceListLoading" @click="getDeviceList()"></el-button>
  <div id="app" style="width: 100%">
    <div class="page-header">
      <div class="page-title">设备列表</div>
      <div class="page-header-btn">
        <el-button icon="el-icon-refresh-right" circle size="mini" :loading="getDeviceListLoading"
                   @click="getDeviceList()"></el-button>
               </div>
            </div>
            <!-- <devicePlayer ref="devicePlayer"></devicePlayer> -->
@@ -57,10 +53,16 @@

               <el-table-column label="操作" width="450" align="center" fixed="right">
                  <template slot-scope="scope">
              <el-button size="mini" v-if="scope.row.online!=0" icon="el-icon-refresh" @click="refDevice(scope.row)" @mouseover="getTooltipContent(scope.row.deviceId)">刷新</el-button>
          <el-button size="mini" v-if="scope.row.online!=0" icon="el-icon-refresh" @click="refDevice(scope.row)"
                     @mouseover="getTooltipContent(scope.row.deviceId)">刷新
          </el-button>
                     <el-button-group>
                <el-button size="mini" icon="el-icon-video-camera-solid" v-bind:disabled="scope.row.online==0"  type="primary" @click="showChannelList(scope.row)">通道</el-button>
                <el-button size="mini" icon="el-icon-location" v-bind:disabled="scope.row.online==0"  type="primary" @click="showDevicePosition(scope.row)">定位</el-button>
            <el-button size="mini" icon="el-icon-video-camera-solid" v-bind:disabled="scope.row.online==0"
                       type="primary" @click="showChannelList(scope.row)">通道
            </el-button>
            <el-button size="mini" icon="el-icon-location" v-bind:disabled="scope.row.online==0" type="primary"
                       @click="showDevicePosition(scope.row)">定位
            </el-button>
                <el-button size="mini" icon="el-icon-edit" type="primary" @click="edit(scope.row)">编辑</el-button>
                <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteDevice(scope.row)">删除</el-button>
                     </el-button-group>
@@ -79,15 +81,14 @@
            </el-pagination>
        <deviceEdit ref="deviceEdit" ></deviceEdit>
        <syncChannelProgress ref="syncChannelProgress" ></syncChannelProgress>
         </el-main>
      </el-container>
   </div>
</template>

<script>
   import uiHeader from './UiHeader.vue'
import uiHeader from '../layout/UiHeader.vue'
   import deviceEdit from './dialog/deviceEdit.vue'
   import syncChannelProgress from './dialog/SyncChannelProgress.vue'

   export default {
      name: 'app',
      components: {