fix🐛: 修改接口以及主题

src/App.vue

@@ -1,6 +1,16 @@
 <script setup>
   import { RouterView } from 'vue-router'
-  import { NConfigProvider, darkTheme, zhCN, dateZhCN, enUS, dateEnUS } from 'naive-ui'
+  import {
+    NGlobalStyle,
+    NConfigProvider,
+    NModalProvider,
+    NMessageProvider,
+    darkTheme,
+    zhCN,
+    dateZhCN,
+    enUS,
+    dateEnUS
+  } from 'naive-ui'
   import { useOutsideSystemStore } from '@/stores/modules/system.js'
 
   const useSystem = useOutsideSystemStore()
@@ -33,6 +43,48 @@
   const themeOverrides = {
     Spin: {
       color: '#2BABF2'
+    },
+    Card: {
+      colorModal: '#2262acb3',
+      borderRadius: '0px'
+    },
+    Input: {
+      color: 'transparent',
+      borderRadius: '0px',
+      borderHover: '1px solid #1976D2',
+      borderFocus: '1px solid #1976D2',
+      border: '1px solid #1976D2'
+    },
+    Button: {
+      textColor: '#fff',
+      textColorFocus: '#fff',
+      textColorInfo: '#fff',
+      textColorHover: '#fff',
+      textColorPressed: '#fff',
+      color: '#007BFF',
+      rippleColor: '#007BFF',
+      colorFocus: '#007BFF',
+      colorHover: '#007BFF',
+      colorInfo: '#007BFF',
+      colorHoverInfo: '#007BFF',
+      colorFocusInfo: '#007BFF',
+      colorPressed: '#007BFF',
+      colorPressedInfo: '#007BFF',
+      colorDisabled: '#007BFF',
+      colorDisabledInfo: '#007BFF',
+      colorLoading: '#007BFF',
+      textColorFocus: '#fff',
+      border: '1px solid #007BFF',
+      borderHover: '1px solid #007BFF',
+      borderFocus: '1px solid #007BFF',
+      borderRadiusTiny: '0px',
+      borderRadiusSmall: '0px',
+      borderRadiusMedium: '0px',
+      borderRadiusLarge: '0px'
+    },
+    Message: {
+      padding: '5px 10px',
+      borderRadius: '0'
     }
     // ...
   }
@@ -40,11 +92,16 @@
 
 <template>
   <n-config-provider class="w-full h-full" :theme="darkTheme" :theme-overrides="themeOverrides">
-    <router-view v-slot="{ Component }">
-      <transition name="fade">
-        <component :is="Component" />
-      </transition>
-    </router-view>
+    <n-global-style />
+    <n-modal-provider>
+      <n-message-provider>
+        <router-view v-slot="{ Component }">
+          <transition name="fade">
+            <component :is="Component" />
+          </transition>
+        </router-view>
+      </n-message-provider>
+    </n-modal-provider>
   </n-config-provider>
 </template>
 

src/api/modules/mr.js

