submit

src/api/camera.js

@@ -0,0 +1,41 @@
+
+import request from '@/utils/request'
+// 获取所有运矿管理系统摄像头
+export function getCamera(params) {
+  return request({
+    url: '/trans/camerainfo/list',
+    params
+  })
+}
+// 分页获取运矿管理系统摄像头
+export function getCameraByPage(params) {
+  return request({
+    url: '/trans/camerainfo/page',
+    params
+  })
+}
+// 增加
+export function createCamera(data) {
+  return request({
+    url: '/trans/camerainfo/add',
+    method: 'POST',
+    data
+  })
+}
+
+// 删除
+export function delCamera(transCameraId) {
+  return request({
+    url: `/trans/camerainfo/delete/${transCameraId}`,
+    method: 'DELETE'
+  })
+}
+
+// 修改
+export function updateCamera(data) {
+  return request({
+    url: '/trans/camerainfo/update',
+    method: 'PUT',
+    data
+  })
+}

src/api/goaf/check.js

@@ -1,81 +0,0 @@
-
-import request from '@/utils/request'
-
-// 获取所有检查表及其内容
-export function getChecklist(params) {
-  return request({
-    url: '/goaf/goafChecklist/list',
-    params
-  })
-}
-// 分页获取所有检查表及其内容
-export function getChecklistByPage(params) {
-  return request({
-    url: '/goaf/goafChecklist/page',
-    params
-  })
-}
-
-// 获取指定的检查表及其内容
-export function getChecklistById(goafchecklistId) {
-  return request({
-    url: `/goaf/goafChecklist/${goafchecklistId}`
-  })
-}
-// 增加检查表及其内容
-export function createChecklist(data) {
-  return request({
-    url: '/goaf/goafChecklist/add',
-    method: 'POST',
-    data
-  })
-}
-// 更新
-export function updateChecklist(data) {
-  return request({
-    url: '/goaf/goafChecklist/update',
-    method: 'PUT',
-    data
-  })
-}
-
-// 删除指定检查表
-export function deleteChecklistById(goafchecklistId) {
-  return request({
-    url: `/goaf/goafChecklist/deletechecklist/${goafchecklistId}`,
-    method: 'DELETE'
-  })
-}
-// .删除指定检查表的某项内容
-export function deleteChecklistItemById(goafchecklistitemid) {
-  return request({
-    url: `/goaf/goafChecklist/deletecheckitemlist/${goafchecklistitemid}`,
-    method: 'DELETE'
-  })
-}
-
-// 增加检查表及其内容
-export function createChecklistItem(data) {
-  return request({
-    url: '/goaf/goafChecklist/add',
-    method: 'POST',
-    data
-  })
-}
-// 更新
-export function updateChecklistItem(data) {
-  return request({
-    url: '/goaf/goafChecklist/update',
-    method: 'PUT',
-    data
-  })
-}
-
-// 统计接口
-export function goaftaskstatis(data) {
-  return request({
-    url: '/goaf/goaftaskstatis',
-    method: 'GET',
-    data
-  })
-}

src/api/goaf/dangerApi.js

@@ -1,94 +0,0 @@
-import request from '@/utils/request'
-
-/**
- * 获取Danger列表
- * @param data
- * @returns
- */
-export function getDangerByList(data) {
-  return request({
-    url: '/goaf/goafhdanger/list',
-    method: 'GET',
-    params: data
-  })
-}
-
-/**
- * 获取Danger分页
- * @param data
- * @returns
- */
-export function getDangerByPage(data) {
-  return request({
-    url: '/goaf/goafhdanger/page',
-    method: 'GET',
-    params: data
-  })
-}
-
-/**
- * 根据Id获取Danger
- * @param dangerId
- * @returns
- */
-export function getDangerById(dangerId) {
-  return request({
-    url: `/goaf/goafhdanger/${dangerId}`,
-    method: 'GET'
-  })
-}
-// export function getDangerById(dangerId) {
-//   return request({
-//     url: `/ent/danger/${dangerId}`,
-//     method: 'GET'
-//   })
-// }
-/**
- * 删除Danger
- * @param dangerId
- * @returns
- */
-export function deleteDangerById(dangerId) {
-  return request({
-    url: `goaf/goafhdanger/delete/${dangerId}`,
-    method: 'DELETE'
-  })
-}
-
-/**
- * 处理Danger
- * @param data
- * @returns
- */
-export function handleDanger(data) {
-  return request({
-    url: `/goaf/goafhdanger/add`,
-    method: 'POST',
-    data
-  })
-}
-/**
- * 修改Danger
- * @param dangerId
- * @returns
- */
-export function updateDanger(data) {
-  return request({
-    url: `/goaf/goafhdanger/update`,
-    method: 'PUT',
-    data
-  })
-}
-
-/**
- * 修改Danger
- * @param dangerId
- * @returns
- */
-export function goafhdangerstatis(data) {
-  return request({
-    url: "/goaf/goafhdangerstatis",
-    method: 'get',
-    params: data
-  })
-}

