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) { export function listCommondepartment(params) {
return request({ return request({
url: '/api/admin/other/admin-department-list', url: '/api/admin/other/admin-department-list',
method: 'get', method: 'get',
params:params params:params
}) })
} }
export function listCommonuser(params) { export function listCommonuser(params) {
return request({ return request({
url: '/api/admin/other/admin-user-list', url: '/api/admin/other/admin-user-list',
method: 'get', method: 'get',
params:params params:params
}) })
} }
export function remoteStatistic(params) { export function remoteStatistic(params) {
return request({ return request({
url: '/api/admin/other/remot-statistic', url: '/api/admin/other/remot-statistic',
method: 'get', method: 'get',
params:params params:params
}) })
}
export function sendSms (params) {
return request({
url: "/api/admin/auth/send-sms",
method: "get",
params
})
} }

@ -5,6 +5,8 @@ const state = {
leases: [], leases: [],
adventLeases: [], adventLeases: [],
safety: [], safety: [],
safetyPlan: [],
adventSafetyPlan: [],
type: 1, type: 1,
} }
let config = {} let config = {}
@ -19,6 +21,12 @@ const mutations = {
SET_ADVENT_LEASES: (state, adventLeases) => { SET_ADVENT_LEASES: (state, adventLeases) => {
state.adventLeases = 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) => { SET_TYPE: (state, type) => {
state.type = type state.type = type
}, },
@ -130,6 +138,73 @@ const actions = {
reject(err) 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> <HeaderComponent></HeaderComponent>
<div class="body d-flex"> <div class="body d-flex flex-1">
<btns></btns> <btns></btns>
<div class="left d-flex flex-column"> <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> <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> </dv-border-box-12>
<leftBottom class="mt-2"></leftBottom> <leftBottom class="mt-2"></leftBottom>
</div> </div>
@ -32,6 +32,7 @@
import drawMixin from "@/mixin/drawMixin"; import drawMixin from "@/mixin/drawMixin";
import MapComponent from "./map.vue"; import MapComponent from "./map.vue";
import Map1Component from "./map1.vue"; import Map1Component from "./map1.vue";
import Map2Component from "./map2.vue";
import HeaderComponent from "./header.vue"; import HeaderComponent from "./header.vue";
import right1 from "./right1.vue"; import right1 from "./right1.vue";
import right2 from "./right2.vue"; import right2 from "./right2.vue";
@ -44,6 +45,7 @@ export default {
components: { components: {
MapComponent, MapComponent,
Map1Component, Map1Component,
Map2Component,
HeaderComponent, HeaderComponent,
right1, right1,
right2, right2,
@ -65,20 +67,27 @@ export default {
getAssets: "getAssets", getAssets: "getAssets",
getAdventLeases: "getAdventLeases", getAdventLeases: "getAdventLeases",
getSafety: "getSafety", getSafety: "getSafety",
getSafetyPlan: "getSafetyPlan",
getAdventSafetyPlan: "getAdventSafetyPlan"
}) })
}, },
computed: { computed: {
type () {
return this.$store.state.bigdata.type;
}
}, },
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.loading = false; this.loading = false;
},500) },1000)
}, },
created() { created() {
this.getAssets() this.getAssets()
this.getLeases() this.getLeases()
this.getAdventLeases() this.getAdventLeases()
this.getSafety() this.getSafety()
this.getSafetyPlan()
this.getAdventSafetyPlan()
} }
} }
</script> </script>

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

@ -1,5 +1,33 @@
<template> <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> </div>
</template> </template>
@ -7,8 +35,10 @@
export default { export default {
data() { data() {
return { return {
isShowWindow: false,
markerList: [], markerList: [],
cluster: "" cluster: "",
row: {}
} }
}, },
computed: { computed: {
@ -18,18 +48,18 @@ export default {
}, },
methods: { methods: {
pickRow({ row }) { pickRow({ row }) {
//this.isShowInfoWindow = true; this.row = row;
//this.openData = 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; let location = row.land_id_lands_id_relation ? row.land_id_lands_id_relation.zichanweizhi : row.house_id_houses_id_relation.zichanweizhi;
if (location) { if (location) {
let lat, lng; let lat, lng;
[lng, lat] = location.split(","); [lng, lat] = location.split(",");
this.map.panTo([lng, lat]); this.map.panTo([lng, lat]);
this.map.setZoom(30); this.map.setZoom(30);
// this.infoWindow.open(this.map, [lng, lat]); this.infoWindow.open(this.map, [lng, lat]);
} else { } else {
this.map.panTo(this.center); this.map.panTo(this.center);
//this.infoWindow.open(this.map, this.center); this.infoWindow.open(this.map, this.center);
} }
}, },
init(adcode = ["320200"]) { init(adcode = ["320200"]) {
@ -42,6 +72,14 @@ export default {
zoom: 20, zoom: 20,
mapStyle: "amap://styles/blue" 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 => { this.map.on('click',e => {
console.log(e) console.log(e)
}) })
@ -145,6 +183,10 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.map-container {
height: 100%;
width: 100%;
}
#map1 { #map1 {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -167,3 +209,22 @@ export default {
} }
} }
</style> </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> <span>
<SvgIcon icon-class="tudi" class="text-icon"></SvgIcon> <SvgIcon icon-class="tudi" class="text-icon"></SvgIcon>
</span> </span>
<span class="fs-xl text">{{ type === 1 ? '土地资产' : '合约中' }}</span> <span class="fs-xl text">{{ title }}</span>
</div> </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>
</div> </div>
</template> </template>
@ -25,6 +26,24 @@ export default {
}, },
methods: {}, methods: {},
computed: { 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 () { type () {
return this.$store.state.bigdata.type return this.$store.state.bigdata.type
}, },
@ -71,6 +90,11 @@ export default {
.ranking { .ranking {
padding: 20px 10px; padding: 20px 10px;
width: 100%; width: 100%;
.dv-scr-board {
width: 346px;
height: 180px;
padding: 10px;
}
.dv-scr-rank-board { .dv-scr-rank-board {
height: 180px; height: 180px;
padding: 10px 20px; padding: 10px 20px;

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

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

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

Loading…
Cancel
Save