@@ -4,7 +4,7 @@ export default {
   // 获取相机
   API_MR_CAMERA_GET(data = {}) {
     return request({
-      url: `/api/mr/api/Camera`,
+      url: `/api/Camera`,
       method: 'get',
       data
     })
@@ -12,7 +12,7 @@ export default {
   // 获取视频播放地址列表
   API_MR_VIDEO_LIST_GET(data = {}) {
     return request({
-      url: `/api/mr/api/list`,
+      url: `/api/list`,
       method: 'get',
       data
     })
@@ -20,7 +20,7 @@ export default {
   // 添加第三方摄像头
   API_MR_TP_CAMERAS_POST(params = {}) {
     return request({
-      url: '/api/mr/api/ThirdPartyCameras',
+      url: '/api/ThirdPartyCameras',
       method: 'post',
       params
     })
@@ -28,7 +28,7 @@ export default {
   // 删除第三方摄像头
   API_MR_TP_CAMERAS_DEL(params = {}) {
     return request({
-      url: '/api/mr/api/ThirdPartyCameras',
+      url: '/api/ThirdPartyCameras',
       method: 'delete',
       params
     })
@@ -36,7 +36,7 @@ export default {
   // 修改第三方摄像头
   API_MR_TP_CAMERAS_PUT(params = {}) {
     return request({
-      url: '/api/mr/api/ThirdPartyCameras',
+      url: '/api/ThirdPartyCameras',
       method: 'put',
       params
     })
@@ -44,9 +44,139 @@ export default {
   // 查询第三方摄像头
   API_MR_TP_CAMERAS_GET(params = {}) {
     return request({
-      url: '/api/mr/api/ThirdPartyCameras',
+      url: '/api/ThirdPartyCameras',
       method: 'get',
       params
     })
+  },
+
+  // 标签==========
+  // 查询标签
+  API_TAGLIST_GET(params = {}) {
+    return request({
+      url: '/api/tag',
+      method: 'get',
+      params
+    })
+  },
+
+  // 删除标签
+  API_DELTAG_GET(params = {}) {
+    return request({
+      url: '/api/tag',
+      method: 'delete',
+      params
+    })
+  },
+  // 添加标签
+  API_ADDTAG_GET(data = {}) {
+    return request({
+      url: '/api/tag',
+      method: 'post',
+      data
+    })
+  },
+  // 修改标签
+  API_UPDTAG_GET(data = {}) {
+    return request({
+      url: `/api/tag?TagUUID=${data.Id}`,
+      method: 'put',
+      data
+    })
+  },
+  // 获取标签组
+  API_GETGROUP_GET(params = {}) {
+    return request({
+      url: '/api/group',
+      method: 'get',
+      params
+    })
+  },
+  // 添加标签组
+  API_ADDGROUP_POST(data = {}) {
+    return request({
+      url: '/api/group',
+      method: 'post',
+      data
+    })
+  },
+  // 删除标签组
+  API_ADDGROUP_DEL(params = {}) {
+    return request({
+      url: '/api/group',
+      method: 'delete',
+      params
+    })
+  },
+  // 添加修改标签组格式
+  API_ADDGROUP_FORMAT_PUT(query = {}, data = {}) {
+    return request({
+      url: `/api/group_format?GroupId=${query.GroupId}`,
+      method: 'put',
+      data
+    })
+  },
+  // 获取标签组格式
+  API_GETGROUP_FORMAT_GET(params = {}) {
+    return request({
+      url: '/api/group_format',
+      method: 'get',
+      params
+    })
+  },
+  // 获取标签数据
+  API_TAG_DATA_GET(params = {}) {
+    return request({
+      url: '/api/tag_data',
+      method: 'get',
+      params
+    })
+  },
+  // 修改/添加标签内容数据
+  API_TAG_DATA_PUT(params = {}, data = {}) {
+    return request({
+      url: `/api/tag_data?TagUUID=${params.TagUUID}`,
+      method: 'put',
+      data
+    })
+  },
+
+  // 上传===========
+  // 上传文件
+  API_UPLOAD_POST(data = {}) {
+    return request({
+      url: '/data/up',
+      method: 'post',
+      data
+    })
+  },
+  // 创建上传
+  API_CREATE_UPLOAD_POST(params = {}) {
+    return request({
+      url: '/data/newUpload',
+      method: 'get',
+      params
+    })
+  },
+  // 分片上传
+  API_UPLOAD_PART_PUT(params = {}, data = {}, config = {}) {
+    return request({
+      ...config,
+      url: '/data/upload_part',
+      method: 'put',
+      headers: {
+        'Content-type': 'application/octet-stream'
+      },
+      params,
+      data
+    })
+  },
+  // 上传合并
+  API_COMPLETE_PART_POST(params = {}) {
+    return request({
+      url: '/data/complete_part',
+      method: 'post',
+      params
+    })
   }
 }

src/api/request.js

@@ -1,11 +1,16 @@
 import { service } from './service'
+import storage from '@/utils/storage'
 function createRequest(service) {
   function request(config) {
+    const parentToken = storage.cookie.get(window.top.document, 'X-Token')
     const configDefault = {
       baseURL: import.meta.env.VITE_APP_API_BASEURL,
       timeout: 15000,
       responseType: 'json',
-      headers: {}
+      headers: {
+        DeviceID: storage.local.get('d_id'),
+        'X-Token': parentToken
+      }
     }
     const requestConfig = Object.assign(configDefault, config)
     return service(requestConfig)

src/assets/scss/reset.scss

@@ -18,3 +18,7 @@
     padding-top: 0 !important;
   }
 }
+
+.n-card.n-modal{
+  width: 40%;
+}

src/stores/modules/system.js

@@ -14,13 +14,14 @@ export const useSystemStore = defineStore('systemStore', {
     videoArrange: {}, // 全景尺寸信息
     cilpInfo: {}, // 裁剪信息
     partObj: {}, //细节X Y
-    deviceInfo: JSON.parse(storage.local.get('d_info')) || {}, // 设备信息
+    deviceInfo: {}, // 设备信息
     videoLoading: false, // 全景加载状态
     netType: parseInt(storage.local.get('netType')) || 1, // 视频模式
     winActive: 0, //窗口选中
     menuCom: {}, //菜单组件对应存储
     partObj: {}, //细节X Y
-    videoList: {} // 视频地址列表
+    videoList: {}, // 视频地址列表
+    ratio: 0 //全景比例
   }),
   getters: {
     ipF() {
@@ -70,6 +71,14 @@ export const useSystemStore = defineStore('systemStore', {
       const curDevice = resFormat[0]
       Object.assign(this.deviceInfo, curDevice)
       storage.local.set('d_info', JSON.stringify(toRaw(curDevice)))
+    },
+    setRatio() {
+      const pD = document.querySelector('.pub-video')
+      // const scale = document.body.style.transform.split('(')[1].split(')')[0]
+      // const [x, y] = [pD.offset * parseFloat(scale), event.offsetY * parseFloat(scale)]
+      const { width, height } = pD.getBoundingClientRect()
+
+      this.ratio = { wR: width / pD.videoWidth, hR: height / pD.videoHeight }
     }
   }
 })

src/stores/modules/tag.js

@@ -0,0 +1,75 @@
+import { piniaStore } from '@/stores'
+import { uuid } from '@/utils'
+import { useOutsideSystemStore } from './system'
+
+export const useTagStore = defineStore('tag', {
+  state: () => ({
+    tagList: [],
+    cloneTagList: []
+  }),
+  actions: {
+    async getGroupTag() {
+      const { API_GETGROUP_GET, API_TAGLIST_GET } = useRequest()
+      const listGroup = await API_GETGROUP_GET({ type: 'all' })
+      const list = await API_TAGLIST_GET({ type: 'all' })
+      const temp = () => {
+        return (
+          list?.map((item, i) => {
+            return {
+              ...item,
+              uuid: uuid(),
+              children: item.children.map((child, ii) => {
+                return {
+                  ...child,
+                  uuid: uuid(),
+                  isShow: this.cloneTagList.length
+                    ? this.cloneTagList[i].children[ii]
+                      ? this.cloneTagList[i].children[ii].isShow
+                      : true
+                    : true
+                }
+              })
+            }
+          }) || []
+        )
+      }
+      this.tagList = temp()
+      listGroup?.forEach((item, i) => {
+        let group = this.tagList.filter((child, ii) => item.GroupId === child.id)
+        if (!group.length) {
+          this.tagList.push({
+            groupName: item.GroupName,
+            id: item.GroupId,
+            uuid: uuid(),
+            children: [],
+            isLeaf: true
+          })
+        }
+      })
+      this.cloneTagList = JSON.parse(JSON.stringify(this.tagList))
+    },
+    getTrueTag() {
+      const oldList = toRaw(this.tagList)
+      return oldList.reduce((pre, item) => {
+        item.children = item?.children.map((child) => ({ ...child, groupId: item.id }))
+        pre.push(...(item?.children || []))
+        return pre
+      }, [])
+    },
+    initTagList() {
+      const useSystemStore = useOutsideSystemStore()
+      const showTag = this.getTrueTag().filter((item) => item.isShow)
+      const tagList = showTag.map((item) => ({
+        ...item,
+        X: item.X * useSystemStore.ratio.wR,
+        Y: item.Y * useSystemStore.ratio.hR,
+        showPopover: false
+      }))
+      const tagListClone = showTag.map((item) => ({ ...item }))
+      return [tagList, tagListClone]
+    }
+  }
+})
+export function useOutsideTagStore() {
+  return useTagStore(piniaStore)
+}

src/utils/index.js

@@ -1,7 +1,10 @@
 import mitt from 'mitt'
 import { v4 as uuidv4 } from 'uuid'
+import { createDiscreteApi } from 'naive-ui'
 
-/**
+const { message, dialog } = createDiscreteApi(['message', 'dialog'], {
+  messageProviderProps: { duration: 2000 }
+}) /**
  * 获取资源路径
  * @param {相对路径} relativePath
  *    如果要获取assets的文件文件夹下的images中的图片
@@ -19,9 +22,9 @@ const getStaticResource = (relativePath) => {
  * @param {配置} config
  */
 const msg = (type, text) => {
-  // toast.add({ severity: type, summary: text })
-  console.log(text)
+  message[type](text)
 }
+
 /**
  * 模块话方式处理 默认处理 modules文件夹下的所有js文件 内容以export default导出的文件
  * @param { 模块内容集合 } moduleContext

src/utils/storage.js

@@ -40,6 +40,62 @@ const storage = {
     clear: () => {
       sessionStorage.clear()
     }
+  },
+  cookie: {
+    set(name, value, days = 7, path = '/', domain = '', secure = false) {
+      let expires = ''
+      if (days) {
+        const date = new Date()
+        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000)
+        expires = '; expires=' + date.toUTCString()
+      }
+
+      let cookieString = `${encodeURIComponent(name)}=${encodeURIComponent(value)}${expires}; path=${path}`
+
+      if (domain) {
+        cookieString += `; domain=${domain}`
+      }
+
+      if (secure) {
+        cookieString += '; secure'
+      }
+
+      document.cookie = cookieString
+    },
+    get(doc = document, name) {
+      const nameEQ = encodeURIComponent(name) + '='
+      const cookies = doc.cookie.split(';')
+
+      for (let i = 0; i < cookies.length; i++) {
+        let cookie = cookies[i]
+        while (cookie.charAt(0) === ' ') {
+          cookie = cookie.substring(1, cookie.length)
+        }
+        if (cookie.indexOf(nameEQ) === 0) {
+          return decodeURIComponent(cookie.substring(nameEQ.length, cookie.length))
+        }
+      }
+      return null
+    },
+    getAll(doc = document) {
+      const cookies = {}
+      const cookieArray = doc.cookie.split(';')
+
+      for (let i = 0; i < cookieArray.length; i++) {
+        let cookie = cookieArray[i]
+        while (cookie.charAt(0) === ' ') {
+          cookie = cookie.substring(1, cookie.length)
+        }
+        const separatorIndex = cookie.indexOf('=')
+        if (separatorIndex !== -1) {
+          const name = decodeURIComponent(cookie.substring(0, separatorIndex))
+          const value = decodeURIComponent(cookie.substring(separatorIndex + 1, cookie.length))
+          cookies[name] = value
+        }
+      }
+
+      return cookies
+    }
   }
 }