xy 2 years ago
parent 2dec808df0
commit c1be05aa9d

@ -1,31 +1,39 @@
import request from '@/utils/request'
import request from '@/utils/request'
export function listCommondepartment(params) {
return request({
url: '/api/admin/other/admin-department-list',
method: 'get',
params:params
})
export function listCommondepartment(params) {
return request({
url: '/api/admin/other/admin-department-list',
method: 'get',
params:params
})
}
export function listCommonuser(params) {
return request({
url: '/api/admin/other/admin-user-list',
method: 'get',
params:params
})
export function listCommonuser(params) {
return request({
url: '/api/admin/other/admin-user-list',
method: 'get',
params:params
})
}
export function remoteStatistic(params) {
return request({
url: '/api/admin/other/remot-statistic',
method: 'get',
params:params
})
export function remoteStatistic(params) {
return request({
url: '/api/admin/other/remot-statistic',
method: 'get',
params:params
})
}
export function sendSms (params) {
return request({
url: "/api/admin/auth/send-sms",
method: "get",
params
})
}

@ -5,6 +5,8 @@ const state = {
leases: [],
adventLeases: [],
safety: [],
safetyPlan: [],
adventSafetyPlan: [],
type: 1,
}
let config = {}
@ -19,6 +21,12 @@ const mutations = {
SET_ADVENT_LEASES: (state, adventLeases) => {
state.adventLeases = adventLeases
},
SET_SAFETY_PLAN: (state, safetyPlan) => {
state.safetyPlan = safetyPlan
},
SET_ADVENT_SAFETY_PLAN: (state, adventSafetyPlan) => {
state.adventSafetyPlan = adventSafetyPlan
},
SET_TYPE: (state, type) => {
state.type = type
},
@ -130,6 +138,73 @@ const actions = {
reject(err)
})
})
},
getSafetyPlan({ commit, state }) {
return new Promise((resolve, reject) => {
index({
table_name: "asset_safety_plans",
page: 1,
page_size: 999,
filter: [
{
key: "jihuajieshushijian",
op: "range",
value: `${$moment().format("YYYY-MM-DD")},2999-12-31`
},
{
key: "jihuakaishishijian",
op: "range",
value: `${$moment(0).format("YYYY-MM-DD")},${$moment().format("YYYY-MM-DD")}`
}
]
}).then(res => {
commit("SET_SAFETY_PLAN", res.data)
resolve(res)
}).catch(err => {
reject(err)
})
})
},
async getAdventSafetyPlan({ commit, state }) {
if (!config.time || !config.unit) {
const res = await index({
table_name: 'warnings',
filter: [
{
key: 'flag',
op: 'eq',
value: 'contract'
}
]
},false)
config.time = Number(res.data[0]?.time);
config.unit = res.data[0]?.unit;
}
return new Promise((resolve, reject) => {
let preDate = $moment().add(config.time, config.unit).format("YYYY-MM-DD")
index({
table_name: "asset_safety_plans",
page: 1,
page_size: 999,
filter: [
{
key: "jihuajieshushijian",
op: "range",
value: `${$moment().format("YYYY-MM-DD")},${preDate}`
},
{
key: "jihuakaishishijian",
op: "range",
value: ``
}
]
}).then(res => {
commit("SET_ADVENT_SAFETY_PLAN", res.data)
resolve(res)
}).catch(err => {
reject(err)
})
})
}
}

