feat: 车机功能和界面

.env.production

@@ -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

src/views/is/im/Table/FunctionSelection.vue

@@ -9,12 +9,16 @@
         align="center"
         prop="funcKey"
         show-overflow-tooltip />
-      <el-table-column
+      <el-table-column prop="iconUrl" label="图片" >
-        label="功能图片"
+        <template #default="{ row }">
-        align="center"
+          <el-image 
-        prop="textContent"
+            v-if="row.iconUrl"
-        show-overflow-tooltip
+            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
+        <el-table-column prop="iconUrl" label="图片" >
-          label="功能图片"
+          <template #default="{ row }">
-          align="center"
+            <el-image 
-          prop="textContent"
+              v-if="row.iconUrl"
-          show-overflow-tooltip
+              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 {