mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2024-10-19

develop
王钦 1 month ago
parent
59041e96d8
commit
dbc9be06fb
2 changed files with 510 additions and 402 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      ruoyi-ui/src/views/JiHeExpressway/images/title/title-solar.png
  2. 894
      ruoyi-ui/src/views/login.vue

BIN
ruoyi-ui/src/views/JiHeExpressway/images/title/title-solar.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

894
ruoyi-ui/src/views/login.vue
View File

@ -1,461 +1,569 @@
<template> <template>
<div class="login"> <div class="solar">
<div class="login-content"> <gisMap2d ref="gisMap2d"
<div class="login-l"> :mapZoom = "mapZoom"
<div class="logo"><img src="../assets/images/login/logo.png" /></div> :mapCenter="mapCenter"
<span>齐鲁高速</span>
<span>济菏数智运营管理平台</span> radarSliderBottom="33%"
</div> radarSliderRight="14%"
<div class="login-r"> :mapBoxHeight="height" @clickPointEvent="clickPointEvent" widgetBoxDisplay="none"></gisMap2d>
<span class="title">欢迎登录</span> <div class="solar_left">
<img class="line" src="../assets/images/login/139.png" /> <div>
<el-form <Bg2 class="content-l-t">
ref="loginForm" <div class="focuse-header">
:model="loginForm" <div class="title">重点数据</div>
:rules="loginRules" </div>
class="login-form" <div class="content-l-t-content">
><el-form-item prop="username"> <div class="content-k1">
<el-input <div>当年累计发电量</div>
v-model="loginForm.username" <div class="content-kk">
type="text" <div v-for="(item, index) in titles[0].value">{{ item }}</div>
auto-complete="off" </div>
placeholder="请输入用户名" <div class="content-unit" style="margin-top: 0px;">万度</div>
class="username" </div>
> <div class="content-k1">
<img <div>当年累计用电量</div>
slot="prefix" <div class="content-kk">
src="../assets/images/login/user.png" <div v-for="(item, index) in titles[1].value">{{ item }}</div>
class="el-input__icon input-icon" </div>
/> <div class="content-unit">万度</div>
</el-input> </div>
</el-form-item> <div class="content-k1">
<el-form-item prop="password"> <div>今日累计发电量</div>
<el-input <div class="content-ll">
v-model="loginForm.password" <div class="content-llc">
type="password" <div v-for="(item, index) in 10"></div>
auto-complete="off" </div>
placeholder="请输入密码" </div>
@keyup.enter.native="handleLogin" <div class="content-unit">{{ titles[2].value }}度</div>
class="password" </div>
> <div class="content-k1">
<img <div>今日累计用电量</div>
slot="prefix" <div class="content-ll">
src="../assets/images/login/password.png" <div class="content-llc">
class="el-input__icon input-icon" <div v-for="(item, index) in 24"></div>
/> </div>
</el-input> </div>
</el-form-item> <div class="content-unit">{{ titles[2].value }}度</div>
<Verify </div>
@success="capctchaCheckSuccess" </div>
:mode="'pop'" </Bg2>
:captchaType="'blockPuzzle'" </div>
:imgSize="{ width: '330px', height: '155px' }" <div>
ref="verify" <Bg2 class="content-l-t">
></Verify> <div class="focuse-header">
<el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox> <div class="title">设备统计</div>
<el-form-item> </div>
<el-button <div class="content-l-sec-content">
class="btn" <div id="chartp1" class="secleft"></div>
:loading="loading" <div class="secright">
size="medium" <div class="d1"><span>1000</span> 个</div>
type="goon" <div class="d2">设备总数</div>
style="width: 100%" <div class="d1"><span>10</span> 个</div>
@click.native.prevent="handleLogin" <div class="d2">放电异常设备</div>
> </div>
<span v-if="!loading">登 录</span> </div>
<span v-else>登 录 中...</span> </Bg2>
</el-button> </div>
<div style="float: right" v-if="register"> <div>
<router-link class="link-type" :to="'/register'" <Bg2 class="content-l-t">
>立即注册</router-link <div class="focuse-header">
> <div class="title">环境贡献</div>
</div> </div>
</el-form-item> <div class="content-l-third-content">
</el-form> <div class="thirditem">
</div> <img :src="require('@screen/images/solar/CO2.png')" />
</div> <div class="thirdNum"><span>88.88</span>吨</div>
<div>CO₂减排</div>
<!-- 底部 --> </div>
<div class="el-login-footer"> <div class="thirditem">
<!-- <span>Copyright ©hamdell All Rights Reserved.</span> --> <img :src="require('@screen/images/solar/tree.png')" />
<div class="thirdNum"><span>88.88</span>棵</div>
<div>等效植树</div>
</div>
<div class="thirditem">
<img :src="require('@screen/images/solar/coal.png')" />
<div class="thirdNum"><span>8888</span>Kg</div>
<div>节约标准煤</div>
</div>
</div>
</Bg2>
</div>
</div>
<div class="solar_right">
<div>
<Bg2 class="content-l-t" style="width:420px;">
<div class="focuse-header">
<div class="title2"></div>
</div>
<div class="content-box">
<div class="box-title " style="margin-top: 15px;">
<span>今日发电统计</span>
<span style="margin-left: 140px;">总计：{{ chart1Total1 }}度</span>
</div>
<div id="charts1" class="chart"></div>
<div class="box-title " style="margin-top: 15px;">
<span>今日用电统计</span>
<span style="margin-left: 140px;">总计：{{ chart1Total1 }}度</span>
</div>
<div id="charts1" class="chart"></div>
<div class="box-title " style="margin-top: 15px;">
<span>今日功率统计</span>
<span style="margin-left: 140px;">总计：{{ chart1Total3 }}千瓦</span>
</div>
<div id="charts1" class="chart"></div>
</div>
</Bg2>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import Verify from "@/components/Verifition/Verify";
import { getCaptchaOnOff } from "@/api/login.js";
import { listOrder } from "@/api/payment/order";
import { getUserDeptId } from "@/api/system/user";
import { listTunnels } from "@/api/equipment/tunnel/api.js";
import { getConfigKey } from "@/api/system/config.js";
import Bg2 from "@screen/components/Decorations/bg-2.vue";
import Bg2 from "@screen/components/Decorations/bg-2.vue"
import request from "@/utils/request";
import * as echarts from "echarts";
export default { export default {
components: { Verify, Bg2 }, components: {
name: "Login", Bg2
},
name: "Soler",
data() { data() {
return { return {
title: "", // 系统标题 titles: [
cookiePassword: "", { icon: 'total.png', label: '当年累计发电量', unit: '度', value: '0022.4512' },
loginForm: { { icon: 'used.png', label: '当年累计用电量', unit: '度', value: '0022.4512' },
// username: "admin", { icon: 'total.png', label: '今日累计发电量', unit: '度', value: '5555' },
// password: "dxc123!@#", { icon: 'used.png', label: '今日累计用电量', unit: '度', value: '6666' },
//dxc123!@# { icon: 'CO2.png', label: 'CO₂减排', unit: 'kg', value: '7777' },
username: "", { icon: 'tree.png', label: '等效植树', unit: '棵', value: '8888' },
password: "", { icon: 'coal.png', label: '节约标准煤', unit: 'kg', value: '-' },
rememberMe: false, { icon: 'error.png', label: '放电异常设备', unit: '个', value: '-' },
code: "",
uuid: "",
},
loginRules: {
username: [
{ required: true, trigger: "blur", message: "请输入您的账号" },
],
password: [
{ required: true, trigger: "blur", message: "请输入您的密码" },
], ],
}, chartp1: null,
chart1: null,
chart2: null,
chart3: null,
chart1Total1: '-',
chart1Total2: '-',
chart1Total3: '-',
loading: false, loading: false,
// 验证码开关
captchaOnOff: false,
// 注册开关
register: false,
redirect: undefined,
}; };
}, },
watch: { mounted() {
$route: { this.initTotal();
handler: function (route) { this.initChart();
this.redirect = route.query && route.query.redirect;
}, },
immediate: true, methods: {
initTotal() {
this.initP1();
}, },
initP1() {
const _chartsOptions = {
tooltip: {
trigger: 'item',
position: ['80%', '50%']
}, },
created() { series: [
this.getCookie(); {
//this.getCaptchaOnOffFun(); name: '设备统计',
this.title = systemConfig.title(systemConfig.systemType); type: 'pie',
radius: '70%',
center: ['50%', '50%'],
avoidLabelOverlap: false,
data: [
{ value: 900, name: '正常设备总数', itemStyle: { color: '#38737f' } },
{ value: 100, name: '异常设备数量', itemStyle: { color: '#9ff501' } },
],
label: {
show: false,
}, },
methods: { labelLine: {
// 获取验证码是否开启 show: false,
getCaptchaOnOffFun() { }
getCaptchaOnOff().then((response) => { }
this.captchaOnOff = response.captchaOnOff; ]
}); }
if (!this.chartp1) {
this.chartp1 = echarts.init(document.getElementById("chartp1"));
let option1 = JSON.parse(JSON.stringify(_chartsOptions));
this.chartp1.setOption(option1);
this.chartp1.resize();
}
}, },
// 验证码
capctchaCheckSuccess(params) { initChart(){
this.loginForm.code = params.captchaVerification; const _chartsOptions = {
this.loading = true; color:['#00bead'],
console.log(this.loginForm.rememberMe, "======================="); title: {
if (this.loginForm.rememberMe == true) { text: '度',
Cookies.set("username", this.loginForm.username, { expires: 30 }); textStyle:{
Cookies.set("password", encrypt(this.loginForm.password), { color:'#E5E7E8',
expires: 30, fontSize: 15,
}); fontStyle:'normal'
Cookies.set("rememberMe", this.loginForm.rememberMe, { expires: 30 });
} else {
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove("rememberMe");
}
this.$store
.dispatch("Login", this.loginForm)
.then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(() => {});
})
.catch(() => {
this.loading = false;
});
}, },
getCookie() { top:'10px',
const username = Cookies.get("username"); left: '10px'
const password = Cookies.get("password"); },
const rememberMe = Cookies.get("rememberMe"); tooltip: {
this.loginForm = { trigger: 'axis'
username: username === undefined ? this.loginForm.username : username,
password:
password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
};
}, },
handleLogin() { xAxis: {
if (this.captchaOnOff) { type: 'category',
this.$refs.loginForm.validate((valid) => { data: ['0点', '1点', '2点','3点', '4点','5点','6点','7点','8点', '9点','10点','11点',
if (valid) { '12点','13点','14点','15点','16点','17点','18点','19点','20点','21点','22点','23点'],
this.$refs.verify.show(); axisLine:{
show:true,
lineStyle:{
color:'#fff'
} }
}); },
} else { axisTick:{
if (this.loginForm.rememberMe == true) { show:false,
Cookies.set("username", this.loginForm.username, { expires: 30 }); },
Cookies.set("password", encrypt(this.loginForm.password), { axisLabel: {
expires: 30, align: "center",
}); rotate: "1",
Cookies.set("rememberMe", this.loginForm.rememberMe, { expires: 30 }); margin: 20,
} else { textStyle: {
Cookies.remove("username"); fontSize: 10,
Cookies.remove("password"); color: "#E5E7E8",
Cookies.remove("rememberMe");
}
this.$store
.dispatch("Login", this.loginForm)
.then(() => {
this.$store.commit("menu/resetRecent");
// this.$router.push({ path: this.redirect || "/" }).catch(() => {});
this.$router.push({ path: "/" }).catch(() => {});
// this.getManageStation();
})
.catch(() => {
this.loading = false;
});
} }
}, },
getManageStation() {
getConfigKey("sd.moduleSwitch").then((res) => {
console.log(res, "管理站01");
this.$cache.local.set("manageStation", res.msg);
});
getConfigKey("sd.navigationBar").then((res) => {
console.log(res, "res");
let sideTheme = "theme-blue";
if (res.msg == "0") {
sideTheme = "theme-dark";
} else {
sideTheme = "theme-blue";
}
// console.log(res, "是否胡山隧道，胡山单独导航栏样式");
this.$cache.local.set("navigationBar", res.msg);
this.$store.dispatch("settings/changeSetting", {
key: "sideTheme",
value: sideTheme,
});
// this.sideTheme = val;
this.$cache.local.set(
"layout-setting",
`{
"topNav":${this.$store.state.settings.topNav},
"tagsView":${this.$store.state.settings.tagsView},
"weatherView":${this.$store.state.settings.weatherView},
"fixedHeader":${this.$store.state.settings.fixedHeader},
"sidebarLogo":${this.$store.state.settings.sidebarLogo},
"dynamicTitle":${this.$store.state.settings.dynamicTitle},
"sideTheme":"${sideTheme}",
"theme":"${this.$store.state.settings.theme}"
}`
);
// console.log(this.$store.state.settings.sideTheme)
});
}, },
yAxis: {
type: 'value',
axisLabel: {
show: false,
color: "#E5E7E8",
textStyle: {
fontSize: 10,
},
},
axisLine:{
show:true,
lineStyle:{
color:'#fff'
}
},
splitLine: {
show: false
},
},
grid: {
left: "40px",
right: "20px",
top: "10px",
bottom: "0px",
containLabel: true,
},
series: [
{
data: [],
type: 'line',
smooth: true
}
]
}
this.chart1 = echarts.init(document.getElementById("charts1"));
let option1 = JSON.parse(JSON.stringify(_chartsOptions));
const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
let total = 0;
this.chart1Total1 = total;
option1.series[0].data = data;
this.chart1.setOption(option1);
this.chart1.resize();
return;
if(!this.chart1){
this.chart1 = echarts.init(document.getElementById("charts1"));
let option1 = JSON.parse(JSON.stringify(_chartsOptions));
request({
url: 'business/device/properties/history/oneDay/dailyAccumulatedCharge',
method: 'get'
}).then(result => {
if (result.code != 200) return;
const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
let total = 0;
for(let i in result.data){
total += result.data[i]
const idx = parseInt(i.substr(11,2));
data[idx] = result.data[i];
}
this.chart1Total1 = total;
option1.series[0].data = data;
this.chart1.setOption(option1);
this.chart1.resize();
})
this.chart2 = echarts.init(document.getElementById("charts2"));
let option2 = JSON.parse(JSON.stringify(_chartsOptions));
request({
url: 'business/device/properties/history/oneDay/cumulativeElectricityConsumptionOnTheDay',
method: 'get'
}).then(result => {
if (result.code != 200) return;
const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
let total = 0;
for(let i in result.data){
total += result.data[i]
const idx = parseInt(i.substr(11,2));
data[idx] = result.data[i];
}
this.chart1Total2 = total;
option2.series[0].data = data;
this.chart2.setOption(option2);
this.chart2.resize();
})
// 发电功率
this.chart3 = echarts.init(document.getElementById("charts3"));
let option3 = JSON.parse(JSON.stringify(_chartsOptions));
request({
url: 'business/device/properties/history/oneDay/generatingPower',
method: 'get'
}).then(result => {
if (result.code != 200) return;
const data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
let total = 0;
for(let i in result.data){
total += result.data[i]
const idx = parseInt(i.substr(11,2));
data[idx] = result.data[i];
}
this.chart1Total3 = total;
option3.series[0].data = data;
this.chart3.setOption(option3);
this.chart3.resize()
})
}
window.addEventListener("resize", () => {
if(this.chart1){
this.chart1.resize();
this.chart2.resize();
this.chart3.resize();
}
});
}
}, },
}; };
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input__inner { .solar {
background-color: #fff !important; width: 100%;
height: 34px; display: flex;
font-size: 14px; justify-content: space-between;
font-weight: 400; height: 100vh;
color: #999999;
border: 1px solid rgba(0, 145, 67, 0.5);
caret-color: #39adff;
// margin-left: 20px;
}
::v-deep .el-checkbox__label {
color: #999;
font-size: 12px !important;
font-weight: 400;
color: #999 !important;
margin-bottom: 10px;
margin-top: 6px;
}
::v-deep .el-input__inner::placeholder {
color: #999999;
}
.login { .solar_left {
position: relative; position: absolute;
width: 420px;
left: 20px;
top: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%; height: 100%;
background-image: url("../assets/images/login/login-background.png"); gap: 10px;
// background-size: 100% auto; }
background-repeat: no-repeat;
background-size: 100% 100%;
}
.login-content { .solar_right {
position: absolute; position: absolute;
left: 50%; right: 20px;
top: 367px; top: 20px;
transform: translateX(-50%); width: 480px;
width: 700px; overflow: hidden;
height: 367px;
background: rgba(10, 82, 123, 0.6);
display: flex; display: flex;
.login-l { flex-direction: column;
// width: 300px; align-items: flex-end;
margin-top: 42px; overflow: hidden;
margin-left: 25px;
.logo {
width: 177px;
height: 135px;
margin: auto;
margin-bottom: 10px;
img {
width: 100%;
height: 100%; height: 100%;
} }
} }
span {
display: block; .content-l-t {
font-family: PingFang; ::v-deep {
font-weight: 600; .BackgroundClip.bg {
font-size: 30px; display: flex;
color: rgba(42, 217, 253, 0.7); flex-direction: column;
line-height: 35px; justify-content: space-around;
text-align: center;
margin-top: 20px;
} }
} }
.login-r {
width: 320px;
height: 290px;
margin-right: 27px;
margin-top: 42px;
margin-left: 20px;
background: #c9e5eb;
padding: 25px 22px;
.title { .focuse-header {
display: block;
width: 100%; width: 100%;
font-family: PingFang;
font-weight: 600;
font-size: 28px;
color: #009143;
text-align: center;
}
.line {
width: 210px;
height: 3px;
display: block;
margin: auto;
margin-bottom: 20px;
}
.btn {
margin: auto;
width: 155px;
height: 34px;
background: #009143;
border-radius: 1px;
color: #fff;
font-size: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: space-between;
.title2 {
width: 220px;
height: 40px;
margin-top: 10px;
margin-left: 10px;
display: flex;
align-items: center;
background: url("~@screen/images/title/title-solar.png") no-repeat;
background-size: 100% 100%;
}
.title {
font-size: 24px;
font-family: YouSheBiaoTiHei;
font-weight: 400;
margin-left: 30px;
margin-top: 5px; margin-top: 5px;
background-image: -webkit-linear-gradient(bottom, #217176, #34adb6, #3fd6e1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} }
} }
// .loginTitle {
// display: inline-flex;
// width: 100%;
// height: 45px;
// font-size: 30px;
// font-family: Source Han Sans CN, Source Han Sans CN;
// font-weight: 500;
// color: #ffffff;
// justify-content: center;
// align-items: center;
// }
.el-input { .content-l-sec-content {
width: 275px; display: flex;
height: 36px; flex-direction: row;
border-radius: 2px;
background: #fff;
padding-left: 20px;
::v-deep .el-input__inner { .secleft {
font-size: 14px !important; height: 180px;
width: 250px;
} }
input { .secright {
border: 0; display: flex;
height: 36px; justify-content: center;
align-items: center;
flex-direction: column;
gap: 10px;
font-size: 14px;
.d1 {
font-size: 12px;
span {
font-size: 30px;
font-weight: bold;
color: #d3d51c;
} }
} }
}
}
.content-l-t-content {
margin-top: 10px;
padding: 20px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 15px 15px;
// justify-content: center;
flex: 1;
flex-wrap: wrap;
.content-k1 {
display: flex;
flex-direction: row;
.content-ll {
flex: 1;
width: 200px;
margin-right: 5px;
.content-llc {
display: flex;
flex-direction: row;
margin-left: 10px;
margin-top: 3px;
gap: 3px;
>div {
background-color: #9ff501;
width: 5px;
height: 17px;
}
.input-icon {
height: 20px;
width: 20px;
margin-right: 10px;
position: relative;
left: 10px;
top: 7px;
} }
} }
// .login-tip { .content-kk {
// font-size: 13px; display: flex;
// text-align: center; flex-direction: row;
// color: #bfbfbf; margin-left: 10px;
// } margin-right: 3px;
gap: 3px;
// .login-code { >div {
// width: 37%; border: 1px solid #0c7f8a;
// height: 35px; padding: 2px 5px;
// float: right; }
}
// img { .content-unit {
// cursor: pointer; font-size: 13px;
// vertical-align: middle;
// }
// }
.login-form{ margin-left: 2px;
::v-deep .el-form-item{ }
margin-bottom: 22px; }
} }
}
.el-login-footer { .content-l-third-content {
height: 40px; display: flex;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%; width: 100%;
text-align: center; margin: 20px 20px 20px 10px;
color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
}
.login-code-img { .thirditem {
height: 35px; flex: 1;
} display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
font-size: 14px;
/* 重置按钮 */ img {
.el-button--goon { width: 40px;
font-size: 24px; height: 40px;
font-weight: 400; margin-bottom: 10px;
color: #fff; }
width: 380px;
height: 55px; span {
background: #07caf6; font-size: 30px;
border-radius: 4px; font-weight: bold;
opacity: 1; color: #d3d51c;
border: none; }
}
}
} }
.el-button--goon:hover { .content-box {
flex: 1;
display: flex;
flex-direction: column;
} }
.box-title {
width: 100%;
height: 26px;
margin: 7px;
background: url("~@screen/images/title/title_bg_002.png") no-repeat;
span {
display: inline-block;
margin-left: 35px;
font-size: 16px;
font-family: Source Han Sans SC, Source Han Sans SC;
font-weight: 500;
color: #ffffff;
}
}
.chart{
height: 155px;
}
</style> </style>

Write Preview
Loading…
Cancel
Save