壮举：添加字典实用功能和图像的进度动画

-实现‘ useDict ’功能，从存储和API中获取和管理字典数据。
-增加了‘ getDictLabel ’功能，根据类型和值检索字典标签。
-包括新的PNG图像进度动画在资产目录。

components.d.ts

@@ -30,6 +30,7 @@ declare module 'vue' {
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     ItemWrap: typeof import('./src/components/ItemWrap/index.vue')['default']
     ItemWrap2: typeof import('./src/components/ItemWrap2/index.vue')['default']

index.html

@@ -6,6 +6,7 @@
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>路桥集团智慧物联网平台</title>
+  <script src="/auto-imports.d.ts"></script>
   <script src="/videoPlayer/plugin/hk_h5_sdk/h5player.min.js"></script>
   <script src="/videoPlayer/plugin/dh_wsplayer/public/icc/api.js"></script>
   <script src="/videoPlayer/plugin/dh_wsplayer/public/icc/PlayerManager.js"></script>

src/api/iot/dict/data.ts

+import request from "@/utils/request";
+
+// 查询字典数据列表
+export function listData(query: any) {
+  return request({
+    url: "/system/dict/data/list",
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询字典数据详细
+export function getData(dictCode: any) {
+  return request({
+    url: "/system/dict/data/" + dictCode,
+    method: "get",
+  });
+}
+
+// 根据字典类型查询字典数据信息
+export function getDicts(dictType: any) {
+  return request({
+    url: "/system/dict/data/type/" + dictType,
+    method: "get",
+  });
+}
+
+// 新增字典数据
+export function addData(data: any) {
+  return request({
+    url: "/system/dict/data",
+    method: "post",
+    data: data,
+  });
+}
+
+// 修改字典数据
+export function updateData(data: any) {
+  return request({
+    url: "/system/dict/data",
+    method: "put",
+    data: data,
+  });
+}
+
+// 删除字典数据
+export function delData(dictCode: any) {
+  return request({
+    url: "/system/dict/data/" + dictCode,
+    method: "delete",
+  });
+}

src/api/iot/dict/type.ts

+import request from "@/utils/request";
+
+// 查询字典类型列表
+export function listType(query: any) {
+  return request({
+    url: "/system/dict/type/list",
+    method: "get",
+    params: query,
+  });
+}
+
+// 查询字典类型详细
+export function getType(dictId: any) {
+  return request({
+    url: "/system/dict/type/" + dictId,
+    method: "get",
+  });
+}
+
+// 新增字典类型
+export function addType(data: any) {
+  return request({
+    url: "/system/dict/type",
+    method: "post",
+    data: data,
+  });
+}
+
+// 修改字典类型
+export function updateType(data: any) {
+  return request({
+    url: "/system/dict/type",
+    method: "put",
+    data: data,
+  });
+}
+
+// 删除字典类型
+export function delType(dictId: any) {
+  return request({
+    url: "/system/dict/type/" + dictId,
+    method: "delete",
+  });
+}
+
+// 刷新字典缓存
+export function refreshCache() {
+  return request({
+    url: "/system/dict/type/refreshCache",
+    method: "delete",
+  });
+}
+
+// 获取字典选择框列表
+export function optionselect() {
+  return request({
+    url: "/system/dict/type/optionselect",
+    method: "get",
+  });
+}

src/api/iot/home.ts

@@ -62,10 +62,38 @@ export function countBySysType(deptId: number) {
 }
 
 // 地图 获取设备
-export function deviceList(deptId: number) {
+export function deviceList(
+  deptId: number,
+  oneTypeId: String,
+  twoTypeId: String,
+  threeTypeId: String,
+  fourTypeId: String,
+  fiveTypeId: String,
+  sixTypeId: String
+) {
   return request({
-    url: "/iot-device/baseDevice/list?pageNum=1&pageSize=10000000000000",
+    url:
+      "/iot-device/baseDevice/list?pageNum=1&pageSize=10000000000000" +
+      +"&oneTypeId=" +
+      oneTypeId +
+      "&twoTypeId=" +
+      twoTypeId +
+      "&threeTypeId=" +
+      threeTypeId +
+      "&fourTypeId=" +
+      fourTypeId +
+      "&fiveTypeId=" +
+      fiveTypeId +
+      "&sixTypeId=" +
+      sixTypeId,
+    method: "get",
+  });
+}
+
+// 地图 获取设备类型
+export function deviceTypeList() {
+  return request({
+    url: "/iot-device/deviceType/list",
     method: "get",
   });
-  // pageNum=1&pageSize=10
 }

src/assets/styles/element-plus.scss

@@ -71,7 +71,6 @@ $blue-hover: #40a9ff; // 悬停蓝色
 
   .el-input__inner {
     color: #{$white-text};
-    
   }
 }
 

src/main.ts

@@ -12,7 +12,14 @@ import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 import store from "./store";
 import "./permission.ts"; // permission control
 import plugins from "./plugins"; // plugins
+import { useDict } from "@/utils/dict";
+import { handleTree } from "@/utils/ruoyi";
+
 const app = createApp(App);
+// 全局方法挂载
+app.config.globalProperties.useDict = useDict;
+app.config.globalProperties.handleTree = handleTree;
+
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component);
 }

src/store/modules/dict.ts

-import { defineStore } from 'pinia'
+import { defineStore } from "pinia";
 
-const useDictStore = defineStore(
-  'dict',
-  {
-    state: () => ({
-      dict: new Array()
-    }),
-    actions: {
-      // 获取字典
-      getDict(_key: string) {
-        if (_key == null && _key == "") {
-          return null;
-        }
-        try {
-          for (let i = 0; i < this.dict.length; i++) {
-            if (this.dict[i].key == _key) {
-              return this.dict[i].value;
-            }
+const useDictStore = defineStore("dict", {
+  state: () => ({
+    dict: new Array(),
+  }),
+  actions: {
+    // 获取字典
+    getDict(_key: string) {
+      if (_key == null && _key == "") {
+        return null;
+      }
+      try {
+        for (let i = 0; i < this.dict.length; i++) {
+          if (this.dict[i].key == _key) {
+            return this.dict[i].value;
           }
-        } catch (e) {
-          return null;
-        }
-      },
-      // 设置字典
-      setDict(_key: string, value: any) {
-        if (_key !== null && _key !== "") {
-          this.dict.push({
-            key: _key,
-            value: value
-          });
         }
-      },
-      // 删除字典
-      removeDict(_key: string) {
-        var bln = false;
-        try {
-          for (let i = 0; i < this.dict.length; i++) {
-            if (this.dict[i].key == _key) {
-              this.dict.splice(i, 1);
-              return true;
-            }
+      } catch (e) {
+        return null;
+      }
+    },
+    // 设置字典
+    setDict(_key: string, value: any) {
+      if (_key !== null && _key !== "") {
+        this.dict.push({
+          key: _key,
+          value: value,
+        });
+      }
+    },
+    // 删除字典
+    removeDict(_key: string) {
+      var bln = false;
+      try {
+        for (let i = 0; i < this.dict.length; i++) {
+          if (this.dict[i].key == _key) {
+            this.dict.splice(i, 1);
+            return true;
           }
-        } catch (e) {
-          bln = false;
         }
-        return bln;
-      },
-      // 清空字典
-      cleanDict() {
-        this.dict = new Array();
-      },
-      // 初始字典
-      initDict() {
+      } catch (e) {
+        bln = false;
       }
-    }
-  })
+      return bln;
+    },
+    // 清空字典
+    cleanDict() {
+      this.dict = new Array();
+    },
+    // 初始字典
+    initDict() {},
+  },
+});
 
-export default useDictStore
+export default useDictStore;

src/utils/dict.ts

+import { ref, toRefs } from "vue";
+import useDictStore from "@/store/modules/dict";
+import { getDicts } from "@/api/iot/dict/data";
+
+/**
+ * 获取字典数据
+ */
+export function useDict(...args: any[]) {
+  const res = ref<any>({});
+  return (() => {
+    args.forEach((dictType: any, index: number) => {
+      res.value[dictType] = [];
+      const dicts = useDictStore().getDict(dictType);
+      if (dicts) {
+        res.value[dictType] = dicts;
+      } else {
+        getDicts(dictType).then((resp) => {
+          res.value[dictType] = resp.data.map((p) => ({
+            label: p.dictLabel,
+            value: p.dictValue,
+            elTagType: p.listClass,
+            elTagClass: p.cssClass,
+          }));
+          useDictStore().setDict(dictType, res.value[dictType]);
+        });
+      }
+    });
+    return toRefs(res.value);
+  })();
+}
+
+/**
+ * 获取字典标签
+ */
+export function getDictLabel(dictType: any, value: any) {
+  const dicts = useDictStore().getDict(dictType);
+  if (dicts) {
+    const data = dicts.find((p) => p.value == value);
+    return data ? data.label : "";
+  }
+}

src/views/Home.vue

@@ -273,7 +273,7 @@ function getNowTime() {
 getNowTime();
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .full-screen-container {
   width: 100vw;
   height: calc(100vh - 86px);

src/views/components/DeployProject.vue

 <template>
   <!-- 已部署项目 -->
   <div>
-    <div class="grid grid-cols-4 gap-7">
+    <div class="grid grid-cols-4 gap-6">
       <div
         v-for="(item, index) in projectList"
         :key="index"

src/views/tunnel/components/DataInfo.vue

@@ -488,12 +488,13 @@ function getData() {
 
 ::v-deep(.el-dialog) {
   // background-color: #122953 !important;
-  background: url("@/assets/imgs/dialog-bgg.png") no-repeat center center;
+  background: url("@/assets/imgs/dialog-bg.png");
   background-size: 100% 100%;
 }
-::v-deep(.el-dialog__header) {
-  // border-bottom: 0.5px solid #63fbfc;
-}
+
+// ::v-deep(.el-dialog__header) {
+//   // border-bottom: 0.5px solid #63fbfc;
+// }
 .table-column {
   background-color: #000;
 }

src/views/tunnel/components/DeviceInfo.vue

@@ -675,7 +675,7 @@ function getData() {
 
 ::v-deep(.el-dialog) {
   // background-color: #122953 !important;
-  background: url("@/assets/imgs/dialog-bgg.png") no-repeat center center;
+  background: url("@/assets/imgs/dialog-bg.png") no-repeat center center;
   background-size: 100% 100%;
 }
 ::v-deep(.el-dialog__header) {

src/views/tunnel/components/TunnelsProgress/index.vue

@@ -17,7 +17,7 @@
       <!-- 正向开挖进度 -->
       <div
         v-if="dualType == 0 ? true : dxType == 20910 ? true : false"
-        class="progress-anim absolute left-0 top-0 bottom-0 bg-[url('@/assets/imgs/zx-progress1.png')] bg-cover"
+        class="progress-anim absolute left-0 top-0 bottom-0 bg-[url('@/assets/imgs/zx-progress.png')] bg-cover"
         :style="{ width: `${zxProgress.toFixed(2)}%` }"
       ></div>