Skip to content

1
1
Commit 357c657c by 岑松青
Options

dsada

parent 2875b3a8
Showing with 264 additions and 180 deletions
src/views/detail/detail.vue
<template> <template>
<div v-loading="loading"> <div v-loading="loading">
<el-row> <div><el-button type="primary" size="mini">返回</el-button></div>
<el-button type="primary" size="mini">返回</el-button> <div class="flex start " style="margin-top: 10px">
</el-row> <div class="aside" >
<el-container> <div>
<el-aside style="background:white; ;margin-right:15px;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"> <div style="text-align:center;margin-top:5%;margin-bottom:5% ;font-weight:bold" >{{dd.number}}</div>
<div style="margin-top:10px;margin-left:10px"> <div class="bg">
<el-row style="text-align:center;margin-bottom:5% ;font-weight:bold" >BOT0016</el-row> <div class="text">
<el-row > <div>设备型号：</div>
<el-col :span="10"><div ><img src="../../assets/device.png" alt="" class="device"></div></el-col> <div>12</div>
<el-col :span="7" :offset="3"><div>设备型号：</div><div>12</div><div style="margin-top:10px">采集器编号：</div><div>12</div></el-col> <div style="margin-top:10px">采集器编号：</div>
</el-row> <div>12</div>
<el-row style="background:white;margin-top:5% "> </div>
<el-col :span="10"><div>客户地址：</div></el-col> </div>
<el-col :span="10" :offset="2"><div>杭州市江干区</div></el-col> </div>
</el-row> <el-form ref="form" :model="form" label-width="100px" size="mini" >
<el-row style="background:white;margin-top:5% "> <el-form-item label="客户地址：">
<el-col :span="10"><div>联系人：</div></el-col> <div>杭州市江干区</div>
<el-col :span="10" :offset="2"><div>张三</div></el-col> </el-form-item>
</el-row> <el-form-item label="联系人：">
<el-row style="background:white;margin-top:5% "> <div>张三</div>
<el-col :span="10"><div>联系方式：</div></el-col> </el-form-item>
<el-col :span="10" :offset="2"><div>1283948933</div></el-col> <el-form-item label="联系方式：">
</el-row> <div>1283948933</div>
<el-row style="background:white;margin-top:5% "> </el-form-item>
<el-col :span="10"><div>设备位置：</div></el-col> <el-form-item label="设备位置：">
<el-col :span="10" :offset="2"><div>北楼一区</div></el-col> <div>北楼一区</div>
</el-row> </el-form-item>
<el-row style="background:white;margin-top:5% "> <el-form-item label="监测区域：">
<el-col :span="10"><div>监测区域：</div></el-col> <div>北楼一区</div>
<el-col :span="10" :offset="2"><div>北楼一区</div></el-col> </el-form-item>
</el-row> <el-form-item label="开机率：">
<el-row style="background:white;margin-top:5% "> <div style="width:80%;margin-top:8px"><el-progress
<el-col :span="10"><div>开机率：</div></el-col> :text-inside="true"
<el-col :span="10" :offset="2"><div><el-progress :text-inside="true" :stroke-width="24" :percentage="67" status="success"></el-progress></div></el-col> :stroke-width="20"
</el-row> :percentage="67"
<el-row style="background:white;margin-top:50px " justify="center"><el-col :span="3" :offset="7"><el-button type="primary" size="mini">运行参数查看</el-button></el-col></el-row> status="success"
<el-row style="background:white;margin-top:10px " justify="center"><el-col :span="3" :offset="7"><el-button type="primary" size="mini">运行时间统计</el-button></el-col></el-row> ></el-progress></div>
</el-form-item>
</el-form-item>
<el-form-item label="监测区域：">
<div>北楼一区</div>
</el-form-item>
</el-form-item>
<el-form-item >
<div><el-button type="primary" size="mini"
>运行参数查看</el-button
></div>
</el-form-item>
<el-form-item >
<div><el-button type="primary" size="mini"
>运行时间统计</el-button
></div>
</el-form-item>
</el-form>
</div> </div>
</el-aside> <div class="flex column " style="width:72%">
<el-container> <div class="header1" >运行时间：</div>
<el-header style="line-height:60px; height:60px; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"> <div class="main1" >
<el-row >运行时间：</el-row> <div class="butt">
</el-header> <el-form :inline="true">
<el-form-item>
<el-main style="background:white;margin-top:10px ;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"> <el-button type="primary" size="mini" style="margin-right:20px">实时参数列表</el-button>
<el-row style="background:white;margin-top:10px " justify="center"><el-col :span="3" :offset="8"><el-button type="primary" size="mini">实时参数列表</el-button></el-col><el-col :span="3" ><el-button size="mini">参数曲线监控</el-button></el-col></el-row> <el-button size="mini">参数曲线监控</el-button>
<el-row style="background:white;margin-top:5% "> </el-form-item>
<el-col :span="5"><div>电流：</div></el-col> </el-form>
<el-col :span="2" :offset="1"><div class="it">8.342342</div></el-col> </div>
<el-col :span="5"><div>温度：</div ></el-col> <el-form :inline="true" >
<el-col :span="2" :offset="1"><div class="it">8.342342</div></el-col> <el-form-item label="电流："style="margin-right:200px;width:150px">
<el-col :span="5"><div>断路器状态：</div></el-col> <div class="it">8.342342</div>
<el-col :span="2" :offset="1"><div class="it">8.342342</div></el-col> </el-form-item>
</el-row> <el-form-item label="温度："style="margin-right:200px;width:150px">
<el-row style="background:white;margin-top:5% "> <div class="it">8.342342</div>
<el-col :span="5"><div>A相电压：</div></el-col> </el-form-item>
<el-col :span="2" :offset="1"><div class="it">8.342342</div></el-col> <el-form-item label="断路器状态：">
<el-col :span="5"><div>B相电压：</div ></el-col> <div class="it">开</div>
<el-col :span="2" :offset="1"><div class="it">8.342342</div></el-col> </el-form-item>
<el-col :span="5"><div>AB相线电流：</div></el-col> </el-form>
<el-col :span="2" :offset="1"><div class="it">8.342342</div></el-col> <el-form :inline="true">
</el-row> <el-form-item label="A相电压："style="margin-right:200px;width:150px">
<el-row justify="center" style="margin-top:300px"><el-col :span="3" :offset="8"><el-button type="primary" size="mini">上一页</el-button></el-col><el-col :span="3" ><el-button size="mini">下一页</el-button></el-col></el-row> <div class="it">8.342342</div>
</el-main> </el-form-item>
</el-container> <el-form-item label="B相电压："style="margin-right:200px;width:150px">
</el-container> <div class="it">8.342342</div>
</div> </el-form-item>
<el-form-item label="AB相线电流：">
<div class="it">8.342342</div>
</el-form-item>
</el-form>
<div class="butt1">
<el-button type="primary" size="mini" style="margin-right:20px">上一页</el-button>
<el-button size="mini">下一页</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { ref, onMounted } from '@vue/composition-api'; import { ref, onMounted } from "@vue/composition-api";
import { router } from '../../main';
export default { export default {
setup() { setup() {
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
return{ const dd=ref<any>()
loading, onMounted(function () {
dd.value= router.currentRoute.params.obj
// console.log(aa)
})
return {
loading,dd
}; };
}, }
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.it{ .aside{border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);width:25%;background:white;margin-right:10px ;
color: blue; }
font-weight:bold; .main1{padding-left:10px;background:white;margin-top:10px ;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)}
text-size-adjust: medium; .header1{line-height:60px; padding-left:10px;height:60px; background:white;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)}
} .it {
.device { color: blue;
height: 60px; font-weight: bold;
text-align: center;
overflow: hidden; text-size-adjust: medium;
cursor:pointer; }
} .butt{margin-left:35%}
.butt1{margin-left:38%;margin-top:31%;margin-bottom: 2%;}
.bg{background-image: url(../../assets/device.png);
background-repeat: no-repeat;
}
.text{margin-left:60%}
.device {
height: 60px;
overflow: hidden;
cursor: pointer;
}
</style> </style>
src/views/login.vue
...@@ -2,29 +2,48 @@ ...@@ -2,29 +2,48 @@
<div class="flex column center login" v-loading="loading"> <div class="flex column center login" v-loading="loading">
<div class="login-body vivify popIn flex center column"> <div class="login-body vivify popIn flex center column">
<div class="login-head flex column center align-center"> <div class="login-head flex column center align-center">
<div class="title1">{{loginTitle1}}</div> <div class="title1">{{ loginTitle1 }}</div>
<div v-if="loginTitle2" class="title2">{{loginTitle2}}</div> <div v-if="loginTitle2" class="title2">{{ loginTitle2 }}</div>
</div> </div>
<div class="inner flex center align-center around"> <div class="inner flex center align-center around">
<div class="left"> <div class="left">
<img src="../assets/u90.png"> <img src="../assets/u90.png" />
</div> </div>
<div class="flex column right"> <div class="flex column right">
<div class="flex center"> <div class="flex center">
<img :src="loginLogo"/> <img :src="loginLogo" />
</div> </div>
<el-form <el-form
label-position="left" label-width="70px" label-position="left"
class="flex column around" ref="formRef" :model="form" :rules="rule"> label-width="70px"
class="flex column around"
ref="formRef"
:model="form"
:rules="rule"
>
<el-form-item prop="username" label="账户："> <el-form-item prop="username" label="账户：">
<el-input v-model="form.username" autofocus autocomplete="off" placeholder="用户名" @keyup.enter.native="login($refs.formRef)" /> <el-input
v-model="form.username"
autofocus
autocomplete="off"
placeholder="用户名"
@keyup.enter.native="login($refs.formRef)"
/>
</el-form-item> </el-form-item>
<el-form-item prop="pwd" label="密码："> <el-form-item prop="pwd" label="密码：">
<el-input type="password" autocomplete="off" v-model="form.pwd" placeholder="密 码" @keyup.enter.native="login($refs.formRef)" /> <el-input
type="password"
autocomplete="off"
v-model="form.pwd"
placeholder="密 码"
@keyup.enter.native="login($refs.formRef)"
/>
</el-form-item> </el-form-item>
<kit-err-channel id="login" style="margin-bottom: 5px" /> <kit-err-channel id="login" style="margin-bottom: 5px" />
<el-form-item> <el-form-item>
<el-button type="primary" @click="login($refs.formRef)">登录</el-button> <el-button type="primary" @click="login($refs.formRef)"
>登录</el-button
>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
...@@ -34,58 +53,67 @@ ...@@ -34,58 +53,67 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { ref, Ref, onMounted } from '@vue/composition-api'; import { ref, Ref, onMounted } from "@vue/composition-api";
import { ElForm } from 'element-ui/types/form'; import { ElForm } from "element-ui/types/form";
import { useLoading } from 'web-toolkit/src/service'; import { useLoading } from "web-toolkit/src/service";
import { postService, storeUserInfo, updateStoreUserInfo, submitErrChanel, pushMsgErr } from 'web-toolkit/src/case-main'; import {
import {loginTitle1, loginTitle2, loginLogo, schema} from '@/main'; postService,
import {router} from '@/main'; storeUserInfo,
import { Route } from 'vue-router'; updateStoreUserInfo,
import {assert} from 'web-toolkit/src/utils/index'; submitErrChanel,
import {Login} from '@/dao/userDao'; pushMsgErr
} from "web-toolkit/src/case-main";
import { loginTitle1, loginTitle2, loginLogo, schema } from "@/main";
import { router } from "@/main";
import { Route } from "vue-router";
import { assert } from "web-toolkit/src/utils/index";
import { Login } from "@/dao/userDao";
export default { export default {
setup() { setup() {
const loading = ref(false); const loading = ref(false);
const form = ref({ username: '', pwd: '' }); const form = ref({ username: "", pwd: "" });
const formRef: Ref<ElForm|null> = ref(null); const formRef: Ref<ElForm | null> = ref(null);
const rule = { const rule = {
username: { username: {
required: true, required: true,
message: '请填写用户名', message: "请填写用户名",
trigger: 'none', trigger: "none"
}, },
pwd: [{ pwd: [
required: true, {
message: '请填写密码', required: true,
trigger: 'none', message: "请填写密码",
}, { trigger: "none"
type: 'string', },
min: 6, {
message: '密码长度不能小于6位', type: "string",
trigger: 'none', min: 6,
}], message: "密码长度不能小于6位",
trigger: "none"
}
]
}; };
async function login() { async function login() {
const valid = await (formRef.value as ElForm).validate(); const valid = await (formRef.value as ElForm).validate();
assert(valid); assert(valid);
submitErrChanel('login'); submitErrChanel("login");
const data = await Login({ const data = await Login({
...form.value, ...form.value,
schema, schema
}); });
updateStoreUserInfo(data as any); updateStoreUserInfo(data as any);
// 设置登录后回到登录前页面 // 设置登录后回到登录前页面
// @ts-ignore // @ts-ignore
const redirect: Route = { const redirect: Route = {
name: 'index', name: "index",
query: {}, query: {}
}; };
if ( if (
storeUserInfo.redirect && storeUserInfo.redirect &&
storeUserInfo.redirect.name && storeUserInfo.redirect.name &&
storeUserInfo.redirect.name !== 'notFound' && storeUserInfo.redirect.name !== "notFound" &&
storeUserInfo.redirect.name !== 'login' storeUserInfo.redirect.name !== "login"
) { ) {
redirect.name = storeUserInfo.redirect.name; redirect.name = storeUserInfo.redirect.name;
redirect.query = storeUserInfo.redirect.query; redirect.query = storeUserInfo.redirect.query;
...@@ -95,75 +123,80 @@ export default { ...@@ -95,75 +123,80 @@ export default {
router.push(redirect as any); router.push(redirect as any);
} }
return { return {
formRef, loginTitle1, loginTitle2, loginLogo, formRef,
loading, form, rule, login: useLoading(loading, login), loginTitle1,
loginTitle2,
loginLogo,
loading,
form,
rule,
login: useLoading(loading, login)
}; };
}, }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.login{ .login {
background: url("../assets/bg.jpg") no-repeat; background: url("../assets/bg.jpg") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
min-height: 600px; min-height: 600px;
}
.login-body {
width: 90vw;
height: 90vh;
min-height: 400px;
.login-head {
color: white;
.title1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
}
.title2 {
font-size: 1.8rem;
margin-bottom: 2rem;
}
} }
.login-body { .inner {
width: 90vw; width: 100%;
height: 90vh; max-height: 600px;
min-height: 400px; max-width: 1000px;
.login-head{ background: white;
color: white; padding: 2rem 2rem;
.title1{ box-shadow: 3px 3px 10px rgba($color: #000, $alpha: 0.5);
font-size: 2.5rem; border-radius: 10px;
font-weight: 700; font-size: 1rem;
margin-bottom: 10px; .left {
} img {
.title2{ height: 40vh;
font-size: 1.8rem;
margin-bottom: 2rem;
} }
} }
.inner{ .right {
width: 100%; width: 300px;
max-height: 600px; img {
max-width: 1000px; height: 3.8rem;
background: white; width: auto;
padding: 2rem 2rem; margin-bottom: 3rem;
box-shadow: 3px 3px 10px rgba($color: #000, $alpha: .5);
border-radius: 10px;
font-size: 1rem;
.left{
img{
height: 40vh;
}
} }
.right{ .el-input {
width: 300px; width: 230px;
img{ }
height: 3.8rem; .el-button {
width: auto; width: 230px;
margin-bottom: 3rem; font-weight: 600;
} margin: 0 auto;
.el-input{
width: 230px;
}
.el-button{
width: 230px;
font-weight: 600;
margin: 0 auto;
}
} }
} }
} }
.login-support{ }
/*margin-top: 3vh;*/ .login-support {
color: #fff; /*margin-top: 3vh;*/
width: 100%; color: #fff;
font-weight: 700; width: 100%;
font-size: 1.1rem; font-weight: 700;
text-align: center; font-size: 1.1rem;
} text-align: center;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment