大屏整合

src/api/openApi.js

@@ -1,68 +0,0 @@
-import request from '@/utils/request'
-
-/**
- * 扫码请求
- * @param ocId   单位ID
- * @param qrCode 二维码
- * @returns
- */
-export function getByQr(ocId, qrCode) {
-  return request({
-    url: `/qr/request/${ocId}/${qrCode}`,
-    method: 'GET'
-  })
-}
-
-/**
- * WX登陆
- * @param jsCode 二维码
- * @returns
- */
-export function wxLogin(jsCode) {
-  return request({
-    url: `/wx/login/${jsCode}`,
-    method: 'GET'
-  })
-}
-
-/**
- * 解密WX用户数据
- * @param data 小程序请求返回的加密数据
- * @returns
- */
-export function wxDecryptUserInfo(data) {
-  return request({
-    url: `/wx/userInfo/decrypt`,
-    method: 'POST',
-    data
-  })
-}
-
-/**
- * 扫码请求checklist清单
- * @param ocId   单位ID
- * @param checklistId 清单ID
- * @returns
- */
-export function getChecklistByQr(ocId, checklistId) {
-  return request({
-    url: `/qr/request/checklist/${ocId}/${checklistId}`,
-    method: 'GET'
-  })
-}
-
-/**
- * 保存checklist记录
- * @param data
- * @returns
- */
-export function createChecklistRecord(data) {
-  return request({
-    url: `/qr/checklist/record`,
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json;charset=UTF-8'
-    },
-    data
-  })
-}

src/api/trans.js

@@ -0,0 +1,42 @@
+
+import request from '@/utils/request'
+// 获取运矿装货信息
+export function getTransList(params) {
+  return request({
+    url: '/trans/loadinfo/list',
+    params
+  })
+}
+// 获取运矿装货信息
+export function getTransByCarPlate(carPlate) {
+  return request({
+    url: `/trans/loadinfo/${carPlate}`
+  })
+}
+// 分页获取运矿装货信息
+export function getTransByPage(params) {
+  return request({
+    url: '/trans/camerainfo/page',
+    params
+  })
+}
+// 获取运矿装卸货信息
+export function getAllinfoist() {
+  return request({
+    url: '/trans/allinfo/list'
+  })
+}
+// 分页获取矿装卸货信息
+export function getAllinfoByPage(params) {
+  return request({
+    url: '/trans/allinfo/page',
+    params
+  })
+}
+// 分页获取矿装卸货识别异常信息
+export function getAbnormarlinfoByPage(params) {
+  return request({
+    url: '/trans/abnormarlinfo/page',
+    params
+  })
+}

src/layout/components/Navbar.vue

