From 82e171173ac6c9c21973e8bd7e4651e9bd012f8c Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Fri, 18 Apr 2025 19:54:54 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue | 268 ++++++++++++-------
src/views/TaskManage/SearchBox.vue | 9
src/assets/images/taskManagement/taskIntermediateContent/close.png | 0
src/assets/images/taskManagement/taskIntermediateContent/broadcast-list.png | 0
src/api/payload.js | 52 +++
src/views/SignMachineNest/SignMachineNest.vue | 2
src/components/CurrentTaskDetails/TaskDetailsLeft.vue | 375 ++++++++++++++++++++++++++
src/styles/element-ui.scss | 63 ++++
src/assets/images/home/useEventOperate/point.png | 0
src/components/CurrentTaskDetails/CurrentTaskDetails.vue | 5
src/assets/images/home/useEventOperate/point-active.png | 0
src/views/TaskManage/TaskTop/TaskIndustry.vue | 2
src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue | 32 -
13 files changed, 670 insertions(+), 138 deletions(-)
diff --git a/src/api/payload.js b/src/api/payload.js
index 66da1a8..8bc5a14 100644
--- a/src/api/payload.js
+++ b/src/api/payload.js
@@ -79,6 +79,58 @@
});
};
+// 喊话
+export const startVoice = (data) => {
+ return request({
+ url:`/drone-device-core/speak/api/v1/startVoice`,
+ method: 'post',
+ data,
+ });
+};
+
+//播报列表单个音频文件播放(远离河道)
+export const stayAwayRiver = (params) => {
+ const url = `/drone-device-core/speak/api/v1/putVoice`;
+ return request({
+ url,
+ method: 'post',
+ params,
+ });
+};
+
+//播报文件
+export const getVoiceFile = (params) => {
+ const url = `/drone-device-core/speak/api/v1/getVoiceFile`;
+ return request({
+ url,
+ method: 'post',
+ params,
+ });
+};
+
+// 上传音频文件
+export const uploadSpeak = (data) => {
+ const url = `/drone-device-core/speak/api/v1/uploadSpeak`;
+ return request({
+ url,
+ method: 'post',
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ },
+ data,
+ });
+};
+
+// 播放音频
+export const playAudio = (params) => {
+ const url = `/drone-device-core/speak/api/v1/startVoices`;
+ return request({
+ url,
+ method: 'post',
+ params,
+ });
+};
+
// 无人机开启ai
export const getLiveAiLinkApi = (data) => {
diff --git a/src/assets/images/home/useEventOperate/point-active.png b/src/assets/images/home/useEventOperate/point-active.png
index 3f5c556..c5869c7 100644
--- a/src/assets/images/home/useEventOperate/point-active.png
+++ b/src/assets/images/home/useEventOperate/point-active.png
Binary files differ
diff --git a/src/assets/images/home/useEventOperate/point.png b/src/assets/images/home/useEventOperate/point.png
index b574793..9caf3bd 100644
--- a/src/assets/images/home/useEventOperate/point.png
+++ b/src/assets/images/home/useEventOperate/point.png
Binary files differ
diff --git a/src/assets/images/taskManagement/taskIntermediateContent/broadcast-list.png b/src/assets/images/taskManagement/taskIntermediateContent/broadcast-list.png
new file mode 100644
index 0000000..911ee64
--- /dev/null
+++ b/src/assets/images/taskManagement/taskIntermediateContent/broadcast-list.png
Binary files differ
diff --git a/src/assets/images/taskManagement/taskIntermediateContent/close.png b/src/assets/images/taskManagement/taskIntermediateContent/close.png
new file mode 100644
index 0000000..aa69f6a
--- /dev/null
+++ b/src/assets/images/taskManagement/taskIntermediateContent/close.png
Binary files differ
diff --git a/src/components/CurrentTaskDetails/CurrentTaskDetails.vue b/src/components/CurrentTaskDetails/CurrentTaskDetails.vue
index 3034518..5fe36df 100644
--- a/src/components/CurrentTaskDetails/CurrentTaskDetails.vue
+++ b/src/components/CurrentTaskDetails/CurrentTaskDetails.vue
@@ -17,9 +17,10 @@
<RealTimeMap :class="`${isMaxMap ? 'maxBox' : 'minBox'}`" />
<TaskDetailsRight v-if="isAutoControl" />
<template v-else>
- <TaskDetailsHead />
- <TaskDetailsLeft />
+
</template>
+ <TaskDetailsHead />
+ <TaskDetailsLeft />
<!-- 控制面板，里面有方法需要立即执行，不可用v-if -->
<!-- <ControlPanel />-->
diff --git a/src/components/CurrentTaskDetails/TaskDetailsLeft.vue b/src/components/CurrentTaskDetails/TaskDetailsLeft.vue
index fe76edb..0e39eca 100644
--- a/src/components/CurrentTaskDetails/TaskDetailsLeft.vue
+++ b/src/components/CurrentTaskDetails/TaskDetailsLeft.vue
@@ -22,10 +22,12 @@
<div @click="recordFun">{{ isRecording ? '录像中...' : '录像' }}</div>
</div>
<div class="multiCol">
- <div @click="ElMessage.warning('加急开发中...')">喊话</div>
- <div @click="ElMessage.warning('加急开发中...')">广播</div>
+ <div @click="shoutFun">{{ isRecordShouting ? '喊话' : '停止喊话' }}</div>
+ <div @click="broadcastFun">广播</div>
</div>
-
+ <div class="percent" v-if="isRecordShouting && percent > 0">
+ <el-progress :text-inside="true" :stroke-width="10" :percentage="percent"></el-progress>
+ </div>
<div class="cameraZoom">
<el-slider
v-model="cameraParams.zoom_factor"
@@ -36,13 +38,71 @@
/>
</div>
</div>
+ <!-- 广播列表 -->
+ <div class="broadcast" v-if="isBroadcast">
+ <div class="title">
+ <span>语音内容</span>
+ <img src="@/assets/images/taskManagement/taskIntermediateContent/broadcast-list.png" alt="" />
+ <img @click="isBroadcast = !isBroadcast" class="close" src="@/assets/images/taskManagement/taskIntermediateContent/close.png" alt="">
+ </div>
+ <div class="search-btn">
+ <div class="input-set">
+ <label>文件名称:</label><el-input v-model="searchParams.name" placeholder="请输入广播名称"></el-input>
+ </div>
+ <div class="btn-set">
+ <div class="btn" @click="clearData">清空</div>
+ <div class="btn" @click="getFileList">搜索</div>
+ <el-upload
+ class="btn"
+ action="/upload"
+ :show-file-list="false"
+ :before-upload="handleUpload">
+ 音频上传
+ </el-upload>
+ </div>
+ </div>
+ <div class="video-table">
+ <div class="table-header">
+ <div class="name">音频名称</div>
+ <div class="operate">操作</div>
+ </div>
+ <div class="table-body" v-for="item in tableList">
+ <div class="name">{{ item.name }}</div>
+ <div class="operate"><span class="btn" @click="playVoice(item)">播放</span></div>
+ </div>
+ </div>
+ <div class="pagination">
+ <el-pagination
+ background
+ :page-sizes="[10, 20, 30, 50]"
+ v-model:current-page="searchParams.page"
+ v-model:page-size="searchParams.page_size"
+ layout=" prev, pager, next"
+ :total="total"
+ @change="pageChange"
+ />
+ </div>
+ </div>
</template>
<script setup>
import EventBus from '@/event-bus'
-import { callPhotoAndVideoCmd, cameraParamsChangeApi, ptzResetModeApi } from '@/api/payload'
-import { ElMessage } from 'element-plus'
+import {
+ callPhotoAndVideoCmd,
+ cameraParamsChangeApi,
+ ptzResetModeApi,
+ startVoice,
+ stayAwayRiver,
+ getVoiceFile,
+ playAudio,
+ uploadSpeak } from '@/api/payload'
+import { ElMessage, ElMessageBox } from 'element-plus'
import { throttle } from 'lodash'
+import Recorder from 'js-audio-recorder';
+import dayjs from 'dayjs'
+
+// 初始化喊话
+let globalShout = null
const isRecording = ref(false)
@@ -133,6 +193,148 @@
ElMessage.success('拍照成功')
})
}
+
+// 记录喊话是否开始阶段
+const isRecordShouting = ref(true);
+const isFlag = ref(false);
+const percent = ref(0); // 滚动条滚动百分比
+// 初始化喊话
+function initShout() {
+ destroyShout();
+ globalShout = new Recorder({
+ sampleBits: 16,
+ sampleRate: 16000,
+ numChannels: 1,
+ })
+}
+
+// 销毁喊话
+function destroyShout() {
+ if (globalShout) {
+ globalShout.pause()
+ globalShout.destroy() // 销毁实例
+ globalShout = null
+ }
+}
+
+// 喊话
+function shoutFun() {
+ // 是否需要判断有控制权限
+ if (isFlag.value) return
+ isFlag.value = true;
+ if (isRecordShouting.value) {
+ // 初始化喊话
+ initShout();
+ globalShout.start().then(() => {
+ ElMessage.success('开始喊话')
+ isRecordShouting.value = false
+ isFlag.value = false
+ }).catch((err) => {
+ isFlag.value = false
+ })
+ } else {
+ let formData = new FormData();
+ const wavBlob = globalShout.getWAVBlob()
+ const wavform = new File([wavBlob], new Date().getTime() + '.wav')
+ formData.append('file', wavform)
+ formData.append('sn', '8UUXN2A00A00MM')
+ formData.append('psdk_index', 2)
+ formData.append('name', '喊话' + dayjs().format('YYYY.MM.DD HH:mm:ss'))
+ formData.append('volumn', 100)
+ startVoice(formData).then(res => {
+ ElMessage.success('喊话成功');
+ isRecordShouting.value = true
+ isFlag.value = false
+ destroyShout();
+ }).catch(err => {
+ isRecordShouting.value = true
+ isFlag.value = false
+ ElMessage.error('喊话失败')
+ destroyShout();
+ });
+ }
+}
+const tableList = ref([]);
+// 分页相关
+const searchParams = ref({
+ sn: droneSn.value,
+ name: '',
+ page: 1,
+ page_size: 1
+});
+const isBroadcast = ref(false);
+const total = ref(0);
+// 广播
+function broadcastFun() {
+ // 是否需要判断有控制权限
+ // 弹出框选择文件
+ isBroadcast.value = true;
+ // 获取文件接口
+ getFileList();
+}
+
+// 获取文件列表
+function getFileList() {
+ getVoiceFile(searchParams.value).then((res) => {
+ if (res.data.code !== 0) return ElMessage.error(res.data.msg);
+ tableList.value = res.data.data.records;
+ total.value = res.data.data.total;
+ });
+}
+
+// 清除数据
+function clearData() {
+ searchParams.value.name = '';
+ searchParams.value.page = 1;
+ getFileList();
+}
+
+function pageChange(val) {
+ searchParams.value.page = val;
+ getFileList();
+}
+// 上传
+function handleUpload(file) {
+ let formData = new FormData();
+ formData.append('file', file)
+ formData.append('sn', droneSn.value)
+ uploadSpeak(formData).then(res => {
+ if (res.data.code !== 0) return ElMessage.error('上传失败');
+ ElMessage.success('上传成功');
+ // 获取文件接口
+ getFileList();
+ }).catch(err => {
+ ElMessage.error('上传失败')
+ })
+}
+
+// 播放操作
+function playVoice(item) {
+ ElMessageBox.confirm('是否确认播放该音频？', '提示', {
+ confirmButtonText: '确定',
+ cancelButtonText: '取消',
+ type: 'warning'
+ }).then(() => {
+ const { sn, name, url, md5,voice } = item
+ playAudio({sn, name, url, md5,voice}).then((res) => {
+ if (res.code !== 0) return ElMessage.error("播放失败");
+ ElMessage.success("播放成功");
+ });
+ }).catch(() => {
+ ElMessage({
+ type: 'info',
+ message: '已取消'
+ });
+ });
+}
+onMounted(() => {
+ // 初始化喊话
+ initShout();
+});
+onUnmounted(() => {
+ // 销毁喊话
+ destroyShout();
+});
</script>
<style scoped lang="scss">
@@ -143,7 +345,7 @@
top: 50%;
transform: translateY(-60%);
width: 178px;
- height: 409px;
+ height: 416px;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
border-radius: 20px 20px 20px 20px;
@@ -245,5 +447,166 @@
}
}
}
+ .percent {
+ width: 146px;
+ :deep(.el-progress-bar__outer) {
+ height: 6px;
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ :deep(.el-progress-bar__inner) {
+ height: 6px;
+ background: #FFFFFF;
+ border-radius: 10px 10px 10px 10px;
+ transition: all 0.3s;
+ }
+ :deep(.el-progress-bar__innerText) {
+ // color: red;
+ }
+ }
+}
+
+.broadcast {
+ z-index: 2;
+ position: absolute;
+ left: 204px;
+ top: 60%;
+ transform: translateY(-60%);
+ backdrop-filter: blur(5px);
+ width: 608px;
+ height: 256px;
+ // background: rgba(64,64,64,0.25);
+ background: rgba(0, 0, 0, 0.5);
+ border-radius: 20px 20px 20px 20px;
+ .title {
+ margin: 18px 8px;
+ span {
+ width: 66px;
+ height: 18px;
+ font-family: Segoe UI, Segoe UI;
+ font-weight: 400;
+ font-size: 14px;
+ color: #EDEDED;
+ line-height: 18px;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ margin-left: 16px;
+ }
+ img {
+ width: 584px;
+ height: 14px;
+ }
+ .close {
+ width: 16px;
+ height: 16px;
+ text-align: right;
+ position: absolute;
+ right: 16px;
+ top: 16px;
+ cursor: pointer;
+ }
+ }
+ .search-btn {
+ display: flex;
+ justify-content: space-between;
+ color: #EDEDED;
+ margin: 0 14px;
+ .input-set {
+ display: flex;
+ align-items: center;
+ width: 214px;
+ height: 32px;
+ label {width: 90px;}
+ :deep(.el-input__wrapper) {
+ background: rgba(58,58,58,0.75);
+ border-radius: 8px 8px 8px 8px;
+ }
+ :deep(.el-input__inner) {
+ color: #EDEDED;
+ }
+ }
+ .btn-set {
+ display: flex;
+ gap: 12px;
+ .btn {
+ width: 66px;
+ height: 32px;
+ line-height: 32px;
+ text-align: center;
+ background: rgba(58,58,58,0.75);
+ box-shadow: 0px 4px 72px 0px rgba(0,0,0,0.25);
+ border-radius: 8px 8px 8px 8px;
+ color: #EDEDED;
+ cursor: pointer;
+ }
+ }
+ }
+ .video-table {
+ margin: 14px 10px;
+ .table-header {
+ height: 44px;
+ line-height: 44px;
+ background: rgba(66,66,66,0.85);
+ border-radius: 8px 8px 0px 0px;
+ display: flex;
+ color: #BDBDBD;
+ }
+ .table-body {
+ height: 44px;
+ line-height: 44px;
+ background: rgba(74,72,72,0.6);
+ border-radius: 0px 0px 8px 8px;
+ display: flex;
+ color: #EDEDED;
+ }
+ .name {
+ width: 60%;
+ text-align: center
+ }
+ .operate {
+ width:40%;
+ text-align: center;
+ .btn {
+ display: inline-block;
+ cursor: pointer;
+ width: 66px;
+ height: 32px;
+ line-height: 32px;
+ text-align: center;
+ background: rgba(58,58,58,0.75);
+ box-shadow: 0px 4px 72px 0px rgba(0,0,0,0.25);
+ border-radius: 8px 8px 8px 8px;
+ color: #EDEDED;
+ }
+ }
+ }
+ .pagination {
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+ height: 32px;
+ display: flex;
+
+ :deep(.number) {
+ color: #EDEDED;
+ }
+ :deep(.btn-prev),
+ :deep(.btn-next) {
+ width: 26px;
+ height: 26px;
+ background: rgba(58,58,58,0.75);
+ box-shadow: 0px 4px 72px 0px rgba(0,0,0,0.25);
+ border-radius: 8px 8px 8px 8px;
+ cursor: pointer;
+ }
+ :deep(.el-pager li) {
+ cursor: pointer;
+ background: rgba(58,58,58,0.75);
+ box-shadow: 0px 4px 72px 0px rgba(0,0,0,0.25);
+ border-radius: 8px 8px 8px 8px;
+ border: 1px solid rgba(255,255,255,0.99);
+ margin: 0 4px;
+ }
+ }
}
</style>
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index e14b884..5668e7c 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -236,9 +236,68 @@
.el-range-separator {
color: #ffffff;
}
+
+
}
-// :teleported="false"
+ // 日期下拉框
+.custom-date-picker {
+ background: #012350 !important;
+ border: 1px solid !important;
+ border-radius: 0px 0px 8px 8px;
+ border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(115, 192, 255, 1)) 1 1 !important;
+ /* 修改箭头样式 */
+ .el-popper__arrow {
+ &::before {
+ background: #0d3556 !important;
+ border: 1px solid #0d3556 !important;
+ box-sizing: border-box;
+ }
+ }
+ /* 修改头部背景色 */
+ .custom-date-picker .el-picker-panel__header {
+ background: linear-gradient(180deg, rgba(13, 53, 86, 0.85) 0%, rgba(1, 35, 80, 0.85) 100%) !important;
+ color: #fff !important;
+ }
+ .el-date-table {
+ th {
+ color: #fff !important; /* 星期标题颜色 */
+ }
+ }
+ /* 修改日期单元格悬停/选中状态 */
+ .custom-date-picker .el-date-table td:hover,
+ .custom-date-picker .el-date-table td.current:not(.disabled) {
+ background: rgba(60, 121, 202) !important;
+ color: white !important;
+ }
+ // 头部按钮
+ .el-date-table td.start-date span,
+ .el-date-table td.start-date span,
+ .el-date-table td.end-date span {
+ background-color: #012350 !important;
+ }
+
+ .el-date-table td.in-range div,
+ .el-date-table td.in-range div:hover,
+ .el-date-table.is-week-mode .el-date-table__row.current div,
+ .el-date-table.is-week-mode .el-date-table__row:hover div {
+ background-color: rgba(60, 121, 202) !important;
+ }
+ .el-picker-panel__icon-btn {
+ color: #fff !important;
+
+ &:hover {
+ color: var(--el-color-primary) !important;
+ }
+
+ .el-icon {
+ &::before {
+ color: inherit !important;
+ }
+ }
+ }
+}
//下拉
+// :teleported="false"
.ztzf-select {
.el-select__wrapper {
background: #012A50;
@@ -258,7 +317,7 @@
// 下拉框
.el-select-dropdown__empty {
- background: #012350;
+ background: #012A50;
border-radius: 0px 0px 8px 8px;
border: 1px solid;
border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(115, 192, 255, 1)) 1 1;
diff --git a/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue b/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
index 9d4161f..502ccc2 100644
--- a/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
+++ b/src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue
@@ -1,9 +1,15 @@
<template>
<div class="event-overviewdetail-right" :class="{ isMore }">
- <CommonTitle title="事件概况" :style="{width: isMore?pxToRem(820):pxToRem(404)}" />
+ <CommonTitle title="事件概况" :style="{ width: isMore ? pxToRem(820) : pxToRem(404) }" />
<div class="content">
- <img class="leftArrow" :class="isMore?'rightArrow':''" :src="isMore ? rightArrowImg : leftArrowImg" @click="leftArrowFun" alt="" />
+ <img
+ class="leftArrow"
+ :class="isMore ? 'rightArrow' : ''"
+ :src="isMore ? rightArrowImg : leftArrowImg"
+ @click="leftArrowFun"
+ alt=""
+ />
<el-date-picker
class="ztzf-date-picker"
@@ -50,7 +56,7 @@
<img class="statusItemImg" :src="item.img" alt="" />
<div class="statusItemInfo">
<div class="statusItemName">{{ item.name }}</div>
- <div class="statusItemNum" :style="{ color:item.color }">{{ item.num || 0 }}</div>
+ <div class="statusItemNum" :style="{ color: item.color }">{{ item.num || 0 }}</div>
</div>
</div>
</div>
@@ -66,12 +72,7 @@
<div class="eventList">
<div class="eventListItem" v-for="item in list">
- <img
- class="eventListItemImg"
- :src="getSmallImg(item.photo_url)"
- alt=""
- @click="getFindImgHistory(item)"
- />
+ <img class="eventListItemImg" :src="getSmallImg(item.photo_url)" alt="" @click="getFindImgHistory(item)" />
<div class="eventListItemPosition" :title="item.address" @click="positioning(item)">
<img :src="positioningImg" alt="" title="点击定位" />
<!-- <div class="address">{{ item.address }}</div> -->
@@ -96,23 +97,32 @@
</div>
</div>
</div>
- <div class="image-list" v-if="isShowBigImg" :style="{ right: isMore?pxToRem(840):pxToRem(460) }">
+ <div class="image-list" v-if="isShowBigImg" :style="{ right: isMore ? pxToRem(838) : pxToRem(460) }">
<div class="title">
- <img @click="isShowBigImg=false" src="@/assets/images/home/useEventOperate/close.png" alt="">
+ <img @click="isShowBigImg = false" src="@/assets/images/home/useEventOperate/close.png" alt="" />
</div>
<div class="content">
- <img :src="clickImgSrc" alt="">
+ <img :src="clickImgSrc" alt="" />
</div>
<div class="card">
- <div v-for="(item,index) in imageList">
- <div class="time-top" :class="index===selectedImgIndex?'active':''" @click="clickWeekTime(item,index)">{{ item.create_time_str }}</div>
- <div class="time-point">
- <img v-if="index===selectedImgIndex" src="@/assets/images/home/useEventOperate/point-active.png" alt="">
- <img v-else src="@/assets/images/home/useEventOperate/point.png" alt="">
+ <div class="card-content">
+ <div v-for="(item, index) in imageList">
+ <div class="time-top" :class="index === selectedImgIndex ? 'active' : ''" @click="clickWeekTime(item, index)">
+ {{ item.create_time_str }}
+ </div>
+ <div class="time-point">
+ <img
+ class="active"
+ v-if="index === selectedImgIndex"
+ src="@/assets/images/home/useEventOperate/point-active.png"
+ alt=""
+ />
+ <img v-else src="@/assets/images/home/useEventOperate/point.png" alt="" />
+ </div>
+ <div class="time-bottom">{{ item.create_time }}</div>
</div>
- <div class="time-bottom">{{ item.create_time }}</div>
+ <div class="time-line"></div>
</div>
- <div class="time-line"></div>
</div>
</div>
</template>
@@ -159,7 +169,7 @@
size: 8,
})
-const getSmallImg = (url) => {
+const getSmallImg = url => {
return url ? url.substring(0, url.lastIndexOf('.')) + '_small' + url.substring(url.lastIndexOf('.')) : ''
}
@@ -195,16 +205,16 @@
})
}
const { flyTo } = cesiumOperation()
-const longitudeOffset = ref(0);
+const longitudeOffset = ref(0)
const positioning = row => {
const longitude = Number(row.longitude)
const latitude = Number(row.latitude)
- flyTo({ longitude: longitude, latitude:latitude + 0.0002 }, 1, 1000);
+ flyTo({ longitude: longitude, latitude: latitude + 0.0008 }, 1, 1000)
}
// 事件状态+数量
const statusList = ref([
- { name: '全部状态', img: status0Img, id: undefined,few: true, color: '#FFD509' },
+ { name: '全部状态', img: status0Img, id: undefined, few: true, color: '#FFD509' },
{ name: '待审核', img: status1Img, id: 2, color: '#8CFEA7' },
{ name: '待处理', img: status2Img, id: 0, few: true, color: '#FF7411' },
{ name: '处理中', img: status3Img, id: 3, few: true, color: '#FFC398' },
@@ -241,7 +251,7 @@
params.value.start_date = start_date
params.value.end_date = end_date
// 提交数据，更新聚合
- store.commit('setEventTimeRang', timeArr.value);
+ store.commit('setEventTimeRang', timeArr.value)
// 重置
getEventStatusNumFun()
getEventList()
@@ -263,49 +273,53 @@
}
getEventPage(params.value, pageParams).then(res => {
const resData = res.data.data
- list.value = (resData?.records || [])
+ list.value = resData?.records || []
total.value = resData.total
})
}
const isShowBigImg = ref(false)
-const imageList = ref([]);
-const clickImgSrc = ref('');
-const selectedImgIndex = ref(0);
+const imageList = ref([])
+const clickImgSrc = ref('')
+const selectedImgIndex = ref(0)
// 点击图片放大 显示详细信息
-const getFindImgHistory = (item) => {
+const getFindImgHistory = item => {
// 下半部分隐藏 右侧隐藏
isShowBigImg.value = true
store.commit('setHideBottomIcon', false)
- findImgHistory(item.id).then((res) => {
+ findImgHistory(item.id).then(res => {
if (res.data.code !== 0) return
imageList.value = res.data.data
- clickImgSrc.value = res.data.data[0]?.url;
+ clickImgSrc.value = res.data.data[0]?.url
})
- positioning(item);
+ positioning(item)
}
// 点击周期
-const clickWeekTime = (item,index) => {
+const clickWeekTime = (item, index) => {
clickImgSrc.value = item.url
selectedImgIndex.value = index
}
const getDateRange = unit => {
- if (unit === 'today') {
- return [dayjs().format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')];
- }
- return [dayjs().startOf(unit).format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf(unit).format('YYYY-MM-DD HH:mm:ss')];
-};
+ if (unit === 'today') {
+ return [dayjs().format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+ }
+ return [dayjs().startOf(unit).format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf(unit).format('YYYY-MM-DD HH:mm:ss')]
+}
// 监听事件时间范围变化
-watch(() => store.state.home.eventTimeType, (newVal) => {
- timeArr.value = getDateRange(newVal);
- const [start_date, end_date] = getDateRange(newVal);
- params.value.start_date = start_date
- params.value.end_date = end_date
- getEventStatusNumFun()
- getEventList()
- getList()
-}, { immediate: false,deep: true })
+watch(
+ () => store.state.home.eventTimeType,
+ newVal => {
+ timeArr.value = getDateRange(newVal)
+ const [start_date, end_date] = getDateRange(newVal)
+ params.value.start_date = start_date
+ params.value.end_date = end_date
+ getEventStatusNumFun()
+ getEventList()
+ getList()
+ },
+ { immediate: false, deep: true }
+)
onMounted(() => {
getDeviceList()
@@ -340,11 +354,7 @@
.content {
width: 390px;
height: 877px;
- background: linear-gradient(
- 270deg,
- rgba(31, 62, 122, 0) 0%,
- rgba(31, 62, 122, 0.35) 21%,
- #1f3e7a 100%);
+ background: linear-gradient(270deg, rgba(31, 62, 122, 0) 0%, rgba(31, 62, 122, 0.35) 21%, #1f3e7a 100%);
display: flex;
justify-content: space-between;
align-content: start;
@@ -384,7 +394,14 @@
// margin-right: 4px;
&.active {
- background: linear-gradient( 180deg, rgba(19,80,141,0) 0%, rgba(22,56,91,0.48) 48%, #053462 98%, #259DFF 98%, #259DFF 98%);
+ background: linear-gradient(
+ 180deg,
+ rgba(19, 80, 141, 0) 0%,
+ rgba(22, 56, 91, 0.48) 48%,
+ #053462 98%,
+ #259dff 98%,
+ #259dff 98%
+ );
}
.statusItemImg {
@@ -531,30 +548,46 @@
display: flex;
justify-content: center;
}
+
.image-list {
- border: 1px solid red;
position: absolute;
- z-index: 1;
+ top: 148px;
+
right: 460px;
- top: 122px;
- width: 540px;
- height: 420px;
- background: #0F1929;
- // box-shadow: inset 0px -50px 50px 0px rgba(27,148,255,0.13);
- // border-radius: 0px 0px 0px 0px;
- border: 2px solid;
- border-image: linear-gradient(180deg, rgba(81, 168, 255, 0), rgba(48, 111, 202, 1), rgba(255, 255, 255, 1), rgba(27, 148, 255, 1)) 2 2;
+
+ width: 632px;
+ height: 476px;
+ border: solid;
+ background: #0f1929;
+ z-index: 1;
+
+ border: solid 2px transparent;
+ border-radius: 20px;
+ background-image: linear-gradient(#fff, #fff), linear-gradient(180deg, rgba(81, 168, 255, 1), rgba(189, 228, 255, 1));
+ background-origin: border-box;
+ background-clip: content-box, border-box;
+
+ overflow: hidden;
.title {
+ display: flex;
+ align-items: center;
+ justify-content: center;
position: absolute;
text-align: right;
- right: 12px;
- // top: 12px;
+ top: 0;
+ right: 0;
+ width: 45px;
+ height: 44px;
+ background: rgba(0, 0, 0, 0.5);
+ border-radius: 0px 20px 0px 8px;
+
img {
- width: 10px;
- height: 10px;
+ width: 10.55px;
+ height: 10.55px;
cursor: pointer;
}
}
+
.content {
img {
width: 100%;
@@ -562,43 +595,80 @@
border-radius: 10px 10px 10px 10px;
}
}
+
.card {
- background: linear-gradient( 180deg, rgba(13,30,70,0.72) 0%, #142E6B 100%);
- padding: 0px 10px 0px 10px;
- color: #BECBEA;
- display: flex;
- justify-content: space-between;
position: absolute;
bottom: 0px;
width: 100%;
- .time-top {
- width: 50px;
- height: 30px;
- line-height: 30px;
- text-align: center;
- color: #ffffff;
- background: linear-gradient( 180deg, rgba(13,30,70,0.72) 0%, #142E6B 100%);
- border: 1px solid #0054D3;
- cursor: pointer;
- }
- .active {
- background: linear-gradient( 180deg, rgba(13,48,131,0.72) 0%, #023DC8 100%);
- border: 1px solid;
- border-image: linear-gradient(180deg, rgba(0, 84, 211, 1), rgba(146, 186, 245, 1)) 1 1;
- }
- .time-point {
- text-align: center;
- img {
- width: 8px;
- height: 12px;
- }
- }
- .time-line {
+ height: 67px;
+ background: rgba(0, 0, 0, 0.42);
+ border-radius: 0px 0px 20px 20px;
+ padding: 0px 6px 0px 29px;
+
+ color: #d5d5d5;
+ font-size: 14px;
+
+ .card-content {
+ display: flex;
+ justify-content: space-between;
+
position: absolute;
- background: linear-gradient( 82deg, rgba(23,40,79,0) 0%, #576D9F 17%, #576D9F 86%, rgba(23,40,79,0) 100%);
- height: 2px;
- top: 38px;
- width: 100%;
+ left: 29px;
+ width: calc(100% - 29px - 6px);
+ height: 100%;
+
+ & > div {
+ position: relative;
+ }
+
+ .time-top {
+ margin-top: 10px;
+ line-height: 1;
+ text-align: center;
+ cursor: pointer;
+ }
+
+ .active {
+ font-weight: 400;
+ color: #ffffff;
+ }
+
+ .time-point {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ top: 28px;
+ left: 50%;
+ width: 18px;
+ height: 18px;
+ z-index: 1;
+ transform: translate(-50%, 0);
+
+ img {
+ width: 11.2px;
+ height: 11.2px;
+ }
+
+ img.active {
+ width: 16.89px;
+ height: 16.89px;
+ }
+ }
+
+ .time-bottom {
+ margin-top: 20px;
+ }
+
+ .time-line {
+ position: absolute;
+ top: 35px;
+ width: 100%;
+ width: 595px;
+ border-radius: 0px 0px 0px 0px;
+ border: 1px solid rgba(237, 237, 237, 0.6);
+ z-index: 0;
+ }
}
}
}
diff --git a/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue b/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue
index 85d348f..67c4236 100644
--- a/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue
+++ b/src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue
@@ -43,6 +43,7 @@
</el-form-item>
<el-form-item>
<el-date-picker
+ popper-class="custom-date-picker"
class="ztzf-date-picker"
v-model="dateRange"
type="daterange"
@@ -271,8 +272,6 @@
}
}
// 查看
- // 当前任务详情 1：待执行 2：执行中
- // 历史任务详情 3：已执行 5：执行失败
const isShowCurrentTaskDetails = ref(false)
const currentTaskDetailsId = ref(null)
const deviceJobDetailsShow = ref(false)
@@ -294,33 +293,14 @@
})
</script>
<style lang="scss">
+/* 修改日期单元格背景色 */
+.custom-date-picker .el-picker-panel__body {
+ background: #012350 !important;
+ color: #fff !important;
+}
</style>
<style scoped lang="scss">
-/* 修改整个日期面板的背景色 */
-.custom-date-picker {
- background: #1e2b3c !important;
- border: 1px solid #479DFF !important;
-}
-
-/* 修改头部背景色 */
-.custom-date-picker .el-picker-panel__header {
- background: #16202d !important;
-}
-
-/* 修改日期单元格背景色 */
-.custom-date-picker .el-picker-panel__body {
- background: #1e2b3c !important;
-}
-
-/* 修改日期单元格悬停/选中状态 */
-.custom-date-picker .el-date-table td:hover,
-.custom-date-picker .el-date-table td.current:not(.disabled) {
- background: #479DFF !important;
- color: white !important;
-}
-
-
.search-row {
display: flex;
justify-content: space-between;
diff --git a/src/views/SignMachineNest/SignMachineNest.vue b/src/views/SignMachineNest/SignMachineNest.vue
index 33c48e8..9924713 100644
--- a/src/views/SignMachineNest/SignMachineNest.vue
+++ b/src/views/SignMachineNest/SignMachineNest.vue
@@ -39,7 +39,7 @@
break
}
case EBizCode.DeviceOsd: {
- // console.log(payload, 'DeviceOsd')
+ console.log(payload, '888888888')
store.commit('setDeviceInfo', payload)
store.commit('setWsMessage', payload)
break
diff --git a/src/views/TaskManage/SearchBox.vue b/src/views/TaskManage/SearchBox.vue
index 99a8b01..6205201 100644
--- a/src/views/TaskManage/SearchBox.vue
+++ b/src/views/TaskManage/SearchBox.vue
@@ -17,6 +17,7 @@
</el-form-item>
<el-form-item>
<el-date-picker
+ popper-class="custom-date-picker"
class="ztzf-date-picker"
v-model="dateRange"
type="daterange"
@@ -208,7 +209,13 @@
handleSearch();
});
</script>
-
+<style lang="scss">
+/* 修改日期单元格背景色 */
+.custom-date-picker .el-picker-panel__body {
+ background: #012350 !important;
+ color: #fff !important;
+}
+</style>
<style lang="scss" scoped>
.search-box-test {
transition: all 0.3s;
diff --git a/src/views/TaskManage/TaskTop/TaskIndustry.vue b/src/views/TaskManage/TaskTop/TaskIndustry.vue
index 77ef9d3..e27b5df 100644
--- a/src/views/TaskManage/TaskTop/TaskIndustry.vue
+++ b/src/views/TaskManage/TaskTop/TaskIndustry.vue
@@ -1,7 +1,7 @@
<!-- 任务算法统计 -->
<template>
<div class="task-industry">
- <div class="title">任务算法类型</div>
+ <div class="title">机巢事件前五数量占比</div>
<div class="chart" ref="chartRef"></div>
</div>
</template>
--
Gitblit v1.9.3