@ -7,13 +7,13 @@
<HeaderComponent></HeaderComponent>
<div class="body d-flex">
<div class="body d-flex flex-1">
<btns></btns>
<div class="left d-flex flex-column">
<dv-border-box-12 style="padding: 14px;">
<dv-border-box-12 style="padding: 14px;" class="flex-1">
<MapComponent v-show="$store.state.bigdata.type === 1"></MapComponent>
<Map1Component v-show="$store.state.bigdata.type === 2 || $store.state.bigdata.type === 3"></Map1Component>
<Map1Component v-show="$store.state.bigdata.type === 2"></Map1Component>
<Map2Component v-show="$store.state.bigdata.type === 3"></Map2Component>
</dv-border-box-12>
<leftBottom class="mt-2"></leftBottom>
</div>
@ -32,6 +32,7 @@
import drawMixin from "@/mixin/drawMixin";
import MapComponent from "./map.vue";
import Map1Component from "./map1.vue";
import Map2Component from "./map2.vue";
import HeaderComponent from "./header.vue";
import right1 from "./right1.vue";
import right2 from "./right2.vue";
@ -44,6 +45,7 @@ export default {
components: {
MapComponent,
Map1Component,
Map2Component,
HeaderComponent,
right1,
right2,
@ -65,20 +67,27 @@ export default {
getAssets: "getAssets",
getAdventLeases: "getAdventLeases",
getSafety: "getSafety",
getSafetyPlan: "getSafetyPlan",
getAdventSafetyPlan: "getAdventSafetyPlan"
})
},
computed: {
type () {
return this.$store.state.bigdata.type;
}
},
mounted() {
setTimeout(() => {
this.loading = false;
},500)
},1000)
},
created() {
this.getAssets()
this.getLeases()
this.getAdventLeases()
this.getSafety()
this.getSafetyPlan()
this.getAdventSafetyPlan()
}
}
</script>

@ -206,5 +206,6 @@ export default {
#map {
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #00000022 , #61b9ac66);
}
</style>

