dai
3 years ago
30 changed files with 1082 additions and 57 deletions
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 137 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 203 KiB |
|
After Width: | Height: | Size: 203 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 266 KiB |
|
After Width: | Height: | Size: 424 KiB |
@ -0,0 +1,185 @@ |
|||||
|
@import "~@/assets/scss/c/config.scss"; |
||||
|
@import "~@/assets/scss/c/function.scss"; |
||||
|
|
||||
|
.g-cnt { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background-image: url(~@/assets/img/yantai/index/bg.png); |
||||
|
background-size: cover; |
||||
|
background-position: center; |
||||
|
} |
||||
|
|
||||
|
.m-top { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
width: 1920px; |
||||
|
left: -1000px; |
||||
|
right: -1000px; |
||||
|
margin: 0 auto; |
||||
|
|
||||
|
.name { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
text-align: center; |
||||
|
width: 100%; |
||||
|
line-height: 90px; |
||||
|
font-size: 42px; |
||||
|
font-weight: bold; |
||||
|
color: #fff; |
||||
|
background-image: -webkit-linear-gradient(bottom, rgb(23, 222, 238), rgb(23, 222, 238), #fff, #fff); |
||||
|
background-clip: text; |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-list { |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
margin: auto; |
||||
|
transform: translateY(-50%); |
||||
|
|
||||
|
.list { |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
margin: 0 auto; |
||||
|
|
||||
|
.menu { |
||||
|
position: relative; |
||||
|
|
||||
|
.menu-list { |
||||
|
position: absolute; |
||||
|
top: 50px; |
||||
|
width: 100%; |
||||
|
left: 0; |
||||
|
|
||||
|
.menu-item { |
||||
|
position: relative; |
||||
|
margin-bottom: 40px; |
||||
|
width: 150px; |
||||
|
height: 70px; |
||||
|
line-height: 70px; |
||||
|
color: rgba(#fff, 0.6); |
||||
|
font-size: 20px; |
||||
|
border-radius: 60px; |
||||
|
text-align: center; |
||||
|
transition: all 0.2s ease; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&.z-zuo { |
||||
|
left: 60px; |
||||
|
background: linear-gradient(to left, rgba(rgb(67, 67, 210), 0.3), rgba(#00a, 0)); |
||||
|
box-shadow: -4px 4px 6px 0 inset rgba(#fff, 0.2); |
||||
|
&:nth-child(2), |
||||
|
&:nth-child(6) { |
||||
|
margin-left: 20px; |
||||
|
} |
||||
|
&:nth-child(3), |
||||
|
&:nth-child(5) { |
||||
|
margin-left: 20px * 2; |
||||
|
} |
||||
|
&:nth-child(4) { |
||||
|
margin-left: 20px * 2 + 1px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.z-you { |
||||
|
left: 70px; |
||||
|
background: linear-gradient(to right, rgba(rgb(67, 67, 210), 0.3), rgba(#00a, 0)); |
||||
|
box-shadow: 4px 4px 6px 0 inset rgba(#fff, 0.2); |
||||
|
|
||||
|
&:nth-child(2), |
||||
|
&:nth-child(6) { |
||||
|
margin-left: -20px; |
||||
|
} |
||||
|
&:nth-child(3), |
||||
|
&:nth-child(5) { |
||||
|
margin-left: -20px * 2; |
||||
|
} |
||||
|
&:nth-child(4) { |
||||
|
margin-left: -20px * 2 - 1px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:hover, |
||||
|
&.z-on { |
||||
|
transform: scale(1.15); |
||||
|
color: rgba(#fff, 0.95); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.arrow { |
||||
|
width: 60px; |
||||
|
margin: 0 20px; |
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
position: relative; |
||||
|
margin: 0 50px; |
||||
|
width: 420px; |
||||
|
|
||||
|
.item-wrap { |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.2s ease; |
||||
|
&:hover { |
||||
|
transform: scale(1.1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.z-on { |
||||
|
.name { |
||||
|
color: #ffffff; |
||||
|
background-color: transparent; |
||||
|
border-color: #ffffff; |
||||
|
&::before { |
||||
|
background-color: #ffffff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.logo { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.name { |
||||
|
position: absolute; |
||||
|
top: 12%; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
font-size: 36px; |
||||
|
line-height: 40px; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-footer { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
padding: 20px; |
||||
|
color: rgba(255, 255, 255, 0.6); |
||||
|
text-align: center; |
||||
|
p { |
||||
|
margin: 10px 0; |
||||
|
} |
||||
|
a { |
||||
|
padding: 0 5px; |
||||
|
color: rgba(255, 255, 255, 0.6); |
||||
|
&:focus, |
||||
|
&:hover { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,210 @@ |
|||||
|
@import "~@/assets/scss/c/config.scss"; |
||||
|
@import "~@/assets/scss/c/function.scss"; |
||||
|
|
||||
|
.g-bd { |
||||
|
&::before, |
||||
|
&::after { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
z-index: -1; |
||||
|
content: ""; |
||||
|
} |
||||
|
&::before { |
||||
|
background-image: url(~@/assets/img/yantai/login/bg.jpg); |
||||
|
background-size: cover; |
||||
|
} |
||||
|
&::after { |
||||
|
// background-color: rgba(38, 50, 56, 0.1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-snow-box { |
||||
|
position: absolute; |
||||
|
top: 20vh; |
||||
|
width: 35vw; |
||||
|
height: 50vh; |
||||
|
left: 13vw; |
||||
|
border-radius: 40%; |
||||
|
// overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.m-fm { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
right: 13%; |
||||
|
margin: auto; |
||||
|
width: 484px; |
||||
|
height: 429px; |
||||
|
background: rgba(#fff, 1); |
||||
|
box-shadow: 0px 0px 20px 2px rgba(150, 150, 200, 0.6); |
||||
|
border-radius: 12px 12px 12px 12px; |
||||
|
|
||||
|
&:hover { |
||||
|
opacity: 1; |
||||
|
background: rgba(#fff, 1); |
||||
|
} |
||||
|
|
||||
|
.wrap { |
||||
|
padding-top: 5px; |
||||
|
|
||||
|
.title { |
||||
|
margin: 0 auto; |
||||
|
width: 400px; |
||||
|
line-height: 80px; |
||||
|
border-bottom: 1px solid #d4d4d4; |
||||
|
font-size: 34px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #000000; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.fm { |
||||
|
padding: 15px 30px; |
||||
|
|
||||
|
.fm-item { |
||||
|
box-sizing: border-box; |
||||
|
margin: 0 auto; |
||||
|
margin-top: 16px; |
||||
|
width: 400px; |
||||
|
height: 46px; |
||||
|
line-height: 46px; |
||||
|
border: 1px solid #c6c6c6; |
||||
|
border-radius: 4px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.input { |
||||
|
width: 85%; |
||||
|
|
||||
|
input { |
||||
|
display: block; |
||||
|
padding-left: 15px; |
||||
|
line-height: 44px; |
||||
|
height: 44px; |
||||
|
width: 100%; |
||||
|
border: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ico { |
||||
|
position: relative; |
||||
|
width: 35px; |
||||
|
height: 46px; |
||||
|
|
||||
|
img { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
margin: auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fm-captcha { |
||||
|
box-sizing: border-box; |
||||
|
margin: 0 auto; |
||||
|
margin-top: 16px; |
||||
|
width: 400px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.fm-item { |
||||
|
margin: 0; |
||||
|
width: 200px; |
||||
|
} |
||||
|
|
||||
|
.captcha { |
||||
|
position: relative; |
||||
|
margin-left: auto; |
||||
|
width: 180px; |
||||
|
height: 46px; |
||||
|
|
||||
|
img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-color: #eee; |
||||
|
border: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.fm-btn { |
||||
|
box-sizing: border-box; |
||||
|
margin: 0 auto; |
||||
|
margin-top: 40px; |
||||
|
width: 400px; |
||||
|
height: 56px; |
||||
|
line-height: 56px; |
||||
|
background: linear-gradient(90deg, #1a5afd, #26c4ff); |
||||
|
border-radius: 4px; |
||||
|
font-size: 23px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #ffffff; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
.hint { |
||||
|
display: none; |
||||
|
padding-left: 40px; |
||||
|
color: rgb(255, 80, 80); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-footer { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
padding: 20px; |
||||
|
color: rgba(255, 255, 255, 0.6); |
||||
|
text-align: center; |
||||
|
p { |
||||
|
margin: 10px 0; |
||||
|
} |
||||
|
a { |
||||
|
padding: 0 5px; |
||||
|
color: rgba(255, 255, 255, 0.6); |
||||
|
&:focus, |
||||
|
&:hover { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-pop { |
||||
|
height: auto; |
||||
|
|
||||
|
.div_row { |
||||
|
height: 50px; |
||||
|
text-align: center; |
||||
|
line-height: 50px; |
||||
|
|
||||
|
&:hover { |
||||
|
color: rgb(2, 119, 173); |
||||
|
font-weight: bold; |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
|
||||
|
.i_icon { |
||||
|
width: 15px; |
||||
|
height: 15px; |
||||
|
margin-right: 10px; |
||||
|
float: left; |
||||
|
} |
||||
|
.span_name { |
||||
|
font-size: 18px; |
||||
|
cursor: pointer; |
||||
|
/* color: rgb(37, 156, 235); */ |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,209 @@ |
|||||
|
<template> |
||||
|
<fixed1920> |
||||
|
<div class="g-cnt"> |
||||
|
<div class="m-top animate__animated menu animate__fadeInDown"> |
||||
|
<img class="logo" src="@/assets/img/yantai/index/db.png" /> |
||||
|
<div class="name">智慧社区平台</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="m-list"> |
||||
|
<div class="list"> |
||||
|
<div class="animate__animated menu animate__fadeInLeft"> |
||||
|
<img |
||||
|
class="menu-bg" |
||||
|
src="@/assets/img/yantai/index/yuanhu-you.png" |
||||
|
/> |
||||
|
<div class="menu-list"> |
||||
|
<div class="menu-item z-zuo" @click="toPage('/main/base-resi')"> |
||||
|
人房信息 |
||||
|
</div> |
||||
|
<div |
||||
|
class="menu-item z-zuo" |
||||
|
@click="toPage('/main/base-epidemic-antiInfo')" |
||||
|
> |
||||
|
疫情防控 |
||||
|
</div> |
||||
|
<div |
||||
|
class="menu-item z-zuo" |
||||
|
@click="toPage('/main/shequzhili-event-eventList')" |
||||
|
> |
||||
|
社区治理 |
||||
|
</div> |
||||
|
<div |
||||
|
class="menu-item z-zuo z-on" |
||||
|
@click="toPage('/main/communityParty-members-index')" |
||||
|
> |
||||
|
社区党建 |
||||
|
</div> |
||||
|
<div |
||||
|
class="menu-item z-zuo" |
||||
|
@click="toPage('/main/communityService-measure-index')" |
||||
|
> |
||||
|
社区服务 |
||||
|
</div> |
||||
|
<div class="menu-item z-zuo" @click="toPage('/main/workPc-guidance-guidanceList.vue')">便携工具</div> |
||||
|
<div class="menu-item z-zuo" @click="toPage('/main/workSys-mapConfig')">系统管理</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<img class="arrow" src="@/assets/img/yantai/index/zuo.png" /> |
||||
|
|
||||
|
<div |
||||
|
class="item animate__animated animate__pulse" |
||||
|
@click="handleClickItem(1)" |
||||
|
> |
||||
|
<div class="item-wrap"> |
||||
|
<img class="logo" src="@/assets/img/yantai/index/guanli.png" /> |
||||
|
<div class="name">管理平台</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div |
||||
|
class="item animate__animated animate__pulse" |
||||
|
@click="handleClickItem(2)" |
||||
|
> |
||||
|
<div class="item-wrap"> |
||||
|
<img class="logo" src="@/assets/img/yantai/index/shuju.png" /> |
||||
|
<div class="name">数据分析平台</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<img class="arrow" src="@/assets/img/yantai/index/you.png" /> |
||||
|
|
||||
|
<div class="menu animate__animated menu animate__fadeInRight"> |
||||
|
<img |
||||
|
class="menu-bg" |
||||
|
src="@/assets/img/yantai/index/yuanhu-zuo.png" |
||||
|
/> |
||||
|
<div class="menu-list"> |
||||
|
<div |
||||
|
class="menu-item z-you" |
||||
|
@click="toPage('/main-shuju/visual-basicinfo-basicInfoMain')" |
||||
|
> |
||||
|
基础信息 |
||||
|
</div> |
||||
|
<div |
||||
|
class="menu-item z-you" |
||||
|
@click="toPage('/main-shuju/visual-warning-index')" |
||||
|
> |
||||
|
人员预警 |
||||
|
</div> |
||||
|
<div |
||||
|
class="menu-item z-you" |
||||
|
@click="toPage('/main-shuju/visual-measure-service')" |
||||
|
> |
||||
|
需求清单 |
||||
|
</div> |
||||
|
<div |
||||
|
class="menu-item z-you z-on" |
||||
|
@click="toPage('/main-shuju/visual-communityParty-party')" |
||||
|
> |
||||
|
社区党建 |
||||
|
</div> |
||||
|
<div |
||||
|
class="menu-item z-you" |
||||
|
@click=" |
||||
|
toPage( |
||||
|
'/main-shuju/visual-communityGovern-shijianchuli-shijianchulifenxi' |
||||
|
) |
||||
|
" |
||||
|
> |
||||
|
社区治理 |
||||
|
</div> |
||||
|
<div |
||||
|
class="menu-item z-you" |
||||
|
@click="toPage('/main-shuju/visual-heart-index')" |
||||
|
> |
||||
|
初心互助 |
||||
|
</div> |
||||
|
<div class="menu-item z-you" @click="toPage('/main-shuju/i-1536625421829599234')"> |
||||
|
三维展示 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="m-footer"> |
||||
|
<div class="login-footer"> |
||||
|
<p> |
||||
|
<!-- <a href="http://www.elinkchina.com.cn/" target="_blank">{{ |
||||
|
$t("login.copyright") |
||||
|
}}</a> --> |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</fixed1920> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { messages } from "@/i18n"; |
||||
|
import fixed1920 from "@/views/components/fixed1920.vue"; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
pubKey: null, // 获取到公钥 |
||||
|
isShowLogin: true, |
||||
|
i18nMessages: messages, |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
components: { fixed1920 }, |
||||
|
computed: { |
||||
|
bdStyle() { |
||||
|
console.log("clientHeight", document.documentElement.clientHeight); |
||||
|
const scale = document.documentElement.clientWidth / 1920; |
||||
|
const height = document.documentElement.clientHeight / scale; |
||||
|
const top = (document.documentElement.clientHeight - height) / 2; |
||||
|
const left = (document.documentElement.clientWidth - 1920) / 2; |
||||
|
return { |
||||
|
transform: `scale(${scale})`, |
||||
|
height: `${height}px`, |
||||
|
left: `${left}px`, |
||||
|
top: `${top}px`, |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
created() {}, |
||||
|
mounted() {}, |
||||
|
|
||||
|
methods: { |
||||
|
handleClickItem(k) { |
||||
|
if (k == 1) { |
||||
|
this.$router.replace({ name: "main" }); |
||||
|
} else if (k == 2) { |
||||
|
this.$router.replace({ name: "main-shuju" }); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
toPage(path) { |
||||
|
this.$router.push({ path }); |
||||
|
}, |
||||
|
|
||||
|
// 平阴联动 自动登录接口 |
||||
|
getAutoLogin(platformToken) { |
||||
|
this.dataForm.thirdToken = platformToken; |
||||
|
this.dataForm.platform = "pyld"; |
||||
|
this.$http |
||||
|
.post(`/auth/sso/oper/third/login`, this.dataForm) |
||||
|
.then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
if (res.code == 8302) { |
||||
|
return this.$message.error(res.msg); |
||||
|
} |
||||
|
return this.$message.error(res.msg); |
||||
|
} |
||||
|
localStorage.setItem("customerId", res.data.customerId); |
||||
|
localStorage.setItem("userType", "work"); |
||||
|
localStorage.setItem("showHeader", "0"); |
||||
|
localStorage.setItem("token", res.data.token); |
||||
|
this.$router.replace({ name: "home" }); |
||||
|
}) |
||||
|
.catch(() => {}); |
||||
|
// epmet-ext9.elinkservice.cn/platform-admin |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" src="@/assets/scss/pages/yantai-index.scss" scoped></style> |
||||
@ -0,0 +1,435 @@ |
|||||
|
<template> |
||||
|
<div class="g-app"> |
||||
|
<div class="g-bd" v-if="isShowLogin || true"> |
||||
|
<div class="m-snow-box" id="snow_box"></div> |
||||
|
|
||||
|
<div class="m-fm animate__animated animate__rotateInDownLeft"> |
||||
|
<div class="wrap"> |
||||
|
<h2 class="title">{{ $t("brand.work") }}</h2> |
||||
|
<div class="fm"> |
||||
|
<el-form |
||||
|
:model="dataForm" |
||||
|
:rules="dataRule" |
||||
|
ref="dataForm" |
||||
|
@keyup.enter.native="dataFormSubmitHandle()" |
||||
|
status-icon |
||||
|
> |
||||
|
<div class="fm-item"> |
||||
|
<div class="ico"> |
||||
|
<img src="@/assets/img/login/zhanghao.png" alt="" /> |
||||
|
</div> |
||||
|
<div class="input"> |
||||
|
<input |
||||
|
type="text" |
||||
|
v-model="dataForm.phone" |
||||
|
placeholder="账号" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="fm-item"> |
||||
|
<div class="ico"> |
||||
|
<img src="@/assets/img/login/mima.png" alt="" /> |
||||
|
</div> |
||||
|
<div class="input"> |
||||
|
<input |
||||
|
type="password" |
||||
|
v-model="dataForm.password" |
||||
|
:placeholder="$t('login.password')" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="fm-captcha"> |
||||
|
<div class="fm-item"> |
||||
|
<div class="input"> |
||||
|
<input |
||||
|
type="text" |
||||
|
v-model="dataForm.captcha" |
||||
|
placeholder="验证码" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="captcha"> |
||||
|
<img :src="captchaPath" @click="getCaptcha()" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="fm-btn" @click="dataFormSubmitHandle()"> |
||||
|
{{ $t("login.title") }} |
||||
|
</div> |
||||
|
<div class="hint">请使用小程序端的账号密码登录</div> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="m-footer"> |
||||
|
<div class="login-footer"> |
||||
|
<p> |
||||
|
<!-- <a href="" target="_blank">{{ $t("login.copyright") }}</a> --> |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<c-dialog |
||||
|
:showFooter="false" |
||||
|
:title="'选择客户'" |
||||
|
:isNest="false" |
||||
|
:visible="diaVisible" |
||||
|
:dialogHeight="0.8" |
||||
|
:width="30" |
||||
|
:top="'120px'" |
||||
|
@cancel="diaCancel" |
||||
|
> |
||||
|
<div class="m-pop"> |
||||
|
<div v-for="(item, index) in tableData" :key="index" class="div_row"> |
||||
|
<span @click="selectCustomer(item)" class="span_name">{{ |
||||
|
item.customerName |
||||
|
}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</c-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import CDialog from "@c/CDialog"; |
||||
|
import particles_js from "particles.js/particles.js"; |
||||
|
import { messages } from "@/i18n"; |
||||
|
import { getUUID } from "@/utils"; |
||||
|
import { Loading } from "element-ui"; // 引入Loading服务 |
||||
|
import JSEncrypt from "jsencrypt"; //引入加密 |
||||
|
|
||||
|
let loading; // 加载动画 |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
pubKey: null, // 获取到公钥 |
||||
|
isShowLogin: true, |
||||
|
i18nMessages: messages, |
||||
|
captchaPath: "", |
||||
|
dataForm: { |
||||
|
customerId: "", |
||||
|
app: "gov", |
||||
|
client: "web", |
||||
|
username: "", |
||||
|
phone: "", |
||||
|
password: "", |
||||
|
uuid: "", |
||||
|
captcha: "", |
||||
|
}, |
||||
|
// 客户列表相关 |
||||
|
diaVisible: false, |
||||
|
tableLoading: false, |
||||
|
tableData: [], |
||||
|
}; |
||||
|
}, |
||||
|
components: { |
||||
|
CDialog, |
||||
|
}, |
||||
|
computed: { |
||||
|
dataRule() { |
||||
|
return { |
||||
|
phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }], |
||||
|
password: [ |
||||
|
{ required: true, message: "密码不能为空", trigger: "blur" }, |
||||
|
], |
||||
|
captcha: [ |
||||
|
{ required: true, message: "验证码不能为空", trigger: "blur" }, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
created() { |
||||
|
//平阴联动平台 登陆 |
||||
|
if (this.$route.query.platformToken) { |
||||
|
this.isShowLogin = false; |
||||
|
this.getAutoLogin(this.$route.query.platformToken); |
||||
|
} else { |
||||
|
this.getCaptcha(); |
||||
|
//获取公钥 |
||||
|
this.getPubKey(); |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
localStorage.removeItem("showHeader"); |
||||
|
|
||||
|
particlesJS( |
||||
|
"snow_box", |
||||
|
{ |
||||
|
particles: { |
||||
|
number: { |
||||
|
value: 380, |
||||
|
density: { |
||||
|
enable: true, |
||||
|
value_area: 800, |
||||
|
}, |
||||
|
}, |
||||
|
color: { |
||||
|
value: "#ffffff", |
||||
|
}, |
||||
|
shape: { |
||||
|
type: "circle", |
||||
|
stroke: { |
||||
|
width: 0, |
||||
|
color: "#000000", |
||||
|
}, |
||||
|
polygon: { |
||||
|
nb_sides: 5, |
||||
|
}, |
||||
|
image: { |
||||
|
src: "img/github.svg", |
||||
|
width: 100, |
||||
|
height: 100, |
||||
|
}, |
||||
|
}, |
||||
|
opacity: { |
||||
|
value: 0.5, |
||||
|
random: false, |
||||
|
anim: { |
||||
|
enable: false, |
||||
|
speed: 1, |
||||
|
opacity_min: 0.1, |
||||
|
sync: false, |
||||
|
}, |
||||
|
}, |
||||
|
size: { |
||||
|
value: 3, |
||||
|
random: true, |
||||
|
anim: { |
||||
|
enable: false, |
||||
|
speed: 40, |
||||
|
size_min: 0.1, |
||||
|
sync: false, |
||||
|
}, |
||||
|
}, |
||||
|
line_linked: { |
||||
|
enable: true, |
||||
|
distance: 150, |
||||
|
color: "#ffffff", |
||||
|
opacity: 0, |
||||
|
width: 1, |
||||
|
}, |
||||
|
move: { |
||||
|
enable: true, |
||||
|
speed: 6, |
||||
|
direction: "none", |
||||
|
random: false, |
||||
|
straight: false, |
||||
|
out_mode: "out", |
||||
|
bounce: false, |
||||
|
attract: { |
||||
|
enable: false, |
||||
|
rotateX: 600, |
||||
|
rotateY: 1200, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
interactivity: { |
||||
|
detect_on: "canvas", |
||||
|
events: { |
||||
|
onhover: { |
||||
|
enable: true, |
||||
|
mode: "grab", |
||||
|
}, |
||||
|
onclick: { |
||||
|
enable: true, |
||||
|
mode: "push", |
||||
|
}, |
||||
|
resize: true, |
||||
|
}, |
||||
|
modes: { |
||||
|
grab: { |
||||
|
distance: 140, |
||||
|
line_linked: { |
||||
|
opacity: 1, |
||||
|
}, |
||||
|
}, |
||||
|
bubble: { |
||||
|
distance: 400, |
||||
|
size: 40, |
||||
|
duration: 2, |
||||
|
opacity: 8, |
||||
|
speed: 3, |
||||
|
}, |
||||
|
repulse: { |
||||
|
distance: 200, |
||||
|
duration: 0.4, |
||||
|
}, |
||||
|
push: { |
||||
|
particles_nb: 4, |
||||
|
}, |
||||
|
remove: { |
||||
|
particles_nb: 2, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
retina_detect: true, |
||||
|
}, |
||||
|
function () { |
||||
|
console.log("callback - particles.js config loaded"); |
||||
|
} |
||||
|
); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
// 获取公钥 |
||||
|
getPubKey() { |
||||
|
this.$http |
||||
|
.post("/auth/govweb/getKey") |
||||
|
.then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg); |
||||
|
} |
||||
|
|
||||
|
this.pubKey = res.data; // 获取到公钥; |
||||
|
}) |
||||
|
.catch(() => {}); |
||||
|
}, |
||||
|
// 获取验证码 |
||||
|
getCaptcha() { |
||||
|
this.dataForm.uuid = getUUID(); |
||||
|
this.captchaPath = `${window.SITE_CONFIG["apiURL"]}/auth/login/captcha?uuid=${this.dataForm.uuid}`; |
||||
|
}, |
||||
|
// 表单提交 |
||||
|
dataFormSubmitHandle() { |
||||
|
this.$refs["dataForm"].validate((valid, messageObj) => { |
||||
|
if (!valid) { |
||||
|
app.util.validateRule(messageObj); |
||||
|
} |
||||
|
this.startLoading(); |
||||
|
// const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/epmetuser/customerstaff/customerlist' |
||||
|
const url = "/epmetuser/customerstaff/customerlist"; |
||||
|
const params = { |
||||
|
phone: this.dataForm.phone, |
||||
|
}; |
||||
|
// this.$http |
||||
|
// .post(url, params).then(({ data })=> { |
||||
|
// console.log('res--comll', data) |
||||
|
// if (data.data.length === 0) { |
||||
|
// //没有客户，提示无法登录 |
||||
|
// this.$message.error('账号不存在') |
||||
|
// this.endLoading() |
||||
|
// } else if (data.data.length === 1) { |
||||
|
// this.selectCustomer(data.data[0]) |
||||
|
// } else { |
||||
|
// this.endLoading() |
||||
|
// this.diaVisible = true |
||||
|
// this.$nextTick(() => { |
||||
|
// this.tableData = data.data |
||||
|
// }) |
||||
|
// } |
||||
|
// }).catch((err) => { |
||||
|
// this.endLoading() |
||||
|
// this.$message.error(err) |
||||
|
// }) |
||||
|
window.app.ajax.post( |
||||
|
url, |
||||
|
params, |
||||
|
(data, rspMsg) => { |
||||
|
if (data.length === 0) { |
||||
|
//没有客户，提示无法登录 |
||||
|
this.$message.error("账号不存在"); |
||||
|
this.endLoading(); |
||||
|
} else if (data.length === 1) { |
||||
|
this.selectCustomer(data[0]); |
||||
|
} else { |
||||
|
this.endLoading(); |
||||
|
this.diaVisible = true; |
||||
|
this.$nextTick(() => { |
||||
|
this.tableData = data; |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
(rspMsg, data) => { |
||||
|
this.endLoading(); |
||||
|
this.$message.error(rspMsg); |
||||
|
} |
||||
|
); |
||||
|
}); |
||||
|
}, |
||||
|
// 平阴联动 自动登录接口 |
||||
|
getAutoLogin(platformToken) { |
||||
|
this.dataForm.thirdToken = platformToken; |
||||
|
this.dataForm.platform = "pyld"; |
||||
|
this.$http |
||||
|
.post(`/auth/sso/oper/third/login`, this.dataForm) |
||||
|
.then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
if (res.code == 8302) { |
||||
|
return this.$message.error(res.msg); |
||||
|
} |
||||
|
return this.$message.error(res.msg); |
||||
|
} |
||||
|
localStorage.setItem("customerId", res.data.customerId); |
||||
|
localStorage.setItem("userType", "work"); |
||||
|
localStorage.setItem("showHeader", "0"); |
||||
|
localStorage.setItem("token", res.data.token); |
||||
|
this.$router.replace({ name: "home" }); |
||||
|
}) |
||||
|
.catch(() => {}); |
||||
|
// epmet-ext9.elinkservice.cn/platform-admin |
||||
|
}, |
||||
|
//选择客户 |
||||
|
selectCustomer(row) { |
||||
|
localStorage.setItem("customerId", row.customerId); |
||||
|
localStorage.setItem("customerName", row.customerName); |
||||
|
this.startLoading(); |
||||
|
// const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/auth/govweb/login' |
||||
|
const url = "/auth/govweb/login"; |
||||
|
this.dataForm.customerId = row.customerId; |
||||
|
let param = {}; |
||||
|
Object.assign(param, this.dataForm); |
||||
|
param.password = this.encryptedData(this.pubKey, this.dataForm.password); |
||||
|
this.$http |
||||
|
.post(url, param) |
||||
|
.then(({ data: res }) => { |
||||
|
this.endLoading(); |
||||
|
if (res.code !== 0) { |
||||
|
this.getCaptcha(); |
||||
|
return this.$message.error(res.msg); |
||||
|
} |
||||
|
this.diaVisible = false; |
||||
|
|
||||
|
localStorage.setItem("userType", "work"); |
||||
|
|
||||
|
localStorage.setItem("token", res.data.token); |
||||
|
this.$router.replace({ name: "index" }); |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
this.endLoading(); |
||||
|
}); |
||||
|
}, |
||||
|
// 取消 |
||||
|
diaCancel() { |
||||
|
this.diaVisible = false; |
||||
|
}, |
||||
|
// 开启加载动画 |
||||
|
startLoading() { |
||||
|
loading = Loading.service({ |
||||
|
lock: true, // 是否锁定 |
||||
|
text: "正在加载……", // 加载中需要显示的文字 |
||||
|
background: "rgba(0,0,0,.7)", // 背景颜色 |
||||
|
}); |
||||
|
}, |
||||
|
// 结束加载动画 |
||||
|
endLoading() { |
||||
|
// clearTimeout(timer); |
||||
|
if (loading) { |
||||
|
loading.close(); |
||||
|
} |
||||
|
}, |
||||
|
// 加密 |
||||
|
encryptedData(key, data) { |
||||
|
// 新建JSEncrypt对象 |
||||
|
let encryptor = new JSEncrypt(); |
||||
|
// 设置公钥 |
||||
|
encryptor.setPublicKey(key); |
||||
|
// 加密数据 |
||||
|
return encryptor.encrypt(data); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" src="@/assets/scss/pages/yantai-login.scss" scoped></style> |
||||
Loading…
Reference in new issue