Skip to content

W
web-project
Commit 5085a844 authored by moonby's avatar moonby
Browse files
Options

20240715

parent 7823245b
Show whitespace changes
Inline Side-by-side
Showing with 484 additions and 435 deletions
src/style/index.less
View file @ 5085a844
...@@ -30,7 +30,8 @@ html { ...@@ -30,7 +30,8 @@ html {
height: 60px; height: 60px;
position: relative; position: relative;
line-height: 70px; line-height: 70px;
background-color: rgb(82,107,171); //background-color: rgb(82,107,171);
background-color: rgb(31, 63, 141);
} }
.ams-aside .ams-menu { .ams-aside .ams-menu {
...@@ -169,18 +170,29 @@ html { ...@@ -169,18 +170,29 @@ html {
// padding-top: 1vh; // padding-top: 1vh;
/* padding-left: 2vw; */ /* padding-left: 2vw; */
text-align: center; // text-align: center;
color: white; color: white;
} }
.div-contain-title{
margin-top: 5px;
height: 25px;
}
.div-contain-titleAndText{
display: flex;
}
/* 气象信息文本--小文本 */ /* 气象信息文本--小文本 */
.div-contain-text-small { .div-contain-text-small {
font-size: 8pt; font-size: 8pt;
text-align:center; // text-align:center;
vertical-align: top; vertical-align: top;
width: 100px; width: 100px;
} }
/* 气象信息文本--大文本 */ /* 气象信息文本--大文本 */
.div-contain-text-big { .div-contain-text-big {
font-size: 14px; font-size: 14px;
......
src/views/home.vue
View file @ 5085a844
<template> <template>
<div id="ams-container" > <div id="ams-container">
<div class="ams-aside" :style="{ width: menuWidth + 'px'}"> <div class="ams-aside" :style="{ width: menuWidth + 'px' }">
<div class="header" :style="{ width: menuWidth - 1 + 'px'}"> <div class="header" :style="{ width: menuWidth - 1 + 'px' }">
<img :style="{height:amslogo_style.height+'px',width: amslogo_style.width+'px'}" v-show="!$store.state.iscollapse" v-bind:src="amslogo" /> <img :style="{ height: amslogo_style.height + 'px', width: amslogo_style.width + 'px' }"
<i @click="toggleLeft" class="collapse-menu" :style="{width:38+ 'px'}"> v-show="!$store.state.iscollapse" v-bind:src="amslogo" />
<el-icon v-if="!$store.state.iscollapse" size="20" style="vertical-align: middle"><Fold /></el-icon> <i @click="toggleLeft" class="collapse-menu" :style="{ width: 38 + 'px' }">
<el-icon v-if="$store.state.iscollapse" size="20" style="vertical-align: middle"><Expand /></el-icon> <el-icon v-if="!$store.state.iscollapse" size="20" style="vertical-align: middle">
<Fold />
</el-icon>
<el-icon v-if="$store.state.iscollapse" size="20" style="vertical-align: middle">
<Expand />
</el-icon>
</i> </i>
</div> </div>
<div class="ams-menu"> <div class="ams-menu">
<DataMenu ></DataMenu> <DataMenu></DataMenu>
</div> </div>
</div> </div>
<div class="ams-container" :style="{ left: menuWidth-2 + 'px' }"> <div class="ams-container" :style="{ left: menuWidth - 2 + 'px' }">
<div class="ams-header" style=" background-color: #526bab;"> <div class="ams-header" style=" background-color: rgb(31, 63, 141);">
<div class="enterprise-name"> <div class="enterprise-name">
<el-dropdown size="'large'" style="margin-left: 10px;margin-top: 5px;color:blue; width: 100%;" <el-dropdown size="'large'" style="margin-left: 10px;margin-top: 5px;color:blue; width: 100%;"
@command="handleCommand" :trigger="(roleId > 2) ? 'contextmenu' : 'hover'"> @command="handleCommand" :trigger="(roleId > 2) ? 'contextmenu' : 'hover'">
...@@ -30,59 +35,90 @@ ...@@ -30,59 +35,90 @@
</el-dropdown> </el-dropdown>
</div> </div>
<div class="header-weather" id=""> <div class="header-weather" id="">
<el-row style="left: 2.5%;widows: 60px;" > <el-row style="left: 42%;widows: 60px;width: 63%;">
<el-col :span="4"> <el-col :span="4" style="">
<div>温度 ℃
<div class="div-contain-text-big">{{ showWeatherData.weatherData.temperature }}</div> <div class="div-contain-titleAndText">
<el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;" src="/imgs/home/wendu.png"
:fit="'fill'" />
<div>
<div class="div-contain-title"> 温度 ℃</div>
<div class="div-contain-text-big">{{ showWeatherData.weatherData.temperature }}
</div>
</div>
</div> </div>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
<div>光照 <div class="div-contain-titleAndText">
<div class="div-contain-text-big">{{ showWeatherData.weatherData.illumination }}</div> <el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;" src="/imgs/home/guang.png"
:fit="'fill'" />
<div>
<div class="div-contain-title">光照强度</div>
<div class="div-contain-text-big">{{ showWeatherData.weatherData.illumination }}
</div>
</div>
</div> </div>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="5">
<div>风力 <div class="div-contain-titleAndText">
<el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;" src="/imgs/home/feng.png"
:fit="'fill'" />
<div>
<div class="div-contain-title">风力等级</div>
<div class="div-contain-text-big">{{ showWeatherData.weatherData.wind }}</div> <div class="div-contain-text-big">{{ showWeatherData.weatherData.wind }}</div>
</div> </div>
</div>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="5">
<div>风向 <div class="div-contain-titleAndText">
<div class="div-contain-text-big">{{ showWeatherData.weatherData.windDirection }}</div> <el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;" src="/imgs/home/fengxiang.png"
:fit="'fill'" />
<div>
<div class="div-contain-title">风向</div>
<div class="div-contain-text-big">{{ showWeatherData.weatherData.windDirection }}
</div>
</div>
</div> </div>
</el-col> </el-col>
<el-col :span="5" > <el-col :span="5">
<div class="div-contain-titleAndText">
<el-image style="padding-top:20px ;width: 30px;height: 30px;margin-right: 3px;" src="/imgs/home/time.png"
:fit="'fill'" />
<div> <div>
<div style="width: 100px; text-align: center;">采集时间</div> <div class="div-contain-title" style="width: 100px;">气象时间</div>
<div class="div-contain-text-small" style="line-height: 15px;">{{ showWeatherData.weatherData.gatherTime }}</div> <div class="div-contain-text-small" style="line-height: 15px;">{{
showWeatherData.weatherData.gatherTime
}}</div>
</div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="header-info"> <div class="header-info">
<div class="h-link"> <div class="h-link">
<a href="javascript:void(0)" ><i>可视化界面</i></a> <a href="javascript:void(0)"><i>可视化界面</i></a>
</div> </div>
<div class="h-link"> <div class="h-link">
<a href="javascript:void(0)" > <a href="javascript:void(0)">
<el-icon> <el-icon>
<UserFilled color="rgb(161,187,214)"/> <UserFilled color="rgb(161,187,214)" />
</el-icon> </el-icon>
{{ realName }} {{ realName }}
</a> </a>
</div> </div>
<div class="h-link" style="padding-left: 20px; "> <div class="h-link" style="padding-left: 15px; ">
<a href="javascript:void(0)" > <a href="javascript:void(0)">
<el-icon > <el-icon>
<Setting color="rgb(0,0,0)" /> <Setting color="rgb(255,255,255)" />
</el-icon> </el-icon>
系统设置 系统设置
</a> </a>
</div> </div>
<div class="h-link" style="padding-left: 1px;" > <div class="h-link" style="padding-left: 1px;">
<a href="javascript:void(0)" @click="logout"> <a href="javascript:void(0)" @click="logout">
<el-icon> <el-icon>
<SwitchButton color="rgb(0,0,0)"/> <el-image src="/imgs/home/exit.png" :fit="'fill'" />
</el-icon> </el-icon>
退出系统 退出系统
</a> </a>
...@@ -93,12 +129,12 @@ ...@@ -93,12 +129,12 @@
<div> <div>
<el-tabs v-model="activeTable" type="border-card" class="demo-tabs mytab" @tab-remove="removeTab" <el-tabs v-model="activeTable" type="border-card" class="demo-tabs mytab" @tab-remove="removeTab"
@tab-change="changeTabsHandle"> @tab-change="changeTabsHandle">
<el-tab-pane :closable="item.path !== '/RealSupply'" v-for="item in editableTabs" :key="item.path" :label="item.title" <el-tab-pane :closable="item.path !== '/RealSupply'" v-for="item in editableTabs"
:name="item.path"> :key="item.path" :label="item.title" :name="item.path">
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<div :style="{height: mainHeight + 'px'}"> <!--, width: mainWidth +'px' --> <div :style="{ height: mainHeight + 'px' }"> <!--, width: mainWidth +'px' -->
<el-scrollbar style="height: 100%"> <el-scrollbar style="height: 100%">
<loading v-show="$store.getters.isLoading()"></loading> <loading v-show="$store.getters.isLoading()"></loading>
<!-- 主体内容 --> <!-- 主体内容 -->
...@@ -118,29 +154,32 @@ ...@@ -118,29 +154,32 @@
<style scoped> <style scoped>
@import "../style/index.less"; @import "../style/index.less";
::v-deep .el-tabs--border-card{ ::v-deep .el-tabs--border-card {
background: transparent; background: transparent;
border: none; border: none;
box-shadow: none; box-shadow: none;
-webkit-box-shadow:none; -webkit-box-shadow: none;
height: 46px; height: 46px;
} }
::v-deep .el-tabs--border-card > .el-tabs__header{
::v-deep .el-tabs--border-card>.el-tabs__header {
background-color: transparent; background-color: transparent;
border-bottom: none; border-bottom: none;
} }
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item{
::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item {
margin-left: 8px; margin-left: 8px;
margin-top: 5px; margin-top: 5px;
border: none; border: none;
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
background-color: #F3F7FE; background-color: #F3F7FE;
padding: 4px 20px; padding: 4px 20px;
color:#0065D5; color: #0065D5;
line-height: 22px; line-height: 22px;
height: 40px; height: 40px;
} }
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active{
::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
background-color: #0065D5; background-color: #0065D5;
color: #ffffff; color: #ffffff;
} }
...@@ -206,7 +245,7 @@ export default defineComponent({ ...@@ -206,7 +245,7 @@ export default defineComponent({
this.bindRightClickMenu(true); this.bindRightClickMenu(true);
}, },
setup(props, {emit}){ setup(props, { emit }) {
// 获取全局属性和方法 // 获取全局属性和方法
const { proxy } = getCurrentInstance()!; const { proxy } = getCurrentInstance()!;
...@@ -237,20 +276,20 @@ export default defineComponent({ ...@@ -237,20 +276,20 @@ export default defineComponent({
const router = useRouter(); const router = useRouter();
let _config = getCurrentInstance()!.appContext.config.globalProperties; let _config = getCurrentInstance()!.appContext.config.globalProperties;
var amslogo_url =new URL('/imgs/home/LOGO_index.png',import.meta.url).href; var amslogo_url = new URL('/imgs/home/LOGO_index.png', import.meta.url).href;
const amslogo = ref(amslogo_url); const amslogo = ref(amslogo_url);
var currLogoUrl=new URL('/imgs/home/PLATFORM.png',import.meta.url).href; var currLogoUrl = new URL('/imgs/home/PLATFORM.png', import.meta.url).href;
//var backgroundImageUrl=new URL('/imgs/home/PLATFORM.png',import.meta.url).href; //var backgroundImageUrl=new URL('/imgs/home/PLATFORM.png',import.meta.url).href;
var amslogo_style=reactive({height:50,width:150}); var amslogo_style = reactive({ height: 50, width: 150 });
//控制左侧导航菜单的展开和隐藏 //控制左侧导航菜单的展开和隐藏
const toggleLeft=()=>{ const toggleLeft = () => {
store.commit('setAsideWidth'); store.commit('setAsideWidth');
menuWidth.value =store.state.iscollapse ? 63 : 200; menuWidth.value = store.state.iscollapse ? 63 : 200;
amslogo_style.height=store.state.iscollapse ? 12 : 50; amslogo_style.height = store.state.iscollapse ? 12 : 50;
amslogo_style.width=store.state.iscollapse ? 40 : 150; amslogo_style.width = store.state.iscollapse ? 40 : 150;
mainWidth.value = window.innerWidth-menuWidth.value; mainWidth.value = window.innerWidth - menuWidth.value;
EventBus.emit('changeValue', mainWidth.value ); EventBus.emit('changeValue', mainWidth.value);
} }
//开放手动折叠菜单方法 //开放手动折叠菜单方法
...@@ -265,7 +304,7 @@ export default defineComponent({ ...@@ -265,7 +304,7 @@ export default defineComponent({
const created = () => { const created = () => {
mainHeight.value = window.innerHeight - 120; mainHeight.value = window.innerHeight - 120;
mainWidth.value = store.state.iscollapse ? window.innerWidth- 63 : window.innerWidth-200; mainWidth.value = store.state.iscollapse ? window.innerWidth - 63 : window.innerWidth - 200;
let _userInfo = store.getters.getUserInfo(); let _userInfo = store.getters.getUserInfo();
if (_userInfo) { if (_userInfo) {
...@@ -280,14 +319,14 @@ export default defineComponent({ ...@@ -280,14 +319,14 @@ export default defineComponent({
} }
created(); created();
onBeforeMount(async() => { onBeforeMount(async () => {
// 在组件即将挂载之前加载数据 // 在组件即将挂载之前加载数据
await getData(); await getData();
}); });
const getWeather = async () =>{ const getWeather = async () => {
var result = await http.post("/api/weather/Real/",showWeatherData.supplyData.supplyId); var result = await http.post("/api/weather/Real/", showWeatherData.supplyData.supplyId);
var temp = result.data var temp = result.data
var tempWeatherData = toRefs(showWeatherData); var tempWeatherData = toRefs(showWeatherData);
tempWeatherData.weatherData.value = temp; tempWeatherData.weatherData.value = temp;
...@@ -302,7 +341,7 @@ export default defineComponent({ ...@@ -302,7 +341,7 @@ export default defineComponent({
var enterpriseList = ref([{ var enterpriseList = ref([{
"enterpriseId": "", "enterpriseId": "",
"enterpriseName": "", "enterpriseName": "",
"logo":"", "logo": "",
"orderNum": 0, "orderNum": 0,
"supplyList": [{ "supplyList": [{
"supplyId": "", "supplyId": "",
...@@ -345,7 +384,7 @@ export default defineComponent({ ...@@ -345,7 +384,7 @@ export default defineComponent({
//初始化标签导航列表 //初始化标签导航列表
function initTabList() { function initTabList() {
let istabList = JSON.parse(window.sessionStorage.getItem("tabList")); let istabList = JSON.parse(window.sessionStorage.getItem("tabList"));
if(!Array.isArray(istabList)){ if (!Array.isArray(istabList)) {
istabList = null; istabList = null;
} }
if (istabList) { if (istabList) {
...@@ -353,9 +392,9 @@ export default defineComponent({ ...@@ -353,9 +392,9 @@ export default defineComponent({
} }
activeTable.value = localStorage.getItem("activeTab")!; activeTable.value = localStorage.getItem("activeTab")!;
if(activeTable.value){ if (activeTable.value) {
router.push(activeTable.value) router.push(activeTable.value)
}else{ } else {
router.push("/RealSupply") router.push("/RealSupply")
activeTable.value = "/RealSupply" activeTable.value = "/RealSupply"
} }
...@@ -365,8 +404,8 @@ export default defineComponent({ ...@@ -365,8 +404,8 @@ export default defineComponent({
//todo:添加前检查是否已经存在此标签，若存在则不添加并将其选中 //todo:添加前检查是否已经存在此标签，若存在则不添加并将其选中
//标签添加函数 //标签添加函数
function addTab(item){ function addTab(item) {
const notTab = editableTabs.value.findIndex(obj=> obj.path == item.path) == -1; const notTab = editableTabs.value.findIndex(obj => obj.path == item.path) == -1;
if (notTab) { if (notTab) {
editableTabs.value.push(item) editableTabs.value.push(item)
//本地存储 //本地存储
...@@ -403,8 +442,8 @@ export default defineComponent({ ...@@ -403,8 +442,8 @@ export default defineComponent({
router.push(isTabs) router.push(isTabs)
} }
const changeTabsHandle=(path)=>{ const changeTabsHandle = (path) => {
console.log("changeTabsHandle:"+ path) console.log("changeTabsHandle:" + path)
//path 是标签name所设定的值，也就是需要跳转的路由地址 item.path //path 是标签name所设定的值，也就是需要跳转的路由地址 item.path
//设置激活选项 //设置激活选项
activeTable.value = path activeTable.value = path
...@@ -428,25 +467,25 @@ export default defineComponent({ ...@@ -428,25 +467,25 @@ export default defineComponent({
}) })
}) })
const getEnterprises = async () =>{ const getEnterprises = async () => {
enterpriseList.value = store.getters.getEnterprise(); enterpriseList.value = store.getters.getEnterprise();
//console.log('setEnterpriseId: ' + enterpriseList.value[0].enterpriseId); //console.log('setEnterpriseId: ' + enterpriseList.value[0].enterpriseId);
showenterpriseName.value = enterpriseList.value[0].enterpriseName; showenterpriseName.value = enterpriseList.value[0].enterpriseName;
if(enterpriseList.value[0].enterpriseName == "天津港益供热有限责任公司"){ if (enterpriseList.value[0].enterpriseName == "天津港益供热有限责任公司") {
showWeatherData.supplyData.supplyId = enterpriseList.value[0].serviceCenterList[0].supplyList[0].supplyId; showWeatherData.supplyData.supplyId = enterpriseList.value[0].serviceCenterList[0].supplyList[0].supplyId;
showWeatherData.supplyData.supplyName = enterpriseList.value[0].serviceCenterList[0].supplyList[0].supplyName; showWeatherData.supplyData.supplyName = enterpriseList.value[0].serviceCenterList[0].supplyList[0].supplyName;
}else{ } else {
showWeatherData.supplyData.supplyId = enterpriseList.value[0].supplyList[0].supplyId; showWeatherData.supplyData.supplyId = enterpriseList.value[0].supplyList[0].supplyId;
showWeatherData.supplyData.supplyName = enterpriseList.value[0].supplyList[0].supplyName; showWeatherData.supplyData.supplyName = enterpriseList.value[0].supplyList[0].supplyName;
} }
currLogoUrl =new URL('../assets/imgs/home/' + enterpriseList.value[0].logo, import.meta.url).href; currLogoUrl = new URL('../assets/imgs/home/' + enterpriseList.value[0].logo, import.meta.url).href;
//console.log(currLogoUrl); //console.log(currLogoUrl);
await getWeather(); await getWeather();
} }
const getMenus = async () =>{ const getMenus = async () => {
//function getMenus() { //function getMenus() {
await http.post("/api/menu/GetCurrentMenu/").then((response) => { await http.post("/api/menu/GetCurrentMenu/").then((response) => {
var jobj = response.data; var jobj = response.data;
...@@ -459,22 +498,22 @@ export default defineComponent({ ...@@ -459,22 +498,22 @@ export default defineComponent({
await getMenus(); await getMenus();
} }
const logout = async() => { const logout = async () => {
//console.log('logout'); //console.log('logout');
const res = await ElMessageBox.confirm( const res = await ElMessageBox.confirm(
'是否退出登录？', '是否退出登录？',
'提示', '提示',
{ {
confirmButtonText:'确定', confirmButtonText: '确定',
cancelButtonText:'取消', cancelButtonText: '取消',
type:'warning' type: 'warning'
} }
).catch(err =>{ ).catch(err => {
return err; return err;
}) })
if(res == 'confirm'){ if (res == 'confirm') {
store.commit("clearUserInfo", ""); store.commit("clearUserInfo", "");
router.push({path:"/login"}); router.push({ path: "/login" });
} }
} }
...@@ -560,7 +599,9 @@ export default defineComponent({ ...@@ -560,7 +599,9 @@ export default defineComponent({
font-size: 14px; font-size: 14px;
color: #333; color: #333;
box-shadow: 2px 2px 3px 0 rgb(182 182 182 / 20%); box-shadow: 2px 2px 3px 0 rgb(182 182 182 / 20%);
i,button{
i,
button {
font-size: 14px !important; font-size: 14px !important;
} }
} }
...@@ -581,12 +622,8 @@ export default defineComponent({ ...@@ -581,12 +622,8 @@ export default defineComponent({
letter-spacing: 1px; letter-spacing: 1px;
} }
.el-tabs.el-tabs--top.el-tabs--border-card.header-navigation .el-tabs.el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:last-child,
> .el-tabs__header .el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:nth-child(2) {
.el-tabs__item:last-child,
.el-tabs--top.el-tabs--border-card.header-navigation
> .el-tabs__header
.el-tabs__item:nth-child(2) {
padding: 0; padding: 0;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment