2199 lines
62 KiB
Vue
2199 lines
62 KiB
Vue
<template>
|
|
<div class="headerNoise">
|
|
<div class="headerNoise-left" v-if="!viewAllShow">
|
|
<Card title="工作票列表">
|
|
<div class="content-box">
|
|
<div class="box-header">
|
|
<div
|
|
@click="onWorkTicketStateClick(item)"
|
|
:class="{ box_active: workTicketInfo.status == item.stateType }"
|
|
v-for="item in workTicketCountList"
|
|
:key="item.label"
|
|
>
|
|
<div>
|
|
<div>{{ item.label }}</div>
|
|
<div>{{ item.value }}</div>
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
<div class="box-search">
|
|
<el-cascader
|
|
v-model="workTicketInfo.typeId"
|
|
:options="workTicketTypeTreeList"
|
|
filterable
|
|
clearable
|
|
collapse-tags
|
|
placeholder="工作票类型"
|
|
:show-all-levels="false"
|
|
:props="{
|
|
multiple: false,
|
|
checkStrictly: true,
|
|
emitPath: false,
|
|
value: 'id',
|
|
label: 'typeName',
|
|
}"
|
|
></el-cascader>
|
|
<el-input
|
|
v-model="workTicketInfo.numberOrContent"
|
|
placeholder="施工区域或工作票编号"
|
|
></el-input>
|
|
<el-date-picker
|
|
v-model="workTicketInfo.constructionTime"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
value-format="YYYY-MM-DD"
|
|
/>
|
|
<div @click="onWorkTicketQuery" class="query">查询</div>
|
|
<div @click="onWorkTicketRefresh" class="refresh">刷新</div>
|
|
</div>
|
|
<el-scrollbar class="box-main">
|
|
<div
|
|
style="height: 100%"
|
|
infinite-scroll-distance="1"
|
|
:infinite-scroll-immediate="false"
|
|
v-infinite-scroll="load"
|
|
>
|
|
<div class="box-main_box" v-for="item in workTicketList" :key="item.id">
|
|
<div>
|
|
<div>
|
|
<div></div>
|
|
<div>{{ item.workTicketNumber }}</div>
|
|
<div></div>
|
|
</div>
|
|
<div @click="onViewDetail(item)">查看</div>
|
|
</div>
|
|
<div>
|
|
<div>使用单位</div>
|
|
<div>{{ item.applicantNames }}</div>
|
|
</div>
|
|
<div>
|
|
<div>使用人员</div>
|
|
<div>{{ item.operator }}</div>
|
|
</div>
|
|
<div>
|
|
<div>提交时间</div>
|
|
<div>{{ item.applicationTime }}</div>
|
|
</div>
|
|
<div
|
|
class="box-btn"
|
|
:class="{
|
|
wks_active: item.status == 1,
|
|
sgz_active: item.status == 2,
|
|
ztz_active: item.status == 3,
|
|
ywg_acitve: item.status == 4,
|
|
}"
|
|
>
|
|
{{ updateStatus(item.status) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="notoDta" v-if="workTicketList.length == 0">
|
|
<img src="@/assets/images/noData.png" alt />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</el-scrollbar>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
<div class="headerNoise-right" :class="{ 'headerNoise-right_active': viewAllShow }">
|
|
<div class="h-card">
|
|
<div class="title">
|
|
<div><img src="@/assets/images/titleIcon.png" alt="" /></div>
|
|
<div class="titltText">
|
|
<i>作业过程管控</i>
|
|
</div>
|
|
<div class="right-icon" @click="onViewAllClick">
|
|
<el-icon @click.stop="onRefresh"><Refresh /></el-icon>
|
|
<div v-if="viewAllShow">
|
|
<el-select
|
|
@change="initPoliceCameraItemList"
|
|
v-model="policeCameraItemInfo.deviceState"
|
|
clearable
|
|
placeholder="请选择"
|
|
@visible-change="visibleChange"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in deviceStateList"
|
|
:key="index"
|
|
:label="item.title"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div>{{ !viewAllShow ? "查看所有施工中的监控录像" : "返回首页" }}</div>
|
|
<div :class="{ goback: viewAllShow }"></div>
|
|
</div>
|
|
</div>
|
|
<div class="content-main">
|
|
<div
|
|
v-if="!viewAllShow"
|
|
class="content-left"
|
|
:class="{ 'content-left_active': isShowDetail }"
|
|
>
|
|
<div
|
|
@click="isShowDetail = true"
|
|
class="content-left_box"
|
|
v-if="!isShowDetail"
|
|
>
|
|
<div>工作票详情</div>
|
|
<div></div>
|
|
</div>
|
|
<div class="content-left_box1" v-else>
|
|
<div class="box1-header">
|
|
<div>当前正在执行的工作票</div>
|
|
<div @click="isShowDetail = false" class="shrink-box"></div>
|
|
</div>
|
|
<el-scrollbar class="scrollbar-height">
|
|
<div class="box1">
|
|
<div>工作票类型</div>
|
|
<div>{{ workTicketDetail.typeName }}</div>
|
|
</div>
|
|
<!-- <div class="box1">
|
|
<div>风险状态</div>
|
|
<div
|
|
class="state-box"
|
|
:class="{
|
|
gfx_active: workTicketDetail.riskType == 2
|
|
}"
|
|
>
|
|
{{ workTicketDetail.riskType == 2 ? "高风险" : "一般风险" }}
|
|
</div>
|
|
</div> -->
|
|
<div class="box1">
|
|
<div>工作票编号</div>
|
|
<div>{{ workTicketDetail.workTicketNumber }}</div>
|
|
</div>
|
|
<div class="box1">
|
|
<div>当前绑定监控</div>
|
|
<div>{{ itemListDevNameUp }}</div>
|
|
</div>
|
|
<div class="box1">
|
|
<div>施工区域</div>
|
|
<div>{{ workTicketDetail.constructionAreaNames }}</div>
|
|
</div>
|
|
<div class="box1">
|
|
<div>申请单位</div>
|
|
<div>{{ workTicketDetail.applicantNames }}</div>
|
|
</div>
|
|
<!-- 敦煌升级 -->
|
|
<!-- <div class="box1">
|
|
<div>班组</div>
|
|
<div>{{ workTicketDetail.teamNames }}</div>
|
|
</div> -->
|
|
<div class="box1">
|
|
<div>作业人员</div>
|
|
<div>{{ workTicketDetail.operator }}</div>
|
|
</div>
|
|
<div class="box1">
|
|
<div>施工时间</div>
|
|
<div>
|
|
{{ workTicketDetail.constructionTimeBegin }} -
|
|
{{ workTicketDetail.constructionTimeEnd }}
|
|
</div>
|
|
</div>
|
|
<div class="box1">
|
|
<div>申请时间</div>
|
|
<div>{{ workTicketDetail.applicationTime }}</div>
|
|
</div>
|
|
<div class="box1">
|
|
<div>安全措施</div>
|
|
<div>{{ workTicketDetail.safetyMeasure }}</div>
|
|
</div>
|
|
<div class="box1">
|
|
<div>作业内容</div>
|
|
<div>{{ workTicketDetail.workContent }}</div>
|
|
</div>
|
|
<div class="box1-header">
|
|
<div>当前正在执行的工作票</div>
|
|
</div>
|
|
<div class="box1">
|
|
<div>工作票附件</div>
|
|
<div class="content-img">
|
|
<template
|
|
v-if="
|
|
workTicketDetail.workTicketAttachment &&
|
|
workTicketDetail.workTicketAttachment.length > 0
|
|
"
|
|
>
|
|
<el-image
|
|
v-for="item in workTicketDetail.workTicketAttachment"
|
|
:key="item.url"
|
|
:src="BASEURL + '/image/' + item.url"
|
|
:preview-src-list="[BASEURL + '/image/' + item.url]"
|
|
>
|
|
</el-image>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="box1">
|
|
<div>其他附件</div>
|
|
<div class="content-file_list">
|
|
<div v-for="item in workTicketDetail.otherAttachment" :key="item.url">
|
|
<div>
|
|
<div></div>
|
|
<div>{{ item.name }}</div>
|
|
</div>
|
|
<div
|
|
@click="
|
|
downloadFileBtn(BASEURL + '/image/' + item.url, item.name)
|
|
"
|
|
>
|
|
<div></div>
|
|
<div>下载</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
</div>
|
|
</div>
|
|
<div class="content-right" :class="{ 'content-right_active': isShowDetail }">
|
|
<el-scrollbar
|
|
:class="viewAllShow ? 'content-right_box-main1' : 'content-right_box-main'"
|
|
>
|
|
<!-- v-infinite-scroll="initPoliceCameraItemList" -->
|
|
<div
|
|
style="height: 100%"
|
|
infinite-scroll-distance="1"
|
|
:infinite-scroll-immediate="false"
|
|
:class="{
|
|
'content-right-top2': viewAllShow,
|
|
'content-right-top1': isShowDetail && !viewAllShow,
|
|
'content-right-top': !isShowDetail && !viewAllShow,
|
|
}"
|
|
>
|
|
<div
|
|
v-for="item in policeCameraItemList"
|
|
:key="item.itemId"
|
|
:data-key="item.key"
|
|
>
|
|
<div class="hls-video">
|
|
<!-- <HlsPlayer :src="'https://gcalic.v.myalicdn.com/gc/wgw05_1/index.m3u8'" :autoplay="true" :controls="true" /> -->
|
|
<!-- <HlsPlayer
|
|
:src="item.videoItemInfo && item.videoItemInfo.url ? item.videoItemInfo.url : ''"
|
|
:autoplay="true"
|
|
:controls="true"
|
|
/> -->
|
|
<div v-if="isWindows() && store.forceH5Play == 0" class="videoOverview" :id="`videoOverview${item.itemId}`">
|
|
<IscPlugin
|
|
:devList="[item]"
|
|
:itemId="item.itemId"
|
|
:type="'1x1'"
|
|
:equipmentDialog="equipmentDialog"
|
|
:visibleDialog="visibleDialog"
|
|
></IscPlugin>
|
|
</div>
|
|
<IscPlayer
|
|
v-else
|
|
:devList="[
|
|
{
|
|
...item,
|
|
status: workTicketDetail.status,
|
|
},
|
|
]"
|
|
:key="'player-' + item.itemId"
|
|
:playerId="'player-' + item.itemId"
|
|
/>
|
|
</div>
|
|
<div class="hls-video_title" @click="onEquipmentClick(item)">
|
|
<div>设备详情</div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
<el-pagination
|
|
class="pagerBox1"
|
|
background
|
|
:page-size="6"
|
|
style="justify-content: center"
|
|
@current-change="onCurrentChange"
|
|
layout="prev, pager, next"
|
|
:total="Number(policeCameraItemInfo.total)"
|
|
/>
|
|
<div class="content-right-bottom" v-if="!viewAllShow">
|
|
<div class="right-bottom_header">
|
|
<div>历史记录</div>
|
|
<div>
|
|
<el-date-picker
|
|
v-model="historySearchInfo.beginTime"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
value-format="YYYY-MM-DD"
|
|
/>
|
|
<!-- <el-input v-model="historySearchInfo.value" placeholder="设备名称"></el-input> -->
|
|
<div @click="getWorkTicketHistoryList" class="query">查询</div>
|
|
<div @click="onWorkTicketHistoryRefresh" class="refresh">刷新</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-bottom_main">
|
|
<el-table
|
|
:data="workTicketHistoryList"
|
|
:height="184"
|
|
:tree-props="{ children: 'fileList' }"
|
|
row-key="id"
|
|
style="width: 100%"
|
|
>
|
|
<el-table-column align="center" prop="fileName" label="序号">
|
|
<template #default="{ row }">
|
|
<span v-if="row.fileType">
|
|
{{ row.fileName }}
|
|
</span>
|
|
<span v-else> 第{{ row.no }}次作业 </span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:width="300"
|
|
align="center"
|
|
prop="startTime"
|
|
label="总时间段"
|
|
>
|
|
<template #default="{ row }">
|
|
<span v-if="row.fileType">
|
|
{{ row.startTime ? row.startTime : "暂无" }} -
|
|
{{ row.endTime ? row.endTime : "暂无" }}
|
|
</span>
|
|
<span>
|
|
{{ row.begin ? row.begin : "暂无" }} -
|
|
{{ row.end ? row.end : "暂无" }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="begin" label="总时长">
|
|
<template #default="{ row }">
|
|
<span class="time-diff" v-if="row.fileType">{{
|
|
itemDiffUp(row.startTime, row.endTime)
|
|
}}</span>
|
|
<span class="time-diff" v-else>{{
|
|
itemDiffUp(row.begin, row.end)
|
|
}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="fileType" label="操作">
|
|
<template #default="{ row }">
|
|
<div
|
|
@click="onViewrePlayClick(row)"
|
|
v-if="row.fileType"
|
|
class="viewreplay"
|
|
>
|
|
查看回放
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-dialog
|
|
:show-close="false"
|
|
:modal-append-to-body="false"
|
|
v-model="viewreplayDialog"
|
|
width="360px"
|
|
class="hls-video-dialog"
|
|
>
|
|
<div class="dialog_content">
|
|
<div class="audio-content" v-if="viewreplayInfo.fileType == 2">
|
|
<div>
|
|
<div>
|
|
<div></div>
|
|
<div>{{ viewreplayInfo.devName }}音频</div>
|
|
<div>{{ (viewreplayInfo.fileLen / (1024 * 1024)).toFixed(2) }}MB</div>
|
|
</div>
|
|
<div>
|
|
<div>{{ viewreplayInfo.fileTime }}</div>
|
|
<div>时长：{{ viewreplayInfo.duration }}</div>
|
|
</div>
|
|
</div>
|
|
<audio
|
|
ref="audioRefs"
|
|
:src="BASEURL + '/image/' + viewreplayInfo.fileUrl"
|
|
controls
|
|
loop
|
|
></audio>
|
|
<div
|
|
class="bodyworn_pause"
|
|
:class="{ bodyworn_play: viewreplayInfo.is_play }"
|
|
@click.stop="onAudioClick(viewreplayInfo)"
|
|
></div>
|
|
</div>
|
|
<div class="video-content" v-else>
|
|
<div class="card-img">
|
|
<video controls v-if="viewreplayInfo.fileType == 3">
|
|
<source
|
|
:src="BASEURL + '/image/' + viewreplayInfo.fileUrl"
|
|
type="video/mp4"
|
|
/>
|
|
<source
|
|
:src="BASEURL + '/image/' + viewreplayInfo.fileUrl"
|
|
type="video/webm"
|
|
/>
|
|
您的浏览器不支持 HTML5 video 标签。
|
|
</video>
|
|
<el-image
|
|
v-else-if="viewreplayInfo.fileType == 1"
|
|
:src="BASEURL + '/image/' + viewreplayInfo.fileUrl"
|
|
:preview-src-list="[BASEURL + '/image/' + viewreplayInfo.fileUrl]"
|
|
>
|
|
</el-image>
|
|
</div>
|
|
<template v-if="viewreplayInfo.fileType == 3">
|
|
<div class="card-flex">
|
|
<div class="card-num webkit-clamp_1">{{ viewreplayInfo.fileName }}</div>
|
|
<div class="card-num">
|
|
{{ (viewreplayInfo.fileLen / (1024 * 1024)).toFixed(2) }}MB
|
|
</div>
|
|
</div>
|
|
<div class="card-flex">
|
|
<div>{{ viewreplayInfo.startTime }}</div>
|
|
<p>至</p>
|
|
<div>{{ viewreplayInfo.endTime }}</div>
|
|
</div>
|
|
</template>
|
|
<template v-else-if="viewreplayInfo.fileType == 1">
|
|
<div class="card-flex">
|
|
<div>{{ viewreplayInfo.uploadTime }}</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
<el-dialog
|
|
title="设备详情"
|
|
:modal="false"
|
|
:modal-append-to-body="false"
|
|
v-model="equipmentDialog"
|
|
width="941px"
|
|
class="equipment-dialog"
|
|
>
|
|
<div class="dialog_content">
|
|
<div class="content-left">
|
|
<div>
|
|
<div>设备名称</div>
|
|
<div>
|
|
{{ equipmentDetail.devName ? equipmentDetail.devName : "--" }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>设备编号</div>
|
|
<div>{{ equipmentDetail.devSn ? equipmentDetail.devSn : "--" }}</div>
|
|
</div>
|
|
<div>
|
|
<div>所属项目</div>
|
|
<div>{{ projectSnName }}</div>
|
|
</div>
|
|
<div>
|
|
<div>设备状态</div>
|
|
<div
|
|
class="state-box"
|
|
:class="{ 'state-box_offline': equipmentDetail.deviceState != 1 }"
|
|
>
|
|
{{ equipmentDetail.deviceState == 1 ? "在线" : "离线" }}
|
|
</div>
|
|
</div>
|
|
<!-- <div>
|
|
<div>风险状态</div>
|
|
<div
|
|
class="state-box"
|
|
:class="{
|
|
gfx_active: workTicketDetail.riskType == 2
|
|
}"
|
|
>
|
|
{{ workTicketDetail.riskType == 2 ? "高风险" : "一般风险" }}
|
|
</div>
|
|
</div> -->
|
|
<div>
|
|
<div>工作票类型</div>
|
|
<div>
|
|
{{ workTicketDetail.typeName ? workTicketDetail.typeName : "--" }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>工作票编号</div>
|
|
<div>
|
|
{{
|
|
workTicketDetail.workTicketNumber
|
|
? workTicketDetail.workTicketNumber
|
|
: "--"
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>施工区域</div>
|
|
<div>
|
|
{{
|
|
workTicketDetail.constructionAreaNames
|
|
? workTicketDetail.constructionAreaNames
|
|
: "--"
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>申请单位</div>
|
|
<div>
|
|
{{
|
|
workTicketDetail.applicantNames ? workTicketDetail.applicantNames : "--"
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>作业人员</div>
|
|
<div>
|
|
{{ workTicketDetail.operator ? workTicketDetail.operator : "--" }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>施工时间</div>
|
|
<div>
|
|
{{ workTicketDetail.constructionTimeBegin }} -
|
|
{{ workTicketDetail.constructionTimeEnd }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>申请时间</div>
|
|
<div>
|
|
{{
|
|
workTicketDetail.applicationTime ? workTicketDetail.applicationTime : "--"
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>安全措施</div>
|
|
<div>
|
|
{{ workTicketDetail.safetyMeasure ? workTicketDetail.safetyMeasure : "--" }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>作业内容</div>
|
|
<div>
|
|
{{ workTicketDetail.workContent ? workTicketDetail.workContent : "--" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-right">
|
|
<div class="content-right_header">附件内容</div>
|
|
<div class="box1">
|
|
<div>工作票附件</div>
|
|
<div class="content-img">
|
|
<template
|
|
v-if="
|
|
workTicketDetail.workTicketAttachment &&
|
|
workTicketDetail.workTicketAttachment.length > 0
|
|
"
|
|
>
|
|
<el-image
|
|
v-for="item in workTicketDetail.workTicketAttachment"
|
|
:key="item.url"
|
|
:src="BASEURL + '/image/' + item.url"
|
|
:preview-src-list="[BASEURL + '/image/' + item.url]"
|
|
>
|
|
</el-image>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="box1">
|
|
<div>其他附件</div>
|
|
<div class="content-file_list">
|
|
<div v-for="item in workTicketDetail.otherAttachment" :key="item.url">
|
|
<div>
|
|
<div></div>
|
|
<div>{{ item.name }}</div>
|
|
</div>
|
|
<div @click="downloadFileBtn(BASEURL + '/image/' + item.url, item.name)">
|
|
<div></div>
|
|
<div>下载</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { GlobalStore } from "@/stores";
|
|
import { ref, onMounted, reactive, computed } from "vue";
|
|
import Card from "@/components/card.vue";
|
|
import HlsPlayer from "./components/HlsPlayer.vue";
|
|
import IscPlayer from "./components/iscPlayer.vue";
|
|
import IscPlugin from "./components/isc_plugin.vue";
|
|
import { ElMessage } from "element-plus";
|
|
import {
|
|
getWorkTicketCountWorkTicketApi,
|
|
getWorkTicketPageApi,
|
|
getWorkTicketTypeTreePageApi,
|
|
getWorkTicketQueryByIdApi,
|
|
getWorkTicketHistoryListApi,
|
|
getVideoItemInfoPoliceCameraItemApi,
|
|
getPoliceCameraItemPageApi,
|
|
selectAllProjectInfoList,
|
|
} from "@/api/modules/workTicket";
|
|
import { getUseProjectVideoConfigApi } from "@/api/modules/tower";
|
|
import { isWindows } from "@/utils/util";
|
|
import dayjs from "dayjs";
|
|
import duration from "dayjs/plugin/duration";
|
|
dayjs.extend(duration);
|
|
const BASEURL = import.meta.env.VITE_API_URL;
|
|
const store = GlobalStore();
|
|
const workTicketCountList = ref([
|
|
{
|
|
label: "施工中",
|
|
value: 0,
|
|
stateType: 2,
|
|
},
|
|
{
|
|
label: "全部",
|
|
value: 0,
|
|
stateType: "",
|
|
},
|
|
{
|
|
label: "未开始",
|
|
value: 0,
|
|
stateType: 1,
|
|
},
|
|
{
|
|
label: "暂停中",
|
|
value: 0,
|
|
stateType: 3,
|
|
},
|
|
{
|
|
label: "已完工",
|
|
value: 0,
|
|
stateType: 4,
|
|
},
|
|
]);
|
|
const getWorkTicketCountWorkTicket = (showLoading) => {
|
|
getWorkTicketCountWorkTicketApi(
|
|
{
|
|
projectSn: store.sn,
|
|
},
|
|
showLoading
|
|
).then((res) => {
|
|
if (res.code == 200) {
|
|
// workTicketCountList.value = res.result;
|
|
workTicketCountList.value = [
|
|
{
|
|
label: "施工中",
|
|
value: res.result.ing,
|
|
stateType: 2,
|
|
},
|
|
{
|
|
label: "全部",
|
|
stateType: "",
|
|
value:
|
|
res.result.ing + res.result.done + res.result.pause + res.result.notStarted,
|
|
},
|
|
{
|
|
label: "未开始",
|
|
value: res.result.notStarted,
|
|
stateType: 1,
|
|
},
|
|
{
|
|
label: "暂停中",
|
|
value: res.result.pause,
|
|
stateType: 3,
|
|
},
|
|
{
|
|
label: "已完工",
|
|
value: res.result.done,
|
|
stateType: 4,
|
|
},
|
|
];
|
|
}
|
|
});
|
|
};
|
|
const workTicketInfo = reactive({
|
|
status: 2,
|
|
typeId: "",
|
|
numberOrContent: "",
|
|
constructionTime: [],
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
});
|
|
const workTicketList = ref([]);
|
|
const onWorkTicketStateClick = (row) => {
|
|
workTicketInfo.status = row.stateType;
|
|
onWorkTicketQuery();
|
|
};
|
|
const onWorkTicketQuery = () => {
|
|
workTicketInfo.pageNo = 1;
|
|
workTicketList.value = [];
|
|
getWorkTicketPage();
|
|
};
|
|
const onWorkTicketRefresh = () => {
|
|
// workTicketInfo.status = "";
|
|
workTicketInfo.typeId = "";
|
|
workTicketInfo.numberOrContent = "";
|
|
workTicketInfo.constructionTime = [];
|
|
onWorkTicketQuery();
|
|
};
|
|
const getWorkTicketPage = () => {
|
|
const params = {
|
|
...workTicketInfo,
|
|
applicationTime_begin:
|
|
workTicketInfo.constructionTime.length > 0
|
|
? workTicketInfo.constructionTime[0]
|
|
: "",
|
|
applicationTime_end:
|
|
workTicketInfo.constructionTime.length > 0
|
|
? workTicketInfo.constructionTime[1]
|
|
: "",
|
|
};
|
|
delete params.constructionTime;
|
|
getWorkTicketPageApi({
|
|
...params,
|
|
projectSn: store.sn,
|
|
}).then((res) => {
|
|
if (res.code == 200) {
|
|
workTicketList.value = workTicketList.value.concat(res.result.records);
|
|
if (workTicketInfo.pageNo == 1) {
|
|
console.log("进来了", Number(res.result.total));
|
|
workTicketInfo.total = Number(res.result.total);
|
|
if (workTicketList.value.length > 0) {
|
|
onViewDetail(workTicketList.value[0], true);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
};
|
|
const load = () => {
|
|
console.log(
|
|
"load",
|
|
workTicketInfo.pageNo,
|
|
workTicketInfo.pageSize,
|
|
workTicketInfo.total
|
|
);
|
|
if (workTicketInfo.pageNo > 0 && workTicketInfo.total == 0) return;
|
|
if (workTicketInfo.pageNo * workTicketInfo.pageSize > workTicketInfo.total)
|
|
return ElMessage.warning("没有更多数据了！");
|
|
workTicketInfo.pageNo += 1;
|
|
getWorkTicketPage();
|
|
};
|
|
|
|
onMounted(() => {
|
|
getWorkTicketPage();
|
|
getWorkTicketCountWorkTicket(false);
|
|
// 定时三十秒刷新
|
|
// setInterval(() => {
|
|
// // getWorkTicketCountWorkTicket(true);
|
|
// }, 30000);
|
|
getWorkTicketTypeTreePage();
|
|
getProjectVideoConfigList();
|
|
getSelectAllProjectInfoList();
|
|
});
|
|
const viewAllShow = ref(false);
|
|
const onViewAllClick = () => {
|
|
viewAllShow.value = !viewAllShow.value;
|
|
if (viewAllShow.value) {
|
|
policeCameraItemInfo.deviceState = 1;
|
|
policeCameraItemInfo.pageSize = policeCameraItemInfo.pageSize;
|
|
} else {
|
|
policeCameraItemInfo.deviceState = "";
|
|
policeCameraItemInfo.pageSize = policeCameraItemInfo.pageSize;
|
|
}
|
|
initPoliceCameraItemList();
|
|
};
|
|
|
|
const equipmentDialog = ref(false);
|
|
const equipmentDetail = ref({});
|
|
const visibleDialog = ref(false);
|
|
const visibleChange = (val) => {
|
|
visibleDialog.value = val;
|
|
};
|
|
// 查看设备详情
|
|
const onEquipmentClick = (row) => {
|
|
equipmentDetail.value = row;
|
|
getWorkTicketQueryById(equipmentDetail.value.workTicketId);
|
|
equipmentDialog.value = true;
|
|
};
|
|
|
|
const viewreplayInfo = ref({});
|
|
const viewreplayDialog = ref(false);
|
|
const audioRefs = ref(null);
|
|
// 查看回放
|
|
const onViewrePlayClick = (row) => {
|
|
console.log(111);
|
|
viewreplayInfo.value = {
|
|
...row,
|
|
is_play: false,
|
|
};
|
|
viewreplayDialog.value = true;
|
|
};
|
|
// 播放音频
|
|
const onAudioClick = () => {
|
|
if (viewreplayInfo.value.is_play) {
|
|
audioRefs.value.pause();
|
|
viewreplayInfo.value.is_play = false;
|
|
} else {
|
|
audioRefs.value.play();
|
|
viewreplayInfo.value.is_play = true;
|
|
}
|
|
};
|
|
const isShowDetail = ref(true);
|
|
const workTicketDetail = ref({
|
|
workTicketAttachment: [],
|
|
});
|
|
// 用来判断数据是否为json格式
|
|
const isJSON = (str) => {
|
|
try {
|
|
JSON.parse(str);
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
return true;
|
|
};
|
|
const timeInterval = ref(null);
|
|
// 查看详情
|
|
const onViewDetail = (row, flag) => {
|
|
if (row.id == workTicketDetail.value.id && flag != true) return;
|
|
workTicketDetail.value = row;
|
|
getWorkTicketQueryById(workTicketDetail.value.id);
|
|
getWorkTicketHistoryList();
|
|
initPoliceCameraItemList();
|
|
if (timeInterval.value) {
|
|
clearInterval(timeInterval.value);
|
|
}
|
|
timeInterval.value = setInterval(() => {
|
|
initPoliceCameraItemList();
|
|
}, 1000 * 60 * 30);
|
|
};
|
|
// 通过id查询作业票详情
|
|
const getWorkTicketQueryById = (id) => {
|
|
getWorkTicketQueryByIdApi({
|
|
id: id,
|
|
projectSn: store.sn,
|
|
}).then((res) => {
|
|
if (res.code == 200) {
|
|
workTicketDetail.value = {
|
|
...res.result,
|
|
workTicketAttachment:
|
|
isJSON(res.result.workTicketAttachment) &&
|
|
JSON.parse(res.result.workTicketAttachment) instanceof Array
|
|
? JSON.parse(res.result.workTicketAttachment)
|
|
: [],
|
|
safetyRiskAnalysis:
|
|
isJSON(res.result.safetyRiskAnalysis) &&
|
|
JSON.parse(res.result.safetyRiskAnalysis) instanceof Array
|
|
? JSON.parse(res.result.safetyRiskAnalysis)
|
|
: [],
|
|
otherAttachment:
|
|
isJSON(res.result.otherAttachment) &&
|
|
JSON.parse(res.result.otherAttachment) instanceof Array
|
|
? JSON.parse(res.result.otherAttachment)
|
|
: [],
|
|
};
|
|
}
|
|
});
|
|
};
|
|
const historySearchInfo = reactive({
|
|
beginTime: [],
|
|
value: "",
|
|
});
|
|
const workTicketHistoryList = ref([]);
|
|
const onWorkTicketHistoryRefresh = () => {
|
|
historySearchInfo.value = "";
|
|
historySearchInfo.beginTime = [];
|
|
getWorkTicketHistoryList();
|
|
};
|
|
// 列表查询工作票历史记录信息
|
|
const getWorkTicketHistoryList = () => {
|
|
const params = {
|
|
...historySearchInfo,
|
|
begin_end:
|
|
historySearchInfo.beginTime.length > 0 ? historySearchInfo.beginTime[0] : "",
|
|
end_start:
|
|
historySearchInfo.beginTime.length > 0 ? historySearchInfo.beginTime[1] : "",
|
|
};
|
|
delete params.beginTime;
|
|
getWorkTicketHistoryListApi({
|
|
...params,
|
|
workTicketId: workTicketDetail.value.id,
|
|
projectSn: store.sn,
|
|
}).then((res) => {
|
|
if (res.code == 200) {
|
|
const resultList = res.result.sort((a, b) => a.no - b.no);
|
|
workTicketHistoryList.value = resultList.map((item) => {
|
|
return {
|
|
...item,
|
|
};
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
const policeCameraItemInfo = reactive({
|
|
pageNo: 1,
|
|
pageSize: 6,
|
|
total: 0,
|
|
deviceState: "",
|
|
});
|
|
const deviceStateList = [
|
|
{
|
|
id: "",
|
|
title: "全部设备",
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "施工中在线",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "施工中离线",
|
|
},
|
|
];
|
|
const policeCameraItemList = ref([]);
|
|
const initPoliceCameraItemList = () => {
|
|
policeCameraItemInfo.pageNo = 1;
|
|
policeCameraItemList.value = [];
|
|
getPoliceCameraItemPage();
|
|
};
|
|
|
|
const onCurrentChange = (val) => {
|
|
policeCameraItemInfo.pageNo = val;
|
|
policeCameraItemList.value = [];
|
|
getPoliceCameraItemPage();
|
|
};
|
|
// 分页列表查询执法记录仪设备列表信息
|
|
const getPoliceCameraItemPage = () => {
|
|
const params = {
|
|
...policeCameraItemInfo,
|
|
};
|
|
getPoliceCameraItemPageApi({
|
|
...params,
|
|
ticketId: viewAllShow.value ? "" : workTicketDetail.value.id,
|
|
// deviceState: viewAllShow.value ? 1 : "",
|
|
bindTicket: viewAllShow.value ? 1 : "",
|
|
projectSn: store.sn,
|
|
}).then(async (res) => {
|
|
if (res.code == 200) {
|
|
const records = res.result.records;
|
|
// await Promise.all(
|
|
// records.map(async item => {
|
|
// item.videoItemInfo = await getVideoItemInfoPoliceCameraItem(item);
|
|
// })
|
|
// );
|
|
console.log("policeCameraItemList", records);
|
|
policeCameraItemList.value = policeCameraItemList.value.concat(records);
|
|
if (policeCameraItemInfo.pageNo == 1) {
|
|
console.log("进来了", Number(res.result.total));
|
|
policeCameraItemInfo.total = Number(res.result.total);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
const policeCameraItemLoad = () => {
|
|
console.log(
|
|
"load",
|
|
policeCameraItemInfo.pageNo,
|
|
policeCameraItemInfo.pageSize,
|
|
policeCameraItemInfo.total
|
|
);
|
|
if (policeCameraItemInfo.pageNo > 0 && policeCameraItemInfo.total == 0) return;
|
|
if (
|
|
policeCameraItemInfo.pageNo * policeCameraItemInfo.pageSize >
|
|
policeCameraItemInfo.total
|
|
)
|
|
return ElMessage.warning("没有更多数据了！");
|
|
policeCameraItemInfo.pageNo += 1;
|
|
getPoliceCameraItemPage();
|
|
};
|
|
|
|
const getVideoItemInfoPoliceCameraItem = async (row) => {
|
|
const res = await getVideoItemInfoPoliceCameraItemApi({
|
|
itemId: row.itemId,
|
|
projectSn: store.sn,
|
|
});
|
|
if (res.code != 200) return null;
|
|
return res.result.videoInfo;
|
|
};
|
|
const videoConfig = ref({
|
|
enableNotPlugin: 1,
|
|
});
|
|
//查询项目各类型的视频配置信息
|
|
const getProjectVideoConfigList = () => {
|
|
getUseProjectVideoConfigApi({
|
|
projectSn: store.sn,
|
|
}).then((res) => {
|
|
if (res.code == 200) {
|
|
if (res.result) {
|
|
videoConfig.value = res.result;
|
|
} else {
|
|
videoConfig.enableNotPlugin = 1;
|
|
}
|
|
}
|
|
});
|
|
};
|
|
const onRefresh = () => {
|
|
if (!viewAllShow.value) {
|
|
onWorkTicketQuery();
|
|
} else {
|
|
policeCameraItemList.value = [];
|
|
getPoliceCameraItemPage();
|
|
}
|
|
};
|
|
|
|
const statusList = [
|
|
{
|
|
value: 1,
|
|
label: "未开始",
|
|
},
|
|
{
|
|
value: 2,
|
|
label: "施工中",
|
|
},
|
|
{
|
|
value: 3,
|
|
label: "暂停中",
|
|
},
|
|
{
|
|
value: 4,
|
|
label: "已完工",
|
|
},
|
|
];
|
|
const updateStatus = computed(() => {
|
|
return (id) => {
|
|
const find = statusList.find((item) => item.value == id);
|
|
return find ? find.label : "--";
|
|
};
|
|
});
|
|
const itemListDevNameUp = computed(() => {
|
|
return workTicketDetail.value.itemList
|
|
? workTicketDetail.value.itemList.map((item) => item.devName).join("、")
|
|
: "";
|
|
});
|
|
const workTicketTypeTreeList = ref([]);
|
|
// 获取工作票类型
|
|
const getWorkTicketTypeTreePage = () => {
|
|
let data = {
|
|
projectSn: store.sn,
|
|
pageNo: 1,
|
|
pageSize: -1,
|
|
};
|
|
getWorkTicketTypeTreePageApi(data).then((res) => {
|
|
if (res.code == 200) {
|
|
workTicketTypeTreeList.value = res.result.records;
|
|
}
|
|
});
|
|
};
|
|
const itemDiffUp = computed(() => {
|
|
return (begin, end) => {
|
|
// 定义两个日期
|
|
const date = dayjs();
|
|
const date1 = dayjs(begin);
|
|
const date2 = end ? dayjs(end) : date;
|
|
// 计算两个日期之间的差异（默认单位是毫秒）
|
|
const diffInMilliseconds = date2.diff(date1);
|
|
const durationObj = dayjs.duration(diffInMilliseconds);
|
|
const hour = durationObj.hours();
|
|
const minute = durationObj.minutes();
|
|
const second = durationObj.seconds();
|
|
return `${hour}h${minute}min${second}s`;
|
|
};
|
|
});
|
|
// 下载附件
|
|
const downloadFileBtn = (url, name) => {
|
|
fetch(url)
|
|
.then((response) => {
|
|
// 处理响应
|
|
if (!response.ok) {
|
|
throw new Error("下载失败");
|
|
}
|
|
return response.blob();
|
|
})
|
|
.then((blob) => {
|
|
// 创建一个下载链接
|
|
const url = window.URL.createObjectURL(blob);
|
|
// 创建一个<a>元素
|
|
const link = document.createElement("a");
|
|
link.href = url;
|
|
link.download = name; // 指定下载文件的文件名
|
|
// 模拟点击下载链接
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
// 释放URL对象
|
|
window.URL.revokeObjectURL(url);
|
|
// 处理导出的文件
|
|
// 这里可以使用blob对象来获取导出的文件内容或者将其保存到本地
|
|
})
|
|
.catch((error) => {
|
|
// 处理错误
|
|
console.error(error);
|
|
});
|
|
};
|
|
const projectList = ref([]);
|
|
const getSelectAllProjectInfoList = () => {
|
|
selectAllProjectInfoList({
|
|
sn: store.sn,
|
|
}).then((res) => {
|
|
if (res.code == 200) {
|
|
projectList.value = [
|
|
{
|
|
projectName: "全部项目",
|
|
projectSn: store.sn,
|
|
},
|
|
...res.result,
|
|
];
|
|
}
|
|
});
|
|
};
|
|
const projectSnName = computed(() => {
|
|
const find = projectList.value.find(
|
|
(item) => item.projectSn == workTicketDetail.value.projectSn
|
|
);
|
|
return find ? find.projectName : "";
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.headerNoise {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.headerNoise-left {
|
|
width: 400px;
|
|
height: 100%;
|
|
|
|
.content-box {
|
|
padding: 20px 10px;
|
|
height: calc(100% - 40px);
|
|
width: calc(100% - 20px);
|
|
.box-main {
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
overflow-y: auto;
|
|
height: 550px;
|
|
|
|
.box-main_box:not(:first-child) {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.box-main_box {
|
|
width: calc(100% - 20px);
|
|
background: url("@/assets/images/cardImg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 10px;
|
|
position: relative;
|
|
|
|
.box-btn {
|
|
width: 53px;
|
|
height: 20px;
|
|
border-radius: 2px;
|
|
border: 1px solid #f1f1f1;
|
|
font-weight: 500;
|
|
font-size: 11px;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
}
|
|
.wks_active {
|
|
background-color: #727e93;
|
|
}
|
|
|
|
.sgz_active {
|
|
background-color: rgba(108, 184, 255, 0.5);
|
|
}
|
|
|
|
.ztz_active {
|
|
background-color: rgba(195, 129, 0, 0.5);
|
|
}
|
|
|
|
.ywg_acitve {
|
|
background-color: rgba(154, 245, 108, 0.5);
|
|
}
|
|
|
|
> div:not(:first-child) {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-top: 8px;
|
|
margin-left: 25px;
|
|
font-size: 14px;
|
|
|
|
> div:last-child {
|
|
color: #ffffff;
|
|
margin-left: 10px;
|
|
flex: 1;
|
|
word-break: break-all;
|
|
}
|
|
|
|
> div:first-child {
|
|
width: 56px;
|
|
color: #a1accb;
|
|
}
|
|
}
|
|
|
|
> div:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
> div:last-child {
|
|
font-size: 14px;
|
|
color: #5181f6;
|
|
cursor: pointer;
|
|
}
|
|
|
|
> div:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
> div:nth-child(1) {
|
|
width: 15px;
|
|
height: 15px;
|
|
background: url("@/assets/images/workTicket/index-icon6.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
> div:not(:first-child) {
|
|
margin-left: 10px;
|
|
font-weight: 800;
|
|
font-size: 15px;
|
|
color: #65d7f9;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.box-search {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 20px;
|
|
|
|
.el-input {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.el-input,
|
|
.el-cascader {
|
|
width: 147px;
|
|
border-image: linear-gradient(
|
|
180deg,
|
|
rgba(148, 160, 180, 1),
|
|
rgba(92, 111, 141, 1)
|
|
)
|
|
1 1;
|
|
}
|
|
|
|
:deep(.el-date-editor) {
|
|
width: 36%;
|
|
margin-top: 10px;
|
|
.el-range-input {
|
|
color: white;
|
|
// background-color: transparent;
|
|
}
|
|
}
|
|
|
|
:deep(.el-cascader),
|
|
:deep(.el-input),
|
|
:deep(.el-date-editor) {
|
|
height: 23px;
|
|
color: white;
|
|
background: linear-gradient(180deg, #112d59 0%, #112d59 100%);
|
|
}
|
|
|
|
:deep(.el-input__wrapper) {
|
|
background: linear-gradient(180deg, #112d59 0%, #112d59 100%);
|
|
}
|
|
|
|
.query {
|
|
margin-top: 10px;
|
|
margin-left: 20px;
|
|
width: 45px;
|
|
// height: 20px;
|
|
padding: 2px 12px;
|
|
background: url("@/assets/images/cardImg1.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.refresh {
|
|
margin-top: 10px;
|
|
margin-left: 8px;
|
|
width: 45px;
|
|
padding: 2px 12px;
|
|
// height: 20px;
|
|
background: url("@/assets/images/cardImg2.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
}
|
|
|
|
.box-header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.box_active {
|
|
border: 1px solid #7effef;
|
|
}
|
|
|
|
> div:nth-child(1) {
|
|
width: 41%;
|
|
> div:last-child {
|
|
width: 38px;
|
|
height: 38px;
|
|
background: url("@/assets/images/workTicket/index-icon1.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
> div:nth-child(2) {
|
|
width: 41%;
|
|
> div:last-child {
|
|
width: 38px;
|
|
height: 38px;
|
|
background: url("@/assets/images/workTicket/index-icon3.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
> div:nth-child(3),
|
|
> div:nth-child(4),
|
|
> div:nth-child(5) {
|
|
margin-top: 20px;
|
|
width: 24%;
|
|
> div:last-child {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
}
|
|
|
|
> div:nth-child(3) > div:last-child {
|
|
background: url("@/assets/images/workTicket/index-icon2.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
> div:nth-child(4) > div:last-child {
|
|
background: url("@/assets/images/workTicket/index-icon4.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
> div:nth-child(5) > div:last-child {
|
|
background: url("@/assets/images/workTicket/index-icon5.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
> div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 9px 10px 9px 16px;
|
|
border: 1px solid transparent;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(0, 170, 255, 0.3) 0%,
|
|
rgba(0, 170, 255, 0) 100%
|
|
);
|
|
|
|
> div:first-child {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
> div:last-child {
|
|
color: #7effef;
|
|
font-size: 20px;
|
|
}
|
|
|
|
> div:first-child {
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.content) {
|
|
height: 94.5%;
|
|
}
|
|
}
|
|
|
|
.headerNoise-right {
|
|
margin-left: 20px;
|
|
width: 1460px;
|
|
height: 100%;
|
|
|
|
.h-card {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
.title {
|
|
background: url("@/assets/images/titleImg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
div {
|
|
font-size: 18px;
|
|
color: #ffffff;
|
|
|
|
img {
|
|
width: 110%;
|
|
margin-left: 30%;
|
|
}
|
|
|
|
i {
|
|
font-family: OPPOSansH;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.titltText {
|
|
margin: 0% 0% 6px 20px;
|
|
letter-spacing: 2px;
|
|
/* 设置文字间距为2像素 */
|
|
}
|
|
|
|
.right-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
cursor: pointer;
|
|
:deep(.el-input__wrapper) {
|
|
background-color: transparent;
|
|
}
|
|
:deep(.el-input__inner) {
|
|
height: 23px;
|
|
line-height: 23px;
|
|
background-color: transparent;
|
|
color: white;
|
|
}
|
|
> div:last-child {
|
|
width: 26px;
|
|
height: 26px;
|
|
background-image: url("@/assets/images/workTicket/index-icon8.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.goback {
|
|
background-image: url("@/assets/images/workTicket/goback.png") !important;
|
|
}
|
|
> div:not(:first-child) {
|
|
margin-left: 10px;
|
|
}
|
|
> div:nth-child(2) {
|
|
font-weight: bold;
|
|
font-size: 15px;
|
|
color: #65d7f9;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-main {
|
|
margin-top: 1%;
|
|
height: 94%;
|
|
display: flex;
|
|
.content-left_active {
|
|
width: 451px !important;
|
|
}
|
|
|
|
.content-left {
|
|
width: 80px;
|
|
height: 100%;
|
|
background: url("@/assets/images/cardImg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
.content-left_box1 {
|
|
padding: 10px 20px 20px;
|
|
// overflow: auto;
|
|
overflow: hidden;
|
|
height: calc(100% - 30px);
|
|
.scrollbar-height {
|
|
height: calc(100% - 30px);
|
|
}
|
|
.box1 {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 10px 0;
|
|
font-size: 14px;
|
|
|
|
> div:last-child {
|
|
color: #ffffff;
|
|
margin-left: 10px;
|
|
flex: 1;
|
|
word-break: break-all;
|
|
}
|
|
|
|
> div:first-child {
|
|
width: 70px;
|
|
color: #a2a4af;
|
|
}
|
|
.content-file_list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
> div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 30px;
|
|
padding: 0 16px 0 20px;
|
|
background: rgba(39, 88, 192, 0.2);
|
|
> div:first-child {
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
> div:last-child {
|
|
width: 170px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
> div:first-child {
|
|
width: 16px;
|
|
height: 16px;
|
|
background: url("@/assets/images/workTicket/index-icon9.png")
|
|
no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
> div:last-child {
|
|
font-size: 14px;
|
|
color: #5181f6;
|
|
cursor: pointer;
|
|
> div:first-child {
|
|
width: 16px;
|
|
height: 16px;
|
|
background: url("@/assets/images/workTicket/index-icon10.png")
|
|
no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
> div {
|
|
display: flex;
|
|
align-items: center;
|
|
> div:not(:first-child) {
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content-img {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
> .el-image:nth-child(n + 4) {
|
|
margin-top: 20px;
|
|
}
|
|
> .el-image:not(:nth-child(3n + 1)) {
|
|
margin-left: 20px;
|
|
}
|
|
> .el-image {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
.state-box {
|
|
padding: 4px 8px;
|
|
min-width: 40px;
|
|
color: white;
|
|
background-color: #88cf65;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
flex: initial !important;
|
|
}
|
|
.gfx_active {
|
|
background-color: #ff0000;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.box1-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 0;
|
|
.shrink-box {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: url("@/assets/images/workTicket/index-icon7.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
transform: rotate(180deg);
|
|
}
|
|
> div:first-child {
|
|
font-weight: 800;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
.content-left_box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
> div:last-child {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: url("@/assets/images/workTicket/index-icon7.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
|
}
|
|
> div:first-child {
|
|
font-weight: 800;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
writing-mode: vertical-rl;
|
|
cursor: pointer;
|
|
letter-spacing: 6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-right_active {
|
|
width: calc(100% - 451px) !important;
|
|
}
|
|
|
|
.content-right {
|
|
margin-left: 20px;
|
|
width: calc(100% - 100px);
|
|
|
|
.hls-video {
|
|
width: 100%;
|
|
height: 160px;
|
|
}
|
|
.videoOverview {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.hls-video_title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
padding: 8px 0;
|
|
> div:last-child {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: url("@/assets/images/workTicket/index-icon7.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
> div:first-child {
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.content-right_box-main {
|
|
height: calc(100% - 32px - 182px - 34px - 12px - 32px);
|
|
}
|
|
.content-right-top1 {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
> div {
|
|
width: 31%;
|
|
height: 195px;
|
|
background: url("@/assets/images/cardImg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
> div:not(:nth-child(3n + 1)) {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
> div:nth-child(n + 4) {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
.content-right-top {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
> div {
|
|
width: 24%;
|
|
height: 195px;
|
|
background: url("@/assets/images/cardImg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
> div:not(:nth-child(4n + 1)) {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
> div:nth-child(n + 5) {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.content-right-bottom {
|
|
margin-top: 16px;
|
|
|
|
.right-bottom_main {
|
|
height: 182px;
|
|
padding: 12px 10px;
|
|
margin-top: 12px;
|
|
background: rgba(39, 88, 192, 0.1);
|
|
box-shadow: inset 0px 0px 2px 2px #051220;
|
|
border: 1px solid rgba(39, 88, 192, 0.6);
|
|
.el-table__expand-icon > .el-icon {
|
|
font-size: 14px;
|
|
color: #b2b8c2;
|
|
}
|
|
.time-diff {
|
|
padding: 3px 10px;
|
|
background: rgba(75, 141, 236, 0.1);
|
|
border: 1px solid #1560c5;
|
|
border-radius: 38px;
|
|
font-size: 11px;
|
|
color: #ffffff;
|
|
}
|
|
.viewreplay {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
color: #65d7f9;
|
|
cursor: pointer;
|
|
}
|
|
|
|
:deep(.el-table) {
|
|
background-color: transparent;
|
|
|
|
th {
|
|
background-color: #003173;
|
|
border-color: transparent;
|
|
font-size: 16px;
|
|
}
|
|
|
|
tr,
|
|
td {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.el-table__header-wrapper {
|
|
padding: 5px 0;
|
|
background: url("@/assets/images/cardImg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.el-table__inner-wrapper::before {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-bottom_header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
> div:last-child {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.el-input {
|
|
width: 147px;
|
|
}
|
|
|
|
:deep(.el-date-editor) {
|
|
width: 260px;
|
|
}
|
|
|
|
.el-input,
|
|
:deep(.el-date-editor) {
|
|
height: 23px;
|
|
margin-left: 10px;
|
|
color: white;
|
|
background: linear-gradient(180deg, #112d59 0%, #112d59 100%);
|
|
}
|
|
|
|
:deep(.el-input__wrapper) {
|
|
background: linear-gradient(180deg, #112d59 0%, #112d59 100%);
|
|
}
|
|
|
|
.query {
|
|
margin-left: 20px;
|
|
width: 50px;
|
|
// height: 20px;
|
|
padding: 2px 12px;
|
|
background: url("@/assets/images/cardImg1.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.refresh {
|
|
margin-left: 8px;
|
|
width: 50px;
|
|
padding: 2px 12px;
|
|
// height: 20px;
|
|
background: url("@/assets/images/cardImg2.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
}
|
|
|
|
> div:first-child {
|
|
font-weight: 800;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.headerNoise-right_active {
|
|
margin-left: 20px;
|
|
width: 100%;
|
|
.h-card .content-main .content-right_active {
|
|
width: 100% !important;
|
|
}
|
|
.content-right {
|
|
margin-left: 0 !important;
|
|
width: 100% !important;
|
|
}
|
|
.content-right_box-main1 {
|
|
height: calc(100% - 32px) !important;
|
|
}
|
|
.content-right-top2 {
|
|
height: 100% !important;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
|
|
> div {
|
|
width: 32% !important;
|
|
height: 350px;
|
|
background: url("@/assets/images/cardImg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
margin: 0 !important;
|
|
.hls-video {
|
|
height: 310px !important;
|
|
}
|
|
:deep(.sub-wnd) {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
> div:not(:nth-child(3n + 1)) {
|
|
margin-left: 20px !important;
|
|
}
|
|
|
|
> div:nth-child(n + 4) {
|
|
margin-top: 20px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
:deep(.equipment-dialog) {
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
margin-top: 0;
|
|
background: rgba(7, 28, 49, 0.9);
|
|
border: 1px solid #405e97;
|
|
.el-dialog__header {
|
|
padding: 15px 20px 5px;
|
|
}
|
|
.el-dialog__title {
|
|
font-style: italic;
|
|
color: white;
|
|
}
|
|
.el-dialog__body {
|
|
padding: 0 !important;
|
|
}
|
|
.dialog_content {
|
|
padding: 0 20px 5px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
overflow-y: auto;
|
|
max-height: 85vh;
|
|
// flex-wrap: wrap;
|
|
.content-right {
|
|
width: 48%;
|
|
.content-right_header {
|
|
font-weight: 800;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
}
|
|
.box1 {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 10px 0;
|
|
font-size: 14px;
|
|
|
|
> div:last-child {
|
|
color: #ffffff;
|
|
margin-left: 10px;
|
|
flex: 1;
|
|
word-break: break-all;
|
|
}
|
|
|
|
> div:first-child {
|
|
width: 70px;
|
|
color: #a2a4af;
|
|
}
|
|
.content-file_list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
> div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 30px;
|
|
padding: 0 16px 0 20px;
|
|
background: rgba(39, 88, 192, 0.2);
|
|
> div:first-child {
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
> div:last-child {
|
|
width: 170px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
> div:first-child {
|
|
width: 16px;
|
|
height: 16px;
|
|
background: url("~@/assets/images/companyBigScreen/terminalOperation/index-icon9.png")
|
|
no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
> div:last-child {
|
|
font-size: 14px;
|
|
color: #5181f6;
|
|
cursor: pointer;
|
|
> div:first-child {
|
|
width: 16px;
|
|
height: 16px;
|
|
background: url("~@/assets/images/companyBigScreen/terminalOperation/index-icon10.png")
|
|
no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
> div {
|
|
display: flex;
|
|
align-items: center;
|
|
> div:not(:first-child) {
|
|
margin-left: 6px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content-img {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
> .el-image:nth-child(n + 4) {
|
|
margin-top: 20px;
|
|
}
|
|
> .el-image:not(:nth-child(3n + 1)) {
|
|
margin-left: 20px;
|
|
}
|
|
> .el-image {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content-left {
|
|
width: 49%;
|
|
> div {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
font-size: 14px;
|
|
padding: 10px 0;
|
|
|
|
> div:last-child {
|
|
color: #ffffff;
|
|
margin-left: 10px;
|
|
flex: 1;
|
|
word-break: break-all;
|
|
}
|
|
|
|
> div:first-child {
|
|
width: 70px;
|
|
color: #a2a4af;
|
|
}
|
|
.state-box {
|
|
padding: 4px 8px;
|
|
min-width: 40px;
|
|
color: white;
|
|
background-color: #88cf65;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
flex: initial !important;
|
|
}
|
|
.state-box_offline {
|
|
background-color: #f7f7f7;
|
|
color: #272d45 !important;
|
|
}
|
|
.gfx_active {
|
|
background-color: #ff0000;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
:deep(.hls-video-dialog) {
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
margin-top: 0;
|
|
.el-dialog__header {
|
|
display: none;
|
|
}
|
|
.el-dialog__body {
|
|
padding: 0 !important;
|
|
}
|
|
.dialog_content {
|
|
padding: 0 !important;
|
|
height: initial;
|
|
overflow: hidden;
|
|
}
|
|
.audio-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 13px 22px 13px 13px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
audio {
|
|
opacity: 0;
|
|
position: absolute;
|
|
left: 0;
|
|
// right: -67%;
|
|
}
|
|
|
|
> div:last-child {
|
|
width: 26px;
|
|
height: 26px;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.bodyworn_pause {
|
|
background-image: url("@/assets/images/workTicket/bodyworn_pause.png");
|
|
}
|
|
.bodyworn_play {
|
|
background-image: url("@/assets/images/workTicket/bodyworn_play.png");
|
|
}
|
|
> div:first-child {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
> div:last-child {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: #808080;
|
|
margin-top: 20px;
|
|
> div:not(:first-child) {
|
|
margin-left: 19px;
|
|
}
|
|
}
|
|
> div:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
color: #272d45;
|
|
> div:not(:first-child) {
|
|
margin-left: 10px;
|
|
}
|
|
> div:first-child {
|
|
width: 19px;
|
|
height: 18px;
|
|
background-image: url("@/assets/images/workTicket/bodyworn_audio.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
> div:last-child {
|
|
padding: 2px 10px;
|
|
border: 1px solid #f7af13;
|
|
font-size: 14px;
|
|
color: #f7af13;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.video-content {
|
|
// height: 260px;
|
|
padding-bottom: 20px;
|
|
.card-img {
|
|
width: 100%;
|
|
height: 180px;
|
|
img,
|
|
video,
|
|
.el-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.card-flex {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px 15px 0;
|
|
color: #333333;
|
|
font-size: 15px;
|
|
p {
|
|
margin: 0;
|
|
}
|
|
.webkit-clamp_1 {
|
|
width: 50%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.card-num {
|
|
font-size: 14px;
|
|
color: #808080;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.notoDta {
|
|
top: 50%;
|
|
width: 60%;
|
|
left: 50%;
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
img {
|
|
width: 40%;
|
|
margin: 5% 30%;
|
|
}
|
|
p {
|
|
color: #fff;
|
|
font-size: calc(100vw * 14 / 1920);
|
|
margin: -4% 0%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|