完善ue
This commit is contained in:
23
index.html
23
index.html
@ -212,5 +212,28 @@
|
||||
<script src="/webrtc/jquery-1.12.2.min.js"></script>
|
||||
<script src="/sdk/YJEarth.min.js"></script>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
<script>
|
||||
// 调用ue必要的设置，需要一起复制
|
||||
'object' != typeof ue || 'object' != typeof ue.interface
|
||||
? ('object' != typeof ue && (ue = {}),
|
||||
(ue.interface = {}),
|
||||
(ue.interface.broadcast = function (e, t) {
|
||||
if ('string' == typeof e) {
|
||||
var o = [e, ''];
|
||||
void 0 !== t && (o[1] = t);
|
||||
var n = encodeURIComponent(JSON.stringify(o));
|
||||
'object' == typeof history && 'function' == typeof history.pushState
|
||||
? (history.pushState({}, '', '#' + n), history.pushState({}, '', '#' + encodeURIComponent('[]')))
|
||||
: ((document.location.hash = n), (document.location.hash = encodeURIComponent('[]')));
|
||||
}
|
||||
}))
|
||||
: (function (e) {
|
||||
(ue.interface = {}),
|
||||
(ue.interface.broadcast = function (t, o) {
|
||||
'string' == typeof t && (void 0 !== o ? e.broadcast(t, JSON.stringify(o)) : e.broadcast(t, ''));
|
||||
});
|
||||
})(ue.interface),
|
||||
(ue5 = ue.interface.broadcast);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
BIN
src/assets/large/outscreen.png
Normal file
BIN
src/assets/large/outscreen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
@ -22,6 +22,11 @@ const isWhiteList = (path: string) => {
|
||||
router.beforeEach(async (to, from) => {
|
||||
NProgress.start();
|
||||
|
||||
// 特殊页面放行
|
||||
if (['/ueScreen'].includes(to.path)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 已登录
|
||||
if (getToken()) {
|
||||
if (to.meta.title) useSettingsStore().setTitle(to.meta.title);
|
||||
|
||||
@ -14,6 +14,10 @@ import router from '@/router';
|
||||
|
||||
const encryptHeader = 'encrypt-key';
|
||||
let downloadLoadingInstance: LoadingInstance;
|
||||
|
||||
let silentLoginPromise: Promise<boolean> | null = null;
|
||||
let retryQueue: Array<() => void> = []; // 等待重试的请求队列
|
||||
|
||||
// 是否显示重新登录
|
||||
export const isRelogin = { show: false };
|
||||
export const globalHeaders = () => {
|
||||
@ -105,7 +109,7 @@ service.interceptors.request.use(
|
||||
|
||||
// 响应拦截器
|
||||
service.interceptors.response.use(
|
||||
(res: AxiosResponse) => {
|
||||
async (res: AxiosResponse) => {
|
||||
if (import.meta.env.VITE_APP_ENCRYPT === 'true') {
|
||||
// 加密后的 AES 秘钥
|
||||
const keyStr = res.headers[encryptHeader];
|
||||
@ -131,6 +135,65 @@ service.interceptors.response.use(
|
||||
return res.data;
|
||||
}
|
||||
if (code === 401) {
|
||||
// 处理ueScreen未登录
|
||||
const isInExternalPage = window.self !== window.top || window.location.pathname.includes('/ueScreen');
|
||||
|
||||
if (isInExternalPage) {
|
||||
console.log('[外链页] 检测到 401');
|
||||
|
||||
// 统一处理并发401
|
||||
if (silentLoginPromise) {
|
||||
// 登录正在进行时，等待完成
|
||||
console.log('[外链页] 等待静默登录完成');
|
||||
return new Promise((resolve) => {
|
||||
retryQueue.push(() => {
|
||||
const newToken = getToken();
|
||||
if (newToken) {
|
||||
res.config.headers.Authorization = 'Bearer ' + newToken;
|
||||
}
|
||||
resolve(axios.request(res.config));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 启动新的静默登录
|
||||
if (typeof window['silentLogin'] === 'function') {
|
||||
silentLoginPromise = window
|
||||
.silentLogin(true)
|
||||
.catch(() => false)
|
||||
.finally(() => {
|
||||
silentLoginPromise = null;
|
||||
});
|
||||
|
||||
const ok = await silentLoginPromise;
|
||||
const newToken = getToken();
|
||||
|
||||
if (ok && newToken) {
|
||||
axios.defaults.headers.common['Authorization'] = 'Bearer ' + newToken;
|
||||
|
||||
// ✅ 每个请求返回自己的 Promise
|
||||
return new Promise((resolve) => {
|
||||
retryQueue.push((config) => {
|
||||
axios.request(config).then((newRes) => {
|
||||
console.log('🚀 ~ config:', newRes.data);
|
||||
resolve(newRes.data); // 保持统一结构
|
||||
});
|
||||
});
|
||||
|
||||
// 如果登录刚好完成，就立即执行回调
|
||||
retryQueue.forEach((cb) => cb(res.config));
|
||||
retryQueue = [];
|
||||
});
|
||||
} else {
|
||||
retryQueue = [];
|
||||
console.warn('[外链页] 静默登录失败');
|
||||
return Promise.reject('静默登录失败');
|
||||
}
|
||||
}
|
||||
|
||||
return Promise.reject('外链页未配置静默登录');
|
||||
}
|
||||
|
||||
// prettier-ignore
|
||||
if (!isRelogin.show) {
|
||||
isRelogin.show = true;
|
||||
@ -184,31 +247,31 @@ export function download(url: string, params: any, fileName: string) {
|
||||
downloadLoadingInstance = ElLoading.service({ text: '正在下载数据，请稍候', background: 'rgba(0, 0, 0, 0.7)' });
|
||||
// prettier-ignore
|
||||
return service.post(url, params, {
|
||||
transformRequest: [
|
||||
(params: any) => {
|
||||
return tansParams(params);
|
||||
}
|
||||
],
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
responseType: 'blob'
|
||||
}).then(async (resp: any) => {
|
||||
const isLogin = blobValidate(resp);
|
||||
if (isLogin) {
|
||||
const blob = new Blob([resp]);
|
||||
FileSaver.saveAs(blob, fileName);
|
||||
} else {
|
||||
const blob = new Blob([resp]);
|
||||
const resText = await blob.text();
|
||||
const rspObj = JSON.parse(resText);
|
||||
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default'];
|
||||
ElMessage.error(errMsg);
|
||||
transformRequest: [
|
||||
(params: any) => {
|
||||
return tansParams(params);
|
||||
}
|
||||
downloadLoadingInstance.close();
|
||||
}).catch((r: any) => {
|
||||
console.error(r);
|
||||
ElMessage.error('下载文件出现错误，请联系管理员！');
|
||||
downloadLoadingInstance.close();
|
||||
});
|
||||
],
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
responseType: 'blob'
|
||||
}).then(async (resp: any) => {
|
||||
const isLogin = blobValidate(resp);
|
||||
if (isLogin) {
|
||||
const blob = new Blob([resp]);
|
||||
FileSaver.saveAs(blob, fileName);
|
||||
} else {
|
||||
const blob = new Blob([resp]);
|
||||
const resText = await blob.text();
|
||||
const rspObj = JSON.parse(resText);
|
||||
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default'];
|
||||
ElMessage.error(errMsg);
|
||||
}
|
||||
downloadLoadingInstance.close();
|
||||
}).catch((r: any) => {
|
||||
console.error(r);
|
||||
ElMessage.error('下载文件出现错误，请联系管理员！');
|
||||
downloadLoadingInstance.close();
|
||||
});
|
||||
}
|
||||
// 导出 axios 实例
|
||||
export default service;
|
||||
|
||||
255
src/views/ueScreen/components/date.vue
Normal file
255
src/views/ueScreen/components/date.vue
Normal file
@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<div class="year-month-picker">
|
||||
<!-- 年份选择器 -->
|
||||
<div class="picker-group">
|
||||
<div class="picker-input" @click="isYearOpen = !isYearOpen" :class="{ 'open': isYearOpen }">
|
||||
<span class="value">{{ selectedYear }}年</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
<ul class="options" v-show="isYearOpen">
|
||||
<li v-for="year in years" :key="year" :class="{ 'selected': year === selectedYear }"
|
||||
@click="handleYearSelect(year)">
|
||||
{{ year }}年
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 月份选择器 -->
|
||||
<div class="picker-group">
|
||||
<div class="picker-input" @click="isMonthOpen = !isMonthOpen" :class="{ 'open': isMonthOpen }">
|
||||
<span class="value">{{ selectedMonth }}月</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
<ul class="options" v-show="isMonthOpen">
|
||||
<li v-for="month in 12" :key="month" :class="{ 'selected': month === selectedMonth }"
|
||||
@click="handleMonthSelect(month)">
|
||||
{{ month }}月
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
year: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
month: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
startYear: {
|
||||
type: Number,
|
||||
default: 2000,
|
||||
},
|
||||
endYear: {
|
||||
type: Number,
|
||||
default: new Date().getFullYear(),
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:year', 'update:month', 'change']);
|
||||
|
||||
// 计算年份列表
|
||||
const years = computed(() => {
|
||||
const yearList = [];
|
||||
for (let y = props.startYear; y <= props.endYear; y++) {
|
||||
yearList.push(y);
|
||||
}
|
||||
return yearList;
|
||||
});
|
||||
|
||||
// 内部状态
|
||||
const selectedYear = ref(props.year);
|
||||
const selectedMonth = ref(props.month);
|
||||
const isYearOpen = ref(false);
|
||||
const isMonthOpen = ref(false);
|
||||
|
||||
// 监听props变化，同步到内部状态
|
||||
watch(
|
||||
() => [props.year, props.month],
|
||||
([newYear, newMonth]) => {
|
||||
selectedYear.value = newYear;
|
||||
selectedMonth.value = newMonth;
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
// 当内部值变化时，通知父组件
|
||||
const notifyParent = () => {
|
||||
emit('update:year', selectedYear.value);
|
||||
emit('update:month', selectedMonth.value);
|
||||
emit('change', { year: selectedYear.value, month: selectedMonth.value });
|
||||
};
|
||||
|
||||
// 处理年份选择
|
||||
const handleYearSelect = (year) => {
|
||||
selectedYear.value = year;
|
||||
isYearOpen.value = false;
|
||||
notifyParent();
|
||||
};
|
||||
|
||||
// 处理月份选择
|
||||
const handleMonthSelect = (month) => {
|
||||
selectedMonth.value = month;
|
||||
isMonthOpen.value = false;
|
||||
notifyParent();
|
||||
};
|
||||
|
||||
// 点击外部关闭下拉框
|
||||
const handleClickOutside = (event) => {
|
||||
if (!event.target.closest('.year-month-picker')) {
|
||||
isYearOpen.value = false;
|
||||
isMonthOpen.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 挂载时添加事件监听
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
// 验证初始值
|
||||
if (!years.value.includes(selectedYear.value)) {
|
||||
selectedYear.value = Math.max(props.startYear, Math.min(selectedYear.value, props.endYear));
|
||||
}
|
||||
selectedMonth.value = Math.max(1, Math.min(selectedMonth.value, 12));
|
||||
notifyParent(); // 确保初始值正确通知
|
||||
});
|
||||
|
||||
// 卸载时移除事件监听，防止内存泄漏
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('click', handleClickOutside);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$vm_base: 1920;
|
||||
$vh_base: 1080;
|
||||
|
||||
// 计算vw
|
||||
@function vw($px) {
|
||||
@return calc(($px / $vm_base) * 100vw);
|
||||
}
|
||||
|
||||
// 计算vh
|
||||
@function vh($px) {
|
||||
@return calc(($px / $vh_base) * 100vh);
|
||||
}
|
||||
|
||||
.year-month-picker {
|
||||
display: inline-flex;
|
||||
border-radius: vw(8);
|
||||
font-size: vw(14);
|
||||
background-color: transparent;
|
||||
box-shadow: 0 vh(2) vh(8) rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
border: vw(1) solid #c0c4cc;
|
||||
}
|
||||
|
||||
.year-month-picker:hover {
|
||||
border-color: #909399;
|
||||
box-shadow: 0 vh(4) vh(12) rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.picker-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.picker-input {
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
gap: vw(8);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: vh(8) vw(16);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border-right: vw(1) solid #e9e9e9;
|
||||
}
|
||||
|
||||
/* 移除最后一个输入框的右边框 */
|
||||
.picker-group:last-child .picker-input {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.picker-input .value {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.picker-input.open .arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: vw(6) vw(5) 0 vw(5);
|
||||
border-color: #909399 transparent transparent transparent;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* 美化后的下拉选项窗口 */
|
||||
.options {
|
||||
position: absolute;
|
||||
top: 110%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-height: vh(200); /* 限制最大高度并可滚动 */
|
||||
overflow-y: auto;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border-radius: vw(4);
|
||||
box-shadow: 0 vh(4) vh(12) rgba(0, 0, 0, 0.15); /* 更明显的阴影 */
|
||||
list-style: none;
|
||||
z-index: 10;
|
||||
padding: vh(4) 0;
|
||||
margin: 0;
|
||||
border: vw(1) solid #ebeef5;
|
||||
}
|
||||
|
||||
.options li {
|
||||
padding: vh(10) vw(16);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.options li:hover {
|
||||
background-color: #f5f7fa;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.options li.selected {
|
||||
// background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 美化滚动条 (WebKit浏览器) */
|
||||
.options::-webkit-scrollbar {
|
||||
width: vw(6);
|
||||
}
|
||||
|
||||
.options::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: vw(10);
|
||||
}
|
||||
|
||||
.options::-webkit-scrollbar-thumb {
|
||||
background: #c9c9c9;
|
||||
border-radius: vw(10);
|
||||
}
|
||||
|
||||
.options::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
</style>
|
||||
@ -1,38 +1,79 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<div class="header-left">
|
||||
<div>
|
||||
<DateSelector :year="currentYear" :month="currentMonth" :start-year="2010" :end-year="2030" />
|
||||
<ProjectSelector v-model="selectedProjectId" :options="options" />
|
||||
<!-- <div>
|
||||
<el-date-picker v-model="value1" type="date" placeholder="请选择时间" value-format="YYYY-MM-DD" class="datePicker" />
|
||||
</div>
|
||||
<div>
|
||||
<el-select v-model="value" placeholder="请选择项目" style="width: 100%">
|
||||
<el-select v-model="value" placeholder="请选择项目">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="header-center">新能源场站智慧运维大数据平台</div>
|
||||
<div class="header-right">
|
||||
<div>
|
||||
<div class="left-section">
|
||||
<img src="@/assets/large/weather.png" alt="天气图标" />
|
||||
|
||||
<span>
|
||||
<span>多云 9°/18°</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>{{ date.ymd }} {{ date.hms }}</div>
|
||||
<!-- 分割线 -->
|
||||
<div class="divider">
|
||||
<div class="top-block"></div>
|
||||
<div class="bottom-block"></div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="change" @click="emit('changePage')">
|
||||
<el-icon v-if="!isFull">
|
||||
<Expand />
|
||||
</el-icon>
|
||||
<el-icon v-else>
|
||||
<Fold />
|
||||
</el-icon>
|
||||
</div>
|
||||
<!-- 分割线 -->
|
||||
<div class="divider">
|
||||
<div class="top-block"></div>
|
||||
<div class="bottom-block"></div>
|
||||
</div>
|
||||
<!-- 右侧：管理系统图标 + 文字 -->
|
||||
<div class="outscreen" @click="outScreen">
|
||||
<img src="@/assets/large/outscreen.png" width="20" height="20" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
declare var ue5: any;
|
||||
|
||||
import '@/assets/styles/element.scss';
|
||||
import DateSelector from './date.vue';
|
||||
import ProjectSelector from './project.vue';
|
||||
|
||||
|
||||
defineProps({
|
||||
isFull: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['changePage']);
|
||||
|
||||
const date: any = ref({
|
||||
ymd: '',
|
||||
hms: '',
|
||||
week: ''
|
||||
});
|
||||
const currentYear = ref(2025);
|
||||
const currentMonth = ref(11);
|
||||
const selectedProjectId = ref(1);
|
||||
const value1 = ref('');
|
||||
const value = ref('');
|
||||
const options = ref([
|
||||
@ -49,6 +90,7 @@ const options = ref([
|
||||
label: '长顺县朝核农业光伏电站'
|
||||
}
|
||||
]);
|
||||
|
||||
const setTime = () => {
|
||||
let date1 = new Date();
|
||||
let year: any = date1.getFullYear();
|
||||
@ -72,6 +114,12 @@ const setTime = () => {
|
||||
};
|
||||
// 添加定时器，每秒更新一次时间
|
||||
const timer = setInterval(setTime, 1000);
|
||||
|
||||
const outScreen = () => {
|
||||
console.log('outScreen');
|
||||
ue5('exitfullscreen');
|
||||
};
|
||||
|
||||
// 组件卸载时清除定时器
|
||||
onUnmounted(() => {
|
||||
clearInterval(timer);
|
||||
@ -81,6 +129,7 @@ onUnmounted(() => {
|
||||
<style scoped lang="scss">
|
||||
$vm_base: 1920;
|
||||
$vh_base: 1080;
|
||||
|
||||
// 计算vw
|
||||
@function vw($px) {
|
||||
@return calc(($px / $vm_base) * 100vw);
|
||||
@ -97,16 +146,20 @@ $vh_base: 1080;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 1fr;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
padding-left: vw(40);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
& > div {
|
||||
width: vw(240);
|
||||
margin-right: vw(20);
|
||||
}
|
||||
gap: vw(20);
|
||||
// justify-content: space-between;
|
||||
|
||||
// &>div {
|
||||
// width: vw(240);
|
||||
// margin-right: vw(20);
|
||||
// }
|
||||
}
|
||||
|
||||
.header-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -115,22 +168,58 @@ $vh_base: 1080;
|
||||
font-size: vw(32);
|
||||
letter-spacing: vw(8);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
padding-right: vw(20);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
font-size: vw(15);
|
||||
|
||||
.left-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: vw(20);
|
||||
// margin-right: auto; /* 让右侧元素（管理系统）居右 */
|
||||
}
|
||||
|
||||
.left-section img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 8px; /* 图标与文字间距 */
|
||||
margin-right: 8px;
|
||||
/* 图标与文字间距 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 分割线 */
|
||||
.divider {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
gap: vh(2);
|
||||
padding: vh(14) vw(10);
|
||||
|
||||
.top-block,
|
||||
.bottom-block {
|
||||
width: vw(2);
|
||||
height: vh(7);
|
||||
background: #19b5fb;
|
||||
}
|
||||
}
|
||||
|
||||
.change {
|
||||
font-size: vw(22);
|
||||
line-height: vw(22);
|
||||
margin-top: vw(2);
|
||||
}
|
||||
|
||||
.outscreen {
|
||||
width: vw(20);
|
||||
height: vw(20);
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -196,7 +196,7 @@ export let option2 = {
|
||||
name: '单位: Kwh',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
fontSize: 14,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
|
||||
206
src/views/ueScreen/components/project.vue
Normal file
206
src/views/ueScreen/components/project.vue
Normal file
@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div class="project-picker">
|
||||
<div class="picker-group">
|
||||
<div class="picker-input" @click="isOpen = !isOpen" :class="{ 'open': isOpen }">
|
||||
<span class="value" :title="selectedLabel">{{ selectedLabel }}</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
<ul class="options" v-show="isOpen">
|
||||
<li v-for="option in options" :key="option.value" :class="{ 'selected': option.value === modelValue }"
|
||||
@click="handleSelect(option.value)">
|
||||
{{ option.label }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
// 双向绑定的项目ID
|
||||
modelValue: {
|
||||
type: [Number, String],
|
||||
required: true,
|
||||
},
|
||||
// 项目列表选项
|
||||
options: {
|
||||
type: Array,
|
||||
required: true,
|
||||
validator: (value) => {
|
||||
// 简单验证options格式
|
||||
return value.every(option => option.hasOwnProperty('value') && option.hasOwnProperty('label'));
|
||||
}
|
||||
},
|
||||
// 是否禁用
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'change']);
|
||||
|
||||
// 内部状态
|
||||
const isOpen = ref(false);
|
||||
|
||||
// 计算当前选中的标签
|
||||
const selectedLabel = computed(() => {
|
||||
const selectedOption = props.options.find(option => option.value === props.modelValue);
|
||||
return selectedOption ? selectedOption.label : '';
|
||||
});
|
||||
|
||||
// 处理选项选择
|
||||
const handleSelect = (value) => {
|
||||
if (value !== props.modelValue) {
|
||||
emit('update:modelValue', value);
|
||||
emit('change', value);
|
||||
}
|
||||
isOpen.value = false;
|
||||
};
|
||||
|
||||
// 点击外部关闭下拉框
|
||||
const handleClickOutside = (event) => {
|
||||
if (!event.target.closest('.project-picker')) {
|
||||
isOpen.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 挂载时添加事件监听
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
});
|
||||
|
||||
// 卸载时移除事件监听
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('click', handleClickOutside);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$vm_base: 1920;
|
||||
$vh_base: 1080;
|
||||
|
||||
// 计算vw
|
||||
@function vw($px) {
|
||||
@return calc(($px / $vm_base) * 100vw);
|
||||
}
|
||||
|
||||
// 计算vh
|
||||
@function vh($px) {
|
||||
@return calc(($px / $vh_base) * 100vh);
|
||||
}
|
||||
|
||||
.project-picker {
|
||||
display: inline-flex;
|
||||
border-radius: vw(8);
|
||||
font-size: vw(14);
|
||||
background-color: transparent;
|
||||
box-shadow: 0 vh(2) vh(8) rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
border: vw(1) solid #c0c4cc;
|
||||
}
|
||||
|
||||
.project-picker:hover {
|
||||
border-color: #909399;
|
||||
box-shadow: 0 vh(4) vh(12) rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.picker-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.picker-input {
|
||||
// 关键修改：设置一个最大宽度，防止文本过长导致容器被撑破
|
||||
// 你可以根据需要调整这个值，vw(300) 表示在1920px宽的屏幕下，最大宽度是300px
|
||||
max-width: 12vw;
|
||||
width: 100%; /* 让输入框尽可能利用可用空间，但不超过max-width */
|
||||
display: flex;
|
||||
gap: vw(8);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: vh(8) vw(16);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
box-sizing: border-box; /* 确保padding不会增加元素总宽度 */
|
||||
}
|
||||
|
||||
.picker-input .value {
|
||||
color: #fff;
|
||||
// 关键修改：添加文本省略样式
|
||||
white-space: nowrap; /* 强制文本在一行显示 */
|
||||
overflow: hidden; /* 隐藏溢出的文本 */
|
||||
text-overflow: ellipsis; /* 显示省略号 */
|
||||
flex-grow: 1; /* 让 .value 元素占据可用空间，将箭头推到最右边 */
|
||||
}
|
||||
|
||||
.picker-input.open .arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.arrow {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: vw(6) vw(5) 0 vw(5);
|
||||
border-color: #909399 transparent transparent transparent;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* 美化后的下拉选项窗口 */
|
||||
.options {
|
||||
position: absolute;
|
||||
top: 110%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-height: vh(200); /* 限制最大高度并可滚动 */
|
||||
overflow-y: auto;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border-radius: vw(4);
|
||||
box-shadow: 0 vh(4) vh(12) rgba(0, 0, 0, 0.15); /* 更明显的阴影 */
|
||||
list-style: none;
|
||||
z-index: 10;
|
||||
padding: vh(4) 0;
|
||||
margin: 0;
|
||||
border: vw(1) solid #ebeef5;
|
||||
}
|
||||
|
||||
.options li {
|
||||
padding: vh(10) vw(16);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.options li:hover {
|
||||
background-color: #f5f7fa;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.options li.selected {
|
||||
color: #1890ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 美化滚动条 (WebKit浏览器) */
|
||||
.options::-webkit-scrollbar {
|
||||
width: vw(6);
|
||||
}
|
||||
|
||||
.options::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: vw(10);
|
||||
}
|
||||
|
||||
.options::-webkit-scrollbar-thumb {
|
||||
background: #c9c9c9;
|
||||
border-radius: vw(10);
|
||||
}
|
||||
|
||||
.options::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
</style>
|
||||
@ -18,7 +18,18 @@ const props = defineProps({
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import '@/views/ueScreen/gis.scss';
|
||||
$vm_base: 1920;
|
||||
$vh_base: 1080;
|
||||
|
||||
// 计算vw
|
||||
@function vw($px) {
|
||||
@return calc(($px / $vm_base) * 100vw);
|
||||
}
|
||||
|
||||
// 计算vh
|
||||
@function vh($px) {
|
||||
@return calc(($px / $vh_base) * 100vh);
|
||||
}
|
||||
|
||||
.title {
|
||||
background-image: url('@/assets/ueimg/Rectangle 766.png');
|
||||
|
||||
@ -1,18 +1,79 @@
|
||||
<template>
|
||||
<div class="ueScreen">
|
||||
<Header />
|
||||
<Header :isFull="isFull" @changePage="handleChangePage" />
|
||||
<div class="content_box">
|
||||
<LeftPage class="left" />
|
||||
<!-- <div>ue</div> -->
|
||||
<RightPage class="right" />
|
||||
<LeftPage class="left" :style="{ left: isHideOther ? '-25vw' : '0' }" />
|
||||
<RightPage class="right" :style="{ right: isHideOther ? '-25vw' : '0' }" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
declare var ue5: any;
|
||||
|
||||
import Header from './components/header.vue';
|
||||
import LeftPage from './components/leftPage.vue';
|
||||
import RightPage from './components/rightPage.vue';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
import usePermissionStore from '@/store/modules/permission';
|
||||
import to from 'await-to-js';
|
||||
|
||||
const userStore = useUserStoreHook();
|
||||
const initDone = ref(false); // ✅ 控制页面是否渲染
|
||||
const isHideOther = ref(false);
|
||||
const isFull = ref(false);
|
||||
|
||||
/**
|
||||
* 切换中心页面全屏
|
||||
*/
|
||||
const handleChangePage = () => {
|
||||
if (isFull.value) {
|
||||
isFull.value = false;
|
||||
isHideOther.value = false;
|
||||
} else {
|
||||
isFull.value = true;
|
||||
isHideOther.value = true;
|
||||
ue5('openUEUI');
|
||||
}
|
||||
};
|
||||
|
||||
const silentLogin = async (isExpired = false) => {
|
||||
const token = getToken();
|
||||
if (token && !isExpired) return true;
|
||||
|
||||
try {
|
||||
// 调用静默登录接口
|
||||
await to(
|
||||
userStore.login({
|
||||
username: 'admin',
|
||||
password: 'admin123',
|
||||
tenantId: '000000',
|
||||
clientId: undefined,
|
||||
grantType: undefined
|
||||
})
|
||||
);
|
||||
} catch (e) {
|
||||
ElMessage.error('无法获取数据，请联系管理员');
|
||||
return false;
|
||||
}
|
||||
await to(userStore.getInfo());
|
||||
await usePermissionStore().generateRoutes();
|
||||
return true;
|
||||
};
|
||||
|
||||
// ✅ 页面初始化逻辑
|
||||
const initPage = async () => {
|
||||
const logged = await silentLogin();
|
||||
if (!logged) return;
|
||||
|
||||
initDone.value = true; // ✅ 准备完成
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initPage();
|
||||
window['silentLogin'] = silentLogin;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -32,12 +93,12 @@ $vh_base: 1080;
|
||||
.ueScreen {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
// background-color: rgba(4, 7, 17, 0.8);
|
||||
background-image: url('@/assets/ueimg/bj.png');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content_box {
|
||||
@ -52,6 +113,7 @@ $vh_base: 1080;
|
||||
left: vw(20);
|
||||
width: 25vw;
|
||||
height: 100%;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.right {
|
||||
@ -60,5 +122,6 @@ $vh_base: 1080;
|
||||
right: vw(20);
|
||||
width: 25vw;
|
||||
height: 100%;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user