jianjun
3 years ago
24 changed files with 1131 additions and 9 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: 924 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.png); |
|||
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,61 @@ |
|||
<template> |
|||
<div class="g-app"> |
|||
<div class="g-bd" :style="bdStyle"> |
|||
<slot></slot> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
clientHeight: document.documentElement.clientHeight, |
|||
clientWidth: document.documentElement.clientWidth, |
|||
}; |
|||
}, |
|||
|
|||
components: {}, |
|||
computed: { |
|||
bdStyle() { |
|||
const { clientHeight, clientWidth } = this; |
|||
console.log("clientHeight", clientHeight); |
|||
const scale = clientWidth / 1920; |
|||
const height = clientHeight / scale; |
|||
const top = (clientHeight - height) / 2; |
|||
const left = (clientWidth - 1920) / 2; |
|||
return { |
|||
transform: `scale(${scale})`, |
|||
height: `${height}px`, |
|||
left: `${left}px`, |
|||
top: `${top}px`, |
|||
}; |
|||
}, |
|||
}, |
|||
created() {}, |
|||
mounted() { |
|||
window.addEventListener("resize", () => { |
|||
this.clientHeight = document.documentElement.clientHeight; |
|||
this.clientWidth = document.documentElement.clientWidth; |
|||
}); |
|||
}, |
|||
|
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.g-app { |
|||
position: absolute; |
|||
// width: 1920px; |
|||
width: 100%; |
|||
height: 100vh; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.g-bd { |
|||
position: absolute; |
|||
width: 1920px; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
</style> |
|||
@ -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