src/api/goaf/info.js

@@ -1,49 +0,0 @@
-
-import request from '@/utils/request'
-
-// 获取所有采空区信息
-export function getGoafBaseInfo(params) {
-  return request({
-    url: '/goaf/goafbaseinfo/list',
-    params
-  })
-}
-// 获取所有采空区信息分页
-export function getGoafBaseInfoByPage(params) {
-  return request({
-    url: '/goaf/goafbaseinfo/page',
-    params
-  })
-}
-
-// 根据采空区id获取信息
-export function getGoafInfoById(id) {
-  return request({
-    url: `/goaf/goafbaseinfo/${id}`
-  })
-}
-// 新增
-export function createGoaf(data) {
-  return request({
-    url: '/goaf/goafbaseinfo/add',
-    method: 'POST',
-    data
-  })
-}
-// 更新
-export function updateGoaf(data) {
-  return request({
-    url: '/goaf/goafbaseinfo/update',
-    method: 'PUT',
-    data
-  })
-}
-
-// 删除
-export function delGoaf(goafId) {
-  return request({
-    url: `/goaf/goafbaseinfo/delete/${goafId}`,
-    method: 'DELETE'
-  })
-}
-

src/api/goaf/layer.js

@@ -1,48 +0,0 @@
-
-import request from '@/utils/request'
-
-// 获取指定地图上的所有采空区坐标信息
-export function getMapLayer(params) {
-  return request({
-    url: '/goaf/goafmapflayer/list',
-    params
-  })
-}
-// 分页获取指定地图上的所有采空区坐标信息
-export function getMapLayerByPage(params) {
-  return request({
-    url: '/goaf/goafmapflayer/page',
-    params
-  })
-}
-// 根据采空区id获取坐标信息
-export function getMapLayerById(goaflayerId) {
-  return request({
-    url: `/goaf/goafmapflayer/${goaflayerId}`
-  })
-}
-// 增加
-export function createMapLayer(data) {
-  return request({
-    url: '/goaf/goafmapflayer/add',
-    method: 'POST',
-    data
-  })
-}
-
-// 删除
-export function delMapLayer(goaflayerId, mapId, layerId) {
-  return request({
-    url: `/goaf/goafmapflayer/delete/${goaflayerId}/${mapId}/${layerId}`
-  })
-}
-
-// 修改
-export function updateMapLayer(data) {
-  return request({
-    url: '/goaf/goafmapflayer/update',
-    method: 'PUT',
-    data
-  })
-}
-

src/api/goaf/sensor.js

