fix🐛: 添加设备管理

.env.development

@@ -2,7 +2,7 @@
 VITE_APP_TITLE = bgxtglpt
 
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
-VITE_APP_API_BASEURL = http://192.168.10.154:8082/api/mr
+VITE_APP_API_BASEURL = http://192.168.211.58:8082/api/mr
 # VITE_APP_API_BASEURL = https://192.168.211.10:443
 
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "wsy-admin",
+  "name": "aw-admin",
   "version": "0.1.0",
   "scripts": {
     "serve": "vite",

src/assets/styles/element/index.scss

@@ -36,6 +36,7 @@ $--colors: (
     'overlay': #08162e
   ),
   $fill-color: (
+    '': #162336,
     'light': #cccccc3a,
     'blank': 'transparent',
     'lighter': 'transparent'

src/router/asyncRoutes.js

@@ -15,6 +15,7 @@ import AdvancedLinkage from './modules/advanced.linkage'
 import Tour from './modules/tour'
 import Dashboard from './modules/dashboard'
 import Glance from './modules/glance'
+import Devices from './modules/devices'
 
 /**
  * @description
@@ -31,6 +32,6 @@ export default [
       icon: 'icon-diamonds'
     },
     // children: [UserList, TagManagement, AdvancedLinkage, Tour, Setting]
-    children: [TagManagement, AdvancedLinkage, Glance, Dashboard]
+    children: [TagManagement, AdvancedLinkage, Glance, Dashboard, Devices]
   }
 ]

src/router/modules/devices.js

@@ -0,0 +1,32 @@
+/*
+ * @Description:
+ * @Author: zcf
+ * @Date: 2022-02-08 17:24:53
+ * @LastEditTime: 2022-06-17 20:10:32
+ * @LastEditors: zcf
+ */
+// import { i18n } from '@/locales'
+// const {
+//   global: { t }
+// } = i18n
+const Layout = () => import('@/layout/index.vue')
+
+export default {
+  path: '/devices',
+  component: Layout,
+  name: 'Devices',
+  meta: {
+    title: '设备管理',
+    icon: 'ri-settings-line'
+  },
+  children: [
+    {
+      path: '',
+      name: 'Devices1',
+      component: () => import('@/views/devices/index.vue'),
+      meta: {
+        sidebar: false
+      }
+    }
+  ]
+}

src/views/devices/components/detailCamera.vue

@@ -0,0 +1,111 @@
+<template>
+  <el-form
+    class="detail-camera"
+    label-placement="left"
+    label-width="auto"
+    ref="formRef"
+    :model="camerasForm"
+    :rules="rules"
+    :style="{
+      overflow: 'auto'
+    }"
+  >
+    <el-form-item :label="$t('sbmc')" prop="Name" label-style="color:#fff">
+      <el-input v-model="camerasForm.name" :placeholder="$t('qsr')" />
+    </el-form-item>
+    <el-form-item :label="$t('sbdz')" prop="Address" label-style="color:#fff">
+      <el-input v-model="camerasForm.ip_address" :placeholder="$t('qsr')" />
+    </el-form-item>
+    <div class="btns" flex flex-justify-end>
+      <el-button mr-15px @click="emits('update:modelValue', false)">{{ $t('qx') }}</el-button>
+      <el-button type="primary" @click="ok" :loading="loading">{{ $t('qd') }}</el-button>
+    </div>
+  </el-form>
+</template>
+<script setup>
+  import { ElMessage } from 'element-plus'
+  const { t: $t } = useI18n({ useScope: 'global' })
+  const msg = (type, text) => {
+    ElMessage[type](text)
+  }
+  const { API_TP_CAMERAS_POST, API_TP_CAMERAS_PUT } = useRequest()
+  const props = defineProps({
+    sign: {
+      type: String
+    },
+    modelValue: {
+      type: Boolean
+    },
+    camerasInfo: {
+      type: Object
+    }
+  })
+  const emits = defineEmits(['update:modelValue', 'update'])
+
+  const formRef = ref(null)
+  const loading = ref(false)
+  const camerasForm = reactive({
+    name: '',
+    ip_address: ''
+  })
+  const rules = {
+    Name: [
+      {
+        required: true,
+        message: $t('qsr'),
+        trigger: 'blur'
+      }
+    ],
+    Address: [
+      {
+        required: true,
+        message: $t('qsr'),
+        trigger: 'blur'
+      }
+    ]
+  }
+
+  const ok = async () => {
+    let fn = (apiN, params, msgT) => {
+      loading.value = true
+      apiN(params)
+        .then(() => {
+          loading.value = false
+          emits('update:modelValue', false)
+          emits('update')
+          msg('success', msgT)
+        })
+        .catch(() => {
+          loading.value = false
+        })
+    }
+    await formRef.value.validate((valid, fields) => {
+      if (valid) {
+        switch (props.sign) {
+          case 'add':
+            fn(API_TP_CAMERAS_POST, camerasForm, $t('tjcg'))
+            break
+          case 'edit':
+            fn(API_TP_CAMERAS_PUT, camerasForm, $t('xgcg'))
+            break
+        }
+      } else {
+        console.error(fields)
+      }
+    })
+  }
+  const init = () => {
+    if (props.sign === 'add') {
+      Object.assign(camerasForm, {
+        name: '',
+        ip_address: ''
+      })
+    } else {
+      Object.assign(camerasForm, props.camerasInfo)
+    }
+  }
+  onMounted(() => {
+    init()
+  })
+</script>
+<style scoped lang="scss"></style>

src/views/glance/index.vue

@@ -43,6 +43,9 @@
         </el-descriptions>
       </el-tab-pane>
     </el-tabs>
+    <div class="absolute top-20% left-50%" v-if="!userInfo.User">
+      <el-empty :image-size="200" description="请选择左侧设备" />
+    </div>
     <el-dialog
       v-model="dialogVisible"
       width="500"