2025
/
smart-factory
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

edit

Browse Source
main
junhong 2 days ago
parent 9fbeeb3222
commit 4ee3520e7f
1 changed files with 138 additions and 136 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 272
      src/views/large-screen/index.vue

272
src/views/large-screen/index.vue
Unescape View File

@ -7,6 +7,141 @@
<div class="xitong" @click="Jump()"></div>
</div>
<div class="main-box">
<div class="bottom-box">
<div class="right-top-item" style="overflow: hidden;">
<div class="top-item">
<div class="boxtitle">进度预警</div>
<div class="boxcontent" v-if="state.warnList.length == 0">
<div class="zanwu">
<img style="width: 9.375rem;" src="../../assets/images/zw.png" alt="">
<div class="zwtext">
暂无进度预警
</div>
</div>
</div>
<div v-else class="boxcontent"
style="display: grid;grid-template-columns: 1fr 1fr ;grid-gap: .75rem;padding: 1.5625rem 1.3125rem;">
<div class="yj-box" v-for="item, index in state.warnList.slice(0, 2)" :key="index">
<img v-if="index == 0" class="jgbj" src="../../assets/images/jglv.png" alt="">
<img v-else class="jgbj" src="../../assets/images/jgred.png" alt="">
<div style="text-align: center;font-size: .875rem;">{{ item.planName }}</div>
<div>开始时间：{{ item.startTime }}</div>
<div>计划结束时间：{{ item.endTime }}</div>
<div style="display: flex;align-items: center;">当前进度：<div style="flex: 1;"> <el-progress
color="#0AA0FE" :stroke-width="8"
:percentage="Number(item.currentProgress ? item.currentProgress : 0)"
class="jd">
</el-progress>
</div>
</div>
<div>备注：{{ item.warnInfo ? item.warnInfo : '-' }}</div>
</div>
</div>
</div>
<!-- 进度监控 -->
<div class="top-item" style="overflow: hidden;">
<div class="boxtitle">进度监控</div>
<div class="center-item">
<div class="alarm-table-header" style=" grid-template-columns: 1.5fr 2.5fr 3fr 2.5fr;">
<div>序号</div>
<div>任务</div>
<div>时间</div>
<div>累计进度</div>
</div>
<div class="scooll-box" ref="monitor">
<vue3-seamless-scroll :copyNum="10" :wheel="true" style="height: 100%;overflow: hidden;"
:scrollbar="{
type: 'mini',
invert: false,
}" :list="state.monitorList" :hoverStop="true" :hover="true" :step="0.3">
<div v-for="item, index in state.monitorList" :key="index"
:class="index % 2 != 0 ? 'dark' : 'light'" class="table-item"
style=" grid-template-columns: 1.5fr 2.5fr 3fr 2.5fr;">
<div>{{ index + 1 }}</div>
<div>
{{ item.planName }}
</div>
<div>{{ item.keystageTime }}</div>
<div>
{{ item.accumulativeProgress ? item.accumulativeProgress : 0 }}%
</div>
</div>
<div class="zanwu" v-if="state.monitorList.length == 0">
<img style="width: 9.375rem;" src="../../assets/images/zw.png" alt="">
<div class="zwtext">
暂无进度监控
</div>
</div>
</vue3-seamless-scroll>
</div>
</div>
</div>
</div>
<!-- 门禁记录 -->
<div class="center-top-item">
<div class="boxtitle">门禁记录</div>
<div class="center-item">
<div class="alarm-table-header">
<div>序号</div>
<div>姓名</div>
<div>进出门类型</div>
<div>刷卡时间</div>
<div>人员类型</div>
<div>是否佩戴口罩</div>
<div>是否超温</div>
</div>
<div class="scooll-box" ref="Access">
<vue3-seamless-scroll :copyNum="10" :wheel="true" style="height: 100%;overflow: hidden;"
:scrollbar="{
type: 'mini',
invert: false,
}" :list="state.tableData" :hoverStop="true" :hover="true" :step="0.3">
<div v-for="item, index in state.tableData" :key="index"
:class="index % 2 != 0 ? 'dark' : 'light'" class="table-item">
<div>{{ index + 1 }}</div>
<div>
{{ item.personName }}
</div>
<div>{{ stausList().find((res) =>
res.value == item.openType)?.label || '-' }}</div>
<div>
{{ item.startSwingTime }}
</div>
<div>{{ item.imageType == 1 ? '内部人员' : item.imageType == 2 ? '访客' : '-' }}</div>
<div
:style="{ color: item.maskState == 2 ? '#FF0A0A' : item.maskState == 3 ? '#00E287' : '#fff' }">
{{ item.maskState == 3 ? '带口罩' : item.maskState == 2 ? '没带口罩' : '未识别' }}
</div>
<div :style="{ color: item.overTemp ? '#FF0A0A' : '#00E287' }">
{{ item.overTemp ? '是' : '否' }}
</div>
</div>
<div class="zanwu" v-if="state.tableData.length == 0">
<img style="width: 12.5rem;" src="../../assets/images/zw.png" alt="">
<div class="zwtext">
暂无门禁记录
</div>
</div>
</vue3-seamless-scroll>
</div>
</div>
</div>
<!-- 施工人员工种分析 and 车辆机械设备统计 -->
<div class="right-top-item">
<div class="top-item">
<div class="boxtitle">施工人员工种分析</div>
<div class="boxcontent" id="staff">
</div>
</div>
<div class="top-item">
<div class="boxtitle">车辆机械设备统计</div>
<div class="boxcontent" id="car">
</div>
</div>
</div>
</div>
<div class="top-box">
<!-- 项目介绍 -->
<div class="top-item">
@ -150,142 +285,8 @@
</div>
</div>
</div>
<div class="bottom-box">
<div class="right-top-item" style="overflow: hidden;">
<div class="top-item">
<div class="boxtitle">进度预警</div>
<div class="boxcontent" v-if="state.warnList.length == 0">
<div class="zanwu">
<img style="width: 9.375rem;" src="../../assets/images/zw.png" alt="">
<div class="zwtext">
暂无进度预警
</div>
</div>
</div>
<div v-else class="boxcontent"
style="display: grid;grid-template-columns: 1fr 1fr ;grid-gap: .75rem;padding: 1.5625rem 1.3125rem;">
<div class="yj-box" v-for="item, index in state.warnList.slice(0, 2)" :key="index">
<img v-if="index == 0" class="jgbj" src="../../assets/images/jglv.png" alt="">
<img v-else class="jgbj" src="../../assets/images/jgred.png" alt="">
<div style="text-align: center;font-size: .875rem;">{{ item.planName }}</div>
<div>开始时间：{{ item.startTime }}</div>
<div>计划结束时间：{{ item.endTime }}</div>
<div style="display: flex;align-items: center;">当前进度：<div style="flex: 1;"> <el-progress
color="#0AA0FE" :stroke-width="8"
:percentage="Number(item.currentProgress ? item.currentProgress : 0)"
class="jd">
</el-progress>
</div>
</div>
<div>备注：{{ item.warnInfo ? item.warnInfo : '-' }}</div>
</div>
</div>
</div>
<!-- 进度监控 -->
<div class="top-item" style="overflow: hidden;">
<div class="boxtitle">进度监控</div>
<div class="center-item">
<div class="alarm-table-header" style=" grid-template-columns: 1.5fr 2.5fr 3fr 2.5fr;">
<div>序号</div>
<div>任务</div>
<div>时间</div>
<div>累计进度</div>
</div>
<div class="scooll-box" ref="monitor">
<vue3-seamless-scroll :copyNum="10" :wheel="true" style="height: 100%;overflow: hidden;"
:scrollbar="{
type: 'mini',
invert: false,
}" :list="state.monitorList" :hoverStop="true" :hover="true" :step="0.3">
<div v-for="item, index in state.monitorList" :key="index"
:class="index % 2 != 0 ? 'dark' : 'light'" class="table-item"
style=" grid-template-columns: 1.5fr 2.5fr 3fr 2.5fr;">
<div>{{ index + 1 }}</div>
<div>
{{ item.planName }}
</div>
<div>{{ item.keystageTime }}</div>
<div>
{{ item.accumulativeProgress ? item.accumulativeProgress : 0 }}%
</div>
</div>
<div class="zanwu" v-if="state.monitorList.length == 0">
<img style="width: 9.375rem;" src="../../assets/images/zw.png" alt="">
<div class="zwtext">
暂无进度监控
</div>
</div>
</vue3-seamless-scroll>
</div>
</div>
</div>
</div>
<!-- 门禁记录 -->
<div class="center-top-item">
<div class="boxtitle">门禁记录</div>
<div class="center-item">
<div class="alarm-table-header">
<div>序号</div>
<div>姓名</div>
<div>进出门类型</div>
<div>刷卡时间</div>
<div>人员类型</div>
<div>是否佩戴口罩</div>
<div>是否超温</div>
</div>
<div class="scooll-box" ref="Access">
<vue3-seamless-scroll :copyNum="10" :wheel="true" style="height: 100%;overflow: hidden;"
:scrollbar="{
type: 'mini',
invert: false,
}" :list="state.tableData" :hoverStop="true" :hover="true" :step="0.3">
<div v-for="item, index in state.tableData" :key="index"
:class="index % 2 != 0 ? 'dark' : 'light'" class="table-item">
<div>{{ index + 1 }}</div>
<div>
{{ item.personName }}
</div>
<div>{{ stausList().find((res) =>
res.value == item.openType)?.label || '-' }}</div>
<div>
{{ item.startSwingTime }}
</div>
<div>{{ item.imageType == 1 ? '内部人员' : item.imageType == 2 ? '访客' : '-' }}</div>
<div
:style="{ color: item.maskState == 2 ? '#FF0A0A' : item.maskState == 3 ? '#00E287' : '#fff' }">
{{ item.maskState == 3 ? '带口罩' : item.maskState == 2 ? '没带口罩' : '未识别' }}
</div>
<div :style="{ color: item.overTemp ? '#FF0A0A' : '#00E287' }">
{{ item.overTemp ? '是' : '否' }}
</div>
</div>
<div class="zanwu" v-if="state.tableData.length == 0">
<img style="width: 12.5rem;" src="../../assets/images/zw.png" alt="">
<div class="zwtext">
暂无门禁记录
</div>
</div>
</vue3-seamless-scroll>
</div>
</div>
</div>
<!-- 施工人员工种分析 and 车辆机械设备统计 -->
<div class="right-top-item">
<div class="top-item">
<div class="boxtitle">施工人员工种分析</div>
<div class="boxcontent" id="staff">
</div>
</div>
<div class="top-item">
<div class="boxtitle">车辆机械设备统计</div>
<div class="boxcontent" id="car">
</div>
</div>
</div>
</div>
</div>
<promptfrom></promptfrom>
</div>
</template>
@ -725,7 +726,7 @@ function engineeringLog(params) {
.bottom-box {
width: 100%;
height: calc(66.66% - 1.25rem);
margin-top: 1.25rem;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 1.25rem;
@ -913,6 +914,7 @@ function engineeringLog(params) {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1.25rem;
margin-top: 1.25rem;
overflow: hidden;
}

Write Preview
Loading…
Cancel
Save