冰雪专题PC端 token获取

packages/mobile/src/views/IceEvent/IceEventAdd.vue

@@ -112,42 +112,6 @@
       </van-form>
       <h3>实施情况</h3>
       <van-form class="IceEventAddForm" label-align="left" colon>
-        <van-field
-          v-model="form.material.snowMeltingAgent"
-          type="number"
-          label="融雪剂"
-          center
-          placeholder="请填写"
-        >
-          <template #extra> 吨 </template>
-        </van-field>
-        <van-field
-          v-model="form.material.antiSlipSand"
-          type="number"
-          label="防滑沙"
-          center
-          placeholder="请填写"
-        >
-          <template #extra> 吨 </template>
-        </van-field>
-        <van-field
-          v-model="form.material.antiSlipChains"
-          type="number"
-          label="防滑链"
-          center
-          placeholder="请填写"
-        >
-          <template #extra> 副 </template>
-        </van-field>
-        <van-field
-          v-model="form.material.sandbags"
-          type="number"
-          label="麻袋"
-          center
-          placeholder="请填写"
-        >
-          <template #extra> 条 </template>
-        </van-field>
         <van-field
           v-model="form.material.inputManpower"
           type="number"
@@ -175,6 +139,19 @@
         >
           <template #extra> 台班 </template>
         </van-field>
+
+        <van-button
+          class="add-wzbtn"
+          type="primary"
+          icon="plus"
+          plain
+          @click="handleOpenAddMaterial"
+          >添加物资
+        </van-button>
+        <van-popup>
+          
+        </van-popup>
+
         <van-field label="当前通行情况" center>
           <template #input>
             <div class="disposal-buttons">
@@ -299,6 +276,7 @@ import { request } from "../../../../shared/utils/request";
 
 const router = useRouter();
 const route = useRoute();
