冰雪专题PC端 token获取
This commit is contained in:
parent
680149a6c0
commit
e6cea41447
@ -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;
|
||||
|
||||
@ -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 () => {
|
||||
await getMenuList();
|
||||
const firstMenuItem = menuList.value[0]?.children?.[0];
|
||||
if (firstMenuItem) {
|
||||
handleMenuClick(firstMenuItem);
|
||||
const router = useRouter();
|
||||
const tokenRef = ref(localStorage.getItem('token'));
|
||||
watch(tokenRef, async (newVal) => {
|
||||
if (newVal) {
|
||||
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,
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
@ -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 = localStorage.getItem('token');
|
||||
// const token = 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VySWQiOjE5ODY2ODgzMjY1MjAwNTc4NTcsImFjY291bnQiOiJieHp0IiwidXVpZCI6Ijc5Zjk5NWE0LTAyNGEtNDA3My04YjVhLTIxNGI4MDBmNmQ1YyIsInJlbWVtYmVyTWUiOnRydWUsImV4cGlyYXRpb25EYXRlIjoxNzYyODUxOTg2OTI1LCJvdGhlcnMiOm51bGwsInN1YiI6IjE5ODY2ODgzMjY1MjAwNTc4NTciLCJpYXQiOjE3NjI4MjMxODYsImV4cCI6MTc2Mjg1MTk4Nn0.nZziqdUarLN1uRfs1pBRrBt-HxqBOGJy67HwaAbIiY7uSv-q9kzfiec7Djd1jkV_OnzhW3jN8h-pl8ILCFl0HA'
|
||||
const token = localStorage.getItem('token');
|
||||
if (token) {
|
||||
config.headers.Authorization = `${token}`;
|
||||
}
|
||||
|
||||
@ -1,101 +1,18 @@
|
||||
<template>
|
||||
<div class="screen-container">
|
||||
<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>
|
||||
<div></div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Home',
|
||||
setup() {
|
||||
return {}
|
||||
}
|
||||
<script setup>
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
const route = useRoute();
|
||||
const token = route.query.token;
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user