| | |
| | | <template> |
| | | <div class="desktop"> |
| | | <d-frame |
| | | v-for="item in this.$store.state.desktop.frames" |
| | | :data="item" |
| | | :key="item.id" |
| | | ></d-frame> |
| | | <safari |
| | | :data="$store.state.desktop.safari" |
| | | v-if="$store.state.desktop.safari.active" |
| | | ></safari> |
| | | <d-frame v-for="item in this.$store.state.desktop.frames" :data="item" :key="item.id"></d-frame> |
| | | <safari :data="$store.state.desktop.safari" v-if="$store.state.desktop.safari.active"></safari> |
| | | |
| | | <div class="warn-tag" v-if="showFreeVersion"> |
| | | <!-- 暂时隐藏试用版提示 --> |
| | | <!-- <div class="warn-tag" v-if="showFreeVersion"> --> |
| | | <div class="warn-tag" v-show="false"> |
| | | <span v-if="!snExpire" class="text" |
| | | >试用版尚未激活,仅支持使用部分功能,如需使用全部功能,请尽快激活。</span |
| | | >{{ versionName }}尚未激活,仅支持使用部分功能,如需使用全部功能,请尽快激活。</span |
| | | > |
| | | <span v-else class="text">SmartAIOS 试用期已到期,请您尽快激活系统</span> |
| | | <div> |
| | | <span class="go-to" @click="gotoActive">前往激活</span> |
| | | <span |
| | | class="icon iconfont" |
| | | v-if="!snExpire" |
| | | @click="showFreeVersion = false" |
| | | ></span |
| | | > |
| | | <span class="icon iconfont" v-if="!snExpire" @click="showFreeVersion = false"></span> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | </span> |
| | | </div> |
| | | <div class="login-content"> |
| | | <!-- status-icon --> |
| | | <el-form |
| | | :model="phone" |
| | | :rules="phoneCodeRule" |
| | |
| | | <span slot="footer" class="dialog-footer"> |
| | | <div class="btns"> |
| | | <el-button class="cancel" @click="cancelLogin">取消</el-button> |
| | | <el-button class="ok" type="primary" @click="loginShop" |
| | | >确定</el-button |
| | | > |
| | | <el-button class="ok" type="primary" @click="loginShop">确定</el-button> |
| | | </div> |
| | | </span> |
| | | </el-dialog> |
| | | <div class="ver"> |
| | | <span class="ver-text">版本:</span>{{ versionName }} |
| | | </div> |
| | | <div class="ver"> |
| | | <span class="ver-text">状态:</span>{{ versionState }} |
| | | </div> |
| | | <div class="ver"><span class="ver-text">版本:</span>SmartAI{{ versionName }}</div> |
| | | <div class="ver"><span class="ver-text">状态:</span>尚未激活</div> |
| | | <el-divider></el-divider> |
| | | <div class="info" v-if="versionName == 'SmartAI正式版'"> |
| | | <div class="info" v-if="versionName == '正式版'"> |
| | | <span style="font-weight: bold; font-size: 18px">· </span> |
| | | <span style="font-size: 14px; line-height: 21px; color: #5f5f5f"> |
| | | 如果您已连接到Internet并且已购买产品密钥,可以尝试验证SmartAI商城账户激活系统。 |
| | |
| | | </el-button> |
| | | </div> |
| | | </div> |
| | | <div class="info" v-if="versionName == 'SmartAI正式版'"> |
| | | <div class="info" v-if="versionName == '正式版'"> |
| | | <span style="font-weight: bold; font-size: 18px">· </span> |
| | | <span style="font-size: 14px; line-height: 21px; color: #5f5f5f"> |
| | | 如果您未连接Internet或激活失败,可尝试离线激活,请用手机扫码购买产品或验证SmartAI商城账户激活系统。 |
| | | </span> |
| | | </div> |
| | | <div class="info" v-if="versionName !== 'SmartAI正式版'"> |
| | | <div class="info" v-if="versionName !== '正式版'"> |
| | | <span style="font-weight: bold; font-size: 18px">· </span> |
| | | <span style="font-size: 14px; line-height: 21px; color: #5f5f5f"> |
| | | 如果还没有产品密钥,你可以使用手机扫码或前往此链接 |
| | | <a href="http://apps.smartai.com" target="_blank" |
| | | >http://apps.smartai.com</a |
| | | > |
| | | <a href="http://apps.smartai.com" target="_blank">http://apps.smartai.com</a> |
| | | 购买。 |
| | | </span> |
| | | </div> |
| | |
| | | </div> |
| | | <div class="validate"> |
| | | <form id="myForm"> |
| | | <el-input |
| | | type="textarea" |
| | | autosize |
| | | style="width: 450px" |
| | | placeholder="请输入或导入密钥" |
| | | v-model="secrectKey" |
| | | > |
| | | <el-input type="textarea" autosize style="width: 450px" placeholder="请输入或导入密钥" v-model="secrectKey"> |
| | | </el-input> |
| | | </form> |
| | | |
| | | <el-upload |
| | | class="upload-demo" |
| | | action |
| | | :http-request="uploadKey" |
| | | :limit="1" |
| | | :show-file-list="false" |
| | | > |
| | | <el-upload class="upload-demo" action :http-request="uploadKey" :limit="1" :show-file-list="false"> |
| | | <el-button size="small" type="primary">导入密钥</el-button> |
| | | </el-upload> |
| | | </div> |
| | | <!-- <el-divider></el-divider> --> |
| | | |
| | | <span slot="footer" class="dialog-footer"> |
| | | <!-- v-if="!snExpire && versionName != 'SmartAI正式版'" --> |
| | | <div class="btns"> |
| | | <el-button |
| | | v-if="!snExpire && versionName != 'SmartAI正式版'" |
| | | class="cancel" |
| | | @click="activeDialog = false" |
| | | <el-button v-if="!snExpire && versionName != '正式版'" class="cancel" @click="activeDialog = false" |
| | | >继续试用</el-button |
| | | > |
| | | <el-button |
| | | class="cancel" |
| | | v-if="snExpire && versionName != 'SmartAI正式版'" |
| | | @click="$emit('quit')" |
| | | >退出登录 |
| | | <el-button class="cancel" v-if="snExpire && versionName != '正式版'" @click="$emit('quit')" |
| | | >退出登陆 |
| | | </el-button> |
| | | <el-button class="ok" type="primary" @click="activateVersion" |
| | | >激活</el-button |
| | | > |
| | | <el-button class="ok" type="primary" @click="activateVersion">激活</el-button> |
| | | </div> |
| | | </span> |
| | | </el-dialog> |
| | |
| | | </div> |
| | | |
| | | <div class="order-list" v-if="orderList.length"> |
| | | <div |
| | | class="wrap" |
| | | style="margin: 0 5px" |
| | | v-for="(item, index) in orderList" |
| | | :key="index" |
| | | > |
| | | <div class="wrap" style="margin: 0 5px" v-for="(item, index) in orderList" :key="index"> |
| | | <div class="order-card" v-for="(prod, i) in item.products" :key="i"> |
| | | <div class="head"> |
| | | <el-checkbox v-model="checked" @change="choseProd(item, prod)"> |
| | |
| | | <span>{{ item.orderMoney }} 元</span> |
| | | </div> |
| | | <div class="desc"> |
| | | <div>订单生成日期:{{ item.createTime }}</div> |
| | | <div>产品名称:{{ prod.productName }}</div> |
| | | <div>产品类型:{{ prod.productTypeName }}</div> |
| | | <div>系统版本:{{ prod.edition }}</div> |
| | | <div>通道数量:{{ prod.ChCount }}</div> |
| | | <div>摄像机数量:{{ prod.cameraCount }}</div> |
| | | <div>服务时长:{{ prod.serveYear }} 年</div> |
| | | <div>授权数量:{{ prod.authCount }}</div> |
| | | <div>起止服务时间 :{{ startAndEnd(item.createTime, prod.serveYear) }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="no-order-list" v-else>抱歉,没有查询到订单。</div> |
| | | <div class="no-order-list" v-else> |
| | | {{ loadingOrders ? "订单加载中,请稍后..." : "抱歉,未查询到订单信息!" }} |
| | | </div> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <div class="btns"> |
| | | <el-button class="cancel" @click="$emit('quit')">退出登录</el-button> |
| | | <el-button class="ok" type="primary" @click="activeVerByOrd" |
| | | >激活</el-button |
| | | > |
| | | <el-button class="ok" type="primary" @click="activeVerByOrd">激活</el-button> |
| | | </div> |
| | | </span> |
| | | </el-dialog> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import DFrame from "./DFrame"; |
| | | import Safari from "./Safari"; |
| | | import { isPhone } from "../../../../scripts/validate.ts"; |
| | | import DFrame from "./DFrame" |
| | | import Safari from "./Safari" |
| | | import { isPhone } from "../../../../scripts/validate.ts" |
| | | import { |
| | | getActiveQrCode, |
| | | getSN, |
| | |
| | | getSmsCode, |
| | | loginShopInSmart, |
| | | getShopOrderList, |
| | | activeByOrder, |
| | | } from "@/api/system"; |
| | | activeByOrder |
| | | } from "@/api/system" |
| | | export default { |
| | | name: "Desktop", |
| | | components: { |
| | | DFrame, |
| | | Safari, |
| | | Safari |
| | | }, |
| | | data() { |
| | | return { |
| | | showFreeVersion: false, |
| | | activeDialog: false, |
| | | countdown: 60, |
| | | innerDialog: true, |
| | | innerDialog: false, |
| | | versionName: "", |
| | | codeMsg: "获取验证码", |
| | | versionState: "尚未激活", |
| | | secrectKey: "", |
| | | curOrder: {}, |
| | | curProd: {}, |
| | |
| | | snExpire: false, |
| | | timer: null, |
| | | token: "", |
| | | orderList: [ |
| | | { |
| | | id: "da09c92a-8bc0-4586-998e-4b6113f457fc", |
| | | orderMoney: 2320, |
| | | products: [ |
| | | { |
| | | ChCount: 16, |
| | | activateCode: "E8B72-E0B09-5F44B-8BBC4-1C5AC", |
| | | activeTime: "", |
| | | appendix: [], |
| | | authCount: 16, |
| | | cameraCount: 0, |
| | | codeStatus: 0, |
| | | devCount: 1, |
| | | devIdList: ["407394c3-bc46-446b-88d5-ddf6d4694e32"], |
| | | devInstallLimit: 1, |
| | | edition: "", |
| | | moduleNames: [], |
| | | orderId: "", |
| | | productBaseDetail: null, |
| | | productId: "44aa3c6c-cb1a-445c-9c42-3af3f0d1bcf4", |
| | | productName: "SmartAI产品密钥", |
| | | productPrice: 0, |
| | | productType: 5, |
| | | productTypeName: "产品密钥", |
| | | productVersion: "", |
| | | sdkNames: [], |
| | | serveYear: 2, |
| | | targetPlatform: "", |
| | | usedCount: 0, |
| | | userId: "", |
| | | }, |
| | | ], |
| | | }, |
| | | |
| | | { |
| | | id: "da09c92a-8bc0-4586-998e-4b6113f457fc", |
| | | |
| | | orderMoney: 2320, |
| | | products: [ |
| | | { |
| | | ChCount: 16, |
| | | activateCode: "E8B72-E0B09-5F44B-8BBC4-1C5AC", |
| | | activeTime: "", |
| | | appendix: [], |
| | | authCount: 16, |
| | | cameraCount: 0, |
| | | codeStatus: 0, |
| | | devCount: 1, |
| | | devIdList: ["407394c3-bc46-446b-88d5-ddf6d4694e32"], |
| | | devInstallLimit: 1, |
| | | edition: "", |
| | | moduleNames: [], |
| | | orderId: "", |
| | | productBaseDetail: null, |
| | | productId: "44aa3c6c-cb1a-445c-9c42-3af3f0d1bcf4", |
| | | productName: "SmartAI产品密钥", |
| | | productPrice: 0, |
| | | productType: 5, |
| | | productTypeName: "产品密钥", |
| | | productVersion: "", |
| | | sdkNames: [], |
| | | serveYear: 2, |
| | | targetPlatform: "", |
| | | usedCount: 0, |
| | | userId: "", |
| | | }, |
| | | ], |
| | | }, |
| | | ], |
| | | loadingOrders: true, |
| | | orderList: [], |
| | | phone: { |
| | | phoneNum: "", |
| | | verifyCode: "", |
| | | verifyCode: "" |
| | | }, |
| | | phoneCodeRule: { |
| | | phoneNum: [{ validator: isPhone, trigger: "blur" }], |
| | | verifyCode: [ |
| | | { required: true, message: "请输入验证码", trigger: "blur" }, |
| | | ], |
| | | }, |
| | | }; |
| | | verifyCode: [{ required: true, message: "请输入验证码", trigger: "blur" }] |
| | | } |
| | | } |
| | | }, |
| | | created() { |
| | | this.validateSn(); |
| | | this.validateSn() |
| | | }, |
| | | methods: { |
| | | startAndEnd(createTime, serveYear) { |
| | | let year = createTime.split("-")[0] |
| | | let endTime = parseInt(year) + serveYear + createTime.slice(4) |
| | | return createTime + " - " + endTime |
| | | }, |
| | | activeVerByOrd() { |
| | | activeByOrder({ |
| | | token: this.token, |
| | | activateCode: this.curProd.activateCode, |
| | | productId: this.curProd.productId, |
| | | orderId: this.curOrder.id, |
| | | orderId: this.curOrder.id |
| | | }).then((res) => { |
| | | if (res.code == 200) { |
| | | this.$notify.success("激活成功"); |
| | | this.innerDialog = false; |
| | | this.versionName = this.getVersionName(res.data.edition); |
| | | this.$notify.success("激活成功") |
| | | this.innerDialog = false |
| | | this.versionName = this.getVersionName(res.data.edition) |
| | | } else { |
| | | this.$notify.error("激活失败"); |
| | | this.$notify.error("激活失败") |
| | | } |
| | | }); |
| | | }) |
| | | }, |
| | | validateSn() { |
| | | getSN().then((res) => { |
| | | this.snExpire = res.data.expire; |
| | | this.showFreeVersion = res.data.sn == "" || res.data.expire; |
| | | this.versionName = this.getVersionName(res.data.edition); |
| | | }); |
| | | this.snExpire = res.data.expire |
| | | this.activeDialog = res.data.expire |
| | | this.showFreeVersion = res.data.sn == "" || res.data.expire |
| | | this.versionName = this.getVersionName(res.data.edition) |
| | | }) |
| | | }, |
| | | getValidStr() { |
| | | if (this.countdown > 0 && this.countdown <= 60) { |
| | | this.countdown--; |
| | | this.countdown-- |
| | | if (this.countdown !== 0) { |
| | | this.codeMsg = "重新发送(" + this.countdown + ")"; |
| | | this.codeMsg = "重新发送(" + this.countdown + ")" |
| | | } else { |
| | | clearInterval(this.timer); |
| | | this.codeMsg = "获取验证码"; |
| | | this.countdown = 60; |
| | | this.timer = null; |
| | | this.codeDisabled = false; |
| | | clearInterval(this.timer) |
| | | this.codeMsg = "获取验证码" |
| | | this.countdown = 60 |
| | | this.timer = null |
| | | this.codeDisabled = false |
| | | } |
| | | } |
| | | }, |
| | | choseProd(order, prod) { |
| | | debugger; |
| | | this.curOrder = order; |
| | | this.curProd = prod; |
| | | this.curOrder = order |
| | | this.curProd = prod |
| | | }, |
| | | getVersionName(s) { |
| | | switch (s) { |
| | | case "alpha": |
| | | return "SmartAI内测版"; |
| | | return "内测版" |
| | | case "beta": |
| | | return "SmartAI公测版"; |
| | | return "公测版" |
| | | case "trial": |
| | | return "SmartAI试用版"; |
| | | return "试用版" |
| | | case "test": |
| | | return "SmartAI测试版"; |
| | | return "测试版" |
| | | case "official": |
| | | return "SmartAI正式版"; |
| | | return "正式版" |
| | | default: |
| | | return "SmartAI定制版"; |
| | | break; |
| | | return "定制版" |
| | | break |
| | | } |
| | | }, |
| | | loginShop() { |
| | |
| | | if (valid) { |
| | | let param = { |
| | | phoneNum: this.phone.phoneNum, |
| | | verifyCode: this.phone.verifyCode, |
| | | }; |
| | | verifyCode: this.phone.verifyCode |
| | | } |
| | | loginShopInSmart(param).then((res) => { |
| | | this.innerDialog = true; |
| | | this.activeDialog = false; |
| | | this.token = res.data.access_token; |
| | | this.innerDialog = true |
| | | this.activeDialog = false |
| | | |
| | | this.token = res.data.access_token |
| | | getShopOrderList({ token: this.token }) |
| | | .then((res) => { |
| | | if (res.code == 200) { |
| | | // this.orderList = res.data.list; |
| | | this.orderList = res.data.list |
| | | this.loadingOrders = false |
| | | } else { |
| | | this.$notify.error("获取订单列表失败"); |
| | | this.$notify.error("获取订单列表失败") |
| | | } |
| | | }) |
| | | .catch(() => { |
| | | this.$notify.error("获取订单列表失败"); |
| | | }); |
| | | }); |
| | | this.$notify.error("获取订单列表失败") |
| | | }) |
| | | }) |
| | | } else { |
| | | this.nullRule = {}; |
| | | this.nullRule = {} |
| | | } |
| | | }); |
| | | }) |
| | | }, |
| | | cancelLogin() { |
| | | this.innerVisible = false; |
| | | this.innerVisible = false |
| | | }, |
| | | getCode() { |
| | | var pattern = /^1[345789]\d{9}$/; |
| | | var pattern = /^1[345789]\d{9}$/ |
| | | if (this.phone.phoneNum == "") { |
| | | this.$refs["phoneLogin"].fields[0].validateMessage = "请输入手机号"; |
| | | this.$refs["phoneLogin"].fields[0].validateState = "error"; |
| | | return; |
| | | this.$refs["phoneLogin"].fields[0].validateMessage = "请输入手机号" |
| | | this.$refs["phoneLogin"].fields[0].validateState = "error" |
| | | return |
| | | } |
| | | if (!pattern.test(this.phone.phoneNum)) { |
| | | this.$refs["phoneLogin"].fields[0].validateMessage = "手机号码格式有误"; |
| | | this.$refs["phoneLogin"].fields[0].validateState = "error"; |
| | | return; |
| | | this.$refs["phoneLogin"].fields[0].validateMessage = "手机号码格式有误" |
| | | this.$refs["phoneLogin"].fields[0].validateState = "error" |
| | | return |
| | | } |
| | | if (!this.timer) { |
| | | this.codeDisabled = true; |
| | | this.getValidStr(); |
| | | this.timer = setInterval(this.getValidStr, 1000); |
| | | this.codeDisabled = true |
| | | this.getValidStr() |
| | | this.timer = setInterval(this.getValidStr, 1000) |
| | | getSmsCode({ phoneNum: this.phone.phoneNum }) |
| | | .then((res) => { |
| | | this.gotCode = true; |
| | | this.gotCode = true |
| | | }) |
| | | .catch((err) => { |
| | | this.$refs["phoneLogin"].fields[0].validateMessage = err.data.msg; |
| | | this.$refs["phoneLogin"].fields[0].validateState = "error"; |
| | | }); |
| | | this.$refs["phoneLogin"].fields[0].validateMessage = err.data.msg |
| | | this.$refs["phoneLogin"].fields[0].validateState = "error" |
| | | }) |
| | | } |
| | | }, |
| | | activateVersion() { |
| | | if (this.secrectKey.trim() == "") { |
| | | this.$message.warning("请先填写产品密钥"); |
| | | return; |
| | | this.$message.warning("请先填写产品密钥") |
| | | return |
| | | } |
| | | activateVersion({ code: this.secrectKey.trim() }) |
| | | .then((res) => { |
| | | debugger; |
| | | if (res.code == 200) { |
| | | this.$notify.success("激活成功"); |
| | | this.validateSn(); |
| | | this.goToSysInfo(); |
| | | this.activeDialog = false; |
| | | this.$notify.success("激活成功") |
| | | this.validateSn() |
| | | this.goToSysInfo() |
| | | this.activeDialog = false |
| | | } else { |
| | | this.$notify.error(res.msg); |
| | | this.$notify.error(res.msg) |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | this.$notify.error(err.msg); |
| | | }); |
| | | this.$notify.error(err.msg) |
| | | }) |
| | | }, |
| | | goToSysInfo() { |
| | | window.parent.postMessage({ msg: `toVindicate?menu=系统信息` }, "*"); |
| | | window.parent.postMessage({ msg: `toVindicate?menu=系统信息` }, "*") |
| | | }, |
| | | gotoActive() { |
| | | this.activeDialog = true; |
| | | this.activeDialog = true |
| | | }, |
| | | uploadKey(params) { |
| | | debugger; |
| | | let param = new FormData(); |
| | | param.append("code", params.file); |
| | | let param = new FormData() |
| | | param.append("code", params.file) |
| | | uploadKey(param).then( |
| | | (res) => { |
| | | if (res.code == 200) { |
| | | this.$message.success("导入成功"); |
| | | this.secrectKey = res.data; |
| | | this.$message.success("导入成功") |
| | | this.secrectKey = res.data |
| | | } else { |
| | | this.$message.error(res.msg); |
| | | this.$message.error(res.msg) |
| | | } |
| | | }, |
| | | (err) => { |
| | | this.$message.error(err.msg); |
| | | this.$message.error(err.msg) |
| | | } |
| | | ); |
| | | ) |
| | | }, |
| | | onInput(val) { |
| | | if (this[`input${val}`].length == 4 && val < 5) { |
| | | this.$refs[`input${val + 1}`].focus(); |
| | | this.$refs[`input${val + 1}`].focus() |
| | | } |
| | | if (this[`input${val}`].length == 0 && val > 0) { |
| | | this.$refs[`input${val - 1}`].focus(); |
| | | this.$refs[`input${val - 1}`].focus() |
| | | } |
| | | }, |
| | | }, |
| | | }; |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" > |
| | | <style lang="scss"> |
| | | .desktop { |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | height: 550px; |
| | | overflow-y: auto; |
| | | .order-card { |
| | | // height: 150px; |
| | | background: #fff; |
| | | margin-bottom: 15px; |
| | | |
| | | border-radius: 8px; |
| | | box-shadow: 0px 0px 4px rgb(0 0 0 / 25%); |
| | | .head { |
| | |
| | | flex-direction: column; |
| | | justify-content: space-evenly; |
| | | text-align: left; |
| | | box-sizing: border-box; font-size: 13px; |
| | | box-sizing: border-box; |
| | | font-size: 13px; |
| | | |
| | | padding: 8px 20px; line-height: 20px; |
| | | padding: 8px 20px; |
| | | line-height: 20px; |
| | | } |
| | | } |
| | | } |
| | |
| | | margin-left: 25px; |
| | | } |
| | | } |
| | | </style> |
| | | </style> |