@@ -1,91 +0,0 @@
-
-import request from '@/utils/request'
-// 获取所有传感器
-export function getSensor(params) {
-  return request({
-    url: '/goaf/goafdevinfo/list',
-    params
-  })
-}
-// 分页获取传感器
-export function getSensorByPage(params) {
-  return request({
-    url: '/goaf/goafdevinfo/devreportdatapage',
-    params
-  })
-}
-// 增加
-export function createSensor(data) {
-  return request({
-    url: '/goaf/goafdevinfo/add',
-    method: 'POST',
-    data
-  })
-}
-
-// 删除
-export function delSensor(goafDevId) {
-  return request({
-    url: `/goaf/goafdevinfo/delete/${goafDevId}`
-  })
-}
-
-// 修改
-export function updateSensor(data) {
-  return request({
-    url: '/goaf/goafdevinfo/update',
-    method: 'PUT',
-    data
-  })
-}
-
-/**设备统计 */
-export function goafdevstatis(data) {
-  return request({
-    url: '/goaf/goafdevinfo/goafdevstatis',
-    method: 'GET',
-    data
-  })
-}
-/**传感器统计 */
-export function sensordatatatis(data) {
-  return request({
-    url: '/goaf/sensordata/sensordatatatis',
-    method: 'GET',
-    data
-  })
-}
-
-// 获取所有采空区摄像头告警数量
-export function goafCameraAlarmNumber(params) {
-  return request({
-    url: '/goaf/goafcameraalarm/goafdevstatis',
-    method: 'GET',
-    params
-  })
-}
-// 获取所有采空区摄像头告警信息
-export function goafCameraAlarm(params) {
-  return request({
-    url: '/goaf/goafcameraalarm/list',
-    method: 'GET',
-    params
-  })
-}
-// 分页获取所有采空区摄像头告警信息
-export function goafCameraAlarmByPage(params) {
-  return request({
-    url: '/goaf/goafcameraalarm/page',
-    method: 'GET',
-    params
-  })
-}
-// 处理
-export function goafCameraAlarmHandle(data) {
-  return request({
-    url: '/goaf/goafcameraalarm/update',
-    method: 'PUT',
-    data
-  })
-}
-

src/api/goaf/sensorCatApi.js

@@ -1,36 +0,0 @@
-
-import request from '@/utils/request'
-
-// 获取所有传感器类型
-export function getSensorCat(params) {
-  return request({
-    url: '/goaf/sensortypecfg/list',
-    params
-  })
-}
-
-// 增加传感器类型
-export function createSensorCat(data) {
-  return request({
-    url: '/goaf/sensortypecfg/add',
-    method: 'POST',
-    data
-  })
-}
-// 更新
-export function updateSensorCat(data) {
-  return request({
-    url: 'goaf/goafbaseinfo/update',
-    method: 'PUT',
-    data
-  })
-}
-
-// 删除指定检查表的某项内容
-export function deleteSensorCatById(goafId) {
-  return request({
-    url: `/goaf/goafbaseinfo/delete/${goafId}`,
-    method: 'DELETE'
-  })
-}
-

src/api/goaf/sensordata.js

@@ -1,15 +0,0 @@
-import request from '@/utils/request'
-// 获取所有传感器
-export function getSensorData(params) {
-  return request({
-    url: '/goaf/sensordata/list',
-    params
-  })
-}
-// 分页获取传感器
-export function getSensorDataByPage(params) {
-  return request({
-    url: '/goaf/goafhdanger/page',
-    params
-  })
-}

src/api/goaf/task.js

@@ -1,59 +0,0 @@
-
-import request from '@/utils/request'
-// 获取任务列表
-export function goaftaskList(params) {
-  return request({
-    url: `/goaf/goaftask/list`,
-    method: 'GET',
-    params
-  })
-}
-export function goafTodaytaskList(params) {
-  return request({
-    url: "/goaf/goafcheckRecord/list",
-    method: 'GET',
-    params
-  })
-}
-
-// 分页获取任务列表
-export function getCheckTaskByPage(params) {
-  return request({
-    url: '/goaf/goaftask/page',
-    method: 'GET',
-    params
-  })
-}
-
-// 新增
-export function createCheckTask(data) {
-  return request({
-    url: '/goaf/goaftask/add',
-    method: 'POST',
-    data
-  })
-}
-// 更新
-export function updateCheckTask(data) {
-  return request({
-    url: '/goaf/goafGoafcheckdef/update',
-    method: 'PUT',
-    data
-  })
-}
-// 删除
-export function deleteCheckTaskById(taskId) {
-  return request({
-    url: `/goaf/goaftask/delete/${taskId}`,
-    method: 'DELETE'
-  })
-}
-
-// 提交任务
-export function handleCheckTask(data) {
-  return request({
-    url: '/goaf/goaftask/completed',
-    method: 'POST',
-    data
-  })
-}

src/api/trans.js

@@ -0,0 +1,35 @@
+
+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
+    })
+}

src/config/index.js

