提交

src/api/build.js

+//建筑管理
+import qs from 'qs'
+import request from '@/utils/request'
+// 人员添加接口
+export function staffAddApi(data) {
+  return request({
+    url: '/user/add',
+    method: 'post',
+    data,
+  })
+}
+// 人员修改
+export function staffEditApi(data) {
+  return request({
+    url: '/user/update',
+    method: 'post',
+    data,
+  })
+}
+// 详情
+export function staffDetailApi(data) {
+  return request({
+    url: `/user/getInfo`,
+    method: 'get',
+    params: data
+  })
+}
+//分页
+export function staffListApi(data) {
+  return request({
+    url: '/user/page',
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function staffDelApi(data) {
+  return request({
+    url: `/user/remove`,
+    method: 'get',
+    params: data
+  })
+}
\ No newline at end of file

src/api/login.js

+import qs from 'qs'
+import request from '@/utils/request'
+// 登录接口
+export function loginApi(data) {
+  return request({
+    url: '/pc/login',
+    method: 'post',
+    data,
+  })
+}
+// 注册接口
+export function registerApi(data) {
+  return request({
+    url: '/pc/register',
+    method: 'post',
+    data,
+  })
+}
+// // 修改
+// export function upcommonAntennaGroup(data) {
+//   return request({
+//     url: '/simu/commonAntenna',
+//     method: 'put',
+//     data,
+//   })
+// }
+// // 详情
+// export function getantenna(data) {
+//   return request({
+//     url: `/simu/commonAntenna/${data.id}`,
+//     method: 'get',
+//   })
+// }
+// // 列表
+// export function getlist(data) {
+//   return request({
+//     url: `/simu/commonAntenna/list?${qs.stringify(data)}`,
+//     method: 'get',
+//   })
+// }
\ No newline at end of file

src/api/staff.js

+//人员管理
+import qs from 'qs'
+import request from '@/utils/request'
+// 人员添加接口
+export function staffAddApi(data) {
+  return request({
+    url: '/user/add',
+    method: 'post',
+    data,
+  })
+}
+// 人员修改
+export function staffEditApi(data) {
+  return request({
+    url: '/user/update',
+    method: 'post',
+    data,
+  })
+}
+// 详情
+export function staffDetailApi(data) {
+  return request({
+    url: `/user/getInfo`,
+    method: 'get',
+    params: data
+  })
+}
+//分页
+export function staffListApi(data) {
+  return request({
+    url: '/user/page',
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function staffDelApi(data) {
+  return request({
+    url: `/user/remove`,
+    method: 'get',
+    params: data
+  })
+}
\ No newline at end of file

src/permission.js

@@ -26,13 +26,12 @@ router.beforeEach((to, from, next) => {
       next()
     }
   } else {
-    next()
-    return
     // 没有token--是否在白名单
     if (whiteList.indexOf(to.path) !== -1) {
       // 在免登录白名单，直接进入
       next()
     } else {
+      localStorage.clear()//清空所有本地储存
       // 重定向到首页
       next(`/login`) // 否则全部重定向到登录页
     }

src/static/css/index.css

@@ -18,4 +18,5 @@
   /* height:100%; */
   border: 1px solid #13436e;
   border-top: none;
+  padding: 20px;
 }
\ No newline at end of file

src/utils/request.js

 import axios from 'axios'
 import { ElNotification, ElMessageBox, ElMessage, ElLoading } from 'element-plus'
-import { getToken } from '@/utils/auth.js'
+import { getToken, removeToken } from '@/utils/auth.js'
 import { tansParams } from '@/utils/function.js'
 import local from '@/utils/local.js'
 import { saveAs } from 'file-saver'
@@ -27,7 +27,7 @@ service.interceptors.request.use(config => {
   // 是否需要防止数据重复提交
   const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
   if (getToken() && !isToken) {
-    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+    config.headers['token'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
   }
   // get请求映射params参数
   if (config.method === 'get' && config.params) {
@@ -85,6 +85,7 @@ service.interceptors.response.use(res => {
   if (code === 401) {
     if (!isRelogin.show) {
       isRelogin.show = true;
+      removeToken()//删除token
       ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
         isRelogin.show = false;
         // useUserStore().logOut().then(() => {

src/views/buildManage/index.vue

@@ -7,16 +7,141 @@
         <div class="title1">国际花园小于鸟瞰图</div>
         <div class="title2">更换</div>
       </div>
+      <div class="titleimg">
+        <img class="titleimg1" @click="bigImgFn" src="../../static/image/loginback.png" alt="">
       </div>
+      <div class="buildfilter">
+        <div class="buildf1">
+          <div class="buildf1t1">建筑名称:</div>
+          <el-select class="buildf1t2 select__" placeholder="请选择建筑名称" v-model="build.name" @change="buildchangeFn">
+            <el-option v-for="item in buildList" :key="item.value" :label="item.name" :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="buildf2">
+          <div class="buildbutton bucolor1">查询</div>
+          <div class="buildbutton bucolor2">新增建筑</div>
+        </div>
+      </div>
+      <div style="margin: 20px 0 10px 0;">详细建筑列表</div>
+      <el-table stripe :data="buildData" width="1000" v-loading="loading1" class="table___"
+        element-loading-background="rgba(0, 0, 0, 0.3)" :max-height="400" style="overflow: auto">
+        <!-- <el-table-column property="aaa0" label="序号" width="60" align="center">
+          <template #default="scope">
+            <div style="color: #fff">{{ scope.$index + 1 }}</div>
+          </template>
+</el-table-column> -->
+        <el-table-column label="建筑名称" align="center">
+          <template #default="scope">
+            <div style="color: #fff">{{ scope.row.aaa0 }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="建筑层数" align="center">
+          <template #default="scope">
+            {{ scope.row.aaa1 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="内部结构" align="center">
+          <template #default="scope">
+            <div>查看</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="建筑描述" align="center">
+          <template #default="scope">
+            {{ scope.row.aaa3 }}
+          </template>
+        </el-table-column>
+        <el-table-column property="btn" label="操作" width="150" align="center">
+          <template #default="scope">
+            <div style="display: flex; justify-content: space-around">
+              <div>查看详情</div>
+              <div>修改</div>
+              <div>删除</div>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="page">
+        <el-pagination class="page__" v-model:current-page="pagination.PageNum" v-model:page-size="pagination.PageSize"
+          layout="prev, pager, next " :total="pagination.total" @current-change="handleCurrentChange" />
+      </div>
+
+    </div>
+
+    <el-dialog class="dialogbig" v-model="imgShow" style="background-color: rgba(0, 0, 0, 0)">
+      <div style="text-align: center; margin-top: 10px;">
+        <img src="../../static/image/loginback.png" alt="" style="width: 100%;height: 100%;"></img>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script setup>
 import { ref, onMounted, reactive } from 'vue';
 import { ElMessage, ElLoading } from 'element-plus';
 import { useRoute, useRouter } from 'vue-router';
+const imgShow = ref(false)//放大图片
+const imgUrl = ref('')//图片地址
+const bigImgFn = () => {
+  imgUrl.value = '../../static/image/loginback.png'
+  imgShow.value = true
+}
+const pagination = ref({
+  PageNum: 1,
+  PageSize: 10,
+  total: 100
+})
+//切换分页
+const handleCurrentChange = () => {
+
+}
+const build = ref({
+  name: '',
+})
+const buildList = ref([
+  { name: '建筑1', value: '1' }, { name: '建筑2', value: '2' }
+])
+const buildData = ref([
+  {
+    aaa0: '建筑1',
+    aaa1: '3',
+    aaa2: '3',
+    aaa3: '3',
+    aaa4: '3',
+
+  },
+  {
+    aaa0: '建筑1',
+    aaa1: '3',
+    aaa2: '3',
+    aaa3: '3',
+    aaa4: '3',
+
+  },
+  {
+    aaa0: '建筑1',
+    aaa1: '3',
+    aaa2: '3',
+    aaa3: '3',
+    aaa4: '3',
+
+  },
+  {
+    aaa0: '建筑1',
+    aaa1: '3',
+    aaa2: '3',
+    aaa3: '3',
+    aaa4: '3',
+
+  }
+])
+//切换选项时更新列表
+const buildchangeFn = () => {
+
+}
 </script>
 <style scoped>
 .title {
+  height: 30px;
   display: flex;
   justify-content: flex-start;
 }
@@ -31,9 +156,174 @@ import { useRoute, useRouter } from 'vue-router';
 .title2 {
   width: 45px;
   height: 25px;
-  background-color: linear-gradient(194deg, #06B0E1 0%, #06B0E1 100%);
+  background-color: #06B0E1;
+  /* background-color: linear-gradient(194deg, #06B0E1 0%, #06B0E1 100%); */
   color: #ffffff;
   text-align: center;
   line-height: 25px;
+  margin-left: 20px;
+  border-radius: 5px;
+}
+
+.titleimg {
+  width: 25vw;
+  height: 30vh;
+  margin-top: 10px;
+}
+
+.titleimg1 {
+  width: 100%;
+  height: 100%;
+}
+
+.buildfilter {
+  display: flex;
+  width: 100%;
+  /* height: 100%; */
+  margin-top: 10px;
+}
+
+.buildf1 {
+  width: 25vw;
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
+
+.buildf1t1 {
+  font-size: 14px;
+  line-height: 40px;
+  width: 90px;
+  text-align: center;
+}
+
+.buildf2 {
+  width: 250px;
+  height: 40px;
+  margin-left: 50px;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+
+}
+
+.buildbutton {
+  width: 112px;
+  height: 40px;
+  border-radius: 5px;
+  text-align: center;
+  line-height: 40px;
+}
+
+.bucolor1 {
+  background-color: #072547;
+  color: #06a8d9;
+  border: 1px solid #0194f4;
+}
+
+.bucolor2 {
+  background-color: #06b0e1;
+  color: #ffffff;
+}
+
+:deep().el-select .el-select__wrapper {
+  background-color: #06325c !important;
+  border: 1px solid #064d77 !important;
+  box-shadow: none;
+}
+
+/* :deep() .el-table--border .el-table__cell {
+  background-color: #062e51;
+} */
+
+/* 斑马行的背景色 */
+:deep() .el-table--striped .el-table__body tr.el-table__row--striped td {
+  background-color: #062e51 !important;
+}
+
+:deep() .el-table--striped .el-table__body tr.el-table__row td {
+  background-color: #072547;
+  border: none !important;
+}
+
+/* 表头背景色 */
+:deep() .el-table th {
+  background: linear-gradient(to bottom, #063563, #063563);
+  border: none !important;
+}
+
+/* 表头字体色 */
+:deep() .el-table thead {
+  font-weight: 400;
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 16px;
+  text-align: right;
+}
+
+/* 鼠标经过时 行的背景色 */
+:deep() .el-table__body tr:hover>td {
+  background-color: #072547 !important;
+}
+
+.table___ {
+  --el-table-border: 0.5px solid #69878f;
+  --el-table-border-color: #69878f;
+  border-radius: 5px;
+  color: #ffffff;
+  max-height: calc(100% - 195px - 30vh);
+  overflow: auto;
+}
+
+:deep() .el-table__inner-wrapper::before {
+  border: none;
+  height: 0 !important;
+}
+
+/* //分页 */
+.page {
+  height: 40px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 5px;
+}
+
+.page__ {
+  /* width: 100%; */
+  height: 40px;
+}
+
+:deep().el-pagination {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+
+:deep().el-pagination .btn-prev {
+  background-color: rgba(0, 0, 0, 0) !important;
+  border: 1px solid #06a0cf !important;
+  color: #ffffff;
+}
+
+:deep() .el-pagination .btn-next {
+  background-color: rgba(0, 0, 0, 0) !important;
+  border: 1px solid #06a0cf !important;
+  color: #ffffff;
+  margin-left: 5px;
+}
+
+:deep().el-pagination .el-pager .number {
+  background-color: rgba(0, 0, 0, 0) !important;
+  border: 1px solid #06a0cf !important;
+  color: #ffffff;
+  margin-left: 5px;
+}
+
+:deep().el-pagination .el-pager .more {
+  background-color: rgba(0, 0, 0, 0) !important;
+  border: 1px solid #06a0cf !important;
+  color: #ffffff;
+  margin-left: 5px;
+
 }
 </style>
\ No newline at end of file

src/views/login/index.vue

@@ -5,8 +5,8 @@
       <div class="title2">国际花园小区</div>
       <el-form class="fromclass" :model="form" :rules="rules" ref="formref"
         style="width: 16.2vw;margin: 0 auto;margin-top: 4vh;">
-        <el-form-item prop="name">
-          <el-input v-model="form.name" placeholder="请输入您的账号" clearable class="widthClass" />
+        <el-form-item prop="phone">
+          <el-input v-model="form.phone" placeholder="请输入您的账号" clearable class="widthClass" />
         </el-form-item>
         <el-form-item prop="password">
           <el-input v-model="form.password" placeholder="请输入您的密码" clearable class="widthClass" @keyup.enter="commit" />
@@ -20,25 +20,33 @@
 import { ref, onMounted, reactive } from 'vue';
 import { ElMessage, ElLoading } from 'element-plus';
 import { useRoute, useRouter } from 'vue-router';
+import { loginApi } from "../../api/login.js";
+import { setToken } from '@/utils/auth.js'
 const router = useRouter();
 const form = ref({
-  name: '',
+  phone: '',
   password: ''
 })
 const formref = ref(null)
-
 const rules = {
-  name: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
+  phone: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
   password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
 };
 // 登录
 const commit = () => {
   formref.value.validate(valid => {
     if (valid) {
+      loginApi(form.value).then(res => {
+        console.log(res, '登录');
+        if (res.code == 200) {
+          setToken(res.data.token)//储存token
           localStorage.setItem('menu', 1)//默认选中工作台
           router.replace({ path: '/home' })
         }
       })
+
+    }
+  })
 }
 </script>
 <style scoped>

vite.config.js

@@ -24,29 +24,13 @@ export default defineConfig({
     open: true,//自动在默认浏览器上打开
     proxy: {
       '/api': {
-        target: 'http://172.16.13.11:32089',  //test----------------------尾部214,2,31,12,11都可以,登不上时换个试试
+        target: 'http://117.89.29.251:18083/api',  //test----------------------尾部214,2,31,12,11都可以,登不上时换个试试
         // target: 'http://172.16.34.76:18088',
         ws: false,//代理websocked
         changeOrigin: true,  //是否跨域
         secure: true,  //是否https接口
         rewrite: (path) => path.replace(/^\/api/, ""),//重写请求路径,使用正则表达式将请求路径中的 /dev-api 前缀替换为空字符串。例如，/dev-api/users 将被重写为 /users，然后代理到目标服务器。
-      },
-      '/wss': {
-        target: 'ws://172.16.13.11:32089/ws/vision',//text
-        // target: 'ws://172.16.34.76:18088/ws/vision',
-        ws: true,//代理websocked
-        changeOrigin: true,  //是否跨域
-        secure: false,  //是否https接口
-        rewrite: (path) => path.replace(/^\/wss/, ""),
-      },
-      '/ety': {
-        target: 'ws://172.16.13.11:32089',//text
-        // target: 'ws://172.16.34.76:18088/ws/vision',
-        ws: true,//代理websocked
-        changeOrigin: true,  //是否跨域 
-        secure: false,  //是否https接口
-        rewrite: (path) => path.replace(/^\/ety/, ""),
-      },
+      }
     }
   },
 })