@ -1,5 +1,33 @@
<template>
<div id="map1">
<div class="map-container">
<div id="map1">
</div>
<div class="info-window" ref="leaseInfoWindow" v-show="isShowWindow">
<el-descriptions border :column="2">
<el-descriptions-item label="地块名称">
{{ row.dikuaimingcheng }}
</el-descriptions-item>
<el-descriptions-item label="出租房">
{{ row.chuzufang }}
</el-descriptions-item>
<el-descriptions-item label="承租方">
{{ row.chengzufang }}
</el-descriptions-item>
<el-descriptions-item label="租赁开始期限">
{{ row.zulinkaishiqixian }}
</el-descriptions-item>
<el-descriptions-item label="租赁结束期限">
{{ row.zulinjieshuqixian }}
</el-descriptions-item>
<el-descriptions-item label="年租赁价">
{{ row.nianzujindanjia }}
</el-descriptions-item>
<el-descriptions-item label="实收租金">
{{ row.shishouzujin }}
</el-descriptions-item>
</el-descriptions>
</div>
</div>
</template>
@ -7,8 +35,10 @@
export default {
data() {
return {
isShowWindow: false,
markerList: [],
cluster: ""
cluster: "",
row: {}
}
},
computed: {
@ -18,18 +48,18 @@ export default {
},
methods: {
pickRow({ row }) {
//this.isShowInfoWindow = true;
//this.openData = row;
this.row = row;
this.isShowWindow = true;
let location = row.land_id_lands_id_relation ? row.land_id_lands_id_relation.zichanweizhi : row.house_id_houses_id_relation.zichanweizhi;
if (location) {
let lat, lng;
[lng, lat] = location.split(",");
this.map.panTo([lng, lat]);
this.map.setZoom(30);
// this.infoWindow.open(this.map, [lng, lat]);
this.infoWindow.open(this.map, [lng, lat]);
} else {
this.map.panTo(this.center);
//this.infoWindow.open(this.map, this.center);
this.infoWindow.open(this.map, this.center);
}
},
init(adcode = ["320200"]) {
@ -42,6 +72,14 @@ export default {
zoom: 20,
mapStyle: "amap://styles/blue"
});
this.infoWindow = new AMap.InfoWindow({
isCustom: true,
autoMove: true,
avoid: [20, 20, 20, 20],
content: this.$refs["leaseInfoWindow"],
closeWhenClickMap: true,
offset: new AMap.Pixel(-10, -10),
});
this.map.on('click',e => {
console.log(e)
})
@ -145,6 +183,10 @@ export default {
</script>
<style scoped lang="scss">
.map-container {
height: 100%;
width: 100%;
}
#map1 {
width: 100%;
height: 100%;
@ -167,3 +209,22 @@ export default {
}
}
</style>
<style>
.info-window {
filter: drop-shadow(2px 2px 5px #00000055);
border-radius: 0 4px 4px 4px;
background: #fff;
padding: 2px;
animation: fade-in 0.4s forwards;
position: relative;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>

@ -0,0 +1,202 @@
<template>
<div class="map-container">
<div id="map2">
</div>
<div class="info-window" ref="safetyInfoWindow" v-show="isShowWindow">
<el-descriptions border :column="2">
<el-descriptions-item label="资产名称">
{{ row.zichanmingcheng }}
</el-descriptions-item>
<el-descriptions-item label="检查记录">
{{ row.jianchajilu }}
</el-descriptions-item>
<el-descriptions-item label="资产名称">
{{ (row.land_id_lands_id_relation && row.house_id_houses_id_relation) ? (row.land_id ? row.land_id_lands_id_relation.name : row.house_id_houses_id_relation.name) : "" }}
</el-descriptions-item>
<el-descriptions-item label="资产类型">
{{ row.zichanleixing }}
</el-descriptions-item>
</el-descriptions>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShowWindow: false,
row: {},
markerList: [],
cluster: ""
}
},
computed: {
leases () {
return this.$store.state.bigdata.safety;
}
},
methods: {
pickRow({ row }) {
this.isShowWindow = true;
this.row = row;
let location = row.land_id_lands_id_relation ? row.land_id_lands_id_relation.zichanweizhi : row.house_id_houses_id_relation.zichanweizhi;
if (location) {
let lat, lng;
[lng, lat] = location.split(",");
this.map.panTo([lng, lat]);
this.map.setZoom(30);
this.infoWindow.open(this.map, [lng, lat]);
} else {
this.map.panTo(this.center);
this.infoWindow.open(this.map, this.center);
}
},
init(adcode = ["320200"]) {
this.map = new AMap.Map("map2", {
pitch: 50,
viewMode: "3D",
center: [120.283692, 31.614211],
rotation: -12, //
zoom: 20,
mapStyle: "amap://styles/blue"
});
this.infoWindow = new AMap.InfoWindow({
isCustom: true,
autoMove: true,
avoid: [20, 20, 20, 20],
content: this.$refs["safetyInfoWindow"],
closeWhenClickMap: true,
offset: new AMap.Pixel(-10, -10),
});
this.map.on('click',e => {
console.log(e)
})
},
setMapMarker() {
this.map.remove(this.markerList);
this.markerList = [];
this.leases.forEach((item) => {
let location = item.land_id_lands_id_relation ? item.land_id_lands_id_relation.zichanweizhi : item.house_id_houses_id_relation.zichanweizhi;
if (location) {
let lat, lng;
[lng, lat] = location.split(",");
let marker = new AMap.Marker({
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
position: [Number(lng), Number(lat)],
offset: new AMap.Pixel(-13, -30),
});
let markerContent = document.createElement("div");
markerContent.setAttribute("class", "map-marker");
markerContent.onclick = () => {
this.pickRow({ row: item });
};
let markerImg = document.createElement("img");
markerImg.src = "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png";
let markerSpan = document.createElement("span");
markerSpan.setAttribute("class", "map-marker__text");
markerSpan.innerText =
item.zichanmingcheng?.length > 4
? item.zichanmingcheng.slice(0, 2) +
".." +
item.zichanmingcheng.slice(item.zichanmingcheng.length - 2)
: item.zichanmingcheng;
markerContent.appendChild(markerImg);
markerContent.appendChild(markerSpan);
marker.setContent(markerContent);
this.markerList.push(marker);
}
});
this.map.add(this.markerList);
this.addCluster();
},
addCluster() {
if (this.cluster) {
this.cluster.setMap(null);
}
this.cluster = new AMap.MarkerClusterer(this.map, this.markerList, {
gridSize: 50, //
//renderClusterMarker: this.renderClusterMarker, //
//renderMarker: this.renderMarker, //
});
},
renderMarker(context) {
let content =
'<div style="background-color: hsla(180, 100%, 50%, 0.3); height: 18px; width: 18px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 3px;"></div>';
let offset = new AMap.Pixel(-9, -9);
context.marker.setContent(content);
context.marker.setOffset(offset);
},
renderClusterMarker(context) {
let factor = Math.pow(context.count / this.list.length, 1 / 18);
let div = document.createElement("div");
let Hue = 180 - factor * 180;
let bgColor = "hsla(" + Hue + ",100%,40%,0.7)";
let fontColor = "hsla(" + Hue + ",100%,90%,1)";
let borderColor = "hsla(" + Hue + ",100%,40%,1)";
let shadowColor = "hsla(" + Hue + ",100%,90%,1)";
div.style.backgroundColor = bgColor;
let size = Math.round(
30 + Math.pow(context.count / this.list.length, 1 / 5) * 20
);
div.style.width = div.style.height = size + "px";
div.style.border = "solid 1px " + borderColor;
div.style.borderRadius = size / 2 + "px";
div.style.boxShadow = "0 0 5px " + shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size + "px";
div.style.color = fontColor;
div.style.fontSize = "14px";
div.style.textAlign = "center";
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div);
},
},
watch: {
leases () {
if (this.map) {
this.$nextTick(() => {
this.setMapMarker();
})
}
}
},
mounted() {
this.$nextTick(() => {
this.init()
})
}
}
</script>
<style scoped lang="scss">
.map-container {
height: 100%;
width: 100%;
}
#map2 {
width: 100%;
height: 100%;
padding: 20px;
}
</style>
<style lang="scss">
.map-marker {
display: flex;
flex-direction: column;
align-items: center;
&__text {
background: #fff;
zoom: 0.75;
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
filter: drop-shadow(2px 2px 5px #00000055);
}
}
</style>

@ -5,10 +5,11 @@
<span>
<SvgIcon icon-class="tudi" class="text-icon"></SvgIcon>
</span>
<span class="fs-xl text">{{ type === 1 ? '土地资产' : '合约中' }}</span>
<span class="fs-xl text">{{ title }}</span>
</div>
<dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking" />
<dv-scroll-board v-show="type === 3" :config="config" class="dv-scr-board mt-1" />
<dv-scroll-ranking-board v-show="type !== 3" class="dv-scr-rank-board mt-1" :config="ranking" />
</div>
</div>
</template>
@ -25,6 +26,24 @@ export default {
},
methods: {},
computed: {
config () {
return {
header: ['年度', '月度', '计划名称'],
data: this.$store.state.bigdata.safetyPlan.map(i => [i.niandu, i.yuedu, i.jihuamingcheng])
}
},
title () {
switch (this.type) {
case 1:
return '土地资产'
case 2:
return '合约中'
case 3:
return '安全检查计划'
default:
return '土地资产'
}
},
type () {
return this.$store.state.bigdata.type
},
@ -71,6 +90,11 @@ export default {
.ranking {
padding: 20px 10px;
width: 100%;
.dv-scr-board {
width: 346px;
height: 180px;
padding: 10px;
}
.dv-scr-rank-board {
height: 180px;
padding: 10px 20px;

@ -8,7 +8,8 @@
<span class="fs-xl text">{{ type === 1 ? '房屋资产' : '临期' }}</span>
</div>
<dv-scroll-ranking-board class="dv-scr-rank-board mt-1" :config="ranking"/>
<dv-scroll-board v-show="type === 3" :config="config" class="dv-scr-board mt-1" />
<dv-scroll-ranking-board v-show="type !== 3" class="dv-scr-rank-board mt-1" :config="ranking"/>
</div>
</div>
</template>
@ -25,6 +26,12 @@ export default {
},
methods: {},
computed: {
config () {
return {
header: ['年度', '月度', '计划名称'],
data: this.$store.state.bigdata.adventSafetyPlan.map(i => [i.niandu, i.yuedu, i.jihuamingcheng])
}
},
type () {
return this.$store.state.bigdata.type
},
@ -71,7 +78,11 @@ export default {
.ranking {
padding: 20px 10px;
width: 100%;
.dv-scr-board {
width: 346px;
height: 180px;
padding: 10px;
}
.dv-scr-rank-board {
height: 180px;
padding: 10px 20px;

@ -1,251 +1,272 @@
<template>
<div class="login-container">
<vue-particles color="#ffffff" :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" :particleSize="4"
linesColor="#ffffff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3"
:hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push"> </vue-particles>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
label-position="left">
<div class="title-container">
<h3 class="title">{{title}}</h3>
</div>
<el-form-item prop="username">
<span class="svg-container">
<svg-icon icon-class="user" />
</span>
<el-input ref="username" v-model="loginForm.username" placeholder="请输入登录名" name="username" type="text"
tabindex="1" auto-complete="on" />
</el-form-item>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password" />
</span>
<el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
placeholder="请输入密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
<span class="show-pwd" @click="showPwd">
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
</span>
</el-form-item>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
@click.native.prevent="handleLogin">登录</el-button>
</el-form>
</div>
</template>
<script>
import {
validUsername
} from '@/utils/validate'
const defaultSettings = require('../../../src/settings.js')
export default {
name: 'Login',
data() {
const validateUsername = (rule, value, callback) => {
if (!validUsername(value)) {
callback(new Error('请正确输入登录名'))
} else {
callback()
}
}
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error('密码输入错误'))
} else {
callback()
}
}
return {
title: "",
loginForm: {
username: '',
password: ''
},
loginRules: {
username: [{
required: true,
trigger: 'blur',
validator: validateUsername
}],
password: [{
required: true,
trigger: 'blur',
validator: validatePassword
}]
},
loading: false,
passwordType: 'password',
redirect: undefined
}
},
watch: {
$route: {
handler: function(route) {
this.redirect = route.query && route.query.redirect
},
immediate: true
}
},
created() {
this.title = defaultSettings.title;
},
methods: {
showPwd() {
if (this.passwordType === 'password') {
this.passwordType = ''
} else {
this.passwordType = 'password'
}
this.$nextTick(() => {
this.$refs.password.focus()
})
<template>
<div class="login-container">
<vue-particles color="#ffffff" :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" :particleSize="4"
linesColor="#ffffff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3"
:hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push"> </vue-particles>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
label-position="left">
<div class="title-container">
<h3 class="title">{{title}}</h3>
</div>
<el-form-item prop="username">
<span class="svg-container">
<svg-icon icon-class="user" />
</span>
<el-input ref="username" v-model="loginForm.username" placeholder="请输入登录名" name="username" type="text"
tabindex="1" auto-complete="on" />
</el-form-item>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password" />
</span>
<el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
placeholder="请输入密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
<span class="show-pwd" @click="showPwd">
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
</span>
</el-form-item>
<el-form-item prop="verification">
<div style="display: flex;">
<span class="svg-container">
<svg-icon icon-class="message" />
</span>
<el-input ref="username" v-model="loginForm.verification" placeholder="请输入验证码" name="username" type="text"
tabindex="1" auto-complete="on" />
<el-button type="primary" size="small" @click="sendSms"></el-button>
</div>
</el-form-item>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
@click.native.prevent="handleLogin">登录</el-button>
</el-form>
</div>
</template>
<script>
import {
validUsername
} from '@/utils/validate'
const defaultSettings = require('../../../src/settings.js')
export default {
name: 'Login',
data() {
const validateUsername = (rule, value, callback) => {
if (!validUsername(value)) {
callback(new Error('请正确输入登录名'))
} else {
callback()
}
}
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error('密码输入错误'))
} else {
callback()
}
}
return {
title: "",
loginForm: {
username: '',
password: '',
verification: ''
},
loginRules: {
username: [{
required: true,
trigger: 'blur',
validator: validateUsername
}],
password: [{
required: true,
trigger: 'blur',
validator: validatePassword
}],
// verification: [{
// required: true,
// trigger: 'blur',
// message: ''
// }]
},
loading: false,
passwordType: 'password',
redirect: undefined
}
},
watch: {
$route: {
handler: function(route) {
this.redirect = route.query && route.query.redirect
},
immediate: true
}
},
created() {
this.title = defaultSettings.title;
},
methods: {
sendSms () {
},
//
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$store.dispatch('user/login', this.loginForm).then(() => {
this.$router.push({
path: this.redirect || '/'
})
this.loading = false
}).catch(() => {
this.loading = false
})
} else {
console.log('error submit!!')
return false
}
})
}
}
}
</script>
<style lang="scss">
#particles-js {
width: 100%;
height: 99%;
position: absolute;
}
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg:#122583;
$light_gray:#122583;
$cursor: #122583;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
.login-container .el-input input {
color: $cursor;
}
}
/* reset element-ui css */
.login-container {
.el-input {
display: inline-block;
height: 47px;
width: 85%;
input {
background: transparent;
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
padding: 12px 5px 12px 15px;
color: $light_gray;
height: 47px;
caret-color: $cursor;
&:-webkit-autofill {
//box-shadow: 0 0 0px 1000px $bg inset !important;
//-webkit-text-fill-color: $cursor !important;
}
}
}
.el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #454545;
}
}
</style>
<style lang="scss" scoped>
$bg:#122583;
$dark_gray:#122583;
$light_gray:#122583;
.login-container {
min-height: 100%;
width: 100%;
//background-color: $bg;
background: url("../../assets/bg.jpg") no-repeat;
overflow: hidden;
.login-form {
position: relative;
width: 520px;
max-width: 100%;
padding: 20px 35px 0;
margin: 160px auto;
overflow: hidden;
background-color: #fff;
}
.tips {
font-size: 14px;
color: #fff;
margin-bottom: 10px;
span {
&:first-of-type {
margin-right: 16px;
}
}
}
.svg-container {
padding: 6px 5px 6px 15px;
color: $dark_gray;
vertical-align: middle;
width: 30px;
display: inline-block;
}
.title-container {
position: relative;
.title {
font-size: 26px;
color: $light_gray;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
}
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
}
showPwd() {
if (this.passwordType === 'password') {
this.passwordType = ''
} else {
this.passwordType = 'password'
}
this.$nextTick(() => {
this.$refs.password.focus()
})
},
//
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$store.dispatch('user/login', this.loginForm).then(() => {
this.$router.push({
path: this.redirect || '/'
})
this.loading = false
}).catch(() => {
this.loading = false
})
} else {
console.log('error submit!!')
return false
}
})
}
}
}
</script>
<style lang="scss">
#particles-js {
width: 100%;
height: 99%;
position: absolute;
}
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg:#122583;
$light_gray:#122583;
$cursor: #122583;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
.login-container .el-input input {
color: $cursor;
}
}
/* reset element-ui css */
.login-container {
.el-input {
display: inline-block;
height: 47px;
width: 85%;
input {
background: transparent;
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
padding: 12px 5px 12px 15px;
color: $light_gray;
height: 47px;
caret-color: $cursor;
&:-webkit-autofill {
//box-shadow: 0 0 0px 1000px $bg inset !important;
//-webkit-text-fill-color: $cursor !important;
}
}
}
.el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #454545;
}
}
</style>
<style lang="scss" scoped>
$bg:#122583;
$dark_gray:#122583;
$light_gray:#122583;
.login-container {
min-height: 100%;
width: 100%;
//background-color: $bg;
background: url("../../assets/bg.jpg") no-repeat;
overflow: hidden;
.login-form {
position: relative;
width: 520px;
max-width: 100%;
padding: 20px 35px 0;
margin: 160px auto;
overflow: hidden;
background-color: #fff;
}
.tips {
font-size: 14px;
color: #fff;
margin-bottom: 10px;
span {
&:first-of-type {
margin-right: 16px;
}
}
}
.svg-container {
padding: 6px 5px 6px 15px;
color: $dark_gray;
vertical-align: middle;
width: 30px;
display: inline-block;
}
.title-container {
position: relative;
.title {
font-size: 26px;
color: $light_gray;
margin: 0px auto 40px auto;
text-align: center;
font-weight: bold;
}
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
}
</style>

@ -61,6 +61,9 @@
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="form.mobile" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="部门" prop="department_id">
<el-select v-model="form.department_id">
<el-option v-for="item in departmentList" :key="item.id" :label="item.name" :value="item.id"></el-option>
@ -116,6 +119,7 @@
username: "",
password: "",
department_id: "",
mobile: ""
},
rules: {
name: [{
@ -134,6 +138,15 @@
required: true,
message: '请输入密码',
trigger: 'blur',
}],
mobile: [{
required: true,
message: '请输入手机号',
trigger: 'blur',
},{
pattern: /^1[3456789]\d{9}$/,
message: "手机号格式不正确",
trigger: "blur",
}]
},
tableHeight: 0,

Loading…
Cancel
Save