湖里大屏:优化了若干样式问题

This commit is contained in:
Luck-Xiaomi 2022-08-29 16:31:45 +08:00
parent ddc2c3c537
commit 3b1edfa952
24 changed files with 252 additions and 186 deletions

View File

@ -95,6 +95,7 @@ if (store.state.userInfo) {
// http请求拦截器
axios.interceptors.request.use(
config => {
if (config.url.includes('live?port')) return config
// 分屏插件兼容配置
const screensBaseURL = sessionStorage.getItem('screens-baseURL')
if (config.url.indexOf(screensBaseURL) !== -1) {

View File

@ -1694,8 +1694,8 @@ const routes2 = [
},
{
path: 'cim',
name: '数据看板-CIM',
component: () => import('@/views/projectAdmin/jlw/CIM/index.vue')
name: '数据看板-BIM',
component: () => import('@/views/projectAdmin/jlw/BIM/index.vue')
},
{
path: 'safe',

View File

@ -1,7 +1,7 @@
<template>
<Card title="BIM协同">
<div class="table">
<div class="row">
<div class="row" style="font-weight: bold;">
<div class="td">规划报批</div>
<div class="td">施工图审查</div>
<div class="td">竣工验收</div>
@ -40,7 +40,7 @@ export default {
height: 100%;
.row {
margin-bottom: 20px;
font-size: 12px;
font-size: 14px;
display: flex;
.td {
flex: 1;

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

View File

@ -16,8 +16,7 @@
</div>
</div>
</div>
<div class="list">
<vue-scroll>
<div class="list">
<div class="list-item" :class="item.devonline == '0' ? 'online' : 'offline'" v-for="(item, i) in list" :key="i">
<div class="status">{{ item.devonline == '0' ? '在线' : '离线' }}</div>
<div class="label">{{ item.devName || item.deviceName }}</div>
@ -27,8 +26,7 @@
<div class="person">出场人数{{ item.outer }}</div>
</div>
</div>
</vue-scroll>
</div>
</div>
</div>
</template>
@ -72,6 +70,7 @@ export default {
<style lang="less" scoped>
.h-count-list {
height: 100%;
overflow: hidden;
.counts {
padding: 10px 26px 20px;
display: flex;
@ -129,6 +128,7 @@ export default {
.list {
height: calc(100% - 90px);
padding: 0 10px;
overflow-y: scroll;
.list-item {
margin-bottom: 6px;
padding-left: 16px;

View File

@ -6,7 +6,11 @@
</div>
<div class="leftCenter">
<!-- <leftCenter title="AI分析"></leftCenter> -->
<leftCenter title="升降机设备"></leftCenter>
<leftCenter title="升降机设备"
:lifterList="lifterList"
:totalLifterDev="totalLifterDev"
:totalDangerLifterDev="totalDangerLifterDev"
></leftCenter>
</div>
<div class="leftBottom">
<leftBottom title="视频设备" :videoCountList="videoCountList"></leftBottom>
@ -22,23 +26,17 @@
</div>
<div class="rightBox">
<div class="rightTop">
<rightTop
title="人脸闸机"
:lifterList="lifterList"
:totalLifterDev="totalLifterDev"
:totalDangerLifterDev="totalDangerLifterDev"
></rightTop>
<rightTop title="人脸闸机" :ufaceList="ufaceList" ></rightTop>
</div>
<div class="rightCenter">
<rightCenter
title="AI分析"
<rightCenter title="AI分析" ></rightCenter>
</div>
<div class="rightBottom">
<rightBottom title="环境监测"
:onlineNum="environment.online"
:offlineNum="environment.offline"
:list="environment.list"
></rightCenter>
</div>
<div class="rightBottom">
<rightBottom title="环境监测" :ufaceList="ufaceList"></rightBottom>
></rightBottom>
</div>
</div>
</div>
@ -178,6 +176,7 @@ export default {
})
//
selectLifterDevAlarmCountList(data).then(res => {
console.log('获取升降机设备信息: ', res);
if (res.code === 200) {
this.lifterList = res.result.devList
console.log(res)

View File

@ -53,6 +53,7 @@ export default {
color: #636364;
}
.list {
height: 100%;
padding: 0 10px;
color: #fff;
.list-head {
@ -73,7 +74,7 @@ export default {
}
}
.listBox{
height:100px;
height: calc(100% - 15px);
overflow:auto;
.list-item {
margin-bottom: 6px;

View File

@ -7,13 +7,13 @@
<table class="greenTable">
<thead>
<tr>
<th>报警设备</th>
<th>报警时间</th>
<th>报警类型</th>
<th style="font-weight: bold;">报警设备</th>
<th style="font-weight: bold;">报警时间</th>
<th style="font-weight: bold;">报警类型</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in alarmList" :key="index">
<tr style="font-size: 14px;" v-for="(item, index) in alarmList" :key="index">
<td>{{ item.deviceName }}</td>
<td>{{ item.tempAlarmTime }}</td>
<td>{{ item.alarmTypeName }}</td>

View File

@ -43,21 +43,23 @@
</p>
</div>
</div>
<div class="persontype">
<p style="padding-left: 35px;" class="person">{{statisticsCount.workercount.jfGlPersonTotal}}</p>
<p class="person">{{statisticsCount.presencecount.jfGlPersonTotal}}</p>
</div>
<div class="persontype">
<span>在册甲方管理人员数</span>
<span>在场甲方管理人员数</span>
</div>
<div class="persontype">
<p style="padding-left: 35px;" class="person">{{statisticsCount.workercount.lwPersonTotal}}</p>
<p class="person">{{statisticsCount.presencecount.lwPersonTotal}}</p>
</div>
<div class="persontype">
<span>在册劳务人员数</span>
<span>在场劳务人员数</span>
<div>
<div class="persontype">
<p style="padding-left: 35px;" class="person">{{statisticsCount.workercount.jfGlPersonTotal}}</p>
<p class="person">{{statisticsCount.presencecount.jfGlPersonTotal}}</p>
</div>
<div class="persontype">
<span>在册甲方管理人员数</span>
<span>在场甲方管理人员数</span>
</div>
<div class="persontype">
<p style="padding-left: 35px;" class="person">{{statisticsCount.workercount.lwPersonTotal}}</p>
<p class="person">{{statisticsCount.presencecount.lwPersonTotal}}</p>
</div>
<div class="persontype">
<span>在册劳务人员数</span>
<span>在场劳务人员数</span>
</div>
</div>
<div class="minTit">
<div class="point"></div>
@ -209,7 +211,7 @@ export default {
span {
width: 168px;
text-align: left;
font-size: 16px;
font-size: 13px;
margin-right: 10px;
}
.person {
@ -217,7 +219,7 @@ export default {
width: 50%;
text-align: left;
// margin-right: 60px;
font-size: 20px;
font-size: 18px;
color: #fff;
// background-image: url(~@/assets/images/projectImg/numBgc.png);
// background-size:100%;
@ -244,8 +246,8 @@ export default {
.management_item {
box-sizing: border-box;
position: relative;
width: 60;
height: 60px;
width: 52px;
height: 52px;
text-align: start;
.item_content {
position: absolute;
@ -254,8 +256,8 @@ export default {
font-size: 12px;
}
.itemImgBox {
width: 60px;
height: 60px;
width: 52px;
height: 52px;
border-radius: 50%;
background-size: 100%;
img {

View File

@ -1,69 +1,80 @@
<template>
<Card :title="title" showRefresh @query="handleQuery">
<div class="gantt-chart">
<div class="table" @scroll="handleScroll">
<div class="thead">
<div class="row">
<div class="td">分部分项工程名称</div>
<div class="td">开始日期</div>
<div class="td">完成日期</div>
<div class="td" v-for="date in dateList" :key="date">
<div class="date">
<div class="month">
{{ date }}
</div>
<div class="days">
<div class="day" v-for="day in getDays(date)" :key="day.num">{{ day.num }}</div>
<div class="container">
<div class="header">
<div class="left-content">
<div class="item" v-for="(item, index) in headerList" :key="index">
<div class="color-block" :style="{ background: item.color }"></div>
<div class="label">{{ item.label }}</div>
</div>
</div>
<div class="right-content">备注更新进度填报内容后该甘特图将自动更新</div>
</div>
<div class="gantt-chart">
<div class="table" @scroll="handleScroll">
<div class="thead">
<div class="row">
<div class="td">分部分项工程名称</div>
<div class="td">开始日期</div>
<div class="td">完成日期</div>
<div class="td" v-for="date in dateList" :key="date">
<div class="date">
<div class="month">
{{ date }}
</div>
<div class="days">
<div class="day" v-for="day in getDays(date)" :key="day.num">{{ day.num }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tbody">
<div class="row-groups" :class="{ open: openedIndex === i }" v-for="(p, i) in projects" :key="p.pName">
<div class="row">
<div class="td" @click="handleOpen(i)">{{ p.pName }}</div>
<div class="td">{{ p.startTime }}</div>
<div class="td">{{ p.endTime }}</div>
<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
<div class="grids">
<div class="grid" v-for="day in getDays(date)" :key="'grid' + day.num" :ref="p.pName + '-' + day.date"></div>
</div>
</div>
<div
class="progress"
:style="gantt"
v-for="(gantt, index) in p.gantts"
:key="index"
@mouseenter="handleHover"
@mouseleave="handleLeave"
></div>
</div>
<div class="children">
<div class="row" v-for="child in p.children" :key="'child-' + child.pName">
<div class="td">{{ child.pName }}</div>
<div class="td">{{ child.startTime }}</div>
<div class="td">{{ child.endTime }}</div>
<div class="tbody">
<div class="row-groups" :class="{ open: openedIndex === i }" v-for="(p, i) in projects" :key="p.pName">
<div class="row">
<div class="td" @click="handleOpen(i)">{{ p.pName }}</div>
<div class="td">{{ p.startTime }}</div>
<div class="td">{{ p.endTime }}</div>
<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
<div class="grids">
<div class="grid" v-for="day in getDays(date)" :key="'grid' + day.num" :ref="child.pName + '-' + day.date"></div>
<div class="grid" v-for="day in getDays(date)" :key="'grid' + day.num" :ref="p.pName + '-' + day.date"></div>
</div>
</div>
<div
class="progress"
:style="gantt"
v-for="(gantt, index) in child.gantts"
v-for="(gantt, index) in p.gantts"
:key="index"
@mouseenter="handleHover"
@mouseleave="handleLeave"
></div>
</div>
<div class="children">
<div class="row" v-for="child in p.children" :key="'child-' + child.pName">
<div class="td">{{ child.pName }}</div>
<div class="td">{{ child.startTime }}</div>
<div class="td">{{ child.endTime }}</div>
<div class="td" v-for="date in dateList" :key="date + 'grid-date'">
<div class="grids">
<div class="grid" v-for="day in getDays(date)" :key="'grid' + day.num" :ref="child.pName + '-' + day.date"></div>
</div>
</div>
<div
class="progress"
:style="gantt"
v-for="(gantt, index) in child.gantts"
:key="index"
@mouseenter="handleHover"
@mouseleave="handleLeave"
></div>
</div>
</div>
</div>
</div>
</div>
<div class="tooltips" :style="tooltipsStyle">
<div class="status">已逾期5天</div>
<div class="charger">负责人史蒂夫</div>
<div class="tooltips" :style="tooltipsStyle">
<div class="status">已逾期5天</div>
<div class="charger">负责人史蒂夫</div>
</div>
</div>
</div>
</div>
@ -88,6 +99,13 @@ export default {
},
data() {
return {
//
headerList: [
{ label: '阶段完成', color: '#4983fc' },
{ label: '任务完成', color: '#4fd389' },
{ label: '进行中', color: '#f1d520' },
{ label: '逾期', color: '#fc6f8e' },
],
projects: [
{
pName: '地基与基础工程',
@ -276,8 +294,44 @@ export default {
</script>
<style lang="less" scoped>
.container {
box-sizing: border-box;
padding: 0 13px;
}
.header {
display: flex;
justify-content: space-between;
width: 100%;
height: 60px;
.left-content {
display: flex;
width: 40%;
height: 100%;
.item {
display: flex;
align-items: center;
width: calc(100% / 4);
.color-block {
margin-right: 10px;
width: 15px;
height: 15px;
border-radius: 2px;
}
.label {
color: #fff;
font-size: 13px;
}
}
}
.right-content {
font-size: 13px;
line-height: 60px;
}
}
.gantt-chart {
height: 100%;
height: calc(100% - 60px);
.table {
position: relative;
height: 100%;

View File

@ -186,5 +186,14 @@ export default {
}
}
}
::v-deep .containerBox .content .alarmTypeBox[data-v-337506f2] .el-input__inner {
background-color: transparent;
color: white;
height: 24px;
line-height: 24px;
padding: 0 5px;
border-color: #87f1fb;
}
</style>

View File

@ -4,7 +4,7 @@
<div class="containerBox">
<!-- 配置项目竣工日期 -->
<div class="blockContent">
<p>
<p style="transform: translateX(-20px)">
<!-- 项目整体倒计时 -->
{{$t('message.dataBoard.projectCountDown')+':'}}
</p>
@ -15,7 +15,7 @@
{{$t('message.dataBoard.textList')[0]}}
</span>
</div>
<img src="@/assets/images/daysBG.png" class="daysBG" />
<img src="../assets/images/bg/bg-rectangular-box.png" class="daysBG" />
<p class="endDate">
<!-- 竣工时间 -->
{{$t('message.dataBoard.completeTime')+':'}}{{endDate}}
@ -202,7 +202,7 @@ export default {
}
.days {
position: absolute;
top: 40%;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
.num {
@ -211,14 +211,14 @@ export default {
}
.daysBG {
position: absolute;
top: 40%;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.endDate {
position: absolute;
right: 20px;
bottom: 60px;
bottom: 30px;
// font-size: 13px;
}
}

View File

@ -1,20 +1,16 @@
<template>
<!-- 项目简介 -->
<Card :title="title">
<div class="content">
<!-- 项目简介 -->
<Card :title="title">
<div class="container">
<vue-scroll>
<div class="listItem">
<!-- 项目名称 -->
<span class="label">
{{ $t('message.companyDiagram.entryName1') }}
</span>
<span class="label">{{ $t('message.companyDiagram.entryName1') }}</span>
<span class="value">{{ projectData.projectName }}</span>
</div>
<div class="listItem">
<!-- 项目地址 -->
<span class="label">
{{ $t('message.companyDiagram.projectAddress') }}
</span>
<span class="label">{{ $t('message.companyDiagram.projectAddress') }}</span>
<span class="value">
{{ projectData.provinceName }}{{ projectData.cityName }}
{{ projectData.areaName }}{{ projectData.projectAddress }}
@ -22,92 +18,66 @@
</div>
<div class="listItem">
<!-- 项目经理 -->
<span class="label">
{{ $t('message.companyDiagram.projectManager') }}
</span>
<span class="label">{{ $t('message.companyDiagram.projectManager') }}</span>
<span class="value">{{ projectData.projectManage }}</span>
</div>
<div class="listItem">
<!-- 联系电话 -->
<span class="label">
{{ $t('message.companyDiagram.telPhone') }}
</span>
<span class="label">{{ $t('message.companyDiagram.telPhone') }}</span>
<span class="value">{{ projectData.projectTel }}</span>
</div>
<div class="listItem">
<!-- 建筑面积 -->
<span class="label">
{{ $t('message.companyDiagram.buildArea') }}
</span>
<span class="label">{{ $t('message.companyDiagram.buildArea') }}</span>
<span class="value">{{ projectData.projectAcreage }} </span>
</div>
<div class="listItem">
<!-- 开工日期 -->
<span class="label">
{{ $t('message.companyDiagram.buildStartTime') }}
</span>
<span class="label">{{ $t('message.companyDiagram.buildStartTime') }}</span>
<span class="value">{{ projectData.startWorkDate }}</span>
</div>
<div class="listItem">
<!-- 项目编号 -->
<span class="label">
{{ $t('message.companyDiagram.projectNo') }}
</span>
<span class="label">{{ $t('message.companyDiagram.projectNo') }}</span>
<span class="value">{{ projectData.projectNumber }}</span>
</div>
<div class="listItem">
<!-- 工程类别 -->
<span class="label">
{{ $t('message.companyDiagram.projectType') }}
</span>
<span class="label">{{ $t('message.companyDiagram.projectType') }}</span>
<span
class="value"
v-for="(item, index) in $t('message.companyDiagram.PROJECTTYPE')"
:key="index"
>
{{ projectData.projectType == item.id ? item.name : '' }}
</span>
>{{ projectData.projectType == item.id ? item.name : '' }}</span>
</div>
<div class="listItem">
<!-- 工程用途 -->
<span class="label">
{{ $t('message.companyDiagram.projectUse') }}
</span>
<span class="label">{{ $t('message.companyDiagram.projectUse') }}</span>
<span
class="value"
v-for="(item, index) in $t(
'message.companyDiagram.ENGINEERINGPRUPOSE'
)"
:key="index"
>
{{ projectData.engineeringPurpose == item.id ? item.name : '' }}
</span>
>{{ projectData.engineeringPurpose == item.id ? item.name : '' }}</span>
</div>
<div class="listItem">
<!-- 结构类型 -->
<span class="label">
{{ $t('message.companyDiagram.structureType') }}
</span>
<span class="label">{{ $t('message.companyDiagram.structureType') }}</span>
<span
class="value"
v-for="(item, index) in $t('message.companyDiagram.STRUCTURETYPE')"
:key="index"
>
{{ projectData.structureType == item.id ? item.name : '' }}
</span>
>{{ projectData.structureType == item.id ? item.name : '' }}</span>
</div>
<div class="listItem">
<!-- 工程状态 -->
<span class="label">
{{ $t('message.companyDiagram.projectStatus') }}
</span>
<span class="label">{{ $t('message.companyDiagram.projectStatus') }}</span>
<span
class="value"
v-for="(item, index) in $t('message.companyDiagram.BUILDSTATUS')"
:key="index"
>
{{ projectData.bulidStatus == item.id ? item.name : '' }}
</span>
>{{ projectData.bulidStatus == item.id ? item.name : '' }}</span>
</div>
</vue-scroll>
</div>
@ -117,39 +87,36 @@
<script>
import Card from '../components/Card.vue'
export default {
components:{Card},
components: { Card },
props: {
title: {
type: String,
default: "default title"
default: 'default title'
},
projectData:{
projectData: {
type: Object,
default: {}
}
},
data() {
return {
};
},
data() {
return {}
}
}
</script>
<style lang="less" scoped>
.content {
position: relative;
padding: 10px 20px;
height: calc(100% - 20px - 24px);
z-index: 2;
.listItem {
margin-bottom:2px ;
height: 8%;
.value {
color: #bec2c6;
}
.container {
box-sizing: border-box;
position: relative;
height: 100%;
padding: 10px 13px;
z-index: 2;
.listItem {
margin-bottom: 2px;
height: 8%;
.value {
color: #bec2c6;
}
}
}
</style>

View File

@ -61,6 +61,8 @@ export default {
<style lang="less" scoped>
.frequentProblems {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
.days-switch {
@ -69,7 +71,7 @@ export default {
margin-left: auto;
}
.content {
height: 100%;
flex: 1;
}
}
</style>

View File

@ -77,4 +77,17 @@ export default {
height: 62%;
}
}
::v-deep .el-range-editor--mini.el-input__inner,
::v-deep .el-range-editor--mini .el-range-input,
::v-deep .el-icon-date:before {
background: #07162b;
border-color: #6ee4f0;
color: #6ee4f0;
}
::v-deep .el-table th.is-leaf,
::v-deep .el-table td {
border-bottom: 0;
}
</style>

View File

@ -81,6 +81,8 @@ export default {
.info {
height: 100%;
.info-item {
color: #808c9a;
padding: 10px 0;
padding-left: 20px;
}
}

View File

@ -2,7 +2,7 @@
<Card :title="title">
<!-- <JProgressChart :seriesData="seriesData" :yData="yData" /> -->
<div class="table">
<!-- <div class="table">
<div class="thead">
<div class="row">
<div class="td">检查项</div>
@ -22,6 +22,20 @@
<div v-if="!alarmList.length">无数据</div>
</vue-scroll>
</div>
</div>-->
<div style="width: 100%;height: 100%;" ref="container">
<el-table
:data="alarmList"
style="width: 100%"
header-align="center"
:header-cell-style="{ backgroundColor: '#07162b', color: '#67d4db' }"
:cell-style="{ color: '#fff' }"
>
<el-table-column align="center" prop="checkPoints" label="检查项" ></el-table-column>
<el-table-column align="center" prop="checkContent" label="检查内容" ></el-table-column>
<el-table-column align="center" prop="checkTime" label="检查时间" width="100"></el-table-column>
<el-table-column align="center" prop="rectifyPeopleAme" label="整改人" ></el-table-column>
</el-table>
</div>
</Card>
</template>
@ -38,11 +52,7 @@ export default {
default: ''
}
},
mounted() {
getNewestSecurityManageDataList2Api({ projectSn: this.projectSn }).then(res => {
this.alarmList = res.result || []
})
},
data() {
return {
projectSn: this.$store.state.projectSn,
@ -60,7 +70,13 @@ export default {
// ].reverse(),
// seriesData: [100, 235, 232, 532, 112, 532, 449, 269, 998]
}
}
},
mounted() {
getNewestSecurityManageDataList2Api({ projectSn: this.projectSn }).then(res => {
console.log('待整改问题: ', res);
this.alarmList = res.result || []
})
},
}
</script>
@ -87,14 +103,15 @@ export default {
height: 30px;
line-height: 30px;
&:nth-child(1) {
width: 160px;
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&:nth-child(2) {
padding-left: 10px;
flex: 1;
// padding-left: 10px;
// flex: 1;
width: 100px;
}
&:nth-child(3) {
width: 140px;
@ -106,4 +123,5 @@ export default {
}
}
}
</style>

View File

@ -56,19 +56,17 @@ export default {
default: ''
}
},
data: () => ({
//
dateRange: [],
}),
mounted() {
this.getCounts()
},
data() {
return {
//
dateRange: [],
projectSn: this.$store.state.projectSn,
totals: {}
}
},
mounted() {
this.getCounts()
},
methods: {
getCounts() {
selectSecurityManageStatisticsApi({ projectSn: this.projectSn }).then(res => {