feat: 车机功能和界面

This commit is contained in:
zhanghao 2025-11-25 15:56:18 +08:00
parent 5aaf931db2
commit 5d86f4dcec
2 changed files with 49 additions and 21 deletions

View File

@ -12,3 +12,6 @@ VITE_BUILD_COMPRESS = gzip
#node-red 服务地址
VITE_NODE_RED_URL = 'http://10.148.108.59:13080'
VITE_API_URL = http://192.168.0.100:13080
VITE_WS_URL = ws://192.168.0.100:13080/ws

View File

@ -9,12 +9,16 @@
align="center"
prop="funcKey"
show-overflow-tooltip />
<el-table-column
label="功能图片"
align="center"
prop="textContent"
show-overflow-tooltip
/>
<el-table-column prop="iconUrl" label="图片" >
<template #default="{ row }">
<el-image
v-if="row.iconUrl"
style="height: 32px"
:src="getImgUrl(row.iconUrl)"
@click="showViewer(row.iconUrl)">
</el-image>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
@ -66,12 +70,16 @@
prop="funcKey"
show-overflow-tooltip
/>
<el-table-column
label="功能图片"
align="center"
prop="textContent"
show-overflow-tooltip
/>
<el-table-column prop="iconUrl" label="图片" >
<template #default="{ row }">
<el-image
v-if="row.iconUrl"
style="height: 32px"
:src="getImgUrl(row.iconUrl)"
@click="showViewer(row.iconUrl)">
</el-image>
</template>
</el-table-column>
</el-table>
<template #footer>
<div class="dialog-footer">
@ -80,10 +88,19 @@
</div>
</template>
</el-dialog>
<!-- 手动控制的预览组件append-to-body 使其挂载到 body 末尾 -->
<ElImageViewer
v-if="isViewerOpen"
:url-list="[getImgUrl(currentImage)]"
@close="closeViewer"
append-to-body
/>
</div>
</template>
<script setup>
import { onMounted, watch } from "vue";
import { onMounted } from "vue";
import { ElImageViewer } from 'element-plus'
import { getFunction } from '@/api/is/func/index'
const props = defineProps({
@ -189,6 +206,22 @@ const unSelectRow = (row) => {
}
}
const getImgUrl = (url) => {
return import.meta.env.VITE_API_URL + url
}
const isViewerOpen = ref(false);
const currentImage = ref('');
const showViewer = (url) => {
currentImage.value = url;
isViewerOpen.value = true;
};
const closeViewer = () => {
isViewerOpen.value = false;
}
onMounted(() => {
getList();
if (props.funcIds) {
@ -196,14 +229,6 @@ onMounted(() => {
}
});
// watch(() => open,
// (newVal) => {
// if (newVal) {
// selectList.value = props.selectIds
// }
// }
// )
</script>
<style lang="scss" scoped>
.btn-container {