|
|
@@ -1,289 +1,249 @@
|
|
|
<template>
|
|
|
- <view class="window-box dis-flex flex-y-center">
|
|
|
- <view class="steps w40 form-box">
|
|
|
- <!-- <uv-steps :current="current" :customStyle="[{-->
|
|
|
- <!-- width:'70%',-->
|
|
|
- <!-- height:'90vh',-->
|
|
|
- <!-- }]" activeIcon="checkmark" direction="column" inactiveIcon="arrow-right">-->
|
|
|
- <!-- <uv-steps-item :iconSize="60" title="网络检测"></uv-steps-item>-->
|
|
|
- <!-- <uv-steps-item :iconSize="60" title="登录"></uv-steps-item>-->
|
|
|
- <!-- <uv-steps-item :iconSize="60" title="运行"></uv-steps-item>-->
|
|
|
- <!-- </uv-steps>-->
|
|
|
- <view class="h90 dis-flex flex-wrap flex-y-center step">
|
|
|
- <view v-for="(item,index) in pd.steps" class="w100">
|
|
|
- <view :class="[current < index? 'opacity' :'']" class="dis-flex flex-y-center flex-x-evenly p-r">
|
|
|
- <view :class="['circle-'+index]" class="circle dis-flex flex-center-center f-u-41 f-w-b p-r">
|
|
|
- <text>{{ index + 1 }}</text>
|
|
|
- <view v-if="item.next" class="p-a next">
|
|
|
- <uv-image :src="pd.imgUrl+item.next" height="97px" mode="widthFix" width="22px"></uv-image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view :class="['dian-'+index]" class="dian"></view>
|
|
|
- <view class="content dis-flex flex-center-center col-f f-u-51 f-w-b">
|
|
|
- <view class="w80 p-b-20 b-b p-l-20">{{ item.title }}</view>
|
|
|
- </view>
|
|
|
- <view v-if="item.img" class="p-a bg">
|
|
|
- <uv-image :src="pd.imgUrl+item.img" height="97px" width="86px"></uv-image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="window-box container-box">
|
|
|
+ <view class="flow-box" @click="changeStep">
|
|
|
+ <view class="flow-info">
|
|
|
+ <view class="flow-info-item">
|
|
|
+ <image :src="`${imgUrl}/start_img_web.png`" />
|
|
|
+ <view>网络检测</view>
|
|
|
+ </view>
|
|
|
+ <view class="flow-info-item">
|
|
|
+ <image :src="curStep > 1 ? `${imgUrl}/start_img_log_selected.png` : `${imgUrl}/start_img_log_disabled.png`" />
|
|
|
+ <view>登陆</view>
|
|
|
+ </view>
|
|
|
+ <view class="flow-info-item">
|
|
|
+ <image
|
|
|
+ :src="curStep > 2 ? `${imgUrl}/start_img_system_selected.png` : `${imgUrl}/start_img_system_disabled.png`" />
|
|
|
+ <view>进入系统</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+ <view class="flow-step">
|
|
|
+ <view v-if="curStep == 1" class="flow-step-item flow-step-item1">1</view>
|
|
|
+ <image v-else :src="`${imgUrl}/start_icon_done_blue.png`" />
|
|
|
+ <view class="flow-step-point" :class="curStep > 1 ? 'flow-step-point-active1' : ''">········</view>
|
|
|
+ <view v-if="curStep == 1" class="flow-step-item">2</view>
|
|
|
+ <view v-else-if="curStep == 2" class="flow-step-item flow-step-item2">2</view>
|
|
|
+ <image v-else :src="`${imgUrl}/start_icon_done_green.png`" />
|
|
|
+ <view class="flow-step-point" :class="curStep > 2 ? 'flow-step-point-active2' : ''">········</view>
|
|
|
+ <view v-if="curStep < 3" class="flow-step-item">3</view>
|
|
|
+ <view v-else-if="curStep == 3" class="flow-step-item flow-step-item3">3</view>
|
|
|
+ <image v-else :src="`${imgUrl}/start_icon_done_yellow.png`" />
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="form-box w60 flex-center-center flex-dir-column">
|
|
|
- <view class="w100 h70 flex-center-center w-bg b-r-15 p-r">
|
|
|
- <view v-if="current === 0" class="w100">
|
|
|
- <view v-if="pd.network.search" class="f-42 col-c t-a-c">
|
|
|
- 网络检测中。。。
|
|
|
- </view>
|
|
|
- <!-- <view @click="network">重新检测网络</view>-->
|
|
|
- <template v-else>
|
|
|
- <view class="dis-flex flex-wrap flex-dir-column flex-center-center ">
|
|
|
- <view>
|
|
|
- <uv-image :src="pd.imgUrl+ '/login-wifi.png'" height="150px" width="150px"></uv-image>
|
|
|
- </view>
|
|
|
- <view class="f-u-35 col-9 t-a-c p-t-10">
|
|
|
- 当前网络：{{ pd.network.type === 'unknown' ? '未知网络但可用' : pd.network.type }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <view class="p-a btns">
|
|
|
- <view class="btn btn-primary w100" @click="next">
|
|
|
- {{ pd.network.type === 'none' ? '重新检测网络' : '下一步' }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view v-if="current === 1" class="flex-dir-column w100">
|
|
|
- <view class=" dis-flex flex-center-center w100">
|
|
|
- <view v-if="pd.login" class="f-42 col-c t-a-c">
|
|
|
- 自动登录中。。。
|
|
|
- </view>
|
|
|
- <view v-else class="w50">
|
|
|
- <uv-form ref="form" :model="pd.loginForm" label-width="80px" labelPosition="left">
|
|
|
- <uv-form-item borderBottom label="设备码" leftIcon="order" prop="pd.loginForm.mac">
|
|
|
- <uv-input v-model="pd.loginForm.mac" border="none"/>
|
|
|
- </uv-form-item>
|
|
|
- <uv-form-item borderBottom label="密码" leftIcon="lock-fill" prop="pd.loginForm.pwd">
|
|
|
- <uv-input v-model="pd.loginForm.pwd" border="none" type="password"/>
|
|
|
- </uv-form-item>
|
|
|
- </uv-form>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class=" p-a btns">
|
|
|
- <view class="btn btn-primary w100" @click="loginHandle">登录</view>
|
|
|
- </view>
|
|
|
+ <view class="info-box">
|
|
|
+ <view v-if="curStep == 1" class="step1-box">
|
|
|
+ <image :src="`${imgUrl}/start_img_default.png`" />
|
|
|
+ <view class="tips-box">
|
|
|
+ <view class="tips">暂无网络连接，请重试</view>
|
|
|
+ <view class="btn btn-primary" @click="toSelect">重新检测</view>
|
|
|
</view>
|
|
|
-
|
|
|
- <view v-if="current === 2" class="f-42 col-green t-a-c flex-center-center">
|
|
|
- <uv-icon name="checkmark-circle" size="80"/>
|
|
|
- 检测完成，正在进入系统
|
|
|
+ </view>
|
|
|
+ <view v-else-if="curStep == 2" class="step2-box">
|
|
|
+ <uv-input placeholder="请输入设备码" border="surround" fontSize="28upx" height="97upx" v-model="loginForm.mac"
|
|
|
+ class="step2-input"></uv-input>
|
|
|
+ <uv-input placeholder="请输入密码" border="surround" fontSize="28upx" v-model="loginForm.pwd" password="true"
|
|
|
+ class="step2-input"></uv-input>
|
|
|
+ <view style="display: flex;">
|
|
|
+ <view class="btn btn-green" @click="toSelect">登录</view>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
- <view class="btn-box">
|
|
|
- <view class="btn btn-su" @click="restartCheck">重新检测</view>
|
|
|
+ <view v-else class="step3-box">
|
|
|
+ <image :src="`${imgUrl}/start_img_system.png`" />
|
|
|
+ <view class="tips-box">
|
|
|
+ <view class="tips">正在进入系统中，请耐心等待...</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import {onActivated, onMounted, reactive, ref} from "vue";
|
|
|
-import {getNetworkType} from "@/utils/uniFunction";
|
|
|
-import {useUserStore} from "@/store/useUserStore";
|
|
|
-import {logs, sleep} from "@/utils/util";
|
|
|
-import {machineTypeList} from "@/utils/machine/config";
|
|
|
-import {useConfigStore} from "@/store/useConfigStore";
|
|
|
-import {getBeforePage, redirectTo} from "@/utils/app";
|
|
|
-import {FileStorage} from "@/utils/fileStorage";
|
|
|
-import {calcStrHash} from "@/utils/machine/function";
|
|
|
-
|
|
|
-
|
|
|
-const userStore = useUserStore()
|
|
|
-const configStore = useConfigStore()
|
|
|
-
|
|
|
-
|
|
|
-const fileStorage = new FileStorage()
|
|
|
+import { onActivated, onMounted, reactive, ref } from "vue";
|
|
|
+import config from "@/utils/config";
|
|
|
+
|
|
|
+const imgUrl = ref('/static/image/bmi-init')
|
|
|
+const curStep = ref(1)
|
|
|
+const loginForm = ref({
|
|
|
+ mac: '',
|
|
|
+ pwd: ''
|
|
|
+})
|
|
|
|
|
|
-const current = ref(0)
|
|
|
+const changeStep = () => {
|
|
|
+ curStep.value += 1
|
|
|
+}
|
|
|
|
|
|
-const pd = reactive({
|
|
|
- network: {
|
|
|
- search: false,
|
|
|
- type: 'none',
|
|
|
- },
|
|
|
- login: false,
|
|
|
- loginForm: {
|
|
|
- mac: '',
|
|
|
- pwd: '',
|
|
|
- },
|
|
|
- imgUrl: '/static/image',
|
|
|
- steps: [{title: '网络检测', img: '/login-image1.png', next: '/login-next1.png'}, {
|
|
|
- title: '登陆',
|
|
|
- next: '/login-next1.png'
|
|
|
- }, {title: '进入系统'}],
|
|
|
+// 挂载完成之后
|
|
|
+onMounted(() => {
|
|
|
})
|
|
|
-const machineList = ref(JSON.parse(JSON.stringify(machineTypeList)))
|
|
|
+</script>
|
|
|
|
|
|
-const currentAdd = async () => {
|
|
|
- console.log('currentAdd')
|
|
|
- if (current.value < 2) current.value++
|
|
|
- if (current.value === 1 && pd.login) {
|
|
|
- await sleep(1000)
|
|
|
- current.value++
|
|
|
- }
|
|
|
- if (current.value === 2 && pd.login) {
|
|
|
- await sleep(1000)
|
|
|
- redirectTo('pages/index/index', {}, 2)
|
|
|
- }
|
|
|
+<style scoped>
|
|
|
+.btn {
|
|
|
+ width: 480upx;
|
|
|
+ border-radius: 21upx;
|
|
|
+ margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
-const network = async () => {
|
|
|
- pd.network.search = true
|
|
|
- try {
|
|
|
- let network = await getNetworkType()
|
|
|
- pd.network.type = network.networkType
|
|
|
- pd.network.search = false
|
|
|
- } catch (e) {
|
|
|
- pd.network.search = false
|
|
|
- }
|
|
|
+.flow-box {
|
|
|
+ margin: 50upx auto 0;
|
|
|
+ width: 650upx;
|
|
|
}
|
|
|
|
|
|
-const next = async () => {
|
|
|
- if (current.value === 0) {
|
|
|
- if (pd.network.type === 'none') {
|
|
|
- await network()
|
|
|
- } else {
|
|
|
- await currentAdd()
|
|
|
- }
|
|
|
- }
|
|
|
+.flow-info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
-const restartCheck = () => {
|
|
|
- current.value = 0
|
|
|
+.flow-info-item {
|
|
|
+ width: 200upx;
|
|
|
+ height: 230upx;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 21upx;
|
|
|
}
|
|
|
|
|
|
-const loginHandle = () => {
|
|
|
- pd.login = true
|
|
|
- currentAdd()
|
|
|
+.flow-info-item view {
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 35upx;
|
|
|
+ color: #FFF;
|
|
|
+ margin-top: 24upx;
|
|
|
+ z-index: 9;
|
|
|
+ width: 200upx;
|
|
|
+ height: 230upx;
|
|
|
+ position: absolute;
|
|
|
}
|
|
|
|
|
|
-const machineChange = (item) => {
|
|
|
- configStore.setMachineType(item)
|
|
|
- currentAdd()
|
|
|
+.flow-info image {
|
|
|
+ width: 200upx;
|
|
|
+ height: 230upx;
|
|
|
+ position: absolute;
|
|
|
+ border-radius: 21upx;
|
|
|
}
|
|
|
|
|
|
-const getConfig = async () => {
|
|
|
- console.log('plus.io.convertLocalFileSystemURL( url )', plus.io.convertLocalFileSystemURL('/'))
|
|
|
- let mac = await configStore.getMac()
|
|
|
- console.log('mac', mac)
|
|
|
+.flow-step {
|
|
|
+ display: flex;
|
|
|
+ width: 550upx;
|
|
|
+ line-height: 70upx;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin: 20upx auto 0;
|
|
|
}
|
|
|
|
|
|
-// 挂载完成之后
|
|
|
-onMounted(() => {
|
|
|
- // let beforePage = getBeforePage(0)
|
|
|
- // network()
|
|
|
- getConfig()
|
|
|
-})
|
|
|
-
|
|
|
-// 激活页面时
|
|
|
-onActivated(() => {
|
|
|
-})
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.window-box {
|
|
|
- background: #EBEDF4;
|
|
|
+.flow-step-item {
|
|
|
+ width: 70upx;
|
|
|
+ height: 70upx;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 35upx;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 8upx solid #D9D9D9;
|
|
|
+ background: #fff;
|
|
|
+ color: #D9D9D9;
|
|
|
}
|
|
|
|
|
|
-.steps {
|
|
|
-
|
|
|
- > > > .uv-steps-item {
|
|
|
- background: green;
|
|
|
-
|
|
|
- &__line--column {
|
|
|
- width: 30rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+.flow-step image {
|
|
|
+ height: 86upx;
|
|
|
+ width: 86upx;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
-.form-box {
|
|
|
- padding: 2.5vw;
|
|
|
+.flow-step-item1 {
|
|
|
+ border: 8upx solid rgb(205, 223, 252);
|
|
|
+ background: #2F87F5;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
|
|
|
-.step {
|
|
|
+.flow-step-item2 {
|
|
|
+ border: 8upx solid rgb(183, 232, 227);
|
|
|
+ background: #01CF7A;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
|
|
|
- .circle {
|
|
|
- width: 90rpx;
|
|
|
- height: 90rpx;
|
|
|
- border-radius: 50%;
|
|
|
+.flow-step-item3 {
|
|
|
+ border: 8upx solid rgb(236, 230, 218);
|
|
|
+ background: #FFC64D;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
|
|
|
- &-0 {
|
|
|
- background-color: #FFFFFF;
|
|
|
- border: 8rpx solid #027EEC;
|
|
|
- color: #027EEC;
|
|
|
- }
|
|
|
+.flow-step-point {
|
|
|
+ font-size: 40upx;
|
|
|
+ font-weight: 700;
|
|
|
+ position: relative;
|
|
|
+ top: 10upx;
|
|
|
+ color: #D9D9D9;
|
|
|
+}
|
|
|
|
|
|
- &-1 {
|
|
|
- background-color: #FFFFFF;
|
|
|
- border: 8rpx solid #17ACC3;
|
|
|
- color: #17ACC3;
|
|
|
- }
|
|
|
+.flow-step-point-active1 {
|
|
|
+ color: #0369E8;
|
|
|
+}
|
|
|
|
|
|
- &-2 {
|
|
|
- background-color: #FFFFFF;
|
|
|
- border: 8rpx solid #F7B03C;
|
|
|
- color: #F7B03C;
|
|
|
- }
|
|
|
- }
|
|
|
+.flow-step-point-active2 {
|
|
|
+ color: #01CF7A;
|
|
|
+}
|
|
|
|
|
|
- .dian {
|
|
|
- width: 28rpx;
|
|
|
- height: 28rpx;
|
|
|
- border-radius: 50%;
|
|
|
+.info-box {
|
|
|
+ background: #fff;
|
|
|
+ width: 650upx;
|
|
|
+ height: 650upx;
|
|
|
+ border-radius: 35upx;
|
|
|
+ margin: 20upx auto 0;
|
|
|
+}
|
|
|
|
|
|
- &-0 {
|
|
|
- background-color: #027EEC;
|
|
|
- }
|
|
|
+.container-box {
|
|
|
+ background-image: url('/static/image/bmi-init/img_bg.png');
|
|
|
+ background-repeat: repeat-x;
|
|
|
+}
|
|
|
|
|
|
- &-1 {
|
|
|
- background-color: #17ACC3;
|
|
|
- }
|
|
|
+.step2-box {
|
|
|
+ width: 650upx;
|
|
|
+ height: 650upx;
|
|
|
+ padding-top: 60upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
|
|
|
- &-2 {
|
|
|
- background-color: #F7B03C;
|
|
|
- }
|
|
|
- }
|
|
|
+.step1-box image {
|
|
|
+ width: 490upx;
|
|
|
+ height: 313upx;
|
|
|
+ margin: 0 auto 0;
|
|
|
+ padding-top: 40upx;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
|
|
|
- .content {
|
|
|
- background-image: url('static/image/login-bg1.png');
|
|
|
- width: 500rpx;
|
|
|
- height: 200rpx;
|
|
|
- background-position: center center;
|
|
|
- background-size: 100%;
|
|
|
- background-repeat: no-repeat;
|
|
|
- }
|
|
|
+.step3-box image {
|
|
|
+ width: 479upx;
|
|
|
+ height: 479upx;
|
|
|
+ margin: 0 auto 0;
|
|
|
+ padding-top: 40upx;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
|
|
|
- .bg {
|
|
|
- right: 7%;
|
|
|
- top: -35%;
|
|
|
- }
|
|
|
+.tips-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
|
|
|
- .next {
|
|
|
- top: 100%;
|
|
|
- transform: translateY(60%)
|
|
|
- }
|
|
|
+.tips {
|
|
|
+ font-size: 21rpx;
|
|
|
+ color: #6F6F6F;
|
|
|
+ text-align: center;
|
|
|
+ margin: 30upx 0;
|
|
|
}
|
|
|
|
|
|
-.opacity {
|
|
|
- opacity: 0.5;
|
|
|
+.step2-box .step2-input {
|
|
|
+ width: 547upx;
|
|
|
+ height: 97upx !important;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-width: 3upx !important;
|
|
|
+ border-color: #01CF7A !important;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #6F6F6F;
|
|
|
+ border-radius: 20upx !important;
|
|
|
+ line-height: 97upx !important;
|
|
|
+ margin: 0 auto 60upx;
|
|
|
}
|
|
|
|
|
|
-.btns {
|
|
|
- bottom: 10px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 200rpx;
|
|
|
+.btn-green {
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: #01CF7A;
|
|
|
+ border-color: #01CF7A;
|
|
|
+ margin: 0 auto;
|
|
|
}
|
|
|
</style>
|
