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