Skip to content

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

add:数据统计

parent 2e7c4ddf
Show 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 @@ ...@@ -47,7 +47,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 状态统计组件 --> <!-- 区域人数实时分布图 -->
<div class="sidebar-item status-box"> <div class="sidebar-item status-box">
<div class="sub-title por"><span>区域人数实时分布图</span></div> <div class="sub-title por"><span>区域人数实时分布图</span></div>
<div class="sub-con"> <div class="sub-con">
......
src/views/Screen/items/tjfx.vue
View file @ 857ab093
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
</div> </div>
</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-title">当月巡检情况分析</div>
<div class="jgg-item-content"> <div class="jgg-item-content">
<div class="monthly-inspection"> <div class="monthly-inspection">
...@@ -83,22 +83,136 @@ ...@@ -83,22 +83,136 @@
</div> </div>
<div class="monthly-inspection-bottom"> <div class="monthly-inspection-bottom">
<div class="monthly-inspection-bottom-item"> <div class="monthly-inspection-bottom-item">
<p> <i></i><span>报修率</span> <span>20%</span></p> <p><i></i><span>报修率</span> <span>20%</span></p>
</div> </div>
<div class="monthly-inspection-bottom-item"> <div class="monthly-inspection-bottom-item">
<p> <i style="background: #F6890C;"></i><span>维修率</span> <span class="coyel">20%</span></p> <p>
<i style="background: #f6890c"></i><span>维修率</span>
<span class="coyel">20%</span>
</p>
</div> </div>
</div> </div>
</div> </div>
</div> </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 class="divider-line"></div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import Highcharts from "highcharts/highcharts";
import highcharts3d from "highcharts/highcharts-3d";
highcharts3d(Highcharts);
export default { export default {
name: "tjfx", name: "tjfx",
data() { data() {
...@@ -133,12 +247,13 @@ export default { ...@@ -133,12 +247,13 @@ export default {
}, },
], ],
monthlyPowerData: [ monthlyPowerData: [
{ value: 5, name: "采区域能耗", itemStyle: { color: "#3BAFF2" } }, { value: 555551, name: "采区", itemStyle: { color: "#3BAFF2" } },
{ value: 5, name: "选厂能耗", itemStyle: { color: "#0EFCFF" } }, { value: 555551, name: "选厂", itemStyle: { color: "#0EFCFF" } },
{ value: 5, name: "冶炼能耗", itemStyle: { color: "#0EFF96" } }, { value: 555551, name: "冶炼", itemStyle: { color: "#0EFF96" } },
{ value: 5, name: "尾矿库能耗", itemStyle: { color: "#FFDA0B" } }, { value: 555551, name: "尾矿库", itemStyle: { color: "#FFDA0B" } },
{ value: 5, name: "排水能耗", itemStyle: { color: "#FF720B" } }, { value: 555551, name: "排水", itemStyle: { color: "#FF720B" } },
{ value: 5, name: "通风能耗", itemStyle: { color: "#FF5E71" } }, { value: 555551, name: "提升机", itemStyle: { color: "#FF720B" } },
{ value: 555551, name: "通风", itemStyle: { color: "#FF5E71" } },
], ],
monthlyTishengData: [ monthlyTishengData: [
{ value: 5, name: "1/01" }, { value: 5, name: "1/01" },
...@@ -146,14 +261,480 @@ export default { ...@@ -146,14 +261,480 @@ export default {
{ value: 5, name: "1/11" }, { value: 5, name: "1/11" },
], ],
monthlyInspectionData: [], 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() {}, created() {},
mounted() { mounted() {
this.monthlyPowerChart(); this.monthlyPowerChart();
this.monthlyTishengChart(); this.monthlyTishengChart();
this.yearPowerChart();
this.shiftLiftChart();
this.yearInspectionChart();
}, },
methods: { 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 //当月电力能耗情况chart
monthlyPowerChart() { monthlyPowerChart() {
let myChart = echarts.init(document.getElementById("monthlyPower")); let myChart = echarts.init(document.getElementById("monthlyPower"));
...@@ -162,7 +743,7 @@ export default { ...@@ -162,7 +743,7 @@ export default {
radius: [30, "90%"], radius: [30, "90%"],
}, },
angleAxis: { angleAxis: {
max: 10, max: 5555551,
startAngle: 90, startAngle: 90,
show: false, // 显示坐标轴 show: false, // 显示坐标轴
}, },
...@@ -197,7 +778,7 @@ export default { ...@@ -197,7 +778,7 @@ export default {
type: "bar", type: "bar",
coordinateSystem: "polar", coordinateSystem: "polar",
stack: "a", stack: "a",
data: this.monthlyPowerData.map(() => 10), // 每个项总长度10 data: this.monthlyPowerData.map(() => 5555555), // 每个项总长度10
itemStyle: { itemStyle: {
color: "RGBA(28, 57, 92, 0.3)", color: "RGBA(28, 57, 92, 0.3)",
}, },
...@@ -326,7 +907,6 @@ export default { ...@@ -326,7 +907,6 @@ export default {
min-height: 0; // 关键修复项 min-height: 0; // 关键修复项
overflow: hidden; // 防止内容溢出 overflow: hidden; // 防止内容溢出
.jgg-item-title { .jgg-item-title {
font-size: 22px; font-size: 22px;
background: url("~@/assets/images/screen/tjfx/title.png") no-repeat background: url("~@/assets/images/screen/tjfx/title.png") no-repeat
...@@ -398,7 +978,7 @@ export default { ...@@ -398,7 +978,7 @@ export default {
.monthly-inspection { .monthly-inspection {
display: grid; display: grid;
grid-template-rows: 3fr 1fr; // 使用fr单位确保比例分配 grid-template-rows: 3fr 1fr; // 使用fr单位确保比例分配
height:100%; // 确保高度不超出父容器 height: 100%; // 确保高度不超出父容器
overflow: hidden; overflow: hidden;
.monthly-inspection-top { .monthly-inspection-top {
display: grid; display: grid;
...@@ -453,12 +1033,12 @@ export default { ...@@ -453,12 +1033,12 @@ export default {
min-height: 0; // 添加这个属性防止内容撑开 min-height: 0; // 添加这个属性防止内容撑开
padding-bottom: 20px; padding-bottom: 20px;
overflow: hidden; // 防止内容溢出 overflow: hidden; // 防止内容溢出
.monthly-inspection-bottom-item{ .monthly-inspection-bottom-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
p{ p {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -468,25 +1048,25 @@ export default { ...@@ -468,25 +1048,25 @@ export default {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
margin: 0px; margin: 0px;
i{ i {
display: inline-block; display: inline-block;
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
background: #00F3E5; background: #00f3e5;
margin-right: 8px; margin-right: 8px;
} }
span:nth-child(2){ span:nth-child(2) {
font-size: 18px; font-size: 18px;
color: #fff; color: #fff;
} }
span:nth-child(3){ span:nth-child(3) {
font-size: 18px; font-size: 18px;
color: #00F3E5; color: #00f3e5;
margin-left: 20px; margin-left: 20px;
} }
.coyel{ .coyel {
color:#F6890C !important; color: #f6890c !important;
} }
} }
} }
...@@ -511,32 +1091,169 @@ export default { ...@@ -511,32 +1091,169 @@ export default {
margin: 0px; margin: 0px;
li { li {
width: 280px; width: 280px;
height: 28px; height: 22px;
background: #173253; background: #173253;
border-radius: 14px; border-radius: 14px;
padding-left: 30px; padding-left: 30px;
line-height: 28px; line-height: 22px;
font-size: 22px; font-size: 18px;
font-family: "fangsong"; font-family: "fangsong";
.legend-color { .legend-color {
display: inline-block; display: inline-block;
width: 15px; width: 15px;
height: 8px; height: 8px;
margin-right: 25px; margin-right: 20px;
margin-bottom: 2px; margin-bottom: 2px;
} }
span:nth-child(2) { span:nth-child(2) {
// 选择第二个span // 选择第二个span
color: #fff; // 示例样式 color: #fff; // 示例样式
display: inline-block; display: inline-block;
width: 110px; width: 70px;
margin-right: 22px; 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 { .divider-line {
position: absolute; position: absolute;
left: 50%; left: 50%;
...@@ -551,6 +1268,17 @@ export default { ...@@ -551,6 +1268,17 @@ export default {
rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 5px,
rgba(255, 255, 255, 0.5) 10px 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> <template>
<div class="login"> <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> <h3 class="title">桐柏银洞坡金矿自动化</h3>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
...@@ -9,7 +14,11 @@ ...@@ -9,7 +14,11 @@
auto-complete="off" auto-complete="off"
placeholder="账号" 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-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
...@@ -20,7 +29,11 @@ ...@@ -20,7 +29,11 @@
placeholder="密码" placeholder="密码"
@keyup.enter.native="handleLogin" @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-input>
</el-form-item> </el-form-item>
<el-form-item prop="code" v-if="captchaEnabled"> <el-form-item prop="code" v-if="captchaEnabled">
...@@ -31,26 +44,36 @@ ...@@ -31,26 +44,36 @@
style="width: 63%" style="width: 63%"
@keyup.enter.native="handleLogin" @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> </el-input>
<div class="login-code"> <div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/> <img :src="codeUrl" @click="getCode" class="login-code-img" />
</div> </div>
</el-form-item> </el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> <el-checkbox
<el-form-item style="width:100%;"> v-model="loginForm.rememberMe"
style="margin: 0px 0px 25px 0px"
>记住密码</el-checkbox
>
<el-form-item style="width: 100%">
<el-button <el-button
:loading="loading" :loading="loading"
size="medium" size="medium"
type="primary" type="primary"
style="width:100%;" style="width: 100%"
@click.native.prevent="handleLogin" @click.native.prevent="handleLogin"
> >
<span v-if="!loading">登 录</span> <span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span> <span v-else>登 录 中...</span>
</el-button> </el-button>
<div style="float: right;" v-if="register"> <div style="float: right" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link> <router-link class="link-type" :to="'/register'"
>立即注册</router-link
>
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -64,7 +87,7 @@ ...@@ -64,7 +87,7 @@
<script> <script>
import { getCodeImg } from "@/api/login"; import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt' import { encrypt, decrypt } from "@/utils/jsencrypt";
export default { export default {
name: "Login", name: "Login",
...@@ -76,33 +99,33 @@ export default { ...@@ -76,33 +99,33 @@ export default {
password: "", password: "",
rememberMe: false, rememberMe: false,
code: "", code: "",
uuid: "" uuid: "",
}, },
loginRules: { loginRules: {
username: [ username: [
{ required: true, trigger: "blur", message: "请输入您的账号" } { required: true, trigger: "blur", message: "请输入您的账号" },
], ],
password: [ 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, loading: false,
// 验证码开关 // 验证码开关
captchaEnabled: true, captchaEnabled: true,
// 注册开关 // 注册开关
register: false, register: false,
redirect: undefined redirect: undefined,
}; };
}, },
watch: { watch: {
$route: { $route: {
handler: function(route) { handler: function (route) {
console.log(route,'route') console.log(route, "route");
this.redirect = route.query && route.query.redirect; this.redirect = route.query && route.query.redirect;
}, },
immediate: true immediate: true,
} },
}, },
created() { created() {
this.getCode(); this.getCode();
...@@ -110,8 +133,9 @@ export default { ...@@ -110,8 +133,9 @@ export default {
}, },
methods: { methods: {
getCode() { getCode() {
getCodeImg().then(res => { getCodeImg().then((res) => {
this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled; this.captchaEnabled =
res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (this.captchaEnabled) { if (this.captchaEnabled) {
this.codeUrl = "data:image/gif;base64," + res.img; this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid; this.loginForm.uuid = res.uuid;
...@@ -121,38 +145,46 @@ export default { ...@@ -121,38 +145,46 @@ export default {
getCookie() { getCookie() {
const username = Cookies.get("username"); const username = Cookies.get("username");
const password = Cookies.get("password"); const password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe') const rememberMe = Cookies.get("rememberMe");
this.loginForm = { this.loginForm = {
username: username === undefined ? this.loginForm.username : username, username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password), password:
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
}; };
}, },
handleLogin() { handleLogin() {
this.$refs.loginForm.validate(valid => { this.$refs.loginForm.validate((valid) => {
if (valid) { if (valid) {
this.loading = true this.loading = true;
if (this.loginForm.rememberMe) { if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 }) Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 }) Cookies.set("password", encrypt(this.loginForm.password), {
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 }) expires: 30,
});
Cookies.set("rememberMe", this.loginForm.rememberMe, {
expires: 30,
});
} else { } else {
Cookies.remove("username") Cookies.remove("username");
Cookies.remove("password") Cookies.remove("password");
Cookies.remove('rememberMe') 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> </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