@@ -3,9 +3,9 @@ module.exports = {
     /**
     * 服务API地址
     */
-    serverUrl: 'http://113.141.93.143:1688', // 正式环境
-    devServerUrl: 'http://113.141.93.143:1688', // 开发环境
-    // devServerUrl: 'http://192.168.3.5:1688/', // 开发环境 qu
+    serverUrl: 'http://113.141.93.143:1888', // 正式环境
+    // devServerUrl: 'http://113.141.93.143:1888', // 开发环境
+    devServerUrl: 'http://192.168.3.5:1888/', // 开发环境 qu
     mqttUrl: 'ws://113.141.93.143:8894/mqtt', // mqtt地址
     /**
     * websocket 地址

src/mixins/mqtt.js

@@ -37,7 +37,7 @@ export default {
           password: 'houyaf1!'
         }  
         const ocId=this.user.ocId
-        const  subscribeList=[`topic/goaf/waring/person/${ocId}`,`topic/goaf/waring/sensor/${ocId}`,`topic/goaf/fill/scale/${ocId}`,`topic/goaf/waring/camera/${ocId}`]
+        const  subscribeList=[`topic/trans/info/note/${ocId}`]
         const client = mqtt.connect(config.mqttUrl, options)
         client.on('connect', function() {
           client.subscribe(subscribeList, function(err) {

src/views/goafCameraAlarm/Model.vue

@@ -1,37 +0,0 @@
-<template>
-    <el-dialog
-        v-model="dialogVisible"
-        title="处理入侵预警"
-        width="40%"
-    >
-        <template #footer>
-            <span class="dialog-footer">
-                <el-button @click="dialogVisible = false">取消</el-button>
-                <el-button type="primary" @click="dialogVisible = false">
-                提交
-                </el-button>
-            </span>
-        </template>
-    </el-dialog>   
-    
-</template>
-<script>
-import { goafCameraAlarmHandle} from '@/api/goaf/sensor'
-    export default {
-        name:"goafCameraAlarmModal",
-        data(){
-            return{
-                dialogVisible:false,
-                viewData:{
-
-                }
-            }
-        },
-        methods:{
-            showEditModal(data){
-                this.viewData=data
-                this.dialogVisible=true
-            }
-        }
-    }
-</script>

src/views/goafCameraAlarm/index.vue

@@ -7,57 +7,59 @@
             row-class-name="CustomRowClassName"
         >
             <el-table-column type="index" width="55" label="序号"  />
-            <el-table-column property="date" label="日期" min-width="180"></el-table-column>
-            <el-table-column property="carPlate" label="车牌" min-width="150"></el-table-column>
-            <el-table-column property="exitTime" label="出场时间"  min-width="200">
+            <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>
+            <el-table-column property="transLoadTime" label="装货时间"  min-width="180">
                 <template #default="scope">
-                    <p>{{scope.row.exitTime}}</p>
-                    <div class="snap-image__preview">
+                    <p>{{scope.row.transLoadTime}}</p>
+                    <div class="snap-image__preview" v-if="scope.row.transLoadTime">
                         <el-image
                             style="width: 30px; height: 30px"
-                            :src="scope.row.exitTimeSnapPicurl"
-                            :preview-src-list="[scope.row.exitTimeSnapPicurl]"
+                            :src="scope.row.transLoadPicurl"
+                            :preview-src-list="[scope.row.transLoadPicurl]"
                             preview-teleported
                             fit="cover"
                         />
-                    </div>                    
+                    </div> 
+                    <span v-else>没有装货图片</span>                   
                 </template>           
             </el-table-column>
-            <el-table-column property="enterTime" label="入场时间"  min-width="200">
+            <el-table-column property="transUnloadTime" label="卸货时间"  min-width="180">
                 <template #default="scope">
-                    <p>{{scope.row.enterTime}}</p>
-                    <div class="snap-image__preview">
+                    <p>{{scope.row.transUnloadTime}}</p>
+                    <div class="snap-image__preview" v-if="scope.row.transUnloadPicurl">
                         <el-image
                             style="width: 30px; height: 30px"
-                            :src="scope.row.enterTimeSnapPicurl"
-                            :preview-src-list="[scope.row.enterTimeSnapPicurl]"
+                            :src="scope.row.transUnloadPicurl"
+                            :preview-src-list="[scope.row.transUnloadPicurl]"
                             preview-teleported
                             fit="cover"
                         />
-                    </div>                    
+                    </div>   
+                    <span v-else>没有卸货图片</span>                 
                 </template>           
             </el-table-column>
-            <el-table-column property="timeDifference" label="时差（分钟）" width="180"></el-table-column>
-            <el-table-column property="result" label="结论" width="100" />
+            <el-table-column property="transTimeInterval" label="时差（分钟）"></el-table-column>
+            <el-table-column property="transLoadWeight" label="载货重量（分钟）" ></el-table-column>
+            <el-table-column property="transUnloadWeight" label="卸货重量（吨）"></el-table-column>
+            <el-table-column property="transWeightDifference" label="载物差（吨）"></el-table-column>
+            <el-table-column property="transEvaluate" label="结论" width="100" />
         </el-table>
         <div class="el-pagination-wrap">
             <el-pagination small layout="prev, pager, next" 
             :total="total"
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange" />
-        </div>   
-        <handle-model ref="handle-model"></handle-model>     
+        </div>    
     </div>
 </template>
 <script>
-import {ElMessage} from 'element-plus'
-import { NumConvertLM ,parseTime,getTime} from '@/utils'
-import HandleModel from './Model.vue'
+import { parseTime} from '@/utils'
+import {getAllinfoByPage} from '@/api/trans'
     export default {
         name:"goafCameraAlarm",
-        components:{
-            HandleModel
-        },
         data(){
             return{
                 conditions: {
@@ -72,23 +74,14 @@ import HandleModel from './Model.vue'
             this.getData()
         },
         methods:{
-            NumConvertLM,
+            parseTime,
             getData(){
-                let dataList=[]
-                for(let i=0;i<6;i++){
-                    dataList.push({
-                        date:parseTime(new Date()),
-                        carPlate:"陕A12345",
-                        exitTime:getTime(),
-                        enterTime:getTime(0.5),
-                        exitTimeSnapPicurl:'http://113.141.93.143:9000/file/20236161224471948394.jpg',
-                        enterTimeSnapPicurl:'http://113.141.93.143:9000/file/20236161224471948394.jpg',
-                        timeDifference:40,
-                        result:i%2===0?'正常':'异常',
-                        
-                    })
-                }
-                this.dataList=dataList
+                getAllinfoByPage(this.conditions).then((resp)=>{
+                    const {data,total}=resp
+                    this.total=total
+                    this.dataList=data
+                })
+                
             },
             handleSizeChange(limit){
                 this.conditions.limit=limit

src/views/home/components/capture.vue

@@ -34,32 +34,32 @@ export default {
     methods:{
         iframeLoaded(){
             let item=this.data;
-            if(this.isNull(item.goafDevSocketAddr)){
+            if(this.isNull(item.transWeightCameraSocketAddr)){
                 console.error('未配置推流地址')
                 return
             }
-            if(this.isNull(item.goafDevIp)){
+            if(this.isNull(item.transWeightCameraIp)){
                 console.error('未配置设备IP')
                 return
             }    
-            if(this.isNull(item.goafDevPort)){
+            if(this.isNull(item.transWeightCameraPort)){
                 console.error('未配置设备端口')
                 return
             }
-            if(this.isNull(item.goafDevAccount)){
+            if(this.isNull(item.transWeightCameraAccount)){
                 console.error('未配置设备账号')
                 return
             }      
-            if(this.isNull(item.goafDevPwd)){
+            if(this.isNull(item.transWeightCameraPwd)){
                 console.error('未配置设备密码')
                 return
             }               
             this.loadData({
-                streamServeUrl:item.goafDevSocketAddr,
-                szIP: item.goafDevIp,    // protocol ip
-                szPort: item.goafDevPort,            // protocol port
-                szUsername:item.goafDevAccount,     // device username
-                szPassword: item.goafDevPwd, // device password        
+                streamServeUrl:item.transWeightCameraSocketAddr,
+                szIP: item.transWeightCameraIp,    // protocol ip
+                szPort: item.transWeightCameraPort,            // protocol port
+                szUsername:item.transWeightCameraAccount,     // device username
+                szPassword: item.transWeightCameraPwd, // device password        
             })
         },
         loadData({

src/views/home/components/carPlateInfo.vue

@@ -1,140 +1,68 @@
 <template>
     <div class="item carPlateInfo">
         <div class="title">
-            <span class="name">车牌信息</span>
+            <span class="name">装货信息</span>
             <span class="detail" @click="linkTo">详情>></span>    
         </div>
         <div class="container">
-            <div class="carplate-item" v-for=" item in 10">
+            <div class="carplate-item" v-for=" item in items">
                 <div class="carplate-image__preview">
                     <div class="carplate-image-item">
                         <el-image
-                            style="width: 100%; height: 150px"
-                            :src="goafSnapPicurl"
+                            style="width: 100%; height: 180px"
+                            :src="item.transLoadPicurl"
                             :zoom-rate="1.2"
-                            :preview-src-list="[goafSnapPicurl]"
+                            :preview-src-list="[item.transLoadPicurl]"
                             :initial-index="4"
-                            fit="cover"
-                        />     
-                        <p>入场时间：{{parseTime(new Date())}}</p>           
-                    </div>
-                    <div class="carplate-image-item">
-                        <el-image
-                            style="width: 100%; height: 150px"
-                            :src="goafSnapPicurl"
-                            :zoom-rate="1.2"
-                            :preview-src-list="[goafSnapPicurl]"
-                            :initial-index="4"
-                            fit="cover"
-                        />     
-                        <p>出场时间：{{parseTime(new Date())}}</p>           
+                        />           
                     </div>
                 </div>   
-                <div class="carplateDiv">{{ carPlate }}</div>              
+                <div class="bottom">
+                    <div class="carplateDiv">{{ item.transLicense }}</div>    
+                    <span class="time">{{parseTime(item.transLoadTime)||parseTime(new Date())}}</span>             
+                </div>            
             </div>        
         </div>
-        <div class="video-dialog" v-if="videoDialogVisible">
-            <div class="video-dialog-container">
-                    <div class="header">
-                        <div class="name">
-                            <span>区域入侵预警</span>
-                        </div>
-                        <div class="close" @click="videoDialogVisible=false"><el-icon><Close /></el-icon></div>
-                    </div>
-                    <div class="demo-image__preview" v-if="capturePhotos.length>0">
-                        <el-image
-                            style="width: 100px; height: 100px"
-                            :src="capturePhotos[0]"
-                            :zoom-rate="1.2"
-                            :preview-src-list="capturePhotos"
-                            :initial-index="4"
-                            fit="cover"
-                        />
-                    </div> 
-                    <HkwsVideo ref="HkwsVideo"></HkwsVideo>              
-            </div>         
-        </div> 
     </div>
 </template>
     <script>
-     import { goafCameraAlarmNumber} from '@/api/goaf/sensor'
-     import { NumConvertLM,parseTime} from '@/utils'
-     import HkwsVideo from '@/components/HkwsVideo/iframe.vue'
+    import { NumConvertLM,parseTime} from '@/utils'
+    import mixins  from '@/mixins/mqtt.js'
+    import {Uint8ArrayToString} from'@/utils'
+    import {getTransList} from '@/api/trans'
       export default {
-        name:"carPlateInfo",
-        components:{
-            HkwsVideo
-        },        
+        name:"carPlateInfo",      
         data(){
             return{
                 videoDialogVisible:false,
-                carPlate:"",
-                goafSnapPicurl:"",
-                capturePhotos:[]                            
+                items:[]                           
             }
         },
+        mixins:[mixins],
         created(){
             this.reload()
-        },        
+            this.init()
+        },   
         methods:{
             NumConvertLM,
             parseTime,
+            init(){
+                this.initMqtt({
+                    mqttResponse:this.mqttResponse
+                })  
+            } ,             
             reload(){      
-                this.carPlate="陕A12345"
-                this.goafSnapPicurl="http://113.141.93.143:9000/file/20236161224471948394.jpg"               
+                getTransList().then((resp)=>{
+                    const {data}= resp
+                    this.items=data
+                })           
             },   
-            showWarnModel(item){
-                this.videoDialogVisible=true
-                if(item){
-                    let warn_info=JSON.parse(JSON.stringify(item))
-                    this.warnInfo=warn_info
-                    this.warnInfo.fileUrl=warn_info.goafSnapPicurl
-                }
-                this.capturePhotos=[this.warnInfo.fileUrl]
-                let warnInfo=item?item:this.warnInfo
-                let state=true
-                if(this.isNull(warnInfo.goafDevSocketAddr)){
-                    state="未配置推流地址"
-                    console.error('未配置推流地址')
-                    return
-                }
-                if(this.isNull(this.warnInfo.goafDevIp)){
-                    state="未配置设备IP"
-                    console.error(state)
-                    return
-                }    
-                if(this.isNull(this.warnInfo.goafDevPort)){
-                    state="未配置设备端口"
-                    console.error(state)
-                    return
-                }
-                if(this.isNull(this.warnInfo.goafDevAccount)){
-                    state="未配置设备账号"
-                    console.error(state)
-                    return
-                }      
-                if(this.isNull(this.warnInfo.goafDevPwd)){
-                    state="未配置设备密码"
-                    console.error(state)
-                    return
-                }                 
-                this.$nextTick(()=>{
-                    this.$refs.HkwsVideo.loadData({
-                        streamServeUrl:this.warnInfo.goafDevSocketAddr,
-                        szIP: this.warnInfo.goafDevIp,    // protocol ip
-                        szPort: this.warnInfo.goafDevPort,            // protocol port
-                        szUsername:this.warnInfo.goafDevAccount,     // device username
-                        szPassword: this.warnInfo.goafDevPwd, // device password       
-                    })
-                })
-            }, 
-            // 获取所有采空区摄像头告警数量  
-            goafCameraAlarmNumber(){
-                goafCameraAlarmNumber({
-                    goafAlarmStatus:0
-                }).then((res)=>{
-                    this.total=res.data                                   
-                })
+            mqttResponse(topic,message){
+                this.reload()
+                // if(!message.includes('{')){
+                //     return
+                // }
+                // let data=message?JSON.parse(Uint8ArrayToString(message)):''
             },
             linkTo(){
                 this.$router.push({
@@ -166,7 +94,7 @@
                         justify-content: space-between;
                         align-items: center;
                         .carplate-image-item{
-                            width: 50%;
+                            width: 100%;
                             box-sizing: border-box;
                             padding-right: 5px;
                             &:nth-child(2){
@@ -180,23 +108,33 @@
                             }
                         }
                     }
-                    .carplateDiv{
-                        width: 50%;
-                        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)
-                        
-                    } 
+                    .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;
+                        }
+                    }
                 }               
         }
     }

src/views/home/index.vue

@@ -1,18 +1,17 @@
 <template>
 <div class="home-view">
     <div class="side-left">
-        <capture v-for="(capture,index) in captures" :title="formateTitle(capture)" :data="capture" :key="index" />
+        <capture v-for="(capture,index) in captures" :title="capture.transCameraLocation" :data="capture" :key="index" />
     </div>
     <div class="side-right">
-        <carPlate-info ref="sensor-info-statistics" />         
+        <carPlate-info ref="camera-info-statistics" />         
     </div>
 </div>
 </template>
 <script>
 import { useStore } from '@/store/modules/user'
 const store=useStore()
-import { NumConvertLM } from '@/utils'
-import { getSensor } from '@/api/goaf/sensor'
+import { getCameraByPage } from '@/api/camera'
 import {   
     capture,
     carPlateInfo,
@@ -21,11 +20,15 @@ import {
     name:'Home',
     components:{
         capture,
-        carPlateInfo,
+        carPlateInfo
     },
     data(){
         return{
             captures:[],
+            conditions:{
+                page: 1,
+                limit: 4            
+            }            
         }
     },
     created(){
@@ -35,14 +38,10 @@ import {
         init(){
             this.initCapture() 
         },
-        formateTitle(item){
-            return `${NumConvertLM(item.goafOrebelt)}-${item.goafOrebody}-${item.goafOreheight}-${item.goafName}`
-        },
         initCapture(){
-            getSensor(this.conditions).then((resp) => {
+            getCameraByPage(this.conditions).then((resp) => {
                 const { data } = resp
-                const dataList = data.filter((item) => item.goafDevTypename.includes('摄像头'))
-                this.captures = dataList
+                this.captures = data
             })
         },
         saveUserInfo(){

vue.config.js

@@ -16,6 +16,7 @@ module.exports = defineConfig({
   },
   devServer:{
     open:true,
+    port:1890
   },
   lintOnSave:false
 })