From 2c58e763fd1e7dc9863e862d22fe61dc6778ca54 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Mon, 14 Apr 2025 15:56:33 +0800
Subject: [PATCH] feat: 机巢详情调整
---
src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/MachineTableDetails.vue | 74 +++-----------
src/views/Home/RSide.vue | 178 ++++++++++++++++++-----------------
2 files changed, 108 insertions(+), 144 deletions(-)
diff --git a/src/views/Home/RSide.vue b/src/views/Home/RSide.vue
index 606c3c1..6fc583a 100644
--- a/src/views/Home/RSide.vue
+++ b/src/views/Home/RSide.vue
@@ -1,35 +1,33 @@
<template>
- <div class="ai-chat">
- <el-popover
- placement="bottom"
- :visible="visible"
- :width="200"
- trigger="click"
- >
- <template #reference>
- <div class="chat" id="chatID" v-drag:chatID @mousedown="handleMouseDown"
- @mouseup="handleMouseUp"/>
- </template>
- <div>
- 快和我对话吧
- <el-input/>
- </div>
- </el-popover>
- <img class="chat-bottom" src="../../assets/images/chat-bottom.png" alt="">
- </div>
- <div class="r-side">
- <img v-for="(item, index) in images"
- :key="index" :class="item.class"
- :src="activeIndex === index ? item.activeSrc : item.src" alt=""
- @click="activeChange(index)"
- @mouseenter="enterHover(index)"
- @mouseleave="logIndex=3"
- >
- </div>
- <div v-if="logIndex===0" class="r-side-positioning">返回当前位置</div>
- <div v-if="logIndex===1" class="r-side-measuring">量尺</div>
- <div v-if="logIndex===2" class="r-side-layer">切换地图模式</div>
- <MeasuringDistance v-if="activeIndex === 1"/>
+ <div class="ai-chat">
+ <el-popover placement="bottom" :visible="visible" :width="200" trigger="click">
+ <template #reference>
+ <div class="chat" id="chatID" v-drag:chatID @mousedown="handleMouseDown" @mouseup="handleMouseUp" />
+ </template>
+ <div>
+ 快和我对话吧
+ <el-input />
+ </div>
+ </el-popover>
+ <img class="chat-bottom" src="../../assets/images/chat-bottom.png" alt="" />
+ </div>
+ <div class="r-side">
+ <img
+ v-for="(item, index) in images"
+ :key="index"
+ :class="item.class"
+ :src="activeIndex === index ? item.activeSrc : item.src"
+ alt=""
+ @click="activeChange(index)"
+ @mouseenter="enterHover(index)"
+ @mouseleave="logIndex = 3"
+ />
+ </div>
+ <div v-if="logIndex === 0" class="r-side-positioning">返回当前位置</div>
+ <div v-if="logIndex === 1" class="r-side-measuring">量尺</div>
+ <div v-if="logIndex === 2" class="r-side-layer">切换地图模式</div>
+ <MeasuringDistance v-if="activeIndex === 1" />
+
</template>
<script setup>
@@ -43,45 +41,49 @@
import tc1 from '@/assets/images/rSide/tc1.png'
import cesiumOperation from '@/utils/cesium-tsa'
-let logIndex = ref(3);
-const enterHover = (value) => {
- logIndex.value = value;
+let logIndex = ref(3)
+const enterHover = value => {
+ logIndex.value = value
}
const { flyTo } = cesiumOperation()
-const store = useStore();
-const currentAreaPosition = computed(() => store.state.home.currentAreaPosition);
+const store = useStore()
+const currentAreaPosition = computed(() => store.state.home.currentAreaPosition)
-let activeIndex = ref(null);
-const activeChange = (value) => {
- if(value === 0) {
+let activeIndex = ref(null)
+const activeChange = value => {
+ if (value === 0) {
flyTo(currentAreaPosition.value, 0, currentAreaPosition.value.height)
}
- if (value === 1){
- activeIndex.value = activeIndex.value === 1 ? null : value;
+ if (value === 1) {
+ activeIndex.value = activeIndex.value === 1 ? null : value
+ }
+ if (value === 2) {
+ activeIndex.value = activeIndex.value === 2 ? null : value
+ console.log('22222')
}
}
-const visible = ref(false);
-let pressStart = 0;
+const visible = ref(false)
+let pressStart = 0
const handleMouseDown = () => {
- pressStart = Date.now(); // 记录按下时间
-};
+ pressStart = Date.now() // 记录按下时间
+}
const handleMouseUp = () => {
- const pressDuration = Date.now() - pressStart; // 计算按下时长
- if (pressDuration < 150) {
- // 如果按下时间小于200ms，认为是点击
- visible.value = !visible.value;
- }
-};
+ const pressDuration = Date.now() - pressStart // 计算按下时长
+ if (pressDuration < 150) {
+ // 如果按下时间小于200ms，认为是点击
+ visible.value = !visible.value
+ }
+}
// 添加: 定义图片数组
const images = [
- { class: 'positioning', src: dw,activeSrc:dw1 },
- { class: 'measuring-scale', src: lc,activeSrc:lc1 },
- { class: 'layer', src: tc,activeSrc:tc1 }
-];
+ { class: 'positioning', src: dw, activeSrc: dw1 },
+ { class: 'measuring-scale', src: lc, activeSrc: lc1 },
+ { class: 'layer', src: tc, activeSrc: tc1 },
+]
</script>
<style scoped lang="scss">
@@ -106,45 +108,47 @@
}
}
.r-side {
- position: absolute;
- bottom: 122px;
- right: 463px;
- cursor: pointer;
- img {
- display: block;
- width: 48px;
- height: 48px;
- }
- .positioning {
- position: relative;
- bottom: 24px;
- }
- .measuring-scale {
- position: relative;
- bottom: 12px;
- }
+ position: absolute;
+ bottom: 122px;
+ right: 463px;
+ cursor: pointer;
+ img {
+ display: block;
+ width: 48px;
+ height: 48px;
+ }
+ .positioning {
+ position: relative;
+ bottom: 24px;
+ }
+ .measuring-scale {
+ position: relative;
+ bottom: 12px;
+ }
}
-.r-side-positioning, .r-side-measuring, .r-side-layer {
- position: absolute;
- right: 514px;
- width: 130px;
- height: 48px;
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 18px;
- color: #FFFFFF;
- line-height: 48px;
- text-align: center;
- background: url('@/assets/images/cursor.png');
+.r-side-positioning,
+.r-side-measuring,
+.r-side-layer {
+ position: absolute;
+ right: 514px;
+ width: 130px;
+ height: 48px;
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 400;
+ font-size: 18px;
+ color: #ffffff;
+ line-height: 48px;
+ text-align: center;
+ background: url('@/assets/images/cursor.png');
}
.r-side-positioning {
- bottom: 242px;
+ bottom: 242px;
}
.r-side-measuring {
- bottom: 182px;
+ bottom: 182px;
}
.r-side-layer {
- bottom: 122px;
+ bottom: 122px;
}
</style>
diff --git a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/MachineTableDetails.vue b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/MachineTableDetails.vue
index 2d2e393..f4f104f 100644
--- a/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/MachineTableDetails.vue
+++ b/src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/MachineTableDetails.vue
@@ -1,12 +1,11 @@
<!-- 机巢列表详情 -->
<template>
<el-dialog
- class="machineTableDetails"
+ class="machineTableDetails ztzf-dialog"
v-model="isShowDetails"
:width="pxToRem(1500)"
:close-on-click-modal="false"
:destroy-on-close="true"
-
>
<template #header="{ titleId, titleClass }">
<div class="my-header">
@@ -18,25 +17,28 @@
<div class="machineTableDetailsTitle"><span>详情</span></div>
<div class="infoBox">
<div class="itemBox" v-for="(item, index) in infoList" :key="index">
- <div class="itemTitle">{{ item.name }} : </div>
+ <div class="itemTitle">{{ item.name }} :</div>
+ <div v-if="item.name == '任务成果'" class="missionOutcomes">
+ <span>{{item.value ? item.value :0}}</span>
+ 个
+ </div>
<div
+ v-if="item.name == '机巢状态'"
:class="{
active: item.value === 'WORKING',
freetime: item.value === 'LEISURE',
offine: item.value === 'OFFLINE',
}"
- v-if="item.name == '机巢状态'"
>
{{ item.value === 'OFFLINE' ? '离线中' : item.value === 'WORKING' ? '作业中' : '空闲中' }}
</div>
- <div class="itemValue" v-else> {{ item.value }}</div>
+ <div class="itemValue" v-else>{{ item.value }}</div>
</div>
</div>
</div>
<DeviceJob v-if="isShowDetails" />
<DeviceEvent v-if="isShowDetails" />
</el-dialog>
-
</template>
<script setup>
@@ -68,22 +70,9 @@
<style lang="scss">
.machineTableDetails {
-width: 1270px;
+ width: 1270px;
height: 856px;
- background: #0f1929;
- box-shadow: inset 0px -50px 50px 0px rgba(27, 148, 255, 0.13);
- border-radius: 20px 0px 0px 0px;
- border: 2px solid;
- padding: 0 !important;
- 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;
.el-pagination {
text-align: left;
padding: 20px 20px 0 20px;
@@ -93,46 +82,10 @@
vertical-align: middle;
margin-left: 12px;
}
-
- /* 头部 */
- .el-dialog__header {
- width: 1270px;
- height: 47px;
- margin-bottom: 14px;
- background: url('/src/assets/images/home/homeLeft/inspection-vector.png') no-repeat center;
- background-size: 100% 100%;
- font-weight: bold;
- font-size: 16px;
- line-height: 47px;
- }
-
- .el-dialog .el-dialog__header {
- /* margin: 0px !important; */
- padding: 0px !important;
- padding-left: 0px !important;
- }
- /* 头部 */
- .el-dialog__title {
- width: 112px;
- height: 19px;
- font-family: Segoe UI, Segoe UI;
- font-weight: bold;
- font-size: 16px;
- line-height: 16px;
- text-shadow: 0px 0px 5px rgba(154, 218, 255, 0.6);
- text-align: left;
- font-style: normal;
- text-transform: none;
- background: linear-gradient(90deg, #fbfdff 0%, #86d4ff 100%);
- margin-left: 16px;
- -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
- -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
- }
}
</style>
<style lang="scss" scoped>
-
.infoBox {
display: flex;
justify-content: space-between;
@@ -144,7 +97,7 @@
display: flex;
align-items: center;
.itemTitle {
- margin-right: 5px;
+ margin-right: 5px;
}
}
@@ -175,6 +128,13 @@
margin-bottom: 8px;
}
}
+.missionOutcomes {
+ span {
+ color: #ffa500;
+ font-size: 14px;
+ font-weight: bold;
+ }
+}
// 离线中
.offine {
width: 53px;
--
Gitblit v1.9.3