2262 lines
75 KiB
Vue
2262 lines
75 KiB
Vue
<template>
|
||
<div class="fullHeight">
|
||
<div class="areaTreeBox fullHeight" id="videoTreeBox">
|
||
<div class="areaTreeInner whiteBlock fullHeight">
|
||
<p class="pageTitle">设备列表</p>
|
||
<el-form size="medium" ref="riskListForm" :model="riskListForm">
|
||
<el-form-item class="flex-box">
|
||
<el-input
|
||
@input="onProjectBlur"
|
||
suffix-icon="el-icon-search"
|
||
v-model="riskListForm.devName"
|
||
placeholder="请输入内容"
|
||
></el-input>
|
||
<el-select
|
||
@change="onProjectChange"
|
||
v-model="riskListForm.deviceState"
|
||
clearable
|
||
placeholder="请选择"
|
||
>
|
||
<el-option label="全部" value=""></el-option>
|
||
<el-option label="在线" :value="1"></el-option>
|
||
<el-option label="离线" :value="2"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="treeBox">
|
||
<vue-scroll v-if="level1CompanyData.length > 0">
|
||
<el-tree
|
||
:data="level1CompanyData"
|
||
@node-click="handleNodeClick"
|
||
:props="defaultProps"
|
||
:default-expanded-keys="defaultExpandedKeys"
|
||
:default-expand-all="defaultExpandAll"
|
||
@node-expand="handleNodeExpand"
|
||
@node-collapse="handleNodeCollapse"
|
||
node-key="id"
|
||
ref="tree"
|
||
>
|
||
<div
|
||
:class="{
|
||
'node_icon-offline': data.deviceState != 1,
|
||
'custom-tree-node_icon node_icon-online':
|
||
data.type == 2,
|
||
}"
|
||
class="custom-tree-node"
|
||
slot-scope="{ node, data }"
|
||
>
|
||
<span
|
||
style="
|
||
width: 56%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
display: inline-block;
|
||
"
|
||
class="videoName projectName"
|
||
:class="{
|
||
'color_333 font-bold': data.type == 1,
|
||
}"
|
||
:title="data.name"
|
||
>{{ data.name }}</span
|
||
>
|
||
</div>
|
||
</el-tree>
|
||
</vue-scroll>
|
||
<div class="placeholderBox" v-else>
|
||
<img
|
||
src="@/assets/images/noData2.png"
|
||
alt=""
|
||
srcset=""
|
||
/>
|
||
<p>{{ $t("message.videoManage.empty") }}</p>
|
||
</div>
|
||
</div>
|
||
<div class="sidebar_btn2">
|
||
<el-button
|
||
style="color: #b3b3b3"
|
||
@click="setCheckedNodes"
|
||
size="mini"
|
||
type="text"
|
||
plain
|
||
>全部展开</el-button
|
||
>
|
||
<el-button
|
||
@click="setCheckedKeys"
|
||
style="color: #b3b3b3"
|
||
size="mini"
|
||
type="text"
|
||
plain
|
||
>全部关闭</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="rightPanel whiteBlock">
|
||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||
<el-tab-pane label="设备监测" name="first"></el-tab-pane>
|
||
<el-tab-pane label="录像中心" name="second"></el-tab-pane>
|
||
<el-tab-pane label="图片中心" name="third"></el-tab-pane>
|
||
<el-tab-pane label="音频中心" name="fourth"></el-tab-pane>
|
||
<el-tab-pane label="工作时长统计" name="fifth"></el-tab-pane>
|
||
</el-tabs>
|
||
<div class="equipment_detail" v-if="activeName == 'first'">
|
||
<div>
|
||
<div class="equipment_box">
|
||
<div>
|
||
<span>设备名称</span>
|
||
<span>{{
|
||
policeCameraItemDetail.devName
|
||
? policeCameraItemDetail.devName
|
||
: "--"
|
||
}}</span>
|
||
</div>
|
||
<div>
|
||
<span>推送人</span>
|
||
<span>{{
|
||
policeCameraItemDetail.pusherNames
|
||
? policeCameraItemDetail.pusherNames
|
||
: "--"
|
||
}}</span>
|
||
</div>
|
||
<div>
|
||
<span>设备状态</span>
|
||
<span
|
||
class="state-box"
|
||
:class="{
|
||
'state-box_offline':
|
||
policeCameraItemDetail.deviceState != 1,
|
||
}"
|
||
>{{
|
||
policeCameraItemDetail.deviceState == 1
|
||
? "在线"
|
||
: "离线"
|
||
}}</span
|
||
>
|
||
</div>
|
||
<div>
|
||
<span>已用容量</span>
|
||
<span>{{
|
||
policeCameraItemDetail.usedCapacity
|
||
? policeCameraItemDetail.usedCapacity
|
||
: "--"
|
||
}}</span>
|
||
</div>
|
||
<div>
|
||
<span>网络类型</span>
|
||
<span>{{
|
||
policeCameraItemDetail.networkType
|
||
? policeCameraItemDetail.networkType
|
||
: "--"
|
||
}}</span>
|
||
</div>
|
||
<!-- <div>
|
||
<span>录像状态</span>
|
||
<span class="state-box">{{
|
||
policeCameraItemDetail.recordingStatus
|
||
? policeCameraItemDetail.recordingStatus
|
||
: "--"
|
||
}}</span>
|
||
</div> -->
|
||
<div>
|
||
<span>剩余容量</span>
|
||
<span>{{
|
||
policeCameraItemDetail.usedCapacity
|
||
? policeCameraItemDetail.sdCardCapacity -
|
||
policeCameraItemDetail.usedCapacity
|
||
: "--"
|
||
}}</span>
|
||
</div>
|
||
<div>
|
||
<span>设备位置</span>
|
||
<span>{{
|
||
policeCameraItemDetail.devLocation
|
||
? policeCameraItemDetail.devLocation
|
||
: "--"
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="equipment_box">
|
||
<div>
|
||
<span>设备编号</span>
|
||
<span>{{
|
||
policeCameraItemDetail.devSn
|
||
? policeCameraItemDetail.devSn
|
||
: "--"
|
||
}}</span>
|
||
</div>
|
||
<div>
|
||
<span>使用人</span>
|
||
<span>{{
|
||
policeCameraItemDetail.userNames
|
||
? policeCameraItemDetail.userNames
|
||
: "--"
|
||
}}</span>
|
||
</div>
|
||
<div>
|
||
<span>SD卡容量</span>
|
||
<span>{{
|
||
policeCameraItemDetail.sdCardCapacity
|
||
? policeCameraItemDetail.sdCardCapacity
|
||
: "--"
|
||
}}</span>
|
||
</div>
|
||
<div>
|
||
<span>是否开启低电量推送</span>
|
||
<span>{{
|
||
policeCameraItemDetail.enableLowBatteryPushNotification ==
|
||
1
|
||
? "是"
|
||
: policeCameraItemDetail.enableLowBatteryPushNotification ==
|
||
0
|
||
? "否"
|
||
: "--"
|
||
}}</span>
|
||
</div>
|
||
<div>
|
||
<span>固件版本</span>
|
||
<span>{{
|
||
policeCameraItemDetail.firmwareVersion
|
||
? policeCameraItemDetail.firmwareVersion
|
||
: "--"
|
||
}}</span>
|
||
</div>
|
||
<div>
|
||
<span>电量</span>
|
||
<span>{{
|
||
policeCameraItemDetail.batteryLevel
|
||
? policeCameraItemDetail.batteryLevel
|
||
: "--"
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<el-button
|
||
@click="onHTMLToImageDownload"
|
||
type="primary"
|
||
size="medium"
|
||
plain
|
||
>下载</el-button
|
||
>
|
||
<div class="image-box" @click="dialogVisible = true">
|
||
<img
|
||
:src="
|
||
$store.state.FILEURL +
|
||
policeCameraItemDetail.qrCode
|
||
"
|
||
alt=""
|
||
srcset=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="download-box" ref="downloadContent">
|
||
<div class="download-header">
|
||
{{ policeCameraItemDetail.devName }}
|
||
</div>
|
||
<div class="download-box_content">
|
||
<div>
|
||
<div>设备名称</div>
|
||
<div>{{ policeCameraItemDetail.devName }}</div>
|
||
</div>
|
||
<div>
|
||
<div>设备编号</div>
|
||
<div>{{ policeCameraItemDetail.devSn }}</div>
|
||
</div>
|
||
<img
|
||
:src="
|
||
$store.state.FILEURL + policeCameraItemDetail.qrCode
|
||
"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
<el-dialog
|
||
:visible.sync="dialogVisible"
|
||
:modal-append-to-body="false"
|
||
class="download-dialog"
|
||
>
|
||
<div class="download-box">
|
||
<div class="download-header">
|
||
{{ policeCameraItemDetail.devName }}
|
||
</div>
|
||
<div class="download-box_content">
|
||
<div>
|
||
<div>设备名称</div>
|
||
<div>{{ policeCameraItemDetail.devName }}</div>
|
||
</div>
|
||
<div>
|
||
<div>设备编号</div>
|
||
<div>{{ policeCameraItemDetail.devSn }}</div>
|
||
</div>
|
||
<img
|
||
:src="
|
||
$store.state.FILEURL +
|
||
policeCameraItemDetail.qrCode
|
||
"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<template
|
||
v-if="
|
||
activeName == 'second' ||
|
||
activeName == 'third' ||
|
||
activeName == 'fourth'
|
||
"
|
||
>
|
||
<el-form
|
||
size="medium"
|
||
:model="pageInfo"
|
||
ref="queryForm"
|
||
:inline="true"
|
||
>
|
||
<el-form-item label="录像时间">
|
||
<el-date-picker
|
||
v-model="pageInfo.startTime"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="工单号">
|
||
<el-input
|
||
v-model="pageInfo.workTicketNumber"
|
||
placeholder="请输入"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button @click="onQuery" type="primary" plain
|
||
>查询</el-button
|
||
>
|
||
<el-button @click="onRefresh" type="warning" plain
|
||
>刷新</el-button
|
||
>
|
||
<el-button
|
||
:disabled="multipleSelection.length == 0"
|
||
:type="multipleSelection == 0 ? 'info' : 'danger'"
|
||
class="delete_btn"
|
||
plain
|
||
@click="deleteAttendanceBatch"
|
||
>删除</el-button
|
||
>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="check_box">
|
||
<div>已选{{ multipleSelection.length }}项</div>
|
||
<el-button
|
||
@click="toggleSelection"
|
||
type="text"
|
||
style="color: #e40000"
|
||
>取消</el-button
|
||
>
|
||
<el-button @click="toggleSelection(true)" type="text"
|
||
>全选</el-button
|
||
>
|
||
</div>
|
||
<div
|
||
class="card-main"
|
||
v-if="activeName == 'second' || activeName == 'third'"
|
||
>
|
||
<div
|
||
:class="{ 'card-box_active': selectionUp(item) }"
|
||
class="card-box"
|
||
v-for="(item, index) in riskListDetailList"
|
||
:key="item.id"
|
||
@click="onSelectionClick(item)"
|
||
>
|
||
<div class="card-img">
|
||
<video controls v-if="item.fileType == 3">
|
||
<source
|
||
:src="$store.state.FILEURL + item.fileUrl"
|
||
type="video/mp4"
|
||
/>
|
||
<source
|
||
:src="$store.state.FILEURL + item.fileUrl"
|
||
type="video/webm"
|
||
/>
|
||
您的浏览器不支持 HTML5 video 标签。
|
||
</video>
|
||
<img
|
||
v-else-if="item.fileType == 1"
|
||
:src="$store.state.FILEURL + item.fileUrl"
|
||
:preview="$store.state.FILEURL + item.fileUrl"
|
||
alt=""
|
||
/>
|
||
<!-- <el-image
|
||
v-else-if="item.fileType == 1"
|
||
:src="$store.state.FILEURL + item.fileUrl"
|
||
:preview-src-list="[$store.state.FILEURL + item.fileUrl]"
|
||
>
|
||
</el-image> -->
|
||
</div>
|
||
<template v-if="activeName == 'second'">
|
||
<div class="card-flex">
|
||
<div class="card-num webkit-clamp_1">
|
||
{{ item.workTicketNumber }}
|
||
</div>
|
||
<div class="card-num">
|
||
{{
|
||
(item.fileLen / (1024 * 1024)).toFixed(
|
||
2
|
||
)
|
||
}}MB
|
||
</div>
|
||
</div>
|
||
<div class="card-flex">
|
||
<div>{{ item.startTime }}</div>
|
||
<p>至</p>
|
||
<div>{{ item.endTime }}</div>
|
||
</div>
|
||
</template>
|
||
<template v-else-if="activeName == 'third'">
|
||
<div class="card-flex">
|
||
<div>{{ item.uploadTime }}</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<div class="card-main1" v-else-if="activeName == 'fourth'">
|
||
<div
|
||
:class="{ 'card-box_active': selectionUp(item) }"
|
||
class="card-box"
|
||
v-for="(item, index) in riskListDetailList"
|
||
:key="item.id"
|
||
@click="onSelectionClick(item)"
|
||
>
|
||
<div>
|
||
<div>
|
||
<div></div>
|
||
<div>{{ item.devName }}音频</div>
|
||
<div>
|
||
{{
|
||
(item.fileLen / (1024 * 1024)).toFixed(
|
||
2
|
||
)
|
||
}}MB
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div>{{ item.fileTime }}</div>
|
||
<div>时长：{{ item.duration }}</div>
|
||
</div>
|
||
</div>
|
||
<audio
|
||
:ref="`audio${item.id}`"
|
||
:src="$store.state.FILEURL + item.fileUrl"
|
||
controls
|
||
loop
|
||
></audio>
|
||
<div
|
||
class="bodyworn_pause"
|
||
:class="{ bodyworn_play: item.is_play }"
|
||
@click.stop="onAudioClick(item)"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
<el-pagination
|
||
v-if="activeName == 'fourth'"
|
||
class="pagerBox"
|
||
@size-change="SizeChange"
|
||
@current-change="CurrentChange"
|
||
:current-page="pageInfo.pageNo"
|
||
:page-sizes="[28, 40, 52, 64, 76]"
|
||
:page-size="pageInfo.pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="Number(pageInfo.total)"
|
||
background
|
||
></el-pagination>
|
||
<el-pagination
|
||
v-else
|
||
class="pagerBox"
|
||
@size-change="SizeChange"
|
||
@current-change="CurrentChange"
|
||
:current-page="pageInfo.pageNo"
|
||
:page-sizes="[12, 24, 36, 48, 60]"
|
||
:page-size="pageInfo.pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="Number(pageInfo.total)"
|
||
background
|
||
></el-pagination>
|
||
</template>
|
||
<div class="diary-content" v-if="activeName == 'fifth'">
|
||
<el-form
|
||
:inline="true"
|
||
size="medium"
|
||
:model="formInline"
|
||
class="demo-form-inline"
|
||
>
|
||
<div>
|
||
<el-form-item>
|
||
<el-date-picker
|
||
v-model="formInline.month"
|
||
type="month"
|
||
placeholder="选择月"
|
||
format="yyyy年MM月"
|
||
value-format="yyyy-MM"
|
||
:clearable="false"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-radio-group
|
||
@change="onMonthSwitch"
|
||
v-model="formInline.monthSwitch"
|
||
>
|
||
<el-radio-button
|
||
@click.native.prevent="clickRadio(1)"
|
||
:label="1"
|
||
>上月</el-radio-button
|
||
>
|
||
<el-radio-button :label="2"
|
||
>本月</el-radio-button
|
||
>
|
||
<el-radio-button
|
||
@click.native.prevent="clickRadio(3)"
|
||
:label="3"
|
||
>下月</el-radio-button
|
||
>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</div>
|
||
<div>
|
||
<el-form-item>
|
||
<el-button
|
||
@click="exportBtnTemplate"
|
||
type="primary"
|
||
size="mini"
|
||
plain
|
||
>导出</el-button
|
||
>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
<CalendarView
|
||
ref="calendarViewRef"
|
||
:ocrBuildLogAllList="ocrBuildLogCountOcrBuildLogForMonth"
|
||
:defaultMonth="formInline.month"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- 批量导入 -->
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
:title="sureImportTitle"
|
||
:close-on-click-modal="false"
|
||
:visible.sync="batchImportDialog"
|
||
width="700px"
|
||
>
|
||
<div class="dialog_content">
|
||
<el-form label-width="120px">
|
||
<el-form-item label="导入文件">
|
||
<el-upload
|
||
:action="$store.state.UPLOADURL"
|
||
multiple
|
||
drag
|
||
name="files"
|
||
:limit="1"
|
||
:file-list="fileList"
|
||
:on-success="handleSuccess"
|
||
:on-remove="handleRemove"
|
||
accept=".xlsx"
|
||
>
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text">
|
||
将文件拖到此处，或<em>点击上传</em>
|
||
</div>
|
||
<!-- <div class="el-upload__tip" slot="tip">
|
||
支持导入200MB以内的ZIP文件：
|
||
①驾驶证行驶证复印件；
|
||
②交强险、意外险复印件；
|
||
③特殊工种操作证；
|
||
④车辆 45 度照片；
|
||
注意：
|
||
1、文件命名规则为车牌号；
|
||
2、车辆45°图片需要看清车牌号且只支持图片格式。
|
||
</div> -->
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="batchImportDialog = false">{{
|
||
$t("message.deviceManage.cancel")
|
||
}}</el-button>
|
||
<el-button type="primary" @click="sureImport"
|
||
>导入</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getGroupTreeWithDevApi,
|
||
getPoliceCameraItemQueryByIdApi,
|
||
getPoliceCameraItemFilePageApi,
|
||
deleteBatchPoliceCameraItemFileApi,
|
||
getPoliceCameraItemCountWorkingHoursApi,
|
||
} from "@/assets/js/api/bodyWornCamera";
|
||
import CalendarView from "./components/calendarView.vue";
|
||
import dayjs from "dayjs";
|
||
import html2canvas from "html2canvas";
|
||
import { isJSON } from "@/util/nowDate/index";
|
||
export default {
|
||
components: { CalendarView },
|
||
data() {
|
||
return {
|
||
pageInfo: {
|
||
pageNo: 1, //页数
|
||
pageSize: 12, //条数
|
||
total: 0, //总条数
|
||
workTicketNumber: "",
|
||
startTime: [],
|
||
},
|
||
defaultProps: {
|
||
children: "children",
|
||
label: "name",
|
||
},
|
||
level1CompanyData: [],
|
||
riskListForm: {
|
||
deviceState: "",
|
||
devName: "",
|
||
},
|
||
defaultExpandAll: false,
|
||
defaultExpandedKeys: [],
|
||
projectSn: "",
|
||
projectTypeList: [],
|
||
riskListDetailList: [],
|
||
riskListDetailInfo: [],
|
||
|
||
riskAssessmentInfo: {},
|
||
fileList: [],
|
||
batchImportDialog: false,
|
||
sureImportTitle: "",
|
||
activeName: "first",
|
||
policeCameraItemDetail: {},
|
||
multipleSelection: [],
|
||
dialogVisible: false,
|
||
|
||
formInline: {
|
||
month: "",
|
||
monthSwitch: 2, //1 上月 2本月 3下月
|
||
date: [],
|
||
user: "",
|
||
region: "",
|
||
},
|
||
ocrBuildLogCountOcrBuildLogForMonth: [],
|
||
};
|
||
},
|
||
created() {
|
||
this.projectSn = this.$route.query.projectSn;
|
||
this.getRiskListLibraryList();
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
onMonthSwitch() {
|
||
console.log(this.formInline.monthSwitch, this.formInline.month);
|
||
if (this.formInline.monthSwitch == 1) {
|
||
this.formInline.month = dayjs(this.formInline.month)
|
||
.subtract(1, "month")
|
||
.format("YYYY-MM-DD");
|
||
} else if (this.formInline.monthSwitch == 2) {
|
||
this.formInline.month = dayjs().format("YYYY-MM-DD");
|
||
} else if (this.formInline.monthSwitch == 3) {
|
||
this.formInline.month = dayjs(this.formInline.month)
|
||
.add(1, "month")
|
||
.format("YYYY-MM-DD");
|
||
}
|
||
this.getPoliceCameraItemCountWorkingHours();
|
||
},
|
||
clickRadio(e) {
|
||
this.formInline.monthSwitch = e;
|
||
if (
|
||
this.formInline.monthSwitch == 1 ||
|
||
this.formInline.monthSwitch == 3
|
||
) {
|
||
this.onMonthSwitch();
|
||
}
|
||
},
|
||
getPoliceCameraItemCountWorkingHours() {
|
||
getPoliceCameraItemCountWorkingHoursApi({
|
||
projectSn: this.projectSn,
|
||
startDate: dayjs(this.formInline.month)
|
||
.startOf("month")
|
||
.format("YYYY-MM-DD"),
|
||
endDate: dayjs(this.formInline.month)
|
||
.endOf("month")
|
||
.format("YYYY-MM-DD"),
|
||
itemId: this.riskListDetailInfo.id,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
this.ocrBuildLogCountOcrBuildLogForMonth = res.result;
|
||
}
|
||
});
|
||
},
|
||
onHTMLToImageDownload() {
|
||
html2canvas(this.$refs.downloadContent, {
|
||
useCORS: true,
|
||
}).then((canvas) => {
|
||
let saveUrl = canvas.toDataURL("image/png");
|
||
// console.log(saveUrl);
|
||
this.exportBtnTemplate(
|
||
saveUrl,
|
||
this.policeCameraItemDetail.qrCode
|
||
);
|
||
});
|
||
},
|
||
handleClick(tab, event) {
|
||
console.log(tab, event);
|
||
this.pageInfo.pageNo = 1;
|
||
if (this.activeName == "fourth") {
|
||
this.pageInfo.pageSize = 28;
|
||
} else if (this.activeName == "fifth") {
|
||
this.onMonthSwitch();
|
||
return;
|
||
} else {
|
||
this.pageInfo.pageSize = 12;
|
||
}
|
||
this.getRiskListDetailPage();
|
||
},
|
||
handleChangeE(file, fileList) {
|
||
if (file.raw) {
|
||
if (
|
||
file.raw.type ==
|
||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
|
||
file.raw.type == "application/vnd.ms-excel"
|
||
) {
|
||
} else {
|
||
this.$message.error(this.$t("message.laborMange.hint5"));
|
||
}
|
||
}
|
||
},
|
||
handleSuccessE(file) {
|
||
console.log("==========", file);
|
||
if (file.code == 200) {
|
||
this.$message.success(file.message); //导入成功
|
||
this.getRiskListLibraryList();
|
||
} else {
|
||
this.$message.error(file.message);
|
||
}
|
||
},
|
||
handleErrorE() {
|
||
this.$message.error(this.$t("message.laborMange.hint7"));
|
||
this.getRiskListLibraryList();
|
||
},
|
||
// 导出模版风险详情
|
||
exportBtnTemplateDetail() {
|
||
fetch(
|
||
this.$http.defaults.baseURL +
|
||
`xmgl/riskListDetail/downloadTemplate?sn=${this.$store.state.userInfo.sn}&libraryId=${this.riskListDetailInfo.id}`,
|
||
{
|
||
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 = "风险清单库详情.xlsx"; // 指定下载文件的文件名
|
||
// 模拟点击下载链接
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
// 释放URL对象
|
||
window.URL.revokeObjectURL(url);
|
||
// 处理导出的文件
|
||
// 这里可以使用blob对象来获取导出的文件内容或者将其保存到本地
|
||
})
|
||
.catch((error) => {
|
||
// 处理错误
|
||
console.error(error);
|
||
});
|
||
},
|
||
exportBtnTemplateDetailPost() {
|
||
if (this.riskListDetailInfo.hasChild != 0)
|
||
return this.$message.warning("请先选中节点");
|
||
const ids = this.$refs.multipleTable.selection.map(
|
||
(item) => item.id
|
||
);
|
||
const idList = this.riskListDetailList.map((item) => item.id);
|
||
const data = {
|
||
sn: this.$store.state.userInfo.sn,
|
||
libraryId: this.riskListDetailInfo.id,
|
||
detailIdList: ids.length > 0 ? ids : idList,
|
||
};
|
||
fetch(
|
||
this.$http.defaults.baseURL + `xmgl/riskListDetail/exportXls`,
|
||
{
|
||
method: "post",
|
||
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 = "导出风险清单库详情.xlsx"; // 指定下载文件的文件名
|
||
// 模拟点击下载链接
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
// 释放URL对象
|
||
window.URL.revokeObjectURL(url);
|
||
// 处理导出的文件
|
||
// 这里可以使用blob对象来获取导出的文件内容或者将其保存到本地
|
||
})
|
||
.catch((error) => {
|
||
// 处理错误
|
||
console.error(error);
|
||
});
|
||
},
|
||
handleSuccess(response, file, fileList) {
|
||
console.log("图片上传成功", fileList);
|
||
this.fileList = fileList;
|
||
},
|
||
handleRemove(response, fileList) {
|
||
this.fileList = fileList;
|
||
},
|
||
importBtnDialog(type) {
|
||
this.fileList = [];
|
||
if (type == 1) {
|
||
this.sureImportTitle = "导入清单";
|
||
} else if (type == 2) {
|
||
if (this.riskListDetailInfo.hasChild != 0)
|
||
return this.$message.warning("请先选中节点");
|
||
this.sureImportTitle = "导入风险评估项";
|
||
}
|
||
this.batchImportDialog = true;
|
||
},
|
||
sureImport() {
|
||
console.log("确定导入车辆信息", this.fileList);
|
||
if (this.fileList.length == 0)
|
||
this.$message.warning("请上传需要导入的文件!");
|
||
// uploadZipCarCarInfoApi()
|
||
const fileInfo = this.fileList[0].response.data[0].fileInfo;
|
||
var param = new FormData();
|
||
param.append("sn", this.$store.state.userInfo.sn);
|
||
param.append(
|
||
"excelFile",
|
||
this.fileList[0].raw,
|
||
fileInfo.originalFilename
|
||
);
|
||
if (this.sureImportTitle == "导入清单") {
|
||
param.append("projectType", "");
|
||
this.$http
|
||
.post("/xmgl/riskListLibrary/importExcel", param, {
|
||
headers: {
|
||
"Content-Type": "multipart/form-data",
|
||
},
|
||
})
|
||
.then((res) => {
|
||
if (res.data.code == 200) {
|
||
this.$message.success(res.data.message);
|
||
this.fileList = [];
|
||
this.getRiskListLibraryList();
|
||
this.batchImportDialog = false;
|
||
} else {
|
||
this.$message.error(res.data.message);
|
||
}
|
||
});
|
||
} else if (this.sureImportTitle == "导入风险评估项") {
|
||
param.append(
|
||
"projectType",
|
||
this.riskListDetailInfo.projectType
|
||
);
|
||
param.append("libraryId", this.riskListDetailInfo.id);
|
||
this.$http
|
||
.post("/xmgl/riskListDetail/importExcel", param, {
|
||
headers: {
|
||
"Content-Type": "multipart/form-data",
|
||
},
|
||
})
|
||
.then((res) => {
|
||
if (res.data.code == 200) {
|
||
this.$message.success(res.data.message);
|
||
this.fileList = [];
|
||
this.getRiskListDetailPage();
|
||
this.batchImportDialog = false;
|
||
} else {
|
||
this.$message.error(res.data.message);
|
||
}
|
||
});
|
||
}
|
||
},
|
||
// 导出模版
|
||
exportBtnTemplate(url, name) {
|
||
// exportBtnTemplate(
|
||
// 'xmgl/riskListLibrary/downloadTemplate',
|
||
// '风险清单库.xlsx'
|
||
// )
|
||
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);
|
||
});
|
||
},
|
||
queryBtn() {
|
||
this.pageInfo.pageNo = 1;
|
||
this.getRiskListDetailPage();
|
||
},
|
||
onSelectionClick(item) {
|
||
const findIndex = this.multipleSelection.findIndex(
|
||
(id) => id === item.id
|
||
);
|
||
if (findIndex > -1)
|
||
return this.multipleSelection.splice(findIndex, 1);
|
||
this.multipleSelection.push(item.id);
|
||
},
|
||
toggleSelection(flag) {
|
||
if (flag) {
|
||
this.multipleSelection = this.riskListDetailList.map(
|
||
(item) => item.id
|
||
);
|
||
} else {
|
||
this.multipleSelection = [];
|
||
}
|
||
},
|
||
// 批量删除考勤人员
|
||
deleteAttendanceBatch() {
|
||
if (this.multipleSelection.length === 0)
|
||
return this.$message.warning("请勾选需要删除的数据！");
|
||
this.$confirm("删除后操作不可恢复，请谨慎操作！", "警告", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
})
|
||
.then(() => {
|
||
const ids = this.multipleSelection.join(",");
|
||
deleteBatchPoliceCameraItemFileApi({ ids }).then((res) => {
|
||
this.queryBtn();
|
||
});
|
||
})
|
||
.catch(() => {});
|
||
},
|
||
onProjectChange() {
|
||
this.getRiskListLibraryList();
|
||
},
|
||
onProjectBlur() {
|
||
this.getRiskListLibraryList();
|
||
},
|
||
getRiskListLibraryList() {
|
||
getGroupTreeWithDevApi({
|
||
deviceState: this.riskListForm.deviceState,
|
||
devName: this.riskListForm.devName,
|
||
projectSn: this.$store.state.projectSn,
|
||
}).then((res) => {
|
||
if (res.success) {
|
||
this.level1CompanyData = res.result;
|
||
if (
|
||
this.level1CompanyData.length > 0 &&
|
||
this.level1CompanyData[0].children.length > 0
|
||
) {
|
||
this.$nextTick(() => {
|
||
const resultInfo =
|
||
this.level1CompanyData[0].children[0];
|
||
this.$refs.tree.setCurrentKey(resultInfo);
|
||
this.handleNodeClick(resultInfo);
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
handleNodeClick(data) {
|
||
if (data.type == 1) return;
|
||
this.riskListDetailInfo = {
|
||
...data,
|
||
};
|
||
this.getRiskListDetailPage();
|
||
},
|
||
onQuery() {
|
||
this.pageInfo.pageNo = 1;
|
||
this.getRiskListDetailPage();
|
||
},
|
||
onRefresh() {
|
||
this.pageInfo.workTicketNumber = "";
|
||
this.pageInfo.startTime = [];
|
||
this.onQuery();
|
||
},
|
||
getRiskListDetailPage() {
|
||
if (!this.riskListDetailInfo.id) return;
|
||
if (this.activeName == "first") {
|
||
getPoliceCameraItemQueryByIdApi({
|
||
projectSn: this.$store.state.projectSn,
|
||
itemId: this.riskListDetailInfo.id,
|
||
}).then((res) => {
|
||
if (res.success) {
|
||
this.policeCameraItemDetail = res.result;
|
||
}
|
||
});
|
||
} else if (
|
||
this.activeName == "second" ||
|
||
this.activeName == "third" ||
|
||
this.activeName == "fourth"
|
||
) {
|
||
let params = {
|
||
pageNo: this.pageInfo.pageNo,
|
||
pageSize: this.pageInfo.pageSize,
|
||
projectSn: this.$store.state.projectSn,
|
||
itemId: this.riskListDetailInfo.id,
|
||
workTicketNumber: this.pageInfo.workTicketNumber,
|
||
fileType:
|
||
this.activeName == "second"
|
||
? 3
|
||
: this.activeName == "third"
|
||
? 1
|
||
: 2,
|
||
};
|
||
if (this.activeName == "second") {
|
||
params.startTime_begin =
|
||
this.pageInfo.startTime instanceof Array &&
|
||
this.pageInfo.startTime.length > 0
|
||
? dayjs(this.pageInfo.startTime[0]).format(
|
||
"YYYY-MM-DD 00:00:00"
|
||
)
|
||
: "";
|
||
params.endTime_end =
|
||
this.pageInfo.startTime instanceof Array &&
|
||
this.pageInfo.startTime.length > 0
|
||
? dayjs(this.pageInfo.startTime[1]).format(
|
||
"YYYY-MM-DD 23:59:59"
|
||
)
|
||
: "";
|
||
} else if (this.activeName == "third") {
|
||
params.uploadTime_begin =
|
||
this.pageInfo.startTime instanceof Array &&
|
||
this.pageInfo.startTime.length > 0
|
||
? dayjs(this.pageInfo.startTime[0]).format(
|
||
"YYYY-MM-DD 00:00:00"
|
||
)
|
||
: "";
|
||
params.uploadTime_end =
|
||
this.pageInfo.startTime instanceof Array &&
|
||
this.pageInfo.startTime.length > 0
|
||
? dayjs(this.pageInfo.startTime[1]).format(
|
||
"YYYY-MM-DD 23:59:59"
|
||
)
|
||
: "";
|
||
} else if (this.activeName == "fourth") {
|
||
params.fileTime_begin =
|
||
this.pageInfo.startTime instanceof Array &&
|
||
this.pageInfo.startTime.length > 0
|
||
? dayjs(this.pageInfo.startTime[0]).format(
|
||
"YYYY-MM-DD 00:00:00"
|
||
)
|
||
: "";
|
||
params.fileTime_end =
|
||
this.pageInfo.startTime instanceof Array &&
|
||
this.pageInfo.startTime.length > 0
|
||
? dayjs(this.pageInfo.startTime[1]).format(
|
||
"YYYY-MM-DD 23:59:59"
|
||
)
|
||
: "";
|
||
}
|
||
getPoliceCameraItemFilePageApi({
|
||
...params,
|
||
}).then((res) => {
|
||
if (res.success) {
|
||
this.riskListDetailList = res.result.records.map(
|
||
(item) => {
|
||
return {
|
||
...item,
|
||
is_play: false,
|
||
};
|
||
}
|
||
);
|
||
this.pageInfo.total = res.result.total;
|
||
}
|
||
});
|
||
}
|
||
},
|
||
onAudioClick(row) {
|
||
const find = this.riskListDetailList.find(
|
||
(item) => item.id == row.id
|
||
);
|
||
console.log(find);
|
||
console.log(this.$refs[`audio${find.id}`]);
|
||
if (find.is_play) {
|
||
this.$refs[`audio${find.id}`][0].pause();
|
||
find.is_play = false;
|
||
} else {
|
||
this.$refs[`audio${find.id}`][0].play();
|
||
find.is_play = true;
|
||
}
|
||
},
|
||
SizeChange(val) {
|
||
this.pageInfo.pageSize = val;
|
||
this.getRiskListDetailPage();
|
||
},
|
||
CurrentChange(val) {
|
||
console.log(val);
|
||
this.pageInfo.pageNo = val;
|
||
this.getRiskListDetailPage();
|
||
},
|
||
//全部关闭
|
||
setCheckedKeys() {
|
||
this.defaultExpandAll = false;
|
||
for (
|
||
var i = 0;
|
||
i < this.$refs.tree.store._getAllNodes().length;
|
||
i++
|
||
) {
|
||
this.$refs.tree.store._getAllNodes()[i].expanded =
|
||
this.defaultExpandAll;
|
||
const { data } = this.$refs.tree.store._getAllNodes()[i];
|
||
this.handleNodeCollapse(data);
|
||
}
|
||
console.log(this.defaultExpandedKeys);
|
||
},
|
||
//全部展开
|
||
setCheckedNodes() {
|
||
// defaultExpandedKeys
|
||
console.log(this.$refs.tree.store._getAllNodes());
|
||
this.defaultExpandAll = true; //展开所有节点
|
||
for (
|
||
var i = 0;
|
||
i < this.$refs.tree.store._getAllNodes().length;
|
||
i++
|
||
) {
|
||
// this.$refs.tree.store._getAllNodes()[i].expanded = this.defaultExpandAll;
|
||
const { data } = this.$refs.tree.store._getAllNodes()[i];
|
||
if (data.children.length > 0) {
|
||
this.handleNodeExpand(data);
|
||
}
|
||
}
|
||
},
|
||
// 树节点展开
|
||
handleNodeExpand(data) {
|
||
// 保存当前展开的节点
|
||
const flag = this.defaultExpandedKeys.some((item) => {
|
||
if (item === data.id) {
|
||
return true;
|
||
}
|
||
return false;
|
||
});
|
||
if (!flag) {
|
||
// 不存在则存到数组里
|
||
this.defaultExpandedKeys.push(data.id);
|
||
}
|
||
},
|
||
// 树节点关闭
|
||
handleNodeCollapse(data) {
|
||
// 删除当前关闭的节点
|
||
this.defaultExpandedKeys.some((item, i) => {
|
||
if (item === data.id) {
|
||
this.defaultExpandedKeys.splice(i, 1);
|
||
}
|
||
});
|
||
this.removeChildrenIds(data); // 这里主要针对多级树状结构，当关闭父节点时，递归删除父节点下的所有子节点
|
||
},
|
||
// 删除树子节点
|
||
removeChildrenIds(data) {
|
||
if (data.children) {
|
||
data.children.forEach((item) => {
|
||
const index = this.defaultExpandedKeys.indexOf(item.id);
|
||
if (index > 0) {
|
||
this.defaultExpandedKeys.splice(index, 1);
|
||
}
|
||
this.removeChildrenIds(item);
|
||
});
|
||
}
|
||
},
|
||
},
|
||
computed: {
|
||
selectionUp() {
|
||
return (row) => {
|
||
const findIndex = this.multipleSelection.findIndex(
|
||
(id) => id === row.id
|
||
);
|
||
return findIndex > -1 ? true : false;
|
||
};
|
||
},
|
||
headers() {
|
||
return {
|
||
Authorization: this.$store.state.userInfo.token,
|
||
};
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.diary-content {
|
||
// padding: 15px 20px;
|
||
// height: calc(100% - 30px);
|
||
background-color: #fff;
|
||
.demo-form-inline {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.el-select,
|
||
.el-cascader {
|
||
width: 192px;
|
||
}
|
||
/deep/ .el-date-editor--daterange {
|
||
width: 247px;
|
||
}
|
||
/deep/ .el-date-editor--month {
|
||
width: 90px;
|
||
.el-input__inner {
|
||
width: 90px;
|
||
padding: 0;
|
||
border: none;
|
||
font-size: 16px;
|
||
color: #272d45;
|
||
}
|
||
.el-input__prefix {
|
||
display: none;
|
||
}
|
||
}
|
||
.el-form-item {
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
}
|
||
/deep/ .download-dialog {
|
||
.el-dialog {
|
||
background: transparent;
|
||
box-shadow: initial;
|
||
width: fit-content;
|
||
margin-top: 0 !important;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
.el-dialog__body {
|
||
padding: 0;
|
||
}
|
||
.el-dialog__header {
|
||
display: none;
|
||
}
|
||
.download-box {
|
||
position: relative;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 0;
|
||
}
|
||
}
|
||
.download-box {
|
||
width: calc(355px - 40px - 40px);
|
||
padding: 10px 20px 20px;
|
||
background-color: #5181f6;
|
||
position: absolute;
|
||
z-index: -1;
|
||
.download-header {
|
||
font-weight: bold;
|
||
font-size: 24px;
|
||
color: #ffffff;
|
||
padding-bottom: 6px;
|
||
text-align: center;
|
||
}
|
||
.download-box_content {
|
||
background-color: white;
|
||
> div {
|
||
padding-top: 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
// justify-content: center;
|
||
font-size: 14px;
|
||
color: #272d45;
|
||
> div:last-child {
|
||
flex: 1;
|
||
}
|
||
> div:first-child {
|
||
color: #a2a4af;
|
||
margin-right: 10px;
|
||
text-align: right;
|
||
width: 92px;
|
||
}
|
||
}
|
||
> img {
|
||
width: 275px;
|
||
height: 275px;
|
||
}
|
||
}
|
||
}
|
||
.card-main1 {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
max-height: calc(100% - 54px - 36px - 16px - 64px - 20px - 15px);
|
||
padding-bottom: 20px;
|
||
overflow-y: scroll;
|
||
.card-box {
|
||
width: calc(24% - 13px - 22px);
|
||
background: #ffffff;
|
||
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
|
||
border: 1px solid transparent;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.card-box:not(:nth-child(4n)) {
|
||
margin-right: 1%;
|
||
}
|
||
.card-box_active {
|
||
box-shadow: 0px 4px 4px 0px rgba(81, 129, 246, 0.2);
|
||
border: 1px solid #5181f6;
|
||
}
|
||
> .card-box:nth-child(n + 5) {
|
||
margin-top: 15px;
|
||
}
|
||
}
|
||
.card-main {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
max-height: calc(100% - 54px - 36px - 16px - 64px - 20px - 15px);
|
||
padding-bottom: 20px;
|
||
overflow-y: scroll;
|
||
> .card-box:nth-child(n + 5) {
|
||
margin-top: 15px;
|
||
}
|
||
.card-box {
|
||
width: 24%;
|
||
background: #ffffff;
|
||
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
|
||
border: 1px solid transparent;
|
||
|
||
padding-bottom: 15px;
|
||
.card-img {
|
||
width: 100%;
|
||
height: 150px;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
.card-box:not(:nth-child(4n)) {
|
||
margin-right: 1%;
|
||
}
|
||
.card-box_active {
|
||
box-shadow: 0px 4px 4px 0px rgba(81, 129, 246, 0.2);
|
||
border: 1px solid #5181f6;
|
||
}
|
||
}
|
||
.equipment_detail {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
> div:first-child {
|
||
display: flex;
|
||
.equipment_box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
.state-box {
|
||
padding: 4px 8px;
|
||
min-width: 40px;
|
||
color: white;
|
||
background-color: #88cf65;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
}
|
||
.state-box_offline {
|
||
background-color: #f7f7f7;
|
||
color: #272d45;
|
||
}
|
||
> div {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
height: 40px;
|
||
> span:first-child {
|
||
color: #808080;
|
||
width: 60px;
|
||
text-align: right;
|
||
}
|
||
> span:last-child {
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
}
|
||
.equipment_box:not(:first-child) {
|
||
margin-left: 80px;
|
||
> div > span:first-child {
|
||
width: 130px;
|
||
}
|
||
}
|
||
}
|
||
> div:last-child {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 80px;
|
||
margin-top: 10px;
|
||
.el-button {
|
||
width: 122px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.image-box {
|
||
border-radius: 2px 2px 2px 2px;
|
||
border: 1px solid #a2a4af;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
img {
|
||
width: 122px;
|
||
height: 122px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.flex-box {
|
||
/deep/ .el-form-item__content {
|
||
display: flex;
|
||
.el-select {
|
||
margin-left: 12px;
|
||
width: 7.5rem;
|
||
}
|
||
}
|
||
}
|
||
.border-radius_3 {
|
||
border-radius: 3px 3px 3px 3px;
|
||
}
|
||
.delete_btn {
|
||
background-color: transparent;
|
||
color: #f56c6c;
|
||
border-color: #f56c6c;
|
||
}
|
||
.risk_detail_main_title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #4d4d4d;
|
||
margin-bottom: 20px;
|
||
}
|
||
.risk_detail_main {
|
||
.detail_flex {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 36px;
|
||
}
|
||
.detail_table2 {
|
||
width: calc(100% - 320px) !important;
|
||
:deep(.el-input-number) {
|
||
width: 320px !important;
|
||
.el-input__inner {
|
||
width: 320px !important;
|
||
}
|
||
}
|
||
}
|
||
.detail_table3 {
|
||
// width: calc(100% - 320px - 120px) !important;
|
||
.el-select,
|
||
.el-input {
|
||
width: 320px !important;
|
||
}
|
||
.box1 {
|
||
min-width: 320px;
|
||
width: initial !important;
|
||
color: #a2a4af !important;
|
||
font-size: 12px !important;
|
||
> span {
|
||
font-size: 14px !important;
|
||
color: #272d45 !important;
|
||
}
|
||
}
|
||
> div:first-child {
|
||
justify-content: flex-start !important;
|
||
> .box1:last-child {
|
||
margin-left: 18px;
|
||
}
|
||
}
|
||
> div:last-child {
|
||
justify-content: flex-start !important;
|
||
.el-select:not(:first-child) {
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
}
|
||
.detail_table {
|
||
width: 100%;
|
||
> div:first-child {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10px 17px;
|
||
background-color: #fafafa;
|
||
margin-bottom: 10px;
|
||
justify-content: space-between;
|
||
> .box1 {
|
||
width: 320px;
|
||
}
|
||
> .box1:last-child {
|
||
text-align: center;
|
||
}
|
||
> .box2 {
|
||
margin: 0 6px;
|
||
}
|
||
}
|
||
> div:last-child {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 10px 17px;
|
||
border: 1px dashed #e4e7ed;
|
||
.el-select,
|
||
.el-input {
|
||
width: 320px;
|
||
height: 34px;
|
||
:deep(.el-input__inner) {
|
||
height: 34px;
|
||
line-height: 34px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.detail_table1 {
|
||
display: flex;
|
||
padding: 10px 17px;
|
||
border: 1px dashed #e4e7ed;
|
||
.el-radio-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
// justify-content: space-between;
|
||
.el-radio:nth-child(n + 3) {
|
||
margin-top: 10px;
|
||
}
|
||
.el-radio {
|
||
width: 604px;
|
||
:deep(.el-input-number) {
|
||
width: 320px !important;
|
||
height: 34px !important;
|
||
.el-input__inner {
|
||
width: 320px !important;
|
||
height: 34px !important;
|
||
}
|
||
}
|
||
:deep(.el-radio__label) {
|
||
span {
|
||
width: 70px;
|
||
display: inline-block;
|
||
}
|
||
> span:last-child {
|
||
margin: 0 20px;
|
||
color: #aaabb6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.detail_table4 {
|
||
margin: 16px 0;
|
||
.detail_table4_title {
|
||
margin-bottom: 16px;
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border: 1px solid #ccc;
|
||
border-collapse: collapse;
|
||
font-size: 14px;
|
||
}
|
||
th,
|
||
td {
|
||
height: 30px;
|
||
border: 1px solid #ccc;
|
||
text-align: center;
|
||
min-width: 80px;
|
||
}
|
||
thead {
|
||
background-color: #f2f2f2;
|
||
}
|
||
}
|
||
.risk_detail_top {
|
||
width: 76%;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.el-input,
|
||
.el-select {
|
||
width: 320px;
|
||
height: 34px;
|
||
}
|
||
}
|
||
.riskcolor {
|
||
color: white;
|
||
padding: 4px 6px;
|
||
width: 64px;
|
||
}
|
||
.riskcolor_table {
|
||
padding: 1px 6px;
|
||
display: inline-block;
|
||
}
|
||
.riskcolor1 {
|
||
background-color: #eb4047;
|
||
}
|
||
.riskcolor2 {
|
||
background-color: #ffbf00;
|
||
}
|
||
.riskcolor3 {
|
||
background-color: #ffff00;
|
||
}
|
||
.riskcolor4 {
|
||
background-color: #006fbf;
|
||
}
|
||
.check_box {
|
||
display: flex;
|
||
font-size: 14px;
|
||
> .el-button:hover {
|
||
color: #5181f6 !important;
|
||
}
|
||
padding-bottom: 15px;
|
||
> .el-button {
|
||
padding: 0;
|
||
margin-left: 10px;
|
||
}
|
||
> .el-button:first-child {
|
||
color: #eb4047;
|
||
}
|
||
}
|
||
.dialog-style {
|
||
.el-input {
|
||
width: 220px;
|
||
}
|
||
.el-form-item {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
.sidebar_btn {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 8px;
|
||
.el-button + .el-button {
|
||
margin-left: 8px;
|
||
}
|
||
}
|
||
.sidebar_btn1 {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 8px;
|
||
}
|
||
.sidebar_btn2 {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding-top: 8px;
|
||
> .el-button:hover {
|
||
color: #5181f6 !important;
|
||
}
|
||
> .el-button {
|
||
// padding: 0;
|
||
position: relative;
|
||
border: none;
|
||
// margin-left: 10px;
|
||
}
|
||
> .el-button:first-child::before {
|
||
content: " ";
|
||
position: absolute;
|
||
top: 50%;
|
||
right: -10px;
|
||
transform: translateY(-50%);
|
||
width: 1px;
|
||
height: 90%;
|
||
background-color: #d9d9d9;
|
||
}
|
||
}
|
||
.el-form-item--mini.el-form-item {
|
||
margin-bottom: 8px;
|
||
}
|
||
.flex() {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.treeStyle() {
|
||
/deep/.el-tree {
|
||
font-size: 15px;
|
||
width: 100%;
|
||
background-color: transparent;
|
||
.el-tree-node {
|
||
white-space: normal;
|
||
&:focus > .el-tree-node__content {
|
||
background-color: transparent;
|
||
}
|
||
&.is-current > .el-tree-node__content {
|
||
background-color: rgba(81, 129, 246, 0.14);
|
||
color: #5181f6;
|
||
}
|
||
}
|
||
.el-tree-node__content {
|
||
// height: 32px;
|
||
padding: 7px 0;
|
||
height: auto;
|
||
line-height: 16px;
|
||
position: relative;
|
||
// margin-bottom: 7px;
|
||
&:hover {
|
||
background-color: rgba(81, 129, 246, 0.14);
|
||
color: #5181f6;
|
||
}
|
||
|
||
.videoName {
|
||
font-size: 14px;
|
||
}
|
||
.projectName {
|
||
font-size: 14px;
|
||
width: calc(100% - 55px);
|
||
display: inline-block;
|
||
}
|
||
.companyName2 {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
display: inline-block;
|
||
width: 192px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
.el-tree-node__expand-icon {
|
||
font-size: 16px;
|
||
padding: 0 6px;
|
||
&.is-leaf {
|
||
color: transparent !important;
|
||
}
|
||
}
|
||
.treeTitle {
|
||
background-color: #f7f7f7;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
.custom-tree-node {
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
.custom-tree-node_icon::before {
|
||
content: "";
|
||
width: 12px;
|
||
height: 14px;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
left: -16px;
|
||
top: 50%;
|
||
transform: translateY(-62%);
|
||
}
|
||
.node_icon-online::before {
|
||
background-image: url(~@/assets/images/laborManage/bodyworn_icon1.png);
|
||
}
|
||
.node_icon-offline::before {
|
||
background-image: url(~@/assets/images/laborManage/bodyworn_icon2.png);
|
||
}
|
||
|
||
.el-tree-node.is-current .custom-tree-node_icon::before {
|
||
background-image: url(~@/assets/images/laborManage/bodyworn_icon3.png);
|
||
}
|
||
|
||
.projectName {
|
||
// color: #191e3d;
|
||
// font-size: 15px;
|
||
// margin-bottom: 8px;
|
||
// font-weight: 500;
|
||
}
|
||
|
||
.el-icon-view {
|
||
font-size: 16px;
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-left: 10px;
|
||
vertical-align: top;
|
||
display: none;
|
||
position: absolute;
|
||
bottom: 10px;
|
||
right: 10px;
|
||
}
|
||
|
||
.avatar-uploader {
|
||
border: 1px dashed #d9d9d9;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
// overflow: hidden;
|
||
height: 178px;
|
||
}
|
||
|
||
.avatar-uploader:hover {
|
||
border-color: #409eff;
|
||
}
|
||
|
||
.avatar-uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
width: 178px;
|
||
height: 178px;
|
||
line-height: 178px;
|
||
text-align: center;
|
||
}
|
||
|
||
.avatar {
|
||
width: 178px;
|
||
height: 178px;
|
||
display: block;
|
||
}
|
||
|
||
.imgBox {
|
||
position: relative;
|
||
.el-icon-error {
|
||
font-size: 20px;
|
||
position: absolute;
|
||
right: -10px;
|
||
top: -10px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
/deep/ .projectDialog .el-dialog {
|
||
margin-top: 20px !important;
|
||
margin-bottom: 0;
|
||
.el-input--medium .el-input__inner {
|
||
// height: 65px;
|
||
}
|
||
}
|
||
.el-icon-setting {
|
||
font-size: 15px;
|
||
color: #8eb0fa;
|
||
}
|
||
.tableBtns .el-icon-setting {
|
||
margin-right: 6px;
|
||
}
|
||
.CheckboxTitle {
|
||
font-size: 14px;
|
||
width: 100%;
|
||
padding: 15px;
|
||
}
|
||
.zdy-checkbox {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
> label {
|
||
width: 30%;
|
||
}
|
||
}
|
||
.el-checkbox {
|
||
width: 46%;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.areaTreeBox {
|
||
float: left;
|
||
position: relative;
|
||
.treeStyle();
|
||
}
|
||
|
||
.areaTreeInner {
|
||
// background-color: rgba(0, 0, 0, 0.7);
|
||
width: 300px;
|
||
padding: 20px 15px;
|
||
height: calc(100% - 40px);
|
||
}
|
||
.treeBox {
|
||
height: calc(100% - 42px - 32px - 32px - 20px);
|
||
background-color: rgba(216, 216, 216, 0.2);
|
||
padding-top: 10px;
|
||
}
|
||
.rightPanel {
|
||
float: left;
|
||
width: calc(100% - 330px - 20px - 30px);
|
||
margin-left: 20px;
|
||
padding: 10px 15px 20px;
|
||
height: calc(100% - 30px);
|
||
position: relative;
|
||
.rightPanel_title {
|
||
height: calc(38px + 36px + 22px);
|
||
}
|
||
.tabs-content {
|
||
height: calc(100% - 95px);
|
||
/deep/.el-tabs__content {
|
||
height: calc(100% - 50px);
|
||
.el-tab-pane {
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.pagerBox {
|
||
// margin-top: 18px;
|
||
position: absolute;
|
||
bottom: 16px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
.operateBtns {
|
||
float: right; //向右浮动
|
||
|
||
i {
|
||
margin-right: 10px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.plusBtn {
|
||
float: right;
|
||
background-color: #409eff;
|
||
color: white;
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
margin-top: -6px;
|
||
cursor: pointer;
|
||
}
|
||
.operation-style {
|
||
.flex();
|
||
justify-content: center;
|
||
.operationText:not(:last-child) {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.add {
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
:nth-child(2) {
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
.select {
|
||
display: flex;
|
||
width: 500px;
|
||
max-height: 380px;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
overflow: auto;
|
||
// div{
|
||
// margin: 3px 15px;
|
||
// }
|
||
.el-tag {
|
||
margin: 5px 10px;
|
||
}
|
||
}
|
||
.select::-webkit-scrollbar {
|
||
background-color: rgb(132, 132, 133);
|
||
width: 4px;
|
||
}
|
||
.select::-webkit-scrollbar-thumb {
|
||
background-color: rgb(80, 78, 252);
|
||
}
|
||
/deep/ .el-transfer__buttons {
|
||
display: none;
|
||
}
|
||
/deep/ .el-transfer-panel {
|
||
width: 200px;
|
||
margin: 5px 22px;
|
||
}
|
||
.leftSelect {
|
||
width: 230px;
|
||
height: 300px;
|
||
display: inline-block;
|
||
position: relative;
|
||
margin: 5px 15px 5px 0;
|
||
border: 1px solid #f4f2f4;
|
||
.title {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding-left: 20px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.el-autocomplete {
|
||
position: absolute;
|
||
top: 50px;
|
||
left: 25px;
|
||
right: 30px;
|
||
/deep/ .el-input--medium .el-input__inner {
|
||
border-radius: 10px;
|
||
padding: 0 10px;
|
||
}
|
||
}
|
||
|
||
.el-checkbox-group {
|
||
height: 190px;
|
||
width: 90%;
|
||
overflow: auto;
|
||
position: absolute;
|
||
top: 95px;
|
||
left: 25px;
|
||
.el-checkbox {
|
||
display: block;
|
||
margin: 0;
|
||
}
|
||
}
|
||
.el-checkbox-group::-webkit-scrollbar {
|
||
background-color: #fff;
|
||
width: 4px;
|
||
border-radius: 5px;
|
||
}
|
||
.el-checkbox-group::-webkit-scrollbar-thumb {
|
||
background-color: #e0e1e3;
|
||
border-radius: 5px;
|
||
}
|
||
}
|
||
.rightSelect {
|
||
width: 230px;
|
||
height: 300px;
|
||
display: inline-block;
|
||
position: relative;
|
||
margin: 5px 10px 5px 0;
|
||
border: 1px solid #f4f2f4;
|
||
.title {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding-left: 20px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.rightAllSelect {
|
||
width: 100%;
|
||
height: 230px;
|
||
overflow: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: absolute;
|
||
top: 50px;
|
||
.selectItem {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
span {
|
||
margin-left: 30px;
|
||
}
|
||
img {
|
||
cursor: pointer;
|
||
display: none;
|
||
margin-right: 20px;
|
||
}
|
||
}
|
||
.selectItem:hover {
|
||
background-color: #ecf4fd;
|
||
}
|
||
.selectItem:hover img {
|
||
display: inline-block;
|
||
}
|
||
}
|
||
.rightAllSelect::-webkit-scrollbar {
|
||
background-color: #fff;
|
||
width: 4px;
|
||
border-radius: 5px;
|
||
}
|
||
.rightAllSelect::-webkit-scrollbar-thumb {
|
||
background-color: #e0e1e3;
|
||
border-radius: 5px;
|
||
}
|
||
}
|
||
.select-content {
|
||
box-sizing: border-box;
|
||
height: 34px;
|
||
line-height: 34px !important;
|
||
border-radius: 3px;
|
||
border: 1px solid #d7dbe9;
|
||
padding: 0 15px;
|
||
position: relative;
|
||
.tip-text {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
cursor: pointer;
|
||
}
|
||
.select-list {
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 34px;
|
||
left: -3px;
|
||
z-index: 10;
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
box-shadow: 4px 4px 10px #e3e3e3;
|
||
padding-top: 10px;
|
||
&-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
}
|
||
// 账号审核弹框样式
|
||
.auditDialog /deep/ .el-dialog__body {
|
||
padding: 0px;
|
||
}
|
||
.dialog_content {
|
||
padding: 0px;
|
||
.dialog_content-part {
|
||
padding: 0px 25px;
|
||
.dialog-tip {
|
||
.flex();
|
||
margin-bottom: 5px;
|
||
.el-icon-warning-outline {
|
||
color: #eb474f;
|
||
}
|
||
span {
|
||
color: #eb4047;
|
||
margin-left: 3px;
|
||
}
|
||
}
|
||
.dialog-search {
|
||
.flex();
|
||
span {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
color: #272d45;
|
||
margin-right: 10px;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
.dialog-tree {
|
||
margin: 10px 0px;
|
||
.treeStyle();
|
||
/deep/.el-tree-node__content {
|
||
position: relative;
|
||
}
|
||
/deep/.el-tree-node__content > label.el-checkbox {
|
||
position: absolute;
|
||
right: 0;
|
||
}
|
||
}
|
||
}
|
||
.relative-group {
|
||
height: 60px;
|
||
line-height: 60px;
|
||
border-top: 1px solid #d8dbe8;
|
||
}
|
||
}
|
||
</style>
|