@@ -80,10 +80,10 @@ export default {
   data() {
     return {
       logo: require('@/assets/images/logo/logo.png'),
-      sideMenuTabIndex: 0,
+      sideMenuTabIndex: 1,
       sideMenuTabList: [
-        { name: '系统管理', icon: require('@/assets/images/Navbar/sys.png'), iconSelectEd: require('@/assets/images/Navbar/sys_selected.png'), path: '/aqpt/account', permit: 'aqpt_system', id: 1 },
-        { name: '数字全景', icon: require('@/assets/images/Navbar/bigscreen.png'), iconSelectEd: require('@/assets/images/Navbar/bigscreen_selected.png'), href: true, permit: 'aqpt_panorama', id: 2 }
+        { name: '系统管理', icon: require('@/assets/images/Navbar/sys.png'), iconSelectEd: require('@/assets/images/Navbar/sys_selected.png'), path: '/aqpt/setting/camera', permit: 'aqpt_system', id: 1 },
+        { name: '数字全景', icon: require('@/assets/images/Navbar/bigscreen.png'), iconSelectEd: require('@/assets/images/Navbar/bigscreen_selected.png'), path: '/bigScreen/index', permit: 'aqpt_panorama', id: 2 }
       ]
     }
   },
@@ -129,9 +129,7 @@ export default {
       if (this.isNotNull(localStorage.getItem('tabIndex'))) {
         index = parseFloat(localStorage.getItem('tabIndex'))
       }
-      this.sideTabChange(index, {
-        path: this.$route.fullPath
-      })
+      this.sideTabChange(index, this.sideMenuTabList[0])
     },
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')

src/mixins/mqtt.js

@@ -0,0 +1,70 @@
+
+import { mqttUrl } from '@/settings'
+// import { getToken } from '@/utils'
+import * as mqtt from 'mqtt/dist/mqtt.min'
+import { mapGetters } from 'vuex'
+export default {
+  destroyed() {
+    if (this.client.connected) {
+      try {
+        this.client.end(false, () => {
+          console.log('Successfully disconnected!')
+        })
+      } catch (error) {
+        console.log('Disconnect failed', error.toString())
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'userData'
+    ])
+  },
+  methods: {
+    initMqtt(
+      params = {
+        mqttResponse: () => {}
+      }
+    ) {
+      // eslint-disable-next-line no-useless-catch
+      try {
+        // eslint-disable-next-line no-unused-vars
+        const self = this
+        const options = {
+          clean: true,
+          connectTimeout: 4000,
+          clientId: new Date().getTime(),
+          username: 'admin',
+          password: 'houyaf1!'
+        }
+        const ocId = this.userData.ocId
+        const subscribeList = [`topic/trans/info/note/${ocId}`]
+        const client = mqtt.connect(mqttUrl, options)
+        client.on('connect', function() {
+          client.subscribe(subscribeList, function(err) {
+            if (!err) {
+              client.publish('topic/1', ' 订阅成功')
+            } else {
+              client.publish('topic/1', `订阅成功 ${err}`)
+            }
+          })
+        })
+        client.on('message', function(topic, message) {
+          if (params.mqttResponse)params.mqttResponse(topic, message)
+        })
+        client.on('reconnect', (error) => {
+          console.log('正在重连:', error)
+        })
+        client.on('error', (error) => {
+          console.log('连接失败:', error)
+        })
+        client.on('offline', function() {
+          console.log('offline')
+        })
+        this.client = client
+      } catch (err) {
+        throw err
+      }
+    }
+  }
+}

src/router/modules/aqpt.js

@@ -5,10 +5,31 @@ const aqptRouter = [
     path: '/',
     component: Layout,
     name: 'AqptPanorama',
-    redirect: '/aqpt/setting',
+    redirect: '/bigScreen/index',
     hidden: true
   },
   {
+    path: '/bigScreen',
+    name: 'bigScreen',
+    hidden: true,
+    component: () => import('@/views/bigScreen'),
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/bigScreen/home'),
+        name: 'bigScreen_index',
+        meta: { title: '大屏', noCache: true, permit: 'aqpt_ent_profile' }
+      },
+      {
+        path: '/goafcameraAlarm',
+        name: 'bigScreen_goafcameraAlarm',
+        hidden: true,
+        meta: { title: '详情', noCache: true, permit: 'aqpt_ent_profile' },
+        component: () => import('@/views/bigScreen/goafCameraAlarm')
+      }
+    ]
+  },
+  {
     path: '/aqpt',
     component: Layout,
     redirect: '/aqpt/profile',

src/views/bigScreen/components/Header.vue

@@ -0,0 +1,80 @@
+<template>
+  <div id="app-header">
+    <span class="title">运矿管理系统</span>
+    <div class="time">{{ time }}</div>
+    <div class="user"><i class="el-icon-user" /><span class="welcome">欢迎您，{{ userData.userName }}</span></div>
+  </div>
+</template>
+<script>
+import { parseTime } from '@/utils'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'AppHeader',
+  data() {
+    return {
+      time: parseTime(new Date(), '{y}.{m}.{d} {h}:{i}:{s}'),
+      timer: null
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'userData'
+    ])
+  },
+  created() {
+    this.init()
+  },
+  destroyed() {
+    if (this.timer) {
+      clearInterval(this.timer)
+    }
+  },
+  methods: {
+    init() {
+      this.timer = setInterval(() => {
+        this.getnow()
+      }, 1000)
+    },
+    getnow() {
+      this.time = parseTime(new Date(), '{y}.{m}.{d} {h}:{i}:{s}')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+#app-header{
+    height: 8.89vh;
+    background-image: url('../images/header.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    color: #fff;
+    text-align: center;
+    line-height:8vh;
+    position: relative;
+    .title{
+        font-size: 36.6px;
+        font-family: 'YouSheBiaoTiHei';
+        letter-spacing: 4px;
+    }
+    .time{
+        color: #32C5FF;
+        font-size: 18px;
+        position: absolute;
+        left: 20px;
+        bottom: -1.5vh;
+    }
+    .user{
+        color: #32C5FF;
+        font-size: 18px;
+        position: absolute;
+        right: 20px;
+        bottom: -1.5vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .welcome{
+            text-indent: 5px;
+        }
+    }
+}
+</style>

src/views/bigScreen/goafCameraAlarm/index.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="goafCameraAlarm">
+    <div class="back" @click="back" />
+    <div class="table-head">
+      <div class="tab">
+        <el-button class="tab-item" :type="tabType===0?'primary':''" @click="tabClick(0)">正常</el-button>
+        <el-button class="tab-item" :type="tabType===1?'danger':''" @click="tabClick(1)">识别异常</el-button>
+      </div>
+    </div>
+    <template v-if="tabType===0">
+      <el-table
+        ref="multipleTableRef"
+        :data="dataList"
+        style="width:100%"
+        row-class-name="CustomRowClassName"
+      >
+        <el-table-column type="index" width="55" label="序号" />
+        <el-table-column property="date" label="日期" min-width="120">
+          <template #default="scope">{{ parseTime(scope.row.transLoadTime,'{y}-{m}-{d}') }}</template>
+        </el-table-column>
+        <el-table-column property="transLicense" label="车牌" min-width="140" />
+        <el-table-column property="transLoadTime" label="装货时间" min-width="160" />
+        <el-table-column property="transLoadPicurl" label="装货抓拍图片" width="100">
+          <template #default="scope">
+            <div v-if="scope.row.transLoadPicurl" class="snap-image__preview">
+              <el-image
+                style="width: 30px; height: 30px"
+                :src="scope.row.transLoadPicurl"
+                :preview-src-list="[scope.row.transLoadPicurl]"
+                preview-teleported
+                fit="cover"
+              />
+            </div>
+            <span v-else>没有装货图片</span>
+          </template>
+        </el-table-column>
+        <el-table-column property="transUnloadTime" label="卸货时间" min-width="160" />
+        <el-table-column property="transUnloadPicurl" label="卸货抓拍图片" width="100">
+          <template #default="scope">
+            <div v-if="scope.row.transUnloadPicurl" class="snap-image__preview">
+              <el-image
+                style="width: 30px; height: 30px"
+                :src="scope.row.transUnloadPicurl"
+                :preview-src-list="[scope.row.transUnloadPicurl]"
+                preview-teleported
+                fit="cover"
+              />
+            </div>
+            <span v-else>没有卸货图片</span>
+          </template>
+        </el-table-column>
+        <el-table-column property="transTimeInterval" label="时差（分钟）" />
+        <el-table-column property="transLoadWeight" label="载货重量（分钟）" />
+        <el-table-column property="transUnloadWeight" label="卸货重量（吨）" />
+        <el-table-column property="transWeightDifference" label="载物差（吨）" />
+        <el-table-column property="transEvaluate" label="结论" width="100" />
+      </el-table>
+    </template>
+    <template v-if="tabType===1">
+      <el-table
+        :data="dataList"
+        style="width:100%"
+        row-class-name="CustomRowClassName"
+      >
+        <el-table-column type="index" width="55" label="序号" />
+        <el-table-column property="transAbnormarlLicense" label="车牌" min-width="140" />
+        <el-table-column property="transLoadTime" label="抓拍图片" min-width="180">
+          <template #default="scope">
+            <div v-if="scope.row.transAbnormarlPicurl" class="snap-image__preview">
+              <el-image
+                style="width: 30px; height: 30px"
+                :src="scope.row.transAbnormarlPicurl"
+                :preview-src-list="[scope.row.transAbnormarlPicurl]"
+                preview-teleported
+                fit="cover"
+              />
+            </div>
+            <span v-else>没有图片</span>
+          </template>
+        </el-table-column>
+        <el-table-column property="transAbnormarlTime" label="运输异常时间" min-width="120">
+          <template #default="scope">{{ parseTime(scope.row.transAbnormarlTime,'{y}-{m}-{d} {h}:{i}:{s}') }}</template>
+        </el-table-column>
+        <el-table-column property="transAbnormarlTime" label="运输类型" min-width="120">
+          <template #default="scope">{{ scope.row.transAbnormarType===0?'装货':"卸货" }}</template>
+        </el-table-column>
+      </el-table>
+    </template>
+    <div class="el-pagination-wrap">
+      <el-pagination
+        small
+        layout="prev, pager, next"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { parseTime } from '@/utils'
+import { getAllinfoByPage, getAbnormarlinfoByPage } from '@/api/trans'
+export default {
+  name: 'GoafCameraAlarm',
+  data() {
+    return {
+      tabType: 0,
+      conditions: {
+        page: 1,
+        limit: 10
+      },
+      dataList: [],
+      total: 0
+    }
+  },
+  created() {
+    this.getData()
+  },
+  methods: {
+    parseTime,
+    back() {
+      this.$router.push('/')
+    },
+    getData() {
+      if (this.tabType === 0) {
+        this.getAllinfoData()
+      } else {
+        this.getAnomalyData()
+      }
+    },
+    getAllinfoData() {
+      getAllinfoByPage(this.conditions).then((resp) => {
+        const { data, total } = resp
+        this.total = total
+        this.dataList = data
+      })
+    },
+    getAnomalyData() {
+      getAbnormarlinfoByPage(this.conditions).then((resp) => {
+        const { data, total } = resp
+        this.total = total
+        this.dataList = data
+      })
+    },
+    tabClick(type) {
+      this.tabType = type
+      this.getData()
+    },
+    handleSizeChange(limit) {
+      this.conditions.limit = limit
+      this.getData()
+    },
+    handleCurrentChange(pageNumber) {
+      this.conditions.page = pageNumber
+      this.getData()
+    }
+  }
+}
+</script>
+<style>
+.el-table .CustomRowClassName {
+  --el-table-tr-bg-color: var(--el-color-success-light-9);
+}
+</style>
+
+<style lang="scss" scoped>
+.goafCameraAlarm{
+    .el-pagination-wrap{
+        float: right;
+        margin-top: 5vh;
+        ::v-deep{
+            .el-pager li,button{
+                background-color: #00539F;
+                margin-left: 10px;
+                color: rgba(255, 255, 255, 0.75);
+                &.is-active{
+                    background-color: rgba(0, 131, 207, 1);
+                }
+            }
+        }
+    }
+}
+.back{
+    width: 85px;
+    height: 4vh;
+    position: absolute;
+    right: 0;
+    top: 0;
+    background-image: url("../images/back.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    cursor: pointer;
+}
+.table-head{
+        display: flex;
+        justify-content:space-between;
+        align-items: center;
+        padding:10px;
+        .tab{
+            .tab-item{
+                margin: 0;
+                border-radius: 0;
+            }
+        }
+    }
+.snap-image__preview{
+    padding-top: 8px;
+}
+</style>

src/views/bigScreen/home/components/capture.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="item camera">
+    <div class="title">
+      <span class="name">{{ title }}</span>
+    </div>
+    <div class="container">
+      <iframe :src="iframeSrc" frameborder="0" scrolling="no" @load="iframeLoaded" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Capture',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    data: {
+      type: Object,
+      default: () => {
+        return {
+          streamServeUrl: '', // 监控视频地址
+          szIP: '', // protocol ip
+          szPort: '', // protocol port
+          szUsername: '', // device username
+          szPassword: '' // device password
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      iframeSrc: ''
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      // this.iframeLoaded()
+    })
+  },
+  methods: {
+    iframeLoaded() {
+      const item = this.data
+      if (this.isNull(item.transWeightCameraSocketAddr)) {
+        console.error('未配置推流地址')
+        return
+      }
+      if (this.isNull(item.transWeightCameraIp)) {
+        console.error('未配置设备IP')
+        return
+      }
+      if (this.isNull(item.transWeightCameraPort)) {
+        console.error('未配置设备端口')
+        return
+      }
+      if (this.isNull(item.transWeightCameraAccount)) {
+        console.error('未配置设备账号')
+        return
+      }
+      if (this.isNull(item.transWeightCameraPwd)) {
+        console.error('未配置设备密码')
+        return
+      }
+      this.loadData({
+        streamServeUrl: item.transWeightCameraSocketAddr,
+        szIP: item.transWeightCameraIp, // protocol ip
+        szPort: item.transWeightCameraPort, // protocol port
+        szUsername: item.transWeightCameraAccount, // device username
+        szPassword: item.transWeightCameraPwd // device password
+      })
+    },
+    loadData({
+      streamServeUrl = '', // 监控视频地址
+      szIP = '', // protocol ip
+      szPort = '', // protocol port
+      szUsername = '', // device username
+      szPassword = '' // device password
+    }) {
+      this.state = true
+      this.iframeSrc = `${streamServeUrl}?name=${szUsername}&pwd=${szPassword}&ip=${szIP}&port=${szPort}`
+    },
+    isNull(val) {
+      if (val === undefined || val === 'undefined' && val === null && val === '') {
+        return true
+      }
+      return false
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.container{
+    iframe{
+        width: 100%;
+        height: 100%;
+        display: block;
+        border: 0;
+    }
+}
+</style>

src/views/bigScreen/home/components/carPlateInfo.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="item carPlateInfo">
+    <div class="title">
+      <span class="name">装货信息</span>
+      <span class="detail" @click="linkTo">详情>></span>
+    </div>
+    <div class="container">
+      <div v-for=" (item,index) in items" :key="index" class="carplate-item">
+        <div class="carplate-image__preview">
+          <div class="carplate-image-item">
+            <el-image
+              style="width: 100%; height: 180px"
+              :src="item.transLoadPicurl"
+              :zoom-rate="1.2"
+              :preview-src-list="[item.transLoadPicurl]"
+              :initial-index="4"
+            />
+          </div>
+        </div>
+        <div class="bottom">
+          <div class="carplateDiv">{{ item.transLicense }}</div>
+          <span class="time">{{ parseTime(item.transLoadTime)||parseTime(new Date()) }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { NumConvertLM, parseTime } from '@/utils'
+import mixins from '@/mixins/mqtt.js'
+import { getTransList } from '@/api/trans'
+export default {
+  name: 'CarPlateInfo',
+  mixins: [mixins],
+  data() {
+    return {
+      videoDialogVisible: false,
+      items: []
+    }
+  },
+  created() {
+    this.reload()
+    this.init()
+  },
+  methods: {
+    NumConvertLM,
+    parseTime,
+    init() {
+      this.initMqtt({
+        mqttResponse: this.mqttResponse
+      })
+    },
+    reload() {
+      getTransList().then((resp) => {
+        const { data } = resp
+        this.items = data
+      })
+    },
+    mqttResponse(topic, message) {
+      this.reload()
+    },
+    linkTo() {
+      this.$router.push({
+        path: '/goafCameraAlarm'
+      })
+    },
+    isNull(val) {
+      if (val === undefined || val === 'undefined' || val === null || val === '') {
+        return true
+      }
+      return false
+    }
+  }
+}
+</script>
+    <style lang="scss" scoped>
+    .carPlateInfo{
+        .container{
+                padding:0 10px;
+                .carplate-item{
+                    margin-bottom: 8px;
+                    padding-bottom: 5px;
+                    border-bottom: 1px solid rgba(160, 160, 238, 0.356);
+                    .carplate-image__preview{
+                        width: 100%;
+                        box-sizing: border-box;
+                        padding-bottom: 10px;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        .carplate-image-item{
+                            width: 100%;
+                            box-sizing: border-box;
+                            padding-right: 5px;
+                            &:nth-child(2){
+                                padding:0 0 0 5px;
+                            }
+                            p{
+                                color: #fff;
+                                font-size: 12px;
+                                line-height: 1;
+                                padding-top: 5px;
+                            }
+                        }
+                    }
+                    .bottom{
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        .carplateDiv{
+                            width: 40%;
+                            background-color: blue;
+                            color: #fff;
+                            height: 50px;
+                            border-radius: 2px;
+                            line-height: 50px;
+                            text-align: center;
+                            font-size: 24px;
+                            font-weight: 700;
+                            letter-spacing: 2px;
+                            box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) ,inset 0 0 3px rgba(255, 255, 255, 0.8);
+                            display: inline-block;
+                            // background-image: linear-gradient(to bottom right,blue,#fff);
+                            background-image:linear-gradient(to bottom right, #5c5cb1,blue,#5c5cb1)
+
+                        }
+                        .time{
+                            color: #fff;
+                            font-size: 18px;
+                            font-weight: 700;
+                        }
+                    }
+                }
+        }
+    }
+
+    .demo-image__preview{
+        padding:0 0  10px 20px;
+    }
+    .video-dialog{
+        position: fixed;
+        z-index: 9999;
+        left: 10px;
+        top: 0;
+        right: 10px;
+        bottom: 0;
+        background-color: rgba(222, 229, 236, 0.45);
+        .video-dialog-container{
+            width: 654px;
+            height: 644px;
+            background-color: #051933;
+            border-radius: 20px;
+            margin: 20px auto;
+        }
+        .name{
+            color: #fff;
+            font-size: 20px;
+            line-height:1 ;
+            text-indent: 20px;
+        }
+        .header{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .close{
+                height: 50px;
+                line-height: 50px;
+                display: inline-block;
+                padding: 10px 20px;
+                cursor: pointer;
+                color: #fff;
+                font-size: 36px;
+            }
+        }
+        #video{
+            display: block;
+            width: 80%;
+            max-height: 80vh;
+            box-shadow: 2px 2px 4px rgba(0,0,0,0.6);
+            margin: 10px auto;
+        }
+    }
+    </style>

src/views/bigScreen/home/components/index.js

@@ -0,0 +1,6 @@
+import capture from './capture.vue'
+import carPlateInfo from './carPlateInfo.vue'
+export {
+  capture,
+  carPlateInfo
+}

src/views/bigScreen/home/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="home-view">
+    <div class="side-left">
+      <capture v-for="(capture,index) in captures" :key="index" :title="capture.transCameraLocation" :data="capture" />
+    </div>
+    <div class="side-right">
+      <carPlate-info ref="camera-info-statistics" />
+    </div>
+  </div>
+</template>
+<script>
+import { getCameraByPage } from '@/api/camera'
+import {
+  capture,
+  carPlateInfo
+} from './components'
+export default {
+  name: 'Home',
+  components: {
+    capture,
+    carPlateInfo
+  },
+  data() {
+    return {
+      captures: [],
+      conditions: {
+        page: 1,
+        limit: 4
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.initCapture()
+    },
+    initCapture() {
+      getCameraByPage(this.conditions).then((resp) => {
+        const { data } = resp
+        this.captures = data
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+::v-deep.home-view{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    .side-left,.side-right{
+        width: calc(100% - 510px);
+        max-width: 60%;
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        flex-wrap: wrap;
+        &.side-right{
+            width: 500px;
+        }
+        &.side-left{
+            flex: 1;
+        }
+        .item{
+            &{
+                padding:10px 14px;
+                box-sizing: border-box;
+                border: 6px solid transparent;
+                height: 50%;
+                background-size: 100% 100%;
+                background-image: url(./images/home/leftbg.png);
+                background-repeat: no-repeat;
+                display: flex;
+                flex-direction: column;
+            }
+            &.camera{
+                width: 50%;
+                .container{
+                    height: 510px;
+                }
+            }
+            &.carPlateInfo{
+                height: 100%;
+                overflow-y: auto;
+                .container{
+                    flex: 1;
+                }
+            }
+            .title{
+                height: 32px;
+                background-image: url(./images/home/title.png);
+                font-family: "YouSheBiaoTiHei";
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+                color: #2affff;
+                font-size: 20px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                text-indent: 24px;
+                .detail{
+                    color: #F4C000;
+                    font-size: 18px;
+                    cursor: pointer;
+                    &:hover{
+                        text-decoration: underline;
+                    }
+                }
+            }
+            .container{
+                margin-top: 10px;
+                background-image: url(./images/home/content.png);
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+            }
+        }
+    }
+}
+</style>

src/views/bigScreen/index.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <app-header />
+    <div id="bigScreen-main">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<script>
+import appHeader from './components/Header.vue'
+export default {
+  components: {
+    appHeader
+  }
+}
+</script>
+  <style lang="scss" scoped>
+  #bigScreen-main{
+      height: 91.11vh;
+      background-image: url(./images/bg.png);
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      padding: 20px;
+      box-sizing: border-box;
+      overflow: hidden;
+      background-color: #051933;
+  }
+  </style>
+