Skip to content

Y
yindong-tongbai-automation
Commit 857ab093 authored by lei's avatar lei
Browse files
Options

add:数据统计

parent 2e7c4ddf
Hide whitespace changes
Inline Side-by-side
Showing with 845 additions and 85 deletions
src/views/Screen/items/rydw.vue
View file @ 857ab093
......@@ -47,7 +47,7 @@
</div>
</div>
</div>
<!-- 状态统计组件 -->
<!-- 区域人数实时分布图 -->
<div class="sidebar-item status-box">
<div class="sub-title por"><span>区域人数实时分布图</span></div>
<div class="sub-con">
......
src/views/Screen/items/tjfx.vue
View file @ 857ab093
......@@ -57,7 +57,7 @@
</div>
</div>
<!-- 当月巡检情况分析 -->
<div class="jgg-item" v-for="item in 5" :key="item">
<div class="jgg-item">
<div class="jgg-item-title">当月巡检情况分析</div>
<div class="jgg-item-content">
<div class="monthly-inspection">
......@@ -82,23 +82,137 @@
</div>
</div>
<div class="monthly-inspection-bottom">
<div class="monthly-inspection-bottom-item">
<p> <i></i><span>报修率</span> <span>20%</span></p>
</div>
<div class="monthly-inspection-bottom-item">
<p> <i style="background: #F6890C;"></i><span>维修率</span> <span class="coyel">20%</span></p>
</div>
<div class="monthly-inspection-bottom-item">
<p><i></i><span>报修率</span> <span>20%</span></p>
</div>
<div class="monthly-inspection-bottom-item">
<p>
<i style="background: #f6890c"></i><span>维修率</span>
<span class="coyel">20%</span>
</p>
</div>
</div>
</div>
</div>
<div class="divider-line"></div>
<div class="divider-line one"></div>
<div class="divider-line two"></div>
</div>
<!-- 当年电力能耗数据分析 -->
<div class="jgg-item">
<div class="jgg-item-title">当年电力能耗数据分析</div>
<div class="jgg-item-content year-power-content">
<div
id="yearPower"
class="year-power-chart"
style="height: 100%; width: 100%"
></div>
</div>
</div>
<!-- 近7天各班次提升次数统计 -->
<div class="jgg-item">
<div class="jgg-item-title">近7天各班次提升次数统计</div>
<div class="jgg-item-content shift-lift-content">
<div id="shiftLift" style="height: 100%; width: 100%"></div>
</div>
</div>
<!-- 近一年巡检次数分析 -->
<div class="jgg-item">
<div class="jgg-item-title">近一年巡检次数分析</div>
<div class="jgg-item-content year-inspection-content">
<div
id="yearInspection"
class="year-inspection-chart"
style="height: 100%; width: 100%"
></div>
</div>
</div>
<!-- 各部门月巡检排行榜 -->
<div class="jgg-item">
<div class="jgg-item-title">各部门月巡检排行榜</div>
<div class="jgg-item-content department-rank-content">
<vue-seamless-scroll
:data="departmentRankData"
class="warp_ranking"
:class-option="classOption"
>
<ul>
<li
v-for="(item, index) in departmentRankData"
:key="index"
class="custom-item custom-item2"
>
<span class="custom-item-content custom-item-content2">{{
index + 1
}}</span>
<span class="custom-item-content custom-item-content2">{{
item.name
}}</span>
<div
class="custom-item-content custom-item-content2 progressbar"
>
<div
class="progress"
:style="{ width: progressWidth(item.value) }"
></div>
</div>
<span class="custom-item-content custom-item-content2">{{
item.value
}}</span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
<!-- 近一周设备维修信息 -->
<div class="jgg-item">
<div class="jgg-item-title">近一周设备维修信息</div>
<div class="jgg-item-content weekly-repair-content">
<div class="custom-header">
<span class="custom-header-item">设备名称</span>
<span class="custom-header-item">维修状态</span>
<span class="custom-header-item">维修人</span>
<span class="custom-header-item">维修日期</span>
</div>
<vue-seamless-scroll
:data="weeklyRepairData"
class="warp"
:class-option="classOption"
>
<ul>
<li
v-for="(item, index) in weeklyRepairData"
:key="index"
class="custom-item custom-item1"
>
<span
class="custom-item-content custom-item-content1"
v-text="item.name"
></span>
<span
class="custom-item-content custom-item-content1"
v-text="item.per"
></span>
<span
class="custom-item-content custom-item-content1"
v-text="item.status"
></span>
<span
class="custom-item-content custom-item-content1"
v-text="item.date"
></span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import Highcharts from "highcharts/highcharts";
import highcharts3d from "highcharts/highcharts-3d";
highcharts3d(Highcharts);
export default {
name: "tjfx",
data() {
......@@ -133,12 +247,13 @@ export default {
},
],
monthlyPowerData: [
{ value: 5, name: "采区域能耗", itemStyle: { color: "#3BAFF2" } },
{ value: 5, name: "选厂能耗", itemStyle: { color: "#0EFCFF" } },
{ value: 5, name: "冶炼能耗", itemStyle: { color: "#0EFF96" } },
{ value: 5, name: "尾矿库能耗", itemStyle: { color: "#FFDA0B" } },
{ value: 5, name: "排水能耗", itemStyle: { color: "#FF720B" } },
{ value: 5, name: "通风能耗", itemStyle: { color: "#FF5E71" } },
{ value: 555551, name: "采区", itemStyle: { color: "#3BAFF2" } },
{ value: 555551, name: "选厂", itemStyle: { color: "#0EFCFF" } },
{ value: 555551, name: "冶炼", itemStyle: { color: "#0EFF96" } },
{ value: 555551, name: "尾矿库", itemStyle: { color: "#FFDA0B" } },
{ value: 555551, name: "排水", itemStyle: { color: "#FF720B" } },
{ value: 555551, name: "提升机", itemStyle: { color: "#FF720B" } },
{ value: 555551, name: "通风", itemStyle: { color: "#FF5E71" } },
],
monthlyTishengData: [
{ value: 5, name: "1/01" },
......@@ -146,14 +261,480 @@ export default {
{ value: 5, name: "1/11" },
],
monthlyInspectionData: [],
yearPowerData: [
{ value: 5, name: "采区" },
{ value: 0, name: "选厂" },
{ value: 5, name: "冶炼" },
{ value: 0, name: "尾矿库" },
{ value: 9, name: "排水" },
{ value: 9, name: "提升机" },
{ value: 11, name: "通风" },
],
shiftLiftData: [
{ value: 10, name: "早班" },
{ value: 20, name: "中班" },
{ value: 30, name: "晚班" },
],
yearInspectionData: [
{ value: 10, name: "1月" },
{ value: 20, name: "2月" },
{ value: 30, name: "3月" },
{ value: 40, name: "4月" },
{ value: 50, name: "5月" },
{ value: 60, name: "6月" },
{ value: 70, name: "7月" },
{ value: 80, name: "8月" },
{ value: 70, name: "9月" },
{ value: 70, name: "10月" },
{ value: 70, name: "11月" },
{ value: 70, name: "12月" },
],
departmentRankData: [
{ name: "采区", value: 100 },
{ name: "选厂", value: 90 },
{ name: "冶炼", value: 80 },
{ name: "尾矿库", value: 70 },
{ name: "排水", value: 60 },
{ name: "提升机", value: 50 },
{ name: "通风", value: 40 },
],
classOption: {
singleHeight: 47,
hoverStop: true,
autoPlay: true,
},
weeklyRepairData: [
{
name: "一中风机一中风机",
per: "张三",
status: "维修中",
date: "2023-01-01",
},
{
name: "一中风机一中风机",
per: "李四",
status: "维修中",
date: "2023-01-01",
},
{
name: "一中风机一中风机",
per: "王五",
status: "维修中",
date: "2023-01-01",
},
{
name: "一中风机一中风机",
per: "赵六",
status: "维修中",
date: "2023-01-01",
},
{
name: "一中风机一中风机",
per: "王二",
status: "维修中",
date: "2023-01-01",
},
{
name: "一中风机一中风机",
per: "王三",
status: "维修中",
date: "2023-01-01",
},
{
name: "一中风机一中风机",
per: "王四",
status: "维修中",
date: "2023-01-01",
},
],
};
},
created() {},
mounted() {
this.monthlyPowerChart();
this.monthlyTishengChart();
this.yearPowerChart();
this.shiftLiftChart();
this.yearInspectionChart();
},
methods: {
departmentRank() {},
//控制进度条宽度
progressWidth(frequency) {
//最大值从recentSevDaysAlarmsData中获取，且保证位数为0
const maxFrequencyData = this.departmentRankData.reduce(
(max, item) => Math.max(max, Math.ceil(item.value / 10) * 10),
0
);
const width = (frequency / maxFrequencyData) * 100 + "%";
return width;
},
//近一年巡检次数分析chart
yearInspectionChart() {
let myChart = echarts.init(document.getElementById("yearInspection"));
let xAxisData = this.yearInspectionData.map((item) => item.name);
let yAxisData = this.yearInspectionData.map((item) => item.value);
let option = {
title: {
text: "",
x: "center",
y: "4%",
textStyle: {
color: "#fff",
fontSize: "12",
},
subtextStyle: {
color: "#90979c",
fontSize: "12",
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
top: "5%",
right: "3%",
left: "8%",
bottom: "12%",
},
xAxis: [
{
type: "category",
data: xAxisData,
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.12)",
},
},
axisLabel: {
show: true,
margin: 10,
color: "#fff",
textStyle: {
fontSize: 12,
},
},
},
],
yAxis: [
{
axisLabel: {
show: true,
formatter: "{value}",
color: "#B7CCDA",
textStyle: {
fontSize: 14,
},
},
axisTick: {
//y轴刻度线
show: true,
color: "#e2e9ff",
},
axisLine: {
show: true,
color: "#e2e9ff",
lineStyle: {
color: "rgba(255,255,255,0.12)",
},
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.12)",
},
},
},
],
series: [
{
type: "bar",
data: yAxisData,
barWidth: "16px",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#37BBFF", // 0% 处的颜色
},
{
offset: 1,
color: "#1C3454", // 100% 处的颜色
},
],
false
),
// barBorderRadius: [30, 30, 8, 8],
// shadowColor: 'rgba(0,160,221,1)',
// shadowBlur: 4,
},
},
label: {
normal: {
show: false,
lineHeight: 20,
width: 10,
height: 20,
backgroundColor: "rgba(0,160,221,0.1)",
// borderRadius: 200,
},
},
},
],
};
myChart.setOption(option);
setTimeout(() => {
myChart.resize();
}, 600);
},
//近7日提升次数统计chart
shiftLiftChart() {
let option = {
chart: {
type: "pie", //饼图
options3d: {
enabled: true, //使用3d功能
alpha: 60, //延y轴向内的倾斜角度
beta: 0,
},
backgroundColor: "rgba(64, 158, 255, 0)", // 不显示背景色
// spacingTop: -200, // 增加顶部间距
},
legend: {
enabled: true,
align: "right",
verticalAlign: "middle", // 保持垂直居中
layout: "vertical",
y: 0, // 移除y偏移
x: -100, // 向左移动10px
itemMarginTop: 5, // 减小图例项间距
itemMarginBottom: 5,
itemStyle: {
color: "#fff",
fontSize: "12px", // 缩小字体
},
labelFormatter: function () {
return `${this.name}: ${this.y}`; // 在图例中显示数据
},
},
title: {
text: "", //图表的标题文字
},
subtitle: {
text: "", //副标题文字
},
plotOptions: {
pie: {
size: "100%",
allowPointSelect: false,
cursor: "pointer",
innerSize: "65%",
showInLegend: true,
center: ["45%", "44%"],
depth: 15,
dataLabels: {
enabled: true,
format: "{point.y}次",
style: {
fontSize: "12px",
textOutline: "none",
// 修改为使用回调函数获取颜色
color: null, // 这里设置为null，在formatter中处理颜色
},
distance: 20,
// 添加formatter函数动态设置颜色
formatter: function () {
return `<span style="color:${this.point.color}">${this.point.y}次</span>`;
},
},
},
},
credits: {
enabled: false,
},
series: [
{
type: "pie",
name: "设备统计",
showInLegend: true,
data: [
{
name: "早班",
y: this.shiftLiftData[0].value,
color: "rgba(55, 184, 251, 1)",
}, // 高数据部分
{
name: "中班",
y: this.shiftLiftData[1].value,
color: "rgba(255, 188, 28, 1)",
}, // 低数据部分
{
name: "晚班",
y: this.shiftLiftData[2].value,
color: "rgba(9, 236, 185, 1)",
},
],
startAngle: 0, //起始角度,
label: {
show: false,
position: "outside",
formatter: "{b}：{d}%",
normal: {
show: false,
fontSize: 40,
formatter: [" {a|{b}：{d}%}"].join("\n"),
rich: {
a: {
left: 20,
padding: [0, -140, 0, -180],
},
},
},
},
},
],
};
Highcharts.chart("shiftLift", option);
},
//当年电力能耗数据分析chart
yearPowerChart() {
let myChart = echarts.init(document.getElementById("yearPower"));
let xAxisData = this.yearPowerData.map((item) => item.name);
let yAxisData = this.yearPowerData.map((item) => item.value);
let option = {
title: {
text: "",
x: "center",
y: "4%",
textStyle: {
color: "#fff",
fontSize: "12",
},
subtextStyle: {
color: "#90979c",
fontSize: "12",
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
top: "5%",
right: "3%",
left: "8%",
bottom: "12%",
},
xAxis: [
{
type: "category",
data: xAxisData,
axisLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.12)",
},
},
axisLabel: {
show: true,
margin: 10,
color: "#fff",
textStyle: {
fontSize: 12,
},
},
},
],
yAxis: [
{
axisLabel: {
show: true,
formatter: "{value}",
color: "#B7CCDA",
textStyle: {
fontSize: 14,
},
},
axisTick: {
//y轴刻度线
show: true,
color: "#e2e9ff",
},
axisLine: {
show: true,
color: "#e2e9ff",
lineStyle: {
color: "rgba(255,255,255,0.12)",
},
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.12)",
},
},
},
],
series: [
{
type: "bar",
data: yAxisData,
barWidth: "16px",
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#37BBFF", // 0% 处的颜色
},
{
offset: 1,
color: "#1C3454", // 100% 处的颜色
},
],
false
),
// barBorderRadius: [30, 30, 8, 8],
// shadowColor: 'rgba(0,160,221,1)',
// shadowBlur: 4,
},
},
label: {
normal: {
show: false,
lineHeight: 20,
width: 10,
height: 20,
backgroundColor: "rgba(0,160,221,0.1)",
// borderRadius: 200,
},
},
},
],
};
myChart.setOption(option);
setTimeout(() => {
myChart.resize();
}, 600);
},
//当月电力能耗情况chart
monthlyPowerChart() {
let myChart = echarts.init(document.getElementById("monthlyPower"));
......@@ -162,7 +743,7 @@ export default {
radius: [30, "90%"],
},
angleAxis: {
max: 10,
max: 5555551,
startAngle: 90,
show: false, // 显示坐标轴
},
......@@ -197,7 +778,7 @@ export default {
type: "bar",
coordinateSystem: "polar",
stack: "a",
data: this.monthlyPowerData.map(() => 10), // 每个项总长度10
data: this.monthlyPowerData.map(() => 5555555), // 每个项总长度10
itemStyle: {
color: "RGBA(28, 57, 92, 0.3)",
},
......@@ -322,10 +903,9 @@ export default {
color: #fff;
font-size: 24px;
position: relative;
// 确保每个网格项不会超出
min-height: 0; // 关键修复项
overflow: hidden; // 防止内容溢出
// 确保每个网格项不会超出
min-height: 0; // 关键修复项
overflow: hidden; // 防止内容溢出
.jgg-item-title {
font-size: 22px;
......@@ -398,13 +978,13 @@ export default {
.monthly-inspection {
display: grid;
grid-template-rows: 3fr 1fr; // 使用fr单位确保比例分配
height:100%; // 确保高度不超出父容器
height: 100%; // 确保高度不超出父容器
overflow: hidden;
.monthly-inspection-top {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row: span 3; // 占据前4行
min-height: 0; // 添加这个属性防止内容撑开
min-height: 0; // 添加这个属性防止内容撑开
overflow: hidden; // 防止内容溢出
.inspection-item {
......@@ -450,16 +1030,16 @@ export default {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-row: span 1; // 占据最后1行
min-height: 0; // 添加这个属性防止内容撑开
min-height: 0; // 添加这个属性防止内容撑开
padding-bottom: 20px;
overflow: hidden; // 防止内容溢出
.monthly-inspection-bottom-item{
.monthly-inspection-bottom-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
p{
display: flex;
p {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
......@@ -467,26 +1047,26 @@ export default {
border-radius: 15px;
background: rgba(255, 255, 255, 0.1);
margin: 0px;
i{
i {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #00F3E5;
background: #00f3e5;
margin-right: 8px;
}
span:nth-child(2){
span:nth-child(2) {
font-size: 18px;
color: #fff;
}
span:nth-child(3){
span:nth-child(3) {
font-size: 18px;
color: #00F3E5;
color: #00f3e5;
margin-left: 20px;
}
.coyel{
color:#F6890C !important;
.coyel {
color: #f6890c !important;
}
}
}
......@@ -511,32 +1091,169 @@ export default {
margin: 0px;
li {
width: 280px;
height: 28px;
height: 22px;
background: #173253;
border-radius: 14px;
padding-left: 30px;
line-height: 28px;
font-size: 22px;
line-height: 22px;
font-size: 18px;
font-family: "fangsong";
.legend-color {
display: inline-block;
width: 15px;
height: 8px;
margin-right: 25px;
margin-right: 20px;
margin-bottom: 2px;
}
span:nth-child(2) {
// 选择第二个span
color: #fff; // 示例样式
display: inline-block;
width: 110px;
margin-right: 22px;
width: 70px;
margin-right: 18px;
line-height: 22px;
}
}
}
}
}
.department-rank-content {
padding-top: 5px;
.warp_ranking {
height: 100%;
width: 100%;
margin: 0 auto;
overflow: hidden;
ul {
list-style: none;
padding-left: 10px;
margin: 10px auto 0;
width: 100%;
li {
&.custom-item {
width: calc(100% - 10px);
display: grid;
grid-template-columns: 0.5fr 1fr 3fr 0.5fr;
text-align: center;
margin-bottom: 5px;
height: 36px;
font-size: 16px;
color: #bbd7ea;
position: relative;
background-color: rgba(61, 98, 147, 0.2);
span {
display: flex;
justify-content: center;
align-items: center;
}
}
&.custom-item2 {
display: grid;
grid-template-columns: 0.2fr 0.5fr 3fr 0.5fr;
text-align: center;
line-height: 36px;
.progressbar {
display: block;
width: 100%;
height: 8px;
margin: auto 0; // 添加垂直居中
background-color: RGBA(29, 47, 71, 1);
.progress {
height: 100%;
background: linear-gradient(
270deg,
#37bbff 0%,
#1c3454 100%
);
}
}
}
span:nth-child(1),
span:nth-child(4) {
color: rgba(55, 187, 255, 1);
}
}
/**选中前三个li */
li:nth-child(-n + 3) {
.progressbar {
.progress {
background: linear-gradient(
270deg,
#ffbe23 0%,
rgba(255, 190, 35, 0.05) 100%
);
}
}
/**选中第一个和第二个span */
span:nth-child(1),
span:nth-child(4) {
color: #ffbe23;
}
}
}
}
}
.weekly-repair-content {
.custom-header {
width: 95%;
margin: 0 auto;
display: grid;
grid-template-columns: 3fr 1fr 1fr 2fr;
text-align: center;
color: #2ed5ff;
margin-bottom: 10px;
font-weight: bold;
font-size: 18px;
}
.custom-item {
width: 95%;
display: grid;
grid-template-columns: 3fr 1fr 1fr 2fr;
text-align: center;
}
.custom-header-item {
display: flex;
justify-content: center;
align-items: center;
}
.warp {
height: 100%;
width: 95%;
margin: 0 auto;
overflow: hidden;
ul {
list-style: none;
padding: 0;
margin: 10px auto 0;
width: 100%;
li.custom-item {
width: 100%;
display: grid;
grid-template-columns: 3fr 1fr 1fr 2fr;
text-align: center;
margin-bottom: 5px;
height: 36px;
font-size: 16px;
color: #bbd7ea;
position: relative;
background-color: rgba(61, 98, 147, 0.2);
span {
display: flex;
justify-content: center;
align-items: center;
}
}
li.custom-item2 {
display: grid;
grid-template-columns: 1fr 1fr 3fr 2fr;
text-align: center;
}
}
}
}
.divider-line {
position: absolute;
left: 50%;
......@@ -551,6 +1268,17 @@ export default {
rgba(255, 255, 255, 0.5) 5px,
rgba(255, 255, 255, 0.5) 10px
);
&.one {
left: 32%;
height: 120px;
top: 45%;
}
&.two {
top: 45%;
left: 66%;
height: 120px;
}
}
}
}
......
src/views/login.vue
View file @ 857ab093
<template>
<div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
>
<h3 class="title">桐柏银洞坡金矿自动化</h3>
<el-form-item prop="username">
<el-input
......@@ -9,7 +14,11 @@
auto-complete="off"
placeholder="账号"
>
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
<svg-icon
slot="prefix"
icon-class="user"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item prop="password">
......@@ -20,7 +29,11 @@
placeholder="密码"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
<svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaEnabled">
......@@ -31,26 +44,36 @@
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
<svg-icon
slot="prefix"
icon-class="validCode"
class="el-input__icon input-icon"
/>
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
<img :src="codeUrl" @click="getCode" class="login-code-img" />
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-form-item style="width:100%;">
<el-checkbox
v-model="loginForm.rememberMe"
style="margin: 0px 0px 25px 0px"
>记住密码</el-checkbox
>
<el-form-item style="width: 100%">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:100%;"
style="width: 100%"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
<div style="float: right;" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
<div style="float: right" v-if="register">
<router-link class="link-type" :to="'/register'"
>立即注册</router-link
>
</div>
</el-form-item>
</el-form>
......@@ -64,7 +87,7 @@
<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
import { encrypt, decrypt } from "@/utils/jsencrypt";
export default {
name: "Login",
......@@ -76,33 +99,33 @@ export default {
password: "",
rememberMe: false,
code: "",
uuid: ""
uuid: "",
},
loginRules: {
username: [
{ required: true, trigger: "blur", message: "请输入您的账号" }
{ required: true, trigger: "blur", message: "请输入您的账号" },
],
password: [
{ required: true, trigger: "blur", message: "请输入您的密码" }
{ required: true, trigger: "blur", message: "请输入您的密码" },
],
code: [{ required: true, trigger: "change", message: "请输入验证码" }]
code: [{ required: true, trigger: "change", message: "请输入验证码" }],
},
loading: false,
// 验证码开关
captchaEnabled: true,
// 注册开关
register: false,
redirect: undefined
redirect: undefined,
};
},
watch: {
$route: {
handler: function(route) {
console.log(route,'route')
handler: function (route) {
console.log(route, "route");
this.redirect = route.query && route.query.redirect;
},
immediate: true
}
immediate: true,
},
},
created() {
this.getCode();
......@@ -110,8 +133,9 @@ export default {
},
methods: {
getCode() {
getCodeImg().then(res => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
getCodeImg().then((res) => {
this.captchaEnabled =
res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (this.captchaEnabled) {
this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid;
......@@ -121,38 +145,46 @@ export default {
getCookie() {
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe')
const rememberMe = Cookies.get("rememberMe");
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
password:
password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
};
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true
this.loading = true;
if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 })
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 })
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 })
Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), {
expires: 30,
});
Cookies.set("rememberMe", this.loginForm.rememberMe, {
expires: 30,
});
} else {
Cookies.remove("username")
Cookies.remove("password")
Cookies.remove('rememberMe')
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
if (this.captchaEnabled) {
this.getCode()
}
})
this.$store
.dispatch("Login", this.loginForm)
.then(() => {
this.$router.push({ path: "/screen" }).catch(() => {});
})
.catch(() => {
this.loading = false;
if (this.captchaEnabled) {
this.getCode();
}
});
}
})
}
}
});
},
},
};
</script>
......
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