2833 lines
82 KiB
Vue
2833 lines
82 KiB
Vue
<template>
|
||
<!-- 检查部位 -->
|
||
<div class="whiteBlock" style="height: 100%">
|
||
<div class="checkPoint">
|
||
<div class="header-title">
|
||
<div>
|
||
总数：<span>{{ total }}</span>
|
||
</div>
|
||
<div>
|
||
施工中：<span>{{ workTicketCountInfo.ing }}</span>
|
||
</div>
|
||
<div>
|
||
未开始：<span>{{ workTicketCountInfo.notStarted }}</span>
|
||
</div>
|
||
<div>
|
||
暂停中：<span>{{ workTicketCountInfo.pause }}</span>
|
||
</div>
|
||
<div>
|
||
已完工：<span>{{ workTicketCountInfo.done }}</span>
|
||
</div>
|
||
</div>
|
||
<el-form
|
||
size="medium"
|
||
:model="queryParams"
|
||
ref="queryForm"
|
||
:inline="true"
|
||
>
|
||
<el-form-item label="工作票类型" prop="typeId">
|
||
<el-cascader
|
||
v-model="queryParams.typeId"
|
||
:options="workTicketTypeTreeList"
|
||
filterable
|
||
clearable
|
||
collapse-tags
|
||
:show-all-levels="false"
|
||
:props="{
|
||
multiple: false,
|
||
checkStrictly: true,
|
||
emitPath: false,
|
||
value: 'id',
|
||
label: 'typeName',
|
||
}"
|
||
></el-cascader>
|
||
</el-form-item>
|
||
<el-form-item label="施工计划时间" prop="constructionTime">
|
||
<el-date-picker
|
||
v-model="queryParams.constructionTime"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="工作票编号" prop="workTicketNumber">
|
||
<el-input
|
||
v-model="queryParams.workTicketNumber"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="状态" prop="status">
|
||
<el-select v-model="queryParams.status" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in statusList"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="施工人员" prop="operator">
|
||
<el-input
|
||
v-model="queryParams.operator"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="施工场站" prop="constructionAreas">
|
||
<el-cascader
|
||
v-model="queryParams.constructionAreas"
|
||
:options="qualityRegionList"
|
||
filterable
|
||
clearable
|
||
collapse-tags
|
||
:show-all-levels="false"
|
||
:props="{
|
||
multiple: false,
|
||
checkStrictly: true,
|
||
emitPath: false,
|
||
value: 'id',
|
||
label: 'regionName',
|
||
}"
|
||
></el-cascader>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" plain @click="handleQuery">查询</el-button>
|
||
<el-button type="warning" plain @click="handleRefresh"
|
||
>刷新</el-button
|
||
>
|
||
<!-- v-permission="{
|
||
key: 'business_add',
|
||
menuPath: '/project/safeManage/safeZoneSetting',
|
||
}" -->
|
||
<el-button type="primary" size="medium" @click="addWorkTicket(1)"
|
||
>新增</el-button
|
||
>
|
||
<el-button
|
||
:disabled="
|
||
$refs.multipleTable && $refs.multipleTable.selection.length == 0
|
||
"
|
||
:type="
|
||
$refs.multipleTable && $refs.multipleTable.selection.length == 0
|
||
? 'info'
|
||
: 'danger'
|
||
"
|
||
class="delete_btn"
|
||
plain
|
||
@click="deleteAttendanceBatch"
|
||
>删除</el-button
|
||
>
|
||
</el-form-item>
|
||
</el-form>
|
||
<!-- <div class="check_box">
|
||
<div>
|
||
已选{{ $refs.multipleTable ? $refs.multipleTable.selection.length : 0 }}项
|
||
</div>
|
||
<el-button @click="toggleSelection(false)" type="text" style="color: #f76c6c"
|
||
>取消</el-button
|
||
>
|
||
<el-button @click="toggleSelection(true)" type="text">全选</el-button>
|
||
<el-button style="color: #b3b3b3" @click="toggleExpandAll(true)" type="text">全部展开</el-button>
|
||
<el-button style="color: #b3b3b3" @click="toggleExpandAll(false)" type="text"
|
||
>全部关闭</el-button
|
||
>
|
||
</div> -->
|
||
<el-table
|
||
ref="multipleTable"
|
||
:data="tableData"
|
||
style="width: 100%"
|
||
row-key="id"
|
||
class="tables"
|
||
height="calc(100% - 64px - 116px - 16px)"
|
||
max-height="calc(100% - 64px - 116px - 16px)"
|
||
>
|
||
<el-table-column
|
||
type="selection"
|
||
align="center"
|
||
width="55"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="workTicketNumber"
|
||
align="center"
|
||
label="工作票编号"
|
||
show-overflow-tooltip
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="status"
|
||
align="center"
|
||
label="状态"
|
||
show-overflow-tooltip
|
||
>
|
||
<template slot-scope="scope">
|
||
<span
|
||
class="status-box"
|
||
:class="{
|
||
wks_active: scope.row.status == 1,
|
||
sgz_active: scope.row.status == 2,
|
||
ztz_active: scope.row.status == 3,
|
||
ywg_acitve: scope.row.status == 4,
|
||
}"
|
||
>
|
||
{{ statusUp(scope.row.status) }}</span
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="devName"
|
||
align="center"
|
||
label="当前绑定监控记录"
|
||
show-overflow-tooltip
|
||
>
|
||
<template slot-scope="scope">
|
||
{{ itemListDevNameUp(scope.row) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="typeName"
|
||
align="center"
|
||
label="类别"
|
||
show-overflow-tooltip
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="workContent"
|
||
align="center"
|
||
label="作业内容"
|
||
show-overflow-tooltip
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="safetyMeasure"
|
||
align="center"
|
||
label="安全措施"
|
||
show-overflow-tooltip
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="constructionAreaNames"
|
||
align="center"
|
||
label="施工区域"
|
||
show-overflow-tooltip
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="operator"
|
||
align="center"
|
||
label="施工人员"
|
||
show-overflow-tooltip
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="constructionTimeBegin"
|
||
align="center"
|
||
label="施工计划时间"
|
||
show-overflow-tooltip
|
||
>
|
||
<template slot-scope="scope">
|
||
{{ scope.row.constructionTimeBegin }} -
|
||
{{ scope.row.constructionTimeEnd }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="typeName"
|
||
align="center"
|
||
label="工作票附件"
|
||
show-overflow-tooltip
|
||
>
|
||
<template slot-scope="scope">
|
||
<template v-if="scope.row.workTicketAttachment.length > 0">
|
||
<el-image
|
||
style="width: 62px; height: 29px"
|
||
:src="
|
||
$store.state.FILEURL + scope.row.workTicketAttachment[0].url
|
||
"
|
||
:preview-src-list="srcListUp(scope.row.workTicketAttachment)"
|
||
>
|
||
</el-image>
|
||
</template>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column
|
||
prop="typeName"
|
||
align="center"
|
||
label="安全风险分析"
|
||
show-overflow-tooltip
|
||
>
|
||
<template slot-scope="scope">
|
||
<template v-if="scope.row.safetyRiskAnalysis.length > 0">
|
||
<el-image
|
||
style="width: 62px; height: 29px"
|
||
:src="$store.state.FILEURL + scope.row.safetyRiskAnalysis[0].url"
|
||
:preview-src-list="srcListUp(scope.row.safetyRiskAnalysis)"
|
||
>
|
||
</el-image>
|
||
</template>
|
||
</template>
|
||
</el-table-column> -->
|
||
<el-table-column
|
||
:width="380"
|
||
:label="$t('message.quality.operation')"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div class="flex2 edit">
|
||
<el-button
|
||
@click="onStateShow(4, scope.row.id)"
|
||
style="border: 0 !important; color: #f56c6c"
|
||
type="text"
|
||
icon="el-icon-switch-button"
|
||
v-if="scope.row.status == 2 || scope.row.status == 3"
|
||
>结束作业</el-button
|
||
>
|
||
<el-button
|
||
@click="onStateShow(1, scope.row.id)"
|
||
type="text"
|
||
icon="el-icon-refresh-right"
|
||
v-if="scope.row.status == 1"
|
||
>开始作业</el-button
|
||
>
|
||
<el-button
|
||
type="text"
|
||
@click="onStateShow(2, scope.row.id)"
|
||
icon="el-icon-video-pause"
|
||
v-if="scope.row.status == 2"
|
||
>暂停作业</el-button
|
||
>
|
||
<el-button
|
||
type="text"
|
||
@click="onStateShow(3, scope.row.id)"
|
||
icon="el-icon-video-play"
|
||
v-if="scope.row.status == 3"
|
||
>继续作业</el-button
|
||
>
|
||
<el-button
|
||
@click="onExamineClick(scope.row)"
|
||
type="text"
|
||
icon="el-icon-view"
|
||
>查看</el-button
|
||
>
|
||
<el-button
|
||
style="border: 0 !important"
|
||
type="text"
|
||
icon="el-icon-edit"
|
||
@click="addWorkTicket(3, scope.row)"
|
||
>编辑</el-button
|
||
>
|
||
<el-button
|
||
style="border: 0 !important; color: #f56c6c"
|
||
type="text"
|
||
icon="el-icon-delete"
|
||
@click="deleteBtn(scope.row)"
|
||
>删除</el-button
|
||
>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<pagination
|
||
v-show="total > 0"
|
||
:total="Number(total)"
|
||
:page.sync="queryParams.pageNo"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getWorkTicketList"
|
||
:pageSizes="[...$store.state.PAGESIZRS]"
|
||
layout="total,sizes, prev, pager, next, jumper"
|
||
/>
|
||
</div>
|
||
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
@close="initWorkTicketClose"
|
||
:title="workTicketTitle"
|
||
:visible.sync="workTicketDialog"
|
||
:width="workTicketType == 1 ? '668px' : '960px'"
|
||
>
|
||
<div class="dialog_content">
|
||
<el-steps
|
||
align-center
|
||
v-if="workTicketType == 2 || workTicketType == 3"
|
||
:active="stepActive"
|
||
:class="{
|
||
steps_1: stepActive == 1,
|
||
'steps_1 steps_2': stepActive == 2,
|
||
steps_3: workTicketBindCamera == 0,
|
||
}"
|
||
>
|
||
<el-step title="基础信息"></el-step>
|
||
<el-step title="绑定工作票监控"></el-step>
|
||
<el-step title="完成"></el-step>
|
||
</el-steps>
|
||
<el-form
|
||
v-if="stepActive == 0"
|
||
ref="workTicketFormRef"
|
||
:model="workTicketForm"
|
||
:rules="workTicketRules"
|
||
label-width="130px"
|
||
size="medium"
|
||
:class="{
|
||
workticket_main2: workTicketType == 2 || workTicketType == 3,
|
||
workticket_main1: workTicketType == 1,
|
||
}"
|
||
>
|
||
<el-form-item
|
||
v-if="workTicketType == 1"
|
||
label="工作票类型"
|
||
prop="typeId"
|
||
>
|
||
<el-cascader
|
||
v-model="workTicketForm.typeId"
|
||
:options="workTicketTypeTreeList"
|
||
filterable
|
||
clearable
|
||
collapse-tags
|
||
:show-all-levels="false"
|
||
:props="{
|
||
multiple: false,
|
||
checkStrictly: true,
|
||
emitPath: false,
|
||
value: 'id',
|
||
label: 'typeName',
|
||
}"
|
||
></el-cascader>
|
||
</el-form-item>
|
||
<template v-if="workTicketType == 2 || workTicketType == 3">
|
||
<el-form-item label="工作票类型" prop="typeId">
|
||
<el-cascader
|
||
disabled
|
||
class="mycascader"
|
||
:value="workTicketForm.typeId"
|
||
:options="workTicketTypeTreeList"
|
||
:show-all-levels="false"
|
||
:props="{
|
||
multiple: false,
|
||
checkStrictly: true,
|
||
emitPath: false,
|
||
value: 'id',
|
||
label: 'typeName',
|
||
}"
|
||
placeholder=""
|
||
></el-cascader>
|
||
</el-form-item>
|
||
<el-form-item label="工作票编号" prop="workTicketNumber">
|
||
<el-input
|
||
v-model="workTicketForm.workTicketNumber"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="施工场站" prop="constructionAreas">
|
||
<el-cascader
|
||
v-model="workTicketForm.constructionAreas"
|
||
:options="qualityRegionList"
|
||
filterable
|
||
clearable
|
||
collapse-tags
|
||
:show-all-levels="false"
|
||
:props="{
|
||
multiple: true,
|
||
checkStrictly: true,
|
||
emitPath: false,
|
||
value: 'id',
|
||
label: 'regionName',
|
||
}"
|
||
></el-cascader>
|
||
</el-form-item>
|
||
<el-form-item label="施工地点" prop="constructionAddr">
|
||
<el-input
|
||
v-model="workTicketForm.constructionAddr"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="申请单位" prop="applicants">
|
||
<el-select
|
||
v-model="workTicketForm.applicants"
|
||
multiple
|
||
filterable
|
||
collapse-tags
|
||
placeholder="请选择企业"
|
||
>
|
||
<el-option
|
||
:label="item.enterpriseName"
|
||
:value="item.id"
|
||
v-for="(item, index) in enterpriseInfoList"
|
||
:key="index"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="申请时间" prop="applicationTime">
|
||
{{ workTicketForm.applicationTime }}
|
||
</el-form-item>
|
||
<el-form-item label="施工时间" prop="constructionTime">
|
||
<el-date-picker
|
||
v-model="workTicketForm.constructionTime"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="作业人员" prop="operator">
|
||
<el-input
|
||
type="textarea"
|
||
placeholder="请输入"
|
||
v-model="workTicketForm.operator"
|
||
maxlength="200"
|
||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||
show-word-limit
|
||
>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="作业内容" prop="workContent">
|
||
<el-input
|
||
type="textarea"
|
||
placeholder="请输入"
|
||
v-model="workTicketForm.workContent"
|
||
maxlength="1000"
|
||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||
show-word-limit
|
||
>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="安全措施" prop="safetyMeasure">
|
||
<el-input
|
||
type="textarea"
|
||
placeholder="请输入"
|
||
v-model="workTicketForm.safetyMeasure"
|
||
maxlength="1000"
|
||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||
show-word-limit
|
||
>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="工作票附件" prop="workTicketAttachment">
|
||
<el-upload
|
||
:action="$store.state.UPLOADURL"
|
||
list-type="picture-card"
|
||
name="files"
|
||
:limit="5"
|
||
accept=".png, .jpg, .jpeg"
|
||
:file-list="workTicketForm.workTicketAttachment"
|
||
:on-exceed="handleExceed"
|
||
:on-success="(res, file) => handleSuccess(res, file, 1)"
|
||
:on-remove="(file, fileList) => handleRemove(file, fileList, 1)"
|
||
>
|
||
<i class="el-icon-plus"></i>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item label="其他附件" prop="otherAttachment">
|
||
<el-upload
|
||
class="upload-demo"
|
||
name="files"
|
||
:action="$store.state.UPLOADURL"
|
||
:on-preview="handlePreview"
|
||
:on-success="(res, file) => handleSuccess(res, file, 2)"
|
||
:on-remove="(file, fileList) => handleRemove(file, fileList, 2)"
|
||
multiple
|
||
:limit="10"
|
||
:on-exceed="handleExceed"
|
||
:file-list="workTicketForm.otherAttachment"
|
||
>
|
||
<el-button size="small" type="primary">点击上传</el-button>
|
||
<div slot="tip" class="el-upload__tip">
|
||
只能上传jpg/png文件，且不超过100M且最多上传10个文件
|
||
</div>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</template>
|
||
</el-form>
|
||
<div class="bindworkticket" v-else-if="stepActive == 1">
|
||
<div>
|
||
<div>绑定作业票监控</div>
|
||
<el-button @click="bindWorkTicketClick" size="medium" type="primary"
|
||
>去绑定</el-button
|
||
>
|
||
</div>
|
||
<el-table
|
||
:data="policeCameraItemListUp"
|
||
style="width: 100%"
|
||
row-key="id"
|
||
class="tables"
|
||
height="440"
|
||
>
|
||
<!-- <el-table-column
|
||
:selectable="selected"
|
||
type="selection"
|
||
align="center"
|
||
width="55"
|
||
></el-table-column> -->
|
||
<el-table-column
|
||
prop="devName"
|
||
align="center"
|
||
label="设备名称"
|
||
show-overflow-tooltip
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="devSn"
|
||
align="center"
|
||
label="设备编号"
|
||
show-overflow-tooltip
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="monitoringNumber"
|
||
align="center"
|
||
label="监控点编号"
|
||
show-overflow-tooltip
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="typeName"
|
||
align="center"
|
||
label="设备图片"
|
||
show-overflow-tooltip
|
||
>
|
||
<template slot-scope="scope">
|
||
<template v-if="scope.row.pic">
|
||
<el-image
|
||
style="width: 62px; height: 29px"
|
||
:src="$store.state.FILEURL + scope.row.pic"
|
||
:preview-src-list="[$store.state.FILEURL + scope.row.pic]"
|
||
>
|
||
</el-image>
|
||
</template>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="userNames"
|
||
align="center"
|
||
label="使用人"
|
||
show-overflow-tooltip
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="status"
|
||
align="center"
|
||
label="设备状态"
|
||
show-overflow-tooltip
|
||
>
|
||
<template slot-scope="scope">
|
||
<span
|
||
class="boundalready_box"
|
||
:class="{
|
||
boundalready: scope.row.bindChecked,
|
||
}"
|
||
>
|
||
{{ scope.row.bindChecked ? "已绑定" : "空闲" }}</span
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
:label="$t('message.quality.operation')"
|
||
align="center"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
style="border: 0 !important; color: #f56c6c"
|
||
type="text"
|
||
icon="el-icon-delete"
|
||
@click="onDelete(scope.row)"
|
||
>删除</el-button
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="content_main2" v-else-if="stepActive == 2">
|
||
<div :class="{ edit_img: workTicketType == 3 }"></div>
|
||
<div>
|
||
工作票已{{
|
||
workTicketType == 3 ? "编辑" : "添加"
|
||
}}完成，是否立即开始作业?
|
||
</div>
|
||
<div>
|
||
<i class="el-icon-warning-outline"></i>
|
||
<div>点击立即开始后，将会下发工单任务至执法记录仪设备中，施工员需要到设备的工单任务中点击开始执行工单任务进行录音、录像、拍照。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="dialog-footer" v-if="stepActive != 2">
|
||
<el-button
|
||
v-if="stepActive == 1"
|
||
class="cancleBtn"
|
||
@click="onLastStep"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>上一步
|
||
</el-button>
|
||
<el-button
|
||
v-else
|
||
class="cancleBtn"
|
||
@click="initWorkTicketClose"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>{{ $t("message.alarmValueSet.cancel") }}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
@click="onNextStep"
|
||
size="medium"
|
||
>{{ workTicketType == 1 ? "确定" : stepActive == 1 || workTicketBindCamera == 0 ? "确定" : "下一步" }}</el-button }}
|
||
</el-button>
|
||
</div>
|
||
<div class="dialog-footer" v-else>
|
||
<el-button
|
||
@click="initWorkTicketClose"
|
||
class="cancleBtn"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>不，暂时保存
|
||
</el-button>
|
||
<el-button
|
||
@click="onChangeState(1)"
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
size="medium"
|
||
>是，立即开始
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
title="设备列表"
|
||
:visible.sync="policeCameraItemDialog"
|
||
width="960px"
|
||
class="policecamera_box"
|
||
>
|
||
<div class="dialog_content">
|
||
<el-form
|
||
size="medium"
|
||
:model="policeCameraItemInfo"
|
||
ref="policeCameraItemInfo"
|
||
:inline="true"
|
||
>
|
||
<el-form-item label="设备名称" prop="devName">
|
||
<el-input
|
||
v-model="policeCameraItemInfo.devName"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="设备编号" prop="devSn">
|
||
<el-input
|
||
v-model="policeCameraItemInfo.devSn"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="设备状态" prop="bindTicket">
|
||
<el-select
|
||
v-model="policeCameraItemInfo.bindTicket"
|
||
clearable
|
||
placeholder="请选择"
|
||
>
|
||
<el-option label="空闲" :value="1"></el-option>
|
||
<el-option label="已绑定" :value="2"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" plain @click="policeCameraItemQuery"
|
||
>查询</el-button
|
||
>
|
||
|
||
<el-button type="warning" plain @click="policeCameraItemRefresh"
|
||
>刷新</el-button
|
||
>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-table
|
||
ref="policeCameraItemTable"
|
||
:data="policeCameraItemList"
|
||
style="width: 100%"
|
||
row-key="id"
|
||
class="tables"
|
||
height="440"
|
||
>
|
||
<el-table-column
|
||
:selectable="selected"
|
||
type="selection"
|
||
align="center"
|
||
width="55"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="devName"
|
||
align="center"
|
||
label="设备名称"
|
||
show-overflow-tooltip
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="devSn"
|
||
align="center"
|
||
label="设备编号"
|
||
show-overflow-tooltip
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="monitoringNumber"
|
||
align="center"
|
||
label="监控点编号"
|
||
show-overflow-tooltip
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="typeName"
|
||
align="center"
|
||
label="设备图片"
|
||
show-overflow-tooltip
|
||
>
|
||
<template slot-scope="scope">
|
||
<template v-if="scope.row.pic">
|
||
<el-image
|
||
style="width: 62px; height: 29px"
|
||
:src="$store.state.FILEURL + scope.row.pic"
|
||
:preview-src-list="[$store.state.FILEURL + scope.row.pic]"
|
||
>
|
||
</el-image>
|
||
</template>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="userNames"
|
||
align="center"
|
||
label="使用人"
|
||
show-overflow-tooltip
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="status"
|
||
align="center"
|
||
label="设备状态"
|
||
show-overflow-tooltip
|
||
>
|
||
<template slot-scope="scope">
|
||
<span
|
||
class="boundalready_box"
|
||
:class="{
|
||
boundalready: scope.row.bindChecked,
|
||
}"
|
||
>
|
||
{{ scope.row.bindChecked ? "已绑定" : "空闲" }}</span
|
||
>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- <pagination
|
||
v-show="policeCameraItemInfo.total > 0"
|
||
:total="Number(policeCameraItemInfo.total)"
|
||
:page.sync="policeCameraItemInfo.pageNo"
|
||
:limit.sync="policeCameraItemInfo.pageSize"
|
||
@pagination="getPoliceCameraItemPage"
|
||
:pageSizes="[...$store.state.PAGESIZRS]"
|
||
layout="total,sizes, prev, pager, next, jumper"
|
||
/> -->
|
||
</div>
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
class="cancleBtn"
|
||
@click="policeCameraItemDialog = false"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>{{ $t("message.alarmValueSet.cancel") }}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
@click="policeCameraItemSubmit"
|
||
size="medium"
|
||
>确定
|
||
</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
title="工作票详情"
|
||
:visible.sync="workTicketDetailDialog"
|
||
width="1416px"
|
||
class="workticketdelete_main"
|
||
>
|
||
<div class="dialog_content">
|
||
<div class="workticket_box workticket_box1">
|
||
<div class="workticket_header">
|
||
<div>
|
||
<div>基本信息</div>
|
||
<div
|
||
class="status-box"
|
||
:class="{
|
||
wks_active: workTicketDetail.status == 1,
|
||
sgz_active: workTicketDetail.status == 2,
|
||
ztz_active: workTicketDetail.status == 3,
|
||
ywg_acitve: workTicketDetail.status == 4,
|
||
}"
|
||
>
|
||
{{ statusUp(workTicketDetail.status) }}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div
|
||
@click="onStateShow(1, workTicketDetail.id)"
|
||
class="bg-3e"
|
||
v-if="workTicketDetail.status == 1"
|
||
>
|
||
开始作业
|
||
</div>
|
||
<div
|
||
@click="onStateShow(2, workTicketDetail.id)"
|
||
class="bg-3e"
|
||
v-if="workTicketDetail.status == 2"
|
||
>
|
||
暂停作业
|
||
</div>
|
||
<div
|
||
@click="onStateShow(3, workTicketDetail.id)"
|
||
class="bg-3e"
|
||
v-if="workTicketDetail.status == 3"
|
||
>
|
||
继续作业
|
||
</div>
|
||
<div
|
||
@click="onStateShow(4, workTicketDetail.id)"
|
||
class="bg-ed"
|
||
v-if="
|
||
workTicketDetail.status == 2 || workTicketDetail.status == 3
|
||
"
|
||
>
|
||
结束作业
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="workticket_content">
|
||
<div>
|
||
<div>
|
||
<div><span>*</span>工作票类型</div>
|
||
<div>{{ workTicketDetail.typeName }}</div>
|
||
</div>
|
||
<div>
|
||
<div>施工区域</div>
|
||
<div>{{ workTicketDetail.constructionAreaNames }}</div>
|
||
</div>
|
||
<div>
|
||
<div>申请单位</div>
|
||
<div>{{ workTicketDetail.applicantNames }}</div>
|
||
</div>
|
||
<div>
|
||
<div>作业人员</div>
|
||
<div>{{ workTicketDetail.operator }}</div>
|
||
</div>
|
||
<div>
|
||
<div>安全措施</div>
|
||
<div>{{ workTicketDetail.safetyMeasure }}</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div>
|
||
<div><span>*</span>工作票编号</div>
|
||
<div>{{ workTicketDetail.workTicketNumber }}</div>
|
||
</div>
|
||
<div>
|
||
<div>当前绑定监控</div>
|
||
<div>{{ workTicketDetail.itemList instanceof Array ? workTicketDetail.itemList.map(item => item.devName).join('、') : ''}}</div>
|
||
</div>
|
||
<div>
|
||
<div>施工地点</div>
|
||
<div>{{ workTicketDetail.constructionAddr }}</div>
|
||
</div>
|
||
<div>
|
||
<div>申请时间</div>
|
||
<div>{{ workTicketDetail.applicationTime }}</div>
|
||
</div>
|
||
<div>
|
||
<div>施工时间</div>
|
||
<div>
|
||
{{ workTicketDetail.constructionTimeBegin }} -
|
||
{{ workTicketDetail.constructionTimeEnd }}
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div>作业内容</div>
|
||
<div>
|
||
{{ workTicketDetail.workContent }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="workticket_content1"
|
||
v-if="workTicketDetail.status == 2"
|
||
>
|
||
<el-select size="medium" v-model="itemId" placeholder="请选择">
|
||
<el-option
|
||
v-for="item in workTicketDetail.itemList"
|
||
:key="item.itemId"
|
||
:label="item.devName"
|
||
:value="item.itemId"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
<div class="hls-video" v-if="videoItemInfo.videoInfo">
|
||
<HlsPlayer
|
||
:src="
|
||
videoItemInfo.videoInfo.url
|
||
? videoItemInfo.videoInfo.url
|
||
: ''
|
||
"
|
||
:autoplay="true"
|
||
:controls="true"
|
||
/>
|
||
</div>
|
||
<!-- videoItemInfo.videoInfo.url -->
|
||
<!-- https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="workticket_box workticket_box2">
|
||
<div class="workticket_header">
|
||
<div>
|
||
<div>附件内容</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="workticket_content">
|
||
<div>
|
||
<div>
|
||
<div>工作票附件</div>
|
||
<div class="content-img">
|
||
<el-image
|
||
v-for="item in workTicketDetail.workTicketAttachment"
|
||
:key="item.url"
|
||
:src="$store.state.FILEURL + item.url"
|
||
:preview-src-list="[$store.state.FILEURL + item.url]"
|
||
>
|
||
</el-image>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div>
|
||
<div>其它附件</div>
|
||
<div class="content-file_list">
|
||
<div
|
||
v-for="item in workTicketDetail.otherAttachment"
|
||
:key="item.url"
|
||
>
|
||
<div>
|
||
<i class="el-icon-files"></i>
|
||
<div>{{ item.name }}</div>
|
||
</div>
|
||
<div
|
||
@click="
|
||
downloadFileBtn(
|
||
$store.state.FILEURL + item.url,
|
||
item.name
|
||
)
|
||
"
|
||
>
|
||
<i class="el-icon-download"></i>
|
||
<div>下载</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="workticket_box workticket_box3">
|
||
<div class="workticket_header">
|
||
<div>
|
||
<div>历史记录</div>
|
||
</div>
|
||
</div>
|
||
<el-table
|
||
class="workticket-table"
|
||
:max-height="300"
|
||
:data="workTicketHistoryList"
|
||
row-key="id"
|
||
:tree-props="{ children: 'fileList' }"
|
||
border
|
||
>
|
||
<el-table-column
|
||
width="300"
|
||
show-overflow-tooltip
|
||
prop="date"
|
||
align="center"
|
||
label="序号"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.fileType">
|
||
{{ scope.row.fileName }}
|
||
</span>
|
||
<span v-else> 第{{ scope.row.no }}次作业 </span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
width="450"
|
||
prop="name"
|
||
align="center"
|
||
label="总时间段"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.fileType">
|
||
{{ scope.row.startTime ? scope.row.startTime : "暂无" }} -
|
||
{{ scope.row.endTime ? scope.row.endTime : "暂无" }}
|
||
</span>
|
||
<span>
|
||
{{ scope.row.begin ? scope.row.begin : "暂无" }} -
|
||
{{ scope.row.end ? scope.row.end : "暂无" }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
width="150"
|
||
prop="address"
|
||
align="center"
|
||
label="总时长"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span class="time-diff" v-if="scope.row.fileType">{{
|
||
itemDiffUp(scope.row.startTime, scope.row.endTime)
|
||
}}</span>
|
||
<span class="time-diff" v-else>{{
|
||
itemDiffUp(scope.row.begin, scope.row.end)
|
||
}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
width="300"
|
||
prop="address"
|
||
align="center"
|
||
label="操作"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div
|
||
v-if="scope.row.fileType"
|
||
class="viewreplay"
|
||
@click="onViewrePlayClick(scope.row)"
|
||
>
|
||
<div></div>
|
||
<div>查看回放</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="dialog-footer">
|
||
<el-button
|
||
class="cancleBtn"
|
||
@click="workTicketDetailDialog = false"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>{{ $t("message.alarmValueSet.cancel") }}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
size="medium"
|
||
>确定
|
||
</el-button>
|
||
</div> -->
|
||
</el-dialog>
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
:title="viewreplayTitle"
|
||
:visible.sync="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="`audio${viewreplayInfo.id}`"
|
||
:src="$store.state.FILEURL + 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="$store.state.FILEURL + viewreplayInfo.fileUrl"
|
||
type="video/mp4"
|
||
/>
|
||
<source
|
||
:src="$store.state.FILEURL + viewreplayInfo.fileUrl"
|
||
type="video/webm"
|
||
/>
|
||
您的浏览器不支持 HTML5 video 标签。
|
||
</video>
|
||
<img
|
||
v-else-if="viewreplayInfo.fileType == 1"
|
||
:src="$store.state.FILEURL + viewreplayInfo.fileUrl"
|
||
:preview="$store.state.FILEURL + viewreplayInfo.fileUrl"
|
||
alt=""
|
||
/>
|
||
<!-- <el-image
|
||
v-else-if="viewreplayInfo.fileType == 1"
|
||
:src="$store.state.FILEURL + viewreplayInfo.fileUrl"
|
||
:preview-src-list="[$store.state.FILEURL + 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>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getProjectChilderSystemUserListApi,
|
||
getEnterpriseInfoListApi,
|
||
} from "@/assets/js/api/configManage.js";
|
||
import {
|
||
getWorkTicketTypeTreePageApi,
|
||
getWorkTicketPageApi,
|
||
addWorkTicketApi,
|
||
editWorkTicketApi,
|
||
deleteWorkTicketApi,
|
||
deleteBatchWorkTicketApi,
|
||
getWorkTicketCountWorkTicketApi,
|
||
setWorkTicketOperateWorkTicketApi,
|
||
getWorkTicketHistoryListApi,
|
||
getWorkTicketQueryByIdApi,
|
||
getVideoItemInfoPoliceCameraItemApi,
|
||
getQueryBindRegionsApi,
|
||
} from "@/assets/js/api/workTicketManage";
|
||
import { getProjectConfigListApi } from "@/assets/js/api/project.js";
|
||
import { getQualityRegionListApi } from "@/assets/js/api/quality.js";
|
||
import {
|
||
getPoliceCameraItemPageApi,
|
||
getPoliceCameraItemListApi,
|
||
} from "@/assets/js/api/bodyWornCamera";
|
||
import dayjs from "dayjs";
|
||
import duration from "dayjs/plugin/duration";
|
||
import { isJSON } from "@/util/nowDate";
|
||
import HlsPlayer from "./components/HlsPlayer.vue";
|
||
export default {
|
||
components: {
|
||
HlsPlayer,
|
||
},
|
||
data() {
|
||
return {
|
||
COMPANY: COMPANY,
|
||
projectSn: "",
|
||
tableData: [],
|
||
workTicketTitle: "新增",
|
||
workTicketType: 1,
|
||
workTicketDialog: false,
|
||
stepActive: 0,
|
||
workTicketForm: {
|
||
typeId: "",
|
||
workTicketNumber: "",
|
||
constructionAreas: [],
|
||
constructionAddr: "",
|
||
applicants: [],
|
||
applicationTime: "",
|
||
constructionTime: [],
|
||
operator: "",
|
||
workContent: "",
|
||
safetyMeasure: "",
|
||
workTicketAttachment: [],
|
||
otherAttachment: [],
|
||
safetyRiskAnalysis: [],
|
||
},
|
||
workTicketRules: {
|
||
typeId: [
|
||
{
|
||
required: true,
|
||
message: "请选择工作票类型",
|
||
trigger: "change",
|
||
},
|
||
],
|
||
workTicketNumber: [
|
||
{
|
||
required: true,
|
||
message: "请输入工作票编号",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
workContent: [
|
||
{
|
||
required: true,
|
||
message: "请输入作业内容",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
workTicketAttachment: [
|
||
{
|
||
required: true,
|
||
message: "请上传工作票附件",
|
||
trigger: "change",
|
||
},
|
||
],
|
||
},
|
||
// 查询参数
|
||
queryParams: {
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
typeId: "",
|
||
constructionTime: [],
|
||
workTicketNumber: "",
|
||
status: "",
|
||
operator: "",
|
||
constructionAreas: "",
|
||
},
|
||
total: 0,
|
||
enterpriseInfoList: [],
|
||
qualityRegionList: [],
|
||
workTicketTypeTreeList: [],
|
||
workTicketCountInfo: {
|
||
done: 0,
|
||
ing: 0,
|
||
notStarted: 0,
|
||
pause: 0,
|
||
},
|
||
workTicketBindCamera: 0,
|
||
statusList: [
|
||
{
|
||
value: 1,
|
||
label: "未开始",
|
||
},
|
||
{
|
||
value: 2,
|
||
label: "施工中",
|
||
},
|
||
{
|
||
value: 3,
|
||
label: "暂停中",
|
||
},
|
||
{
|
||
value: 4,
|
||
label: "已完工",
|
||
},
|
||
],
|
||
policeCameraItemDialog: false,
|
||
policeCameraItemList: [],
|
||
policeCameraItemInfo: {
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
devName: "",
|
||
devSn: "",
|
||
bindTicket: "",
|
||
},
|
||
workTicketId: "",
|
||
selectList: [],
|
||
selectFullList: [],
|
||
// 工作票详情
|
||
workTicketDetailDialog: false,
|
||
workTicketDetail: {},
|
||
workTicketHistoryList: [],
|
||
viewreplayDialog: false,
|
||
viewreplayInfo: {},
|
||
viewreplayTitle: "",
|
||
itemId: "",
|
||
videoItemInfo: {},
|
||
};
|
||
},
|
||
created() {
|
||
// 扩展Day.js以使用duration插件
|
||
dayjs.extend(duration);
|
||
this.projectSn = this.$store.state.projectSn;
|
||
this.getWorkTicketList();
|
||
this.getWorkTicketTypeTreePage();
|
||
this.getQualityRegionList();
|
||
this.getEnterpriseInfoList();
|
||
this.getProjectSetting();
|
||
this.getWorkTicketCountWorkTicket();
|
||
this.getPoliceCameraItemList();
|
||
this.getQueryBindRegions();
|
||
},
|
||
methods: {
|
||
// 查看回放
|
||
onViewrePlayClick(row) {
|
||
this.viewreplayTitle = `第${row.no}次作业回放`;
|
||
this.viewreplayInfo = {
|
||
...row,
|
||
is_play: false,
|
||
};
|
||
this.viewreplayDialog = true;
|
||
},
|
||
// 播放音频
|
||
onAudioClick() {
|
||
if (this.viewreplayInfo.is_play) {
|
||
this.$refs[`audio${this.viewreplayInfo.id}`].pause();
|
||
this.viewreplayInfo.is_play = false;
|
||
} else {
|
||
this.$refs[`audio${this.viewreplayInfo.id}`].play();
|
||
this.viewreplayInfo.is_play = true;
|
||
}
|
||
},
|
||
onExamineClick(row) {
|
||
this.workTicketId = row.id;
|
||
this.getWorkTicketQueryById();
|
||
this.getWorkTicketHistoryList();
|
||
this.workTicketDetailDialog = true;
|
||
},
|
||
// 列表查询工作票历史记录信息
|
||
getWorkTicketHistoryList() {
|
||
getWorkTicketHistoryListApi({
|
||
workTicketId: this.workTicketId,
|
||
// workTicketId: "1942510629577048066",
|
||
projectSn: this.projectSn,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
const resultList = res.result.sort((a, b) => a.no - b.no);
|
||
|
||
this.workTicketHistoryList = resultList.map((item) => {
|
||
return {
|
||
...item,
|
||
};
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 通过id查询作业票详情
|
||
getWorkTicketQueryById() {
|
||
getWorkTicketQueryByIdApi({
|
||
id: this.workTicketId,
|
||
// id: "1942510629577048066",
|
||
projectSn: this.projectSn,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
this.workTicketDetail = {
|
||
...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)
|
||
: [],
|
||
};
|
||
if (
|
||
res.result.itemList instanceof Array &&
|
||
res.result.itemList.length > 0
|
||
) {
|
||
this.itemId = res.result.itemList[0].itemId;
|
||
this.getVideoItemInfoPoliceCameraItem();
|
||
} else {
|
||
this.itemId = "";
|
||
this.videoItemInfo = {};
|
||
}
|
||
}
|
||
});
|
||
},
|
||
getVideoItemInfoPoliceCameraItem() {
|
||
getVideoItemInfoPoliceCameraItemApi({
|
||
itemId: this.itemId,
|
||
projectSn: this.projectSn,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
this.videoItemInfo = res.result;
|
||
}
|
||
});
|
||
},
|
||
// 删除
|
||
onDelete(row) {
|
||
const findIndex = this.selectList.findIndex((item) => item == row.itemId);
|
||
if (findIndex > -1) {
|
||
this.selectList.splice(findIndex, 1);
|
||
}
|
||
},
|
||
// 添加设备列表
|
||
policeCameraItemSubmit() {
|
||
if (this.$refs.policeCameraItemTable.selection.length == 0)
|
||
return this.$message.warning("请选择需要绑定的设备");
|
||
const resultList = this.$refs.policeCameraItemTable.selection.map(
|
||
(item) => item.itemId
|
||
);
|
||
this.selectList = [...this.selectList, ...resultList];
|
||
console.log(1111, this.selectList);
|
||
this.policeCameraItemDialog = false;
|
||
this.$confirm(
|
||
"设备已绑定作业票，请选择继续添加设备或者绑定完成进行下一步操作",
|
||
"提示",
|
||
{
|
||
confirmButtonText: "绑定完成",
|
||
cancelButtonText: "继续添加",
|
||
customClass: "customConfirm",
|
||
// type: 'warning'
|
||
}
|
||
)
|
||
.then(() => {})
|
||
.catch(() => {
|
||
this.bindWorkTicketClick();
|
||
});
|
||
},
|
||
// 绑定设备列表
|
||
bindWorkTicketClick() {
|
||
this.policeCameraItemRefresh();
|
||
this.policeCameraItemDialog = true;
|
||
},
|
||
policeCameraItemQuery() {
|
||
this.policeCameraItemInfo.pageNo = 1;
|
||
this.getPoliceCameraItemPage();
|
||
},
|
||
policeCameraItemRefresh() {
|
||
this.policeCameraItemInfo.devName = "";
|
||
this.policeCameraItemInfo.devSn = "";
|
||
this.policeCameraItemInfo.bindTicket = "";
|
||
this.policeCameraItemQuery();
|
||
},
|
||
selected(row, index) {
|
||
return !row.bindChecked;
|
||
},
|
||
// 分页查询设备列表
|
||
getPoliceCameraItemPage() {
|
||
getPoliceCameraItemPageApi({
|
||
devName: this.policeCameraItemInfo.devName,
|
||
devSn: this.policeCameraItemInfo.devSn,
|
||
// bindTicket: this.policeCameraItemInfo.bindTicket,
|
||
// pageNo: this.policeCameraItemInfo.pageNo,
|
||
// pageSize: this.policeCameraItemInfo.pageSize,
|
||
pageNo: 1,
|
||
pageSize: -1,
|
||
projectSn: this.projectSn,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
const resultList = res.result.records.map((item) => {
|
||
return {
|
||
...item,
|
||
bindChecked:
|
||
this.selectList.includes(item.itemId) || item.bindTicket == 1
|
||
? true
|
||
: false,
|
||
};
|
||
});
|
||
if (this.policeCameraItemInfo.bindTicket == 1) {
|
||
this.policeCameraItemList = resultList.filter(
|
||
(item) => !item.bindChecked
|
||
);
|
||
} else if (this.policeCameraItemInfo.bindTicket == 2) {
|
||
this.policeCameraItemList = resultList.filter(
|
||
(item) => item.bindChecked
|
||
);
|
||
} else {
|
||
this.policeCameraItemList = resultList;
|
||
}
|
||
this.policeCameraItemInfo.total = res.result.total;
|
||
}
|
||
});
|
||
},
|
||
handlePreview() {
|
||
console.log("预览图片");
|
||
},
|
||
handleRemove(file, fileList, type) {
|
||
const obj = {
|
||
1: "workTicketAttachment",
|
||
2: "otherAttachment",
|
||
};
|
||
this.workTicketForm[obj[type]] = fileList;
|
||
},
|
||
handleExceed(file, fileList) {
|
||
this.$message.warning("上传图片超出限制个数！");
|
||
},
|
||
handleSuccess(res, file, type) {
|
||
if (res.status == "SUCCESS") {
|
||
const obj = {
|
||
1: "workTicketAttachment",
|
||
2: "otherAttachment",
|
||
};
|
||
this.workTicketForm[obj[type]].push({
|
||
name: file.name,
|
||
url: this.$store.state.FILEURL + file.response.data[0].imageUrl,
|
||
newUrl: file.response.data[0].imageUrl,
|
||
});
|
||
if (type == 1) {
|
||
this.$refs.workTicketForm.clearValidate("workTicketAttachment");
|
||
}
|
||
}
|
||
},
|
||
handleQuery() {
|
||
this.queryParams.pageNo = 1;
|
||
this.getWorkTicketList();
|
||
},
|
||
handleRefresh() {
|
||
this.queryParams.pageNo = 1;
|
||
this.queryParams.typeId = "";
|
||
this.queryParams.constructionTime = [];
|
||
this.queryParams.workTicketNumber = "";
|
||
this.queryParams.status = "";
|
||
this.queryParams.operator = "";
|
||
this.queryParams.constructionAreas = "";
|
||
this.getWorkTicketList();
|
||
},
|
||
deleteAttendanceBatch() {
|
||
if (this.$refs.multipleTable.selection.length === 0)
|
||
return this.$message.warning("请勾选需要删除的数据！");
|
||
this.$confirm("删除后操作不可恢复，请谨慎操作！", "警告", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(() => {
|
||
const ids = this.$refs.multipleTable.selection
|
||
.map((item) => item.id)
|
||
.join(",");
|
||
console.log(this.$refs.multipleTable.selection);
|
||
deleteBatchWorkTicketApi({ ids }).then((res) => {
|
||
this.getWorkTicketList();
|
||
});
|
||
})
|
||
.catch(() => {});
|
||
},
|
||
toggleExpandAll(isExpandAll) {
|
||
this.toggleSelectionAll(this.tableData, isExpandAll);
|
||
},
|
||
toggleSelection(flag) {
|
||
if (flag) {
|
||
// this.$refs.multipleTable.toggleAllSelection(true)
|
||
this.toggleSelectionAll(this.tableData);
|
||
} else {
|
||
this.$refs.multipleTable.clearSelection();
|
||
}
|
||
},
|
||
toggleSelectionAll(dataList, isExpandAll = null) {
|
||
dataList.forEach((item) => {
|
||
if (isExpandAll == null) {
|
||
this.$refs.multipleTable.toggleRowSelection(item, true);
|
||
} else {
|
||
this.$refs.multipleTable.toggleRowExpansion(item, isExpandAll);
|
||
}
|
||
if (item.children instanceof Array && item.children.length > 0) {
|
||
this.toggleSelectionAll(item.children, isExpandAll);
|
||
}
|
||
});
|
||
},
|
||
// 获取列表信息
|
||
getWorkTicketList() {
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
typeId: this.queryParams.typeId,
|
||
constructionTimeBegin_end:
|
||
this.queryParams.constructionTime.length > 0
|
||
? this.queryParams.constructionTime[0]
|
||
: "",
|
||
constructionTimeEnd_start:
|
||
this.queryParams.constructionTime.length > 0
|
||
? this.queryParams.constructionTime[1]
|
||
: "",
|
||
workTicketNumber: this.queryParams.workTicketNumber,
|
||
status: this.queryParams.status,
|
||
operator: this.queryParams.operator,
|
||
constructionAreas: this.queryParams.constructionAreas,
|
||
pageNo: this.queryParams.pageNo,
|
||
pageSize: this.queryParams.pageSize,
|
||
};
|
||
getWorkTicketPageApi(data).then((res) => {
|
||
console.log(res);
|
||
if (res.code == 200) {
|
||
this.tableData = res.result.records.map((item) => {
|
||
return {
|
||
...item,
|
||
workTicketAttachment:
|
||
isJSON(item.workTicketAttachment) &&
|
||
JSON.parse(item.workTicketAttachment) instanceof Array
|
||
? JSON.parse(item.workTicketAttachment)
|
||
: [],
|
||
safetyRiskAnalysis:
|
||
isJSON(item.safetyRiskAnalysis) &&
|
||
JSON.parse(item.safetyRiskAnalysis) instanceof Array
|
||
? JSON.parse(item.safetyRiskAnalysis)
|
||
: [],
|
||
otherAttachment:
|
||
isJSON(item.otherAttachment) &&
|
||
JSON.parse(item.otherAttachment) instanceof Array
|
||
? JSON.parse(item.otherAttachment)
|
||
: [],
|
||
};
|
||
});
|
||
this.total = res.result.total;
|
||
}
|
||
});
|
||
},
|
||
onStateShow(type, id) {
|
||
const obj = {
|
||
1: "是否确认开始作业?",
|
||
2: "暂未全部施工完成，将进入暂停施工状态，待下次点击继续作业...",
|
||
3: "是否确认继续作业?",
|
||
4: "作业已全部施工完成，点击结束作业",
|
||
};
|
||
this.$confirm(obj[type], "提示", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
customClass: `customConfirm customConfirm-box customConfirm${type}`,
|
||
type: "warning",
|
||
}).then(() => {
|
||
this.workTicketId = id;
|
||
this.onChangeState(type);
|
||
});
|
||
},
|
||
onChangeState(operateStatus) {
|
||
let data = {
|
||
id: this.workTicketId,
|
||
projectSn: this.projectSn,
|
||
operateStatus,
|
||
};
|
||
setWorkTicketOperateWorkTicketApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.$message.success(res.message);
|
||
this.initWorkTicketClose();
|
||
this.getWorkTicketList();
|
||
this.onExamineClick({
|
||
id: this.workTicketId,
|
||
});
|
||
}
|
||
});
|
||
},
|
||
getQueryBindRegions() {
|
||
let data = {
|
||
// projectSn: this.projectSn,
|
||
};
|
||
getQueryBindRegionsApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.queryBindRegionList = res.result;
|
||
}
|
||
});
|
||
},
|
||
initWorkTicketForm() {
|
||
this.stepActive = 0;
|
||
this.workTicketId = "";
|
||
this.selectList = [];
|
||
this.workTicketForm = {
|
||
typeId: "",
|
||
workTicketNumber: `GZP${Date.now()}`,
|
||
constructionAreas:
|
||
this.queryBindRegionList.length > 0
|
||
? this.queryBindRegionList.map((item) => item.id)
|
||
: [],
|
||
constructionAddr: "",
|
||
applicants: this.$store.state.userInfo.enterpriseId
|
||
? [this.$store.state.userInfo.enterpriseId]
|
||
: [],
|
||
applicationTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
|
||
constructionTime: [],
|
||
operator: "",
|
||
workContent: "",
|
||
safetyMeasure: "",
|
||
safetyRiskAnalysis: [],
|
||
workTicketAttachment: [],
|
||
otherAttachment: [],
|
||
};
|
||
},
|
||
//新增作业票
|
||
addWorkTicket(type, row) {
|
||
this.workTicketType = type;
|
||
this.workTicketTitle = "新增";
|
||
if (type == 1) {
|
||
this.initWorkTicketForm();
|
||
} else if (type == 3) {
|
||
this.workTicketTitle = "编辑";
|
||
this.stepActive = 0;
|
||
this.workTicketId = row.id;
|
||
this.workTicketForm = {
|
||
...row,
|
||
applicants: row.applicants ? row.applicants.split(",") : [],
|
||
constructionAreas: row.constructionAreas
|
||
? row.constructionAreas.split(",")
|
||
: [],
|
||
operators: row.operators ? row.operators.split(",") : [],
|
||
otherAttachment: row.otherAttachment.map((item) => {
|
||
return {
|
||
name: item.name,
|
||
url: this.$store.state.FILEURL + item.url,
|
||
newUrl: item.url,
|
||
};
|
||
}),
|
||
workTicketAttachment: row.workTicketAttachment.map((item) => {
|
||
return {
|
||
name: item.name,
|
||
url: this.$store.state.FILEURL + item.url,
|
||
newUrl: item.url,
|
||
};
|
||
}),
|
||
safetyRiskAnalysis: row.safetyRiskAnalysis.map((item) => {
|
||
return {
|
||
name: item.name,
|
||
url: this.$store.state.FILEURL + item.url,
|
||
newUrl: item.url,
|
||
};
|
||
}),
|
||
constructionTime: [],
|
||
};
|
||
this.selectList = row.itemList
|
||
? row.itemList.map((item) => item.itemId)
|
||
: [];
|
||
if (row.constructionTimeBegin && row.constructionTimeEnd) {
|
||
this.constructionTime = [
|
||
row.constructionTimeBegin,
|
||
row.constructionTimeEnd,
|
||
];
|
||
}
|
||
}
|
||
this.workTicketDialog = true;
|
||
|
||
this.$nextTick(() => {
|
||
this.$refs["workTicketFormRef"].clearValidate();
|
||
});
|
||
},
|
||
// 上一步
|
||
onLastStep() {
|
||
this.stepActive = 0;
|
||
},
|
||
// 下一步
|
||
async onNextStep() {
|
||
console.log(this.stepActive, this.workTicketType);
|
||
if (this.workTicketType == 1) {
|
||
const valid = await this.$refs["workTicketFormRef"].validate();
|
||
if (!valid) return this.$message.warning("请填写必填项！");
|
||
this.addWorkTicket(2);
|
||
return;
|
||
}
|
||
if (this.stepActive == 0) {
|
||
console.log("我进来了");
|
||
const valid = await this.$refs["workTicketFormRef"].validate();
|
||
if (!valid) return this.$message.warning("请填写必填项！");
|
||
if (this.workTicketBindCamera == 0) {
|
||
this.submit();
|
||
return;
|
||
}
|
||
this.stepActive = 1;
|
||
// this.getPoliceCameraItemListFn();
|
||
} else if (this.stepActive == 1) {
|
||
// if (this.selectList.length == 0) {
|
||
// this.$message.warning("至少要绑定一台设备");
|
||
// return;
|
||
// }
|
||
this.submit();
|
||
}
|
||
},
|
||
//弹窗---保存按钮
|
||
submit() {
|
||
const workTicketAttachment = this.workTicketForm.workTicketAttachment.map(
|
||
(item) => {
|
||
return {
|
||
name: item.name,
|
||
url: item.newUrl,
|
||
};
|
||
}
|
||
);
|
||
const otherAttachment = this.workTicketForm.otherAttachment.map(
|
||
(item) => {
|
||
return {
|
||
name: item.name,
|
||
url: item.newUrl,
|
||
};
|
||
}
|
||
);
|
||
const safetyRiskAnalysis = this.workTicketForm.safetyRiskAnalysis.map(
|
||
(item) => {
|
||
return {
|
||
name: item.name,
|
||
url: item.newUrl,
|
||
};
|
||
}
|
||
);
|
||
const data = {
|
||
...this.workTicketForm,
|
||
constructionTimeBegin:
|
||
this.workTicketForm.constructionTime.length > 1
|
||
? this.workTicketForm.constructionTime[0]
|
||
: "",
|
||
constructionTimeEnd:
|
||
this.workTicketForm.constructionTime.length > 1
|
||
? this.workTicketForm.constructionTime[1]
|
||
: "",
|
||
constructionAreas: this.workTicketForm.constructionAreas.join(","),
|
||
workTicketAttachment: JSON.stringify(workTicketAttachment),
|
||
otherAttachment: JSON.stringify(otherAttachment),
|
||
safetyRiskAnalysis: JSON.stringify(safetyRiskAnalysis),
|
||
projectSn: this.projectSn,
|
||
policeCameraIds: this.selectList.join(","),
|
||
applicants: this.workTicketForm.applicants.join(","),
|
||
};
|
||
if (this.workTicketType == 2) {
|
||
addWorkTicketApi(data).then((res) => {
|
||
// console.log(res);
|
||
if (res.code == 200) {
|
||
this.$message.success(this.$t("message.quality.newSuccess"));
|
||
// this.workTicketDialog = false;
|
||
this.workTicketId = res.result.id;
|
||
this.stepActive = 2;
|
||
this.getWorkTicketList();
|
||
}
|
||
});
|
||
} else if (this.workTicketType == 3) {
|
||
editWorkTicketApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
// this.workTicketDialog = false;
|
||
this.stepActive = 2;
|
||
this.$message.success(res.message);
|
||
this.getWorkTicketList();
|
||
}
|
||
});
|
||
}
|
||
},
|
||
//删除 按钮
|
||
deleteBtn(value) {
|
||
this.$confirm(
|
||
this.$t("message.quality.deleteHint"),
|
||
this.$t("message.quality.hint"),
|
||
{
|
||
confirmButtonText: this.$t("message.quality.confirm"),
|
||
cancelButtonText: this.$t("message.quality.cancel"),
|
||
type: "warning",
|
||
}
|
||
)
|
||
.then(() => {
|
||
let data = {
|
||
id: value.id,
|
||
};
|
||
|
||
deleteWorkTicketApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.$message({
|
||
type: "success",
|
||
message: this.$t("message.quality.successfullyDelete") + "!",
|
||
});
|
||
this.getWorkTicketList();
|
||
}
|
||
});
|
||
})
|
||
.catch(() => {});
|
||
},
|
||
|
||
initWorkTicketClose() {
|
||
this.initWorkTicketForm();
|
||
this.workTicketDialog = false;
|
||
},
|
||
|
||
// 获取工作票统计
|
||
getWorkTicketCountWorkTicket() {
|
||
getWorkTicketCountWorkTicketApi({
|
||
projectSn: this.projectSn,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
this.workTicketCountInfo = res.result;
|
||
}
|
||
});
|
||
},
|
||
// 获取工作票类型
|
||
getWorkTicketTypeTreePage() {
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
pageNo: 1,
|
||
pageSize: -1,
|
||
};
|
||
getWorkTicketTypeTreePageApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.workTicketTypeTreeList = res.result.records;
|
||
}
|
||
});
|
||
},
|
||
// 获取施工场站
|
||
getQualityRegionList() {
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
};
|
||
getQualityRegionListApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.qualityRegionList = res.result;
|
||
}
|
||
});
|
||
},
|
||
// 获取申请单位
|
||
getEnterpriseInfoList() {
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
};
|
||
getEnterpriseInfoListApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.enterpriseInfoList = res.result;
|
||
}
|
||
});
|
||
},
|
||
//获取项目配置信息
|
||
getProjectSetting() {
|
||
getProjectConfigListApi({
|
||
projectSn: this.projectSn,
|
||
}).then((res) => {
|
||
if (!res.result || res.result.length == 0) {
|
||
this.workTicketBindCamera = 0;
|
||
} else {
|
||
let workTicketBindCamera = res.result[0].workTicketBindCamera;
|
||
this.workTicketBindCamera = workTicketBindCamera;
|
||
}
|
||
});
|
||
},
|
||
getPoliceCameraItemList() {
|
||
getPoliceCameraItemListApi({
|
||
projectSn: this.projectSn,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
this.selectFullList = res.result;
|
||
}
|
||
});
|
||
},
|
||
downloadFileBtn(url, name) {
|
||
fetch(url, {
|
||
method: "get",
|
||
headers: {
|
||
Authorization: this.$store.state.userInfo.token,
|
||
"Content-Type": "application/json", // 设置请求头的内容类型为JSON
|
||
},
|
||
// body: JSON.stringify(data) // 将data对象转换为JSON字符串并作为请求体发送
|
||
})
|
||
.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);
|
||
});
|
||
},
|
||
},
|
||
computed: {
|
||
itemListDevNameUp() {
|
||
return (row) => {
|
||
return row.itemList
|
||
? row.itemList.map((item) => item.devName).join("、")
|
||
: "--";
|
||
};
|
||
},
|
||
srcListUp() {
|
||
return (dataList) => {
|
||
const resultList = dataList.map(
|
||
(item) => this.$store.state.FILEURL + item.url
|
||
);
|
||
console.log(resultList);
|
||
return resultList;
|
||
};
|
||
},
|
||
statusUp() {
|
||
return (id) => {
|
||
const find = this.statusList.find((item) => item.value == id);
|
||
return find ? find.label : "--";
|
||
};
|
||
},
|
||
policeCameraItemListUp() {
|
||
return this.selectFullList
|
||
.filter((item) => {
|
||
return this.selectList.includes(item.itemId);
|
||
})
|
||
.map((item) => {
|
||
return {
|
||
...item,
|
||
bindChecked: true,
|
||
};
|
||
});
|
||
},
|
||
itemDiffUp() {
|
||
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`;
|
||
};
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less">
|
||
.el-tooltip__popper {
|
||
max-width: 30%;
|
||
}
|
||
.customConfirm4 .el-message-box__message::after {
|
||
content: "点击结束作业后，需要到执法记录仪上手动结束工单，结束后录像将会自动上传到平台，可在历史回放中查看";
|
||
color: #ffa026;
|
||
font-size: 12px;
|
||
display: inline-block;
|
||
width: 400px;
|
||
}
|
||
.customConfirm3 .el-message-box__message::after {
|
||
content: "点击暂停作业后，需要到执法记录仪上手动结束工单，结束后录像将会自动上传到平台，可在历史回放中查看";
|
||
color: #ffa026;
|
||
font-size: 12px;
|
||
display: inline-block;
|
||
width: 400px;
|
||
}
|
||
.customConfirm2 .el-message-box__message::after {
|
||
content: "点击暂停作业后，需要到执法记录仪上手动结束工单，结束后录像将会自动上传到平台，可在历史回放中查看";
|
||
color: #ffa026;
|
||
font-size: 12px;
|
||
display: inline-block;
|
||
width: 400px;
|
||
}
|
||
.customConfirm1 .el-message-box__message::after {
|
||
content: "点击立即开始后，将会下发工单任务至执法记录仪设备中，施工员需要到设备的工单任务中点击开始执行工单任务进行录音、录像、拍照。";
|
||
color: #ffa026;
|
||
font-size: 12px;
|
||
display: inline-block;
|
||
width: 400px;
|
||
}
|
||
.customConfirm-box {
|
||
.el-message-box__container {
|
||
position: relative;
|
||
}
|
||
|
||
.el-icon-warning {
|
||
left: 96px;
|
||
bottom: 6px;
|
||
font-size: 18px !important;
|
||
top: initial;
|
||
transform: translateY(0);
|
||
}
|
||
.el-message-box__btns {
|
||
> .el-button {
|
||
position: relative;
|
||
}
|
||
> .el-button::before {
|
||
font-family: "element-icons" !important;
|
||
speak: none;
|
||
font-style: normal;
|
||
font-weight: normal;
|
||
font-variant: normal;
|
||
text-transform: none;
|
||
line-height: 1;
|
||
}
|
||
> .el-button:nth-child(1)::before {
|
||
content: "\e78d";
|
||
}
|
||
> .el-button:nth-child(2)::before {
|
||
content: "\e720";
|
||
}
|
||
}
|
||
}
|
||
.customConfirm {
|
||
width: 668px;
|
||
.el-message-box__title {
|
||
font-weight: normal;
|
||
font-size: 16px;
|
||
color: #272d45;
|
||
margin-left: 15px;
|
||
position: relative;
|
||
}
|
||
.el-message-box__title::before {
|
||
content: "";
|
||
width: 3px;
|
||
height: 100%;
|
||
background-color: #5c81ee;
|
||
position: absolute;
|
||
left: -15px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
.el-message-box__btns,
|
||
.el-message-box__message {
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="less" scoped>
|
||
.hls-video-dialog {
|
||
/deep/ .el-dialog__header {
|
||
display: none;
|
||
}
|
||
/deep/ .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/laborManage/bodyworn_pause.png);
|
||
}
|
||
.bodyworn_play {
|
||
background-image: url(~@/assets/images/laborManage/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/laborManage/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;
|
||
.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;
|
||
.webkit-clamp_1 {
|
||
width: 50%;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.card-num {
|
||
font-size: 14px;
|
||
color: #808080;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.workticketdelete_main {
|
||
.workticket_box3 {
|
||
.time-diff {
|
||
padding: 4px 10px;
|
||
background: rgba(75, 141, 236, 0.1);
|
||
border-radius: 38px;
|
||
font-size: 12px;
|
||
color: #4b8dec;
|
||
}
|
||
.viewreplay {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
color: #272d45;
|
||
> div:first-child {
|
||
width: 16px;
|
||
height: 16px;
|
||
background-image: url(~@/assets/images/laborManage/viewreplay.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
> div:last-child {
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
/deep/ .workticket-table {
|
||
width: 1202px;
|
||
margin-top: 20px;
|
||
border-color: #f2f2f2;
|
||
th {
|
||
background-color: #e6e6e6;
|
||
border-color: #f2f2f2;
|
||
}
|
||
td {
|
||
border-color: #f2f2f2;
|
||
}
|
||
}
|
||
/deep/ .workticket-table::before {
|
||
border-color: #f2f2f2;
|
||
}
|
||
}
|
||
.workticket_box2 {
|
||
.content-file_list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
> div:nth-child(odd) {
|
||
background-color: #fbfbfb;
|
||
}
|
||
> div {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 30px;
|
||
padding: 0 16px 0 20px;
|
||
> div:first-child {
|
||
font-size: 14px;
|
||
color: #272d45;
|
||
> div:last-child {
|
||
width: 170px;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
> div:last-child {
|
||
font-size: 14px;
|
||
color: #5181f6;
|
||
cursor: pointer;
|
||
}
|
||
> div {
|
||
display: flex;
|
||
align-items: center;
|
||
> div:not(:first-child) {
|
||
margin-left: 6px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.content-img {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
> .el-image:nth-child(even) {
|
||
margin-left: 20px;
|
||
}
|
||
> .el-image {
|
||
width: 128px;
|
||
height: 128px;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
}
|
||
.workticket_box1 {
|
||
> div:last-child {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.workticket_content1 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 20px;
|
||
padding-right: 30px;
|
||
.el-select {
|
||
width: 320px;
|
||
}
|
||
.hls-video {
|
||
width: 358px;
|
||
height: 180px;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
.workticket_box {
|
||
.workticket_content {
|
||
display: flex;
|
||
margin-top: 10px;
|
||
> div:not(:first-child) {
|
||
margin-left: 50px;
|
||
}
|
||
> div {
|
||
display: flex;
|
||
flex-direction: column;
|
||
> div {
|
||
display: flex;
|
||
padding: 10px 0;
|
||
> div:last-child {
|
||
width: 300px;
|
||
font-size: 14px;
|
||
color: #272d45;
|
||
margin-left: 16px;
|
||
}
|
||
> div:first-child {
|
||
width: 84px;
|
||
font-size: 14px;
|
||
color: #a2a4af;
|
||
text-align: right;
|
||
> span {
|
||
color: #ff0000;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.workticket_header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
> div:last-child {
|
||
display: flex;
|
||
align-items: center;
|
||
> div {
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
color: #ffffff;
|
||
width: 74px;
|
||
height: 30px;
|
||
background-color: #3e89fd;
|
||
border-radius: 3px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
> div:not(:first-child) {
|
||
margin-left: 20px;
|
||
}
|
||
.bg-ed {
|
||
background-color: #ed2b29;
|
||
}
|
||
}
|
||
> div:first-child {
|
||
display: flex;
|
||
align-items: center;
|
||
> div:first-child {
|
||
font-weight: 800;
|
||
font-size: 16px;
|
||
color: #4d4d4d;
|
||
background-color: transparent;
|
||
}
|
||
> div:not(:first-child) {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/deep/ .el-textarea {
|
||
textarea {
|
||
padding-bottom: 15px;
|
||
}
|
||
.el-input__count {
|
||
background-color: transparent;
|
||
height: 12px;
|
||
line-height: 12px;
|
||
}
|
||
}
|
||
|
||
/deep/ .policecamera_box {
|
||
.el-form-item {
|
||
margin-bottom: 20px;
|
||
}
|
||
.pagination-container {
|
||
padding: 16px;
|
||
}
|
||
.dialog-footer {
|
||
margin-top: 16px;
|
||
}
|
||
}
|
||
.content_main2 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
|
||
> div:first-child {
|
||
width: 251px;
|
||
height: 168px;
|
||
background-image: url(~@/assets/images/laborManage/index-icon11.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.edit_img {
|
||
background-image: url(~@/assets/images/laborManage/index-icon12.png) !important;
|
||
}
|
||
|
||
> div:nth-child(2) {
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
color: #171717;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
> div:nth-child(3) {
|
||
font-size: 12px;
|
||
color: #ffa026;
|
||
margin-top: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.el-icon-warning-outline {
|
||
font-size: 18px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
.bindworkticket {
|
||
margin-top: 20px;
|
||
> div:first-child {
|
||
display: flex;
|
||
align-items: center;
|
||
> div:first-child {
|
||
margin-right: 15px;
|
||
}
|
||
}
|
||
}
|
||
/deep/ .el-steps {
|
||
justify-content: space-between;
|
||
padding-bottom: 20px;
|
||
border-bottom: 2px solid #f3f5fc;
|
||
> .el-step {
|
||
.el-step__icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
position: relative;
|
||
border: none;
|
||
.el-step__icon-inner {
|
||
display: none;
|
||
}
|
||
}
|
||
.el-step__line {
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
.el-step__icon::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 20px;
|
||
height: 20px;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.el-step__title {
|
||
font-weight: 500;
|
||
font-size: 15px;
|
||
color: #1a1a1a;
|
||
}
|
||
}
|
||
> .el-step:nth-child(1) {
|
||
flex-basis: 10% !important;
|
||
.el-step__line,
|
||
.el-step__line-inner {
|
||
width: 414px;
|
||
background-color: #038ee4;
|
||
border-color: #038ee4;
|
||
}
|
||
.el-step__icon {
|
||
background-color: #008de4;
|
||
}
|
||
.el-step__icon::before {
|
||
background-image: url(~@/assets/images/laborManage/index-icon4.png);
|
||
}
|
||
}
|
||
.el-step:not(:first-child) {
|
||
.el-step__line {
|
||
width: 414px;
|
||
background-color: #f4333c;
|
||
}
|
||
.el-step__icon {
|
||
background-color: #f4333c;
|
||
}
|
||
}
|
||
> .el-step:nth-child(2) {
|
||
flex-basis: 15% !important;
|
||
.el-step__icon::before {
|
||
background-image: url(~@/assets/images/laborManage/index-icon5.png);
|
||
}
|
||
}
|
||
> .el-step:nth-child(3) {
|
||
flex-basis: 10% !important;
|
||
.el-step__icon::before {
|
||
background-image: url(~@/assets/images/laborManage/index-icon6.png);
|
||
}
|
||
}
|
||
}
|
||
/deep/ .steps_1 > .el-step:nth-child(2) {
|
||
.el-step__line {
|
||
background-color: #038ee4;
|
||
}
|
||
.el-step__icon {
|
||
background-color: #008de4;
|
||
}
|
||
}
|
||
/deep/ .steps_2 > .el-step:nth-child(3) {
|
||
.el-step__line {
|
||
background-color: #038ee4;
|
||
}
|
||
.el-step__icon {
|
||
background-color: #008de4;
|
||
}
|
||
}
|
||
/deep/ .steps_3 > .el-step:nth-child(2) {
|
||
.el-step__icon {
|
||
opacity: 0;
|
||
}
|
||
.el-step__main {
|
||
display: none;
|
||
}
|
||
}
|
||
.dialog_content {
|
||
padding: 0px;
|
||
max-height: 670px;
|
||
overflow-y: auto;
|
||
}
|
||
/deep/ .el-dialog__body {
|
||
padding: 20px;
|
||
}
|
||
/deep/ .el-dialog {
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
margin-top: 0 !important;
|
||
}
|
||
.workticket_main2 {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 20px;
|
||
.el-form-item {
|
||
width: 50%;
|
||
}
|
||
.el-cascader,
|
||
.el-input,
|
||
.el-date-editor,
|
||
.el-select {
|
||
width: 320px;
|
||
}
|
||
/deep/ .el-upload--picture-card {
|
||
width: 128px;
|
||
height: 128px;
|
||
}
|
||
/deep/ .el-upload-list--picture-card {
|
||
.el-upload-list__item {
|
||
width: 128px;
|
||
height: 128px;
|
||
}
|
||
}
|
||
|
||
/deep/ .mycascader {
|
||
.el-input__inner {
|
||
color: #272d45;
|
||
background-color: transparent;
|
||
cursor: auto;
|
||
border: none;
|
||
padding: 0;
|
||
}
|
||
.el-input__suffix {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
.boundalready_box {
|
||
padding: 4px 10px;
|
||
background-color: rgba(71, 195, 147, 0.1);
|
||
font-size: 12px;
|
||
color: #47c393;
|
||
}
|
||
.boundalready {
|
||
background-color: rgba(113, 75, 0, 0.1) !important;
|
||
color: #714b00 !important;
|
||
}
|
||
.workticket_main1 {
|
||
.el-cascader {
|
||
width: 320px;
|
||
}
|
||
}
|
||
.header-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
> div {
|
||
font-size: 14px;
|
||
color: #272d45;
|
||
span {
|
||
color: #5181f6;
|
||
}
|
||
}
|
||
> div:not(:first-child) {
|
||
margin-left: 50px;
|
||
}
|
||
}
|
||
.status-box {
|
||
font-weight: 500;
|
||
font-size: 11px;
|
||
padding: 4px 10px;
|
||
border-radius: 2px;
|
||
border: 1px solid #f1f1f1;
|
||
}
|
||
.wks_active {
|
||
background-color: #898989;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.sgz_active {
|
||
background-color: #bed0fa;
|
||
color: #5181f6;
|
||
}
|
||
|
||
.ztz_active {
|
||
background-color: #c38100;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.ywg_acitve {
|
||
background-color: #88cf65;
|
||
color: #1a1a1a;
|
||
}
|
||
.checkPoint {
|
||
/deep/ .el-form-item {
|
||
margin-bottom: 20px;
|
||
}
|
||
.el-input,
|
||
.el-cascader {
|
||
width: 192px;
|
||
}
|
||
.el-date-editor {
|
||
width: 247px;
|
||
}
|
||
}
|
||
|
||
.tables {
|
||
min-height: initial;
|
||
}
|
||
.ml-8 {
|
||
margin-left: 8px;
|
||
}
|
||
.check_box {
|
||
display: flex;
|
||
font-size: 14px;
|
||
> .el-button:hover {
|
||
color: #5181f6 !important;
|
||
}
|
||
> .el-button {
|
||
padding: 0;
|
||
position: relative;
|
||
// margin-left: 10px;
|
||
}
|
||
// > .el-button:first-child {
|
||
// color: #eb4047;
|
||
// }
|
||
> .el-button:first-child::before {
|
||
content: " ";
|
||
position: absolute;
|
||
top: 50%;
|
||
right: -10px;
|
||
transform: translateY(-50%);
|
||
width: 1px;
|
||
height: 90%;
|
||
background-color: #d9d9d9;
|
||
}
|
||
}
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
.flex2 {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.checkPoint {
|
||
padding: 16px 20px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
height: 100%;
|
||
.pagination-container {
|
||
padding: 0;
|
||
width: 100%;
|
||
position: absolute;
|
||
bottom: 16px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.edit {
|
||
width: 100%;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
img {
|
||
margin-right: 5px;
|
||
}
|
||
/deep/ .el-button {
|
||
> span {
|
||
color: #262d49;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|