haozq
/
lj-zhgd-htweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

施工管控

This commit is contained in:
cwchen 2024-08-16 17:52:10 +08:00
parent 1be57becd3
commit 988aa969bf
5 changed files with 338 additions and 390 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/construction/manage/hoistManage.js Normal file
View File

@ -0,0 +1,9 @@
import request from '@/utils/request'
/* 吊装预警设备列表 */
export function getDzWarnList(query) {
return request({
url: '/bracelet/consControl/getDzWarnList',
method: 'get',
params: query
})
}

BIN
src/assets/images/dz_dev.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

656
src/views/construction/manage/hoistManage/hoistManage.vue
View File

@ -1,360 +1,340 @@
<template>
<div class="hoistManage" style="width: 100%;height: 80vh;background-color: #ffffff;box-shadow: 10px 10px 5px #000000;float: left;">
<div class="one">
<div style="color: #1E3850;font-size: 14x; font-weight: 600;">吊装作业</div>
<div class="title">
<el-input v-model="keyword" placeholder="请输入关键字" style="width: 100%;margin-top: 10px;">
<template #prepend>
<el-button class="el-icon-search" @click="searchClick"/>
</template>
</el-input>
<div class="content" style="width: 100%;height: 70vh;margin-top:10px; overflow: auto;">
<div
v-for="(item, index) in hoistData"
@click="hoistClick(item.id)"
style="display: flex;justify-content: center;border: 1px solid #E2E2E2;border-radius: 5px;margin-bottom: 10px;cursor: pointer;">
<div class="left" style="width: 30%;margin: 10px 0 10px 10px;">
<img src="../../../../assets/images/camera.png" style="width: 100%;height: 100%;"/>
</div>
<div class="right" style="width: 70%;font-size: 14px;color: #344B60;margin: 10px 10px 10px 10px;">
<div style="">{{ item.proName }}</div>
<div style="margin-top: 5px;">
<span>班组：</span>
<span>{{ item.teamName }}</span>
</div>
<div style="margin-top: 5px;">
<span>组长：</span>
<span>{{ item.teamLeader }}</span>
</div>
<div style="margin-top: 5px;">{{ item.hoistName }}</div>
<div style="margin-top: 5px;margin-bottom: 10px;">{{ item.number }}</div>
</div>
<div class="hoistManage">
<div class="left">
<div class="layout">
<el-input placeholder="请输入关键字" prefix-icon="el-icon-search" v-model="keyWord" maxlength="30"
style="margin: 10px 10px 10px 0;width: 80%;" @keydown="searchData"></el-input>
<el-button type="primary" plain @click="searchData">查询</el-button>
</div>
<div class="dev-box" v-if="isShow">
<div class="dev-info-box layout" @click="clickDev(item.id)" v-for="item in devArr" :key="item.id">
<img :src="dz_dev_img">
<div class="layout dev-info">
<div>{{ item.proName }}</div>
<div>班组：{{ item.teamName }}</div>
<div>班组长：{{ item.teamLeader }}-{{ item.leaderPhone }}</div>
<div>{{ item.devName }}</div>
<div>{{ item.devCode }}</div>
</div>
</div>
</div>
</div>
<div class="two">
<img :src="photoPath" style="width: 100%;height: 100%;"/>
</div>
<div class="three">
<div style="width: 100%;height: 24%;display: flex;justify-content: center;border: 1px solid #40A3FF;margin-bottom: 8px;">
<div style="width: 5%;height: 100%;display: flex;justify-content: center;align-items: center;color: #364D62;font-size: 14px;">前面</div>
<div style="width: 95%;height: 100%;">
<video id="video" class="vjs-default-skin" autoplay controls preload="none"
style="width:100%;height: 100%;object-fit: fill"></video>
</div>
</div>
<div style="width: 100%;height: 24%;display: flex;justify-content: center;border: 1px solid #40A3FF;margin-bottom: 8px;">
<div style="width: 5%;height: 100%;display: flex;justify-content: center;align-items: center;color: #364D62;font-size: 14px;">前面</div>
<div style="width: 95%;height: 100%;">
<video id="video" class="vjs-default-skin" autoplay controls preload="none"
style="width:100%;height: 100%;object-fit: fill"></video>
</div>
</div>
<div style="width: 100%;height: 24%;display: flex;justify-content: center;border: 1px solid #40A3FF;margin-bottom: 8px;">
<div style="width: 5%;height: 100%;display: flex;justify-content: center;align-items: center;color: #364D62;font-size: 14px;">前面</div>
<div style="width: 95%;height: 100%;">
<video id="video" class="vjs-default-skin" autoplay controls preload="none"
style="width:100%;height: 100%;object-fit: fill"></video>
</div>
</div>
<div style="width: 100%;height: 24%;display: flex;justify-content: center;border: 1px solid #40A3FF;">
<div style="width: 5%;height: 100%;display: flex;justify-content: center;align-items: center;color: #364D62;font-size: 14px;">前面</div>
<div style="width: 95%;height: 100%;">
<video id="video" class="vjs-default-skin" autoplay controls preload="none"
style="width:100%;height: 100%;object-fit: fill"></video>
</div>
</div>
</div>
<div class="four">
<div class="title" style="border: 1px solid #DFDFDF;border-radius: 3px;">
<div v-for="(item, index) in vibeDeviceData" style="display: flex;justify-content: center;align-items: center;">
<div>{{ item.name }}</div>
<div style="margin-left: 10px;">
<img v-if="item.battery >= 100" :src="batterys.battery1" width="25"/>
<img v-else-if="item.battery >= 50" :src="batterys.battery2" width="25"/>
<img v-else :src="batterys.battery3" width="25"/>
{{ item.battery }}
</div>
<div style="margin-left: 10px;">
<img @click="dialogVisible = true" src="../../../../assets/images/setUp.png" width="20" style="cursor: pointer;" title="设置"/>
</div>
</div>
</div>
<div class="content" style="width: 100%;height: 70vh;margin-top: 20px;overflow: auto;">
<el-table :data="tableData" style="width: 100%" :show-header="false">
<el-table-column prop="deviceName" label="人员姓名"/>
<el-table-column prop="time" label="设备名称"/>
<el-table-column prop="reason" label="操作"/>
</el-table>
<div class="no-data-box layout" v-if="!isShow">
<div>暂无数据</div>
</div>
</div>
<div class="center-1">
<img :src="dz_dev_warn_img" />
</div>
<div class="center-2 layout">
<div class="dz-video-box layout">
<div class="layout">前面</div>
<video class="ball-content" autoplay="autoplay" loop="loop" muted controls="controls"></video>
</div>
<div class="dz-video-box layout">
<div class="layout">后面</div>
<video class="ball-content" autoplay="autoplay" loop="loop" muted controls="controls"></video>
</div>
<div class="dz-video-box layout">
<div class="layout">左面</div>
<video class="ball-content" autoplay="autoplay" loop="loop" muted controls="controls"></video>
</div>
<div class="dz-video-box layout">
<div class="layout">右面</div>
<video class="ball-content" autoplay="autoplay" loop="loop" muted controls="controls"></video>
</div>
</div>
<div class="right">
<div class="dev-config"></div>
<div class="warn-info"></div>
</div>
<el-dialog
title="近电感应配置"
:visible.sync="dialogVisible"
:append-to-body="true"
:draggable="true"
:destroy-on-close="true"
width="40%" custom-class="my-dialog1">
<div style="width: 100%;height: 50vh;overflow: auto;">
<div v-for="(item, index) in hoistSetUpData" style="width: 100%;height: 60%;">
<div>配置{{ index + 1 }}</div>
<el-form label-width="120px">
<el-form-item label="线路属性：">
<el-radio-group v-model="item.lineType" class="ml-4" @change="lineTypeRadioChange(item, index)" style="margin-top: 10px;">
<el-radio label="1" size="large">交流</el-radio>
<el-radio label="2" size="large">直流</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="电压等级：">
<el-radio-group v-model="item.level" class="ml-4" @change="levelRadioChange(item, index)" style="margin-top: 10px;">
<el-radio label="1" size="large">≤10kV</el-radio>
<el-radio label="2" size="large">20~35kV</el-radio>
<el-radio label="3" size="large">66~110kV</el-radio>
<el-radio label="4" size="large">220kV</el-radio>
<el-radio label="5" size="large">330kV</el-radio>
<el-radio label="6" size="large">500kV</el-radio>
<el-radio label="7" size="large">700kV</el-radio>
<el-radio label="8" size="large">1000kV</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="报警距离：">
<el-input v-model="item.distance" type="number" placeholder="请输入" style="width: 25%;">
</el-input>&nbsp;米
</el-form-item>
</el-form>
<el-button @click="delHoistSetUp(index)" v-if="index > 0" style="margin-left: 80%;">删除配置</el-button>
</div>
</div>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="addHoistSetUp">添加配置</el-button>
<el-button @click="provingDialogClose">取消</el-button>
<el-button type="primary" @click="provingDialogConfirm">确定</el-button>
</span>
</template>
</el-dialog>
<el-dialog title="近电感应配置" :visible.sync="dialogVisible" :append-to-body="true" :draggable="true"
:destroy-on-close="true" width="40%" custom-class="my-dialog1">
<div style="width: 100%;height: 50vh;overflow: auto;">
<div v-for="(item, index) in hoistSetUpData" style="width: 100%;height: 60%;">
<div>配置{{ index + 1 }}</div>
<el-form label-width="120px">
<el-form-item label="线路属性：">
<el-radio-group v-model="item.lineType" class="ml-4" @change="lineTypeRadioChange(item, index)"
style="margin-top: 10px;">
<el-radio label="1" size="large">交流</el-radio>
<el-radio label="2" size="large">直流</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="电压等级：">
<el-radio-group v-model="item.level" class="ml-4" @change="levelRadioChange(item, index)"
style="margin-top: 10px;">
<el-radio label="1" size="large">≤10kV</el-radio>
<el-radio label="2" size="large">20~35kV</el-radio>
<el-radio label="3" size="large">66~110kV</el-radio>
<el-radio label="4" size="large">220kV</el-radio>
<el-radio label="5" size="large">330kV</el-radio>
<el-radio label="6" size="large">500kV</el-radio>
<el-radio label="7" size="large">700kV</el-radio>
<el-radio label="8" size="large">1000kV</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="报警距离：">
<el-input v-model="item.distance" type="number" placeholder="请输入" style="width: 25%;">
</el-input>&nbsp;米
</el-form-item>
</el-form>
<el-button @click="delHoistSetUp(index)" v-if="index > 0" style="margin-left: 80%;">删除配置</el-button>
</div>
</div>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="addHoistSetUp">添加配置</el-button>
<el-button @click="provingDialogClose">取消</el-button>
<el-button type="primary" @click="provingDialogConfirm">确定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'hoistManage',
data() {
return {
//保存左侧搜索框
keyword: '',
//保存左侧 吊装设备信息
hoistData: [
{
id: 'id1',
proName: 'xxxxxxx工程',
teamName: 'xxx班组',
teamLeader: '张三 15232325654',
hoistName: '1号吊装预警设备',
number: '232532323235623'
},
{
id: 'id2',
proName: 'xxxxxxx工程',
teamName: 'xxx班组',
teamLeader: '张三 15232325654',
hoistName: '1号吊装预警设备',
number: '232532323235623'
},
{
id: 'id3',
proName: 'xxxxxxx工程',
teamName: 'xxx班组',
teamLeader: '张三 15232325654',
hoistName: '1号吊装预警设备',
number: '232532323235623'
},
{
id: 'id4',
proName: 'xxxxxxx工程',
teamName: 'xxx班组',
teamLeader: '张三 15232325654',
hoistName: '1号吊装预警设备',
number: '232532323235623'
},
{
id: 'id5',
proName: 'xxxxxxx工程',
teamName: 'xxx班组',
teamLeader: '张三 15232325654',
hoistName: '1号吊装预警设备',
number: '232532323235623'
}
],
//吊机视图路径
photoPath: require('../../../../assets/images/test.jpg'),
<script>
import { getDzWarnList } from "@/api/construction/manage/hoistManage.js";
import dz_dev_img from "@/assets/images/dz_dev.png";
import dz_dev_warn_img from "@/assets/images/test.jpg";
export default {
name: 'hoistManage',
data() {
return {
keyWord: '',
// 吊装设备图片
dz_dev_img: dz_dev_img,
dz_dev_warn_img: dz_dev_warn_img,
//保存左侧 吊装设备信息
devArr: [],
// 吊装预警设备无数据时处理
isShow: true,
//电量图标
batterys: {
battery1: require('../../../../assets/images/battery1.png'),
battery2: require('../../../../assets/images/battery2.png'),
battery3: require('../../../../assets/images/battery3.png'),
},
//电量图标
batterys: {
battery1: require('../../../../assets/images/battery1.png'),
battery2: require('../../../../assets/images/battery2.png'),
battery3: require('../../../../assets/images/battery3.png'),
//近电感应设备信息
vibeDeviceData: [
{
name: '近电感应设备DX-J431',
battery: 90
},
{
name: '近电感应设备DX-J431',
battery: 30
}
],
//近电感应设备信息
vibeDeviceData: [
{
name: '近电感应设备DX-J431',
battery: 90
},
{
name: '近电感应设备DX-J431',
battery: 30
}
],
//右侧表格数据
tableData: [
{
deviceName: '近电感应设备DX-J431',
time: '2024-03-03 13:26',
reason: '低于安全施工sss距离'
},
{
deviceName: '近电感应设备DX-J431',
time: '2024-03-03 13:26',
reason: '低于安全施工sss距离'
},
{
deviceName: '近电感应设备DX-J431',
time: '2024-03-03 13:26',
reason: '低于安全施工sss距离'
},
],
//对话框开关
dialogVisible: false,
//右侧表格数据
tableData: [
{
deviceName: '近电感应设备DX-J431',
time: '2024-03-03 13:26',
reason: '低于安全施工sss距离'
},
{
deviceName: '近电感应设备DX-J431',
time: '2024-03-03 13:26',
reason: '低于安全施工sss距离'
},
{
deviceName: '近电感应设备DX-J431',
time: '2024-03-03 13:26',
reason: '低于安全施工sss距离'
},
],
//对话框开关
dialogVisible: false,
//保存近电感应设置信息
hoistSetUpData: [
{
lineType: '1',
level: '1',
distance: 10
}
]
//保存近电感应设置信息
hoistSetUpData: [
{
lineType: '1',
level: '1',
distance: 10
}
]
};
},
created() {
this.laodDzWarnList();
},
methods: {
/* 加载吊装预警设备列表 */
laodDzWarnList() {
let params = {
'keyWord': this.keyWord
};
getDzWarnList(params).then((res) => {
const data = res.data
this.devArr = data;
if (data && data.length > 0) {
this.isShow = true;
} else {
this.isShow = false;
}
}).catch(() => { })
},
created() {
searchData() {
this.laodDzWarnList();
},
methods: {
//搜索框点击
searchClick(){
console.log(this.keyword)
},
//左侧设备点击
hoistClick(id){
alert(id)
},
/* 吊装设备点击事件 */
clickDev(id) {
//对话框，线路类型单选按钮监听
lineTypeRadioChange(item, index){
},
//对话框，电压等级单选按钮监听
levelRadioChange(item, index){
},
//对话框，添加配置
addHoistSetUp(){
let json = {lineType: '1', level: '1', distance: 10};
this.hoistSetUpData.push(json)
},
//对话框，删除配置
delHoistSetUp(index){
this.hoistSetUpData.splice(index, 1);
},
},
//搜索框点击
searchClick() {
console.log(this.keyword)
},
//左侧设备点击
hoistClick(id) {
alert(id)
},
//验证对话框关闭
provingDialogClose(){
this.dialogVisible = false;
},
//验证对话框确认按钮
provingDialogConfirm(){
this.dialogVisible = false;
}
}
};
</script>
<style>
.my-dialog1{
top: 100px
}
.hoistManage>div{
float: left;
}
.hoistManage .one{
width: 16.6%;
height: 100%;
}
.hoistManage .two{
width: 32.2%;
height: 100%;
margin-left: 1%;
}
.hoistManage .three{
width: 24%;
height: 100%;
margin-left: 1%;
}
.hoistManage .four{
width: 24%;
height: 100%;
margin-left: 1%;
}
.hoistManage .four>.title>div:nth-child(1){
margin-top: 10px;
}
.hoistManage .four>.title>div:nth-child( n + 1 ){
margin-bottom: 10px;
}
//对话框，线路类型单选按钮监听
lineTypeRadioChange(item, index) {
},
//对话框，电压等级单选按钮监听
levelRadioChange(item, index) {
},
//对话框，添加配置
addHoistSetUp() {
let json = { lineType: '1', level: '1', distance: 10 };
this.hoistSetUpData.push(json)
},
//对话框，删除配置
delHoistSetUp(index) {
this.hoistSetUpData.splice(index, 1);
},
//验证对话框关闭
provingDialogClose() {
this.dialogVisible = false;
},
//验证对话框确认按钮
provingDialogConfirm() {
this.dialogVisible = false;
}
}
};
</script>
.hoistManage .center{
}
.hoistManage .right{
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px #e8eceb;
border-radius: 5px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #ffffff;
-webkit-box-shadow: inset 0 0 6px #cbb7b7;
}
::-webkit-scrollbar-thumb:window-inactive {
background: #e8eceb;
}
::-webkit-scrollbar-corner {
background-color: #e8eceb;
}
::v-deep .el-dialog{
height: 78vh;
overflow: auto;
}
</style>
<style>
.hoistManage {
width: 100%;
height: 80vh;
background-color: #fff;
box-shadow: 10px 10px 5px #000;
display: flex;
align-items: center;
justify-content: space-around;
}
.layout {
display: flex;
align-items: center;
justify-content: start;
}
.hoistManage .left {
width: 20%;
height: 100%;
}
.dev-box {
width: 100%;
height: calc(100% - 50px);
overflow-y: auto;
}
.dev-info-box {
width: 100%;
margin: 0 0 4% 0;
height: 160px;
border: 1px solid #cccccc;
border-radius: 6px;
font-size: 15px;
justify-content: space-evenly;
align-items: start;
align-items: center;
letter-spacing: 1px;
box-sizing: border-box;
cursor: pointer;
}
.dev-info {
width: calc(100% - 104px);
height: 100%;
flex-direction: column;
align-items: start;
justify-content: space-evenly;
}
.no-data-box {
width: 100%;
height: 60px;
justify-content: center;
align-items: center;
color: #909399;
font-size: 14px;
}
.hoistManage .center-1 {
width: 31%;
height: 100%;
background-position: center center !important;
}
.hoistManage .center-2 {
width: 25%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.dz-video-box {
width: 100%;
height: 24%;
}
.dz-video-box>div {
width: 40px;
height: 100%;
border-left: 1px solid #4688BB;
border-top: 1px solid #4688BB;
border-bottom: 1px solid #4688BB;
}
.ball-content {
width: calc(100% - 40px);
height: 100%;
pointer-events: none;
object-fit: fill;
}
.hoistManage .right {
width: 20%;
height: 100%;
}
.dev-config {
width: 100%;
min-height: 150px;
max-height: 300px;
overflow-y: auto;
border: 1px solid #cccccc;
border-radius: 6px;
}
.warn-info {
width: 100%;
min-height: calc(100% - 300px);
max-height: calc(100% - 150px);
overflow-y: auto;
}
</style>

8
src/views/construction/manage/personManage/personManage.vue
View File

@ -60,11 +60,15 @@
<div id="sh-info" class="layout">
<div class="layout">
<div class="layout"><img src="../../../../assets/person_img/sh.png">{{ person.sh.name }}</div>
<div class="layout info" v-if="person.sh.elec >= 10">
<div class="layout info" v-if="person.sh.elec == 100">
<img width="30px" height="16px" src="../../../../assets/person_img/elec.png">
{{ person.sh.elec }}%
</div>
<div class="layout info" v-if="person.sh.elec < 10"><img width="30px" height="16px"
<div class="layout info" v-if="person.sh.elec >= 20 && person.sh.elec < 100">
<img width="30px" height="16px" src="../../../../assets/images/battery2.png">
{{ person.sh.elec }}%
</div>
<div class="layout info" v-if="person.sh.elec < 20"><img width="30px" height="16px"
src="../../../../assets/person_img/elec_warn.png">{{ person.sh.elec }}%</div>
<div class="layout info2"><img @click="openHistoryGj(person.sh.devId)"
src="../../../../assets/person_img/dw.png" title="历史轨迹"></div>

55
src/views/construction/manage/realTimeManage/realTimeManage.vue
View File

@ -46,15 +46,6 @@
<script>
import { getBallDeviceLists } from "@/api/construction/manage/realTimeManage.js";
/* import { include } from '../../../../utils/video/include.js'
import { video } from '../../../../utils/video/video-7.19.1.min.js'
import { flv } from '../../../../utils/video/flv.js'
import { talk } from '../../../../utils/video/talk.js'
import { h5live } from '../../../../utils/video/h5live-1.0.6.js'
// import { videoPage } from '../../../../utils/video/videoPage';
import { videoQX } from '../../../../utils/video/videoQX';
import $ from 'jquery'; */
export default {
name: 'realTimeManage',
/* 球机树前端筛选 */
@ -65,6 +56,8 @@ export default {
},
data() {
return {
// 默认播放窗口
winDom: 'videoPlayer1',
//页码
pageNo: 1,
//每页条数
@ -113,9 +106,7 @@ export default {
created() {
this.laodBallDeviceLists();
},
mounted() {
this.loadExternalScript();
},
mounted() { },
methods: {
/* 加载球机树 */
laodBallDeviceLists() {
@ -130,16 +121,6 @@ export default {
}
}).catch(res => { });
},
async loadExternalScript() {
try {
// 假设你的JavaScript文件位于'/path/to/your/script.js'
const module = await import('../../../../utils/video/videoPage');
// 如果你需要使用module.export导出的内容，可以在这里进行操作
} catch (e) {
console.error('Error loading the external script:', e);
}
},
/* 球机树过滤 */
filterNode(value, data, node) {
if (!value) {
@ -183,20 +164,10 @@ export default {
//球机树节点点击
handleNodeClick(data, node, item) {
if (node.level === 2) {
alert(data.id);
}
},
splitScreenClick(pane, event) {
console.log("pane:",);
console.log("event:", event);
if (pane.name === 'first') {
}
if (pane.name === 'second') {
// 点击球机时触发的事件
}
},
//给梳妆街头不同层级设置不同的icon
renderContent(h, { node, data }) {
// 根据层级使用不同的图标
@ -216,22 +187,6 @@ export default {
</span>
);
},
//
//分页器设置
handler() {
getHasRole()
},
//获取表格数据
getHasRole(page = 1) {
//修改当前页码
this.pageNo = page;
/* let request = await reqAllRoleList(pageNo.value, pageSize.value, keyWord.value);
if (request.data.code == 200) {
total.value = request.data.data.total;
roleArr.value = request.data.data.records;
} */
}
}
};
</script>