+// 组件挂载时获取数据
 const yhzDetail = ref({}); // 养护站详情数据
 const INIT_FORM = reactive({
   event: {
@@ -323,10 +301,6 @@ const INIT_FORM = reactive({
     inputManpower: null, // 投入人力
     inputFunds: null, // 投入资金
     inputEquipment: null, // 投入设备
-    snowMeltingAgent: null, // 融雪剂
-    sandbags: null, // 麻袋
-    antiSlipSand: null, // 防滑沙
-    antiSlipChains: null, // 防滑链
     createTime: "", // 创建时间
     updateTime: "", // 更新时间
   },
@@ -338,6 +312,7 @@ const INIT_FORM = reactive({
     createTime: "", // 创建时间
     updateTime: "", // 更新时间
   },
+  yhzMaterialList: [], // 养护站物资列表
   photos: [],
 });
 const form = reactive({ ...INIT_FORM });
@@ -379,6 +354,12 @@ const onClickLeft = () => {
   });
 };
 
+// 打开添加物资弹窗
+const handleOpenAddMaterial = () => {
+  console.log("打开添加物资弹窗");
+}
+
+
 const handleAdd = () => {
   console.log("form", toRaw(form));
 };
@@ -460,6 +441,11 @@ const handleDelete = (file) => {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
+.add-wzbtn {
+  width: calc(100% - 32px);
+  margin: 10px 16px;
+}
+
 .add-btn {
   position: fixed;
   bottom: 20px;

packages/screen/src/component/MenuBar/index.js

@@ -1,4 +1,4 @@
-import { h, ref, onMounted, reactive, watch, toRaw, nextTick } from "vue";
+import { h, ref, onMounted, reactive, watch, toRaw, nextTick, onUnmounted } from "vue";
 import { request } from "@/utils/request";
 import { Search } from "@element-plus/icons-vue";
 import { useRoute, useRouter } from 'vue-router'
@@ -29,7 +29,6 @@ const getMenuList = async () => {
 export default () => {
 
     // 点击菜单处理
-    const router = useRouter();
     const handleMenuClick = (menu) => {
         console.log('menu', menu)
         if (menu.path) {
@@ -39,18 +38,31 @@ export default () => {
         }
     };
 
-    onMounted(async () => {
+    const router = useRouter();
-        await getMenuList();
+    const tokenRef = ref(localStorage.getItem('token'));
-        const firstMenuItem = menuList.value[0]?.children?.[0];
+    watch(tokenRef, async (newVal) => {
-        if (firstMenuItem) {
+        if (newVal) {
-            handleMenuClick(firstMenuItem);
+            await getMenuList();
+            const firstMenuItem = menuList.value[0]?.children?.[0];
+            if (firstMenuItem) {
+                handleMenuClick(firstMenuItem);
+            }
         }
-    })
+    }, { immediate: true });
+    const handleStorageChange = (e) => {
+        if (e.key === 'token') {
+            tokenRef.value = e.newValue;
+        }
+    };
+    onMounted(() => {
+        window.addEventListener('storage', handleStorageChange);
+    });
+    onUnmounted(() => {
+        window.removeEventListener('storage', handleStorageChange);
+    });
 
     return {
         menuList,
         handleMenuClick,
-
-
     }
 };

packages/screen/src/utils/request.js

@@ -8,8 +8,8 @@ const service = axios.create({
 // 请求拦截器
 service.interceptors.request.use(config => {
     // 暂时先写死token 实际项目中再调整token的获取位置
-    const token = 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VySWQiOjE5ODY2ODgzMjY1MjAwNTc4NTcsImFjY291bnQiOiJieHp0IiwidXVpZCI6Ijc5Zjk5NWE0LTAyNGEtNDA3My04YjVhLTIxNGI4MDBmNmQ1YyIsInJlbWVtYmVyTWUiOnRydWUsImV4cGlyYXRpb25EYXRlIjoxNzYyODUxOTg2OTI1LCJvdGhlcnMiOm51bGwsInN1YiI6IjE5ODY2ODgzMjY1MjAwNTc4NTciLCJpYXQiOjE3NjI4MjMxODYsImV4cCI6MTc2Mjg1MTk4Nn0.nZziqdUarLN1uRfs1pBRrBt-HxqBOGJy67HwaAbIiY7uSv-q9kzfiec7Djd1jkV_OnzhW3jN8h-pl8ILCFl0HA'
+    // const token = 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VySWQiOjE5ODY2ODgzMjY1MjAwNTc4NTcsImFjY291bnQiOiJieHp0IiwidXVpZCI6Ijc5Zjk5NWE0LTAyNGEtNDA3My04YjVhLTIxNGI4MDBmNmQ1YyIsInJlbWVtYmVyTWUiOnRydWUsImV4cGlyYXRpb25EYXRlIjoxNzYyODUxOTg2OTI1LCJvdGhlcnMiOm51bGwsInN1YiI6IjE5ODY2ODgzMjY1MjAwNTc4NTciLCJpYXQiOjE3NjI4MjMxODYsImV4cCI6MTc2Mjg1MTk4Nn0.nZziqdUarLN1uRfs1pBRrBt-HxqBOGJy67HwaAbIiY7uSv-q9kzfiec7Djd1jkV_OnzhW3jN8h-pl8ILCFl0HA'
-    // const token = localStorage.getItem('token');
+    const token = localStorage.getItem('token');
     if (token) {
         config.headers.Authorization = `${token}`;
     }

packages/screen/src/views/Home.vue

@@ -1,101 +1,18 @@
 <template>
-  <div class="screen-container">
+  <div></div>
-    <header class="screen-header">
-      <h1>数据大屏</h1>
-    </header>
-
-    <div class="screen-content">
-      <div class="screen-left">
-        <div class="chart-box">
-          <h3>左侧图表1</h3>
-        </div>
-        <div class="chart-box">
-          <h3>左侧图表2</h3>
-        </div>
-      </div>
-
-      <div class="screen-center">
-        <div class="chart-box center-main">
-          <h3>中间主图表</h3>
-        </div>
-      </div>
-
-      <div class="screen-right">
-        <div class="chart-box">
-          <h3>右侧图表1</h3>
-        </div>
-        <div class="chart-box">
-          <h3>右侧图表2</h3>
-        </div>
-      </div>
-    </div>
-  </div>
 </template>
-<script>
+<script setup>
-export default {
+import { useRoute, useRouter } from "vue-router";
-  name: 'Home',
+const route = useRoute();
-  setup() {
+const token = route.query.token;
-    return {}
+const router = useRouter();
-  }
+if (token) {
+  localStorage.setItem("token", token);
+  router.replace({ path: route.path }).then(() => {
+    window.location.reload();
+  });
 }
 </script>
 
 <style lang="scss" scoped>
-.screen-container {
-  width: 100%;
-  height: 100vh;
-  background: #0a1e3e;
-  color: #fff;
-  padding: 20px;
-  box-sizing: border-box;
-}
-
-.screen-header {
-  text-align: center;
-  margin-bottom: 20px;
-
-  h1 {
-    font-size: 36px;
-    font-weight: bold;
-    background: linear-gradient(to right, #4facfe, #00f2fe);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-}
-
-.screen-content {
-  display: flex;
-  gap: 20px;
-  height: calc(100% - 80px);
-}
-
-.screen-left,
-.screen-right {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.screen-center {
-  flex: 2;
-}
-
-.chart-box {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  padding: 20px;
-  flex: 1;
-
-  h3 {
-    margin: 0 0 15px 0;
-    font-size: 18px;
-    color: #4facfe;
-  }
-
-  &.center-main {
-    height: 100%;
-  }
-}
 </style>