| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="en"> |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8" /> |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
|---|
| | | <meta name="referer" content="never" /> |
|---|
| | | <meta name="renderer" content="webkit" /> |
|---|
| | | <meta |
|---|
| | | name="viewport" |
|---|
| | | content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" |
|---|
| | | /> |
|---|
| | | <title>华能上海石洞口第二电厂料场三维重建</title> |
|---|
| | | <link rel="icon" href="favicon.ico" /> |
|---|
| | | <style> |
|---|
| | | html, |
|---|
| | | body, |
|---|
| | | #app { |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | * { |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", |
|---|
| | | "Microsoft YaHei", "微软雅黑", Arial, sans-serif; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .preload { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | height: 100%; |
|---|
| | | letter-spacing: 1px; |
|---|
| | | background-color: #2f3447; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .preload .container { |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | flex-direction: column; |
|---|
| | | width: 100%; |
|---|
| | | user-select: none; |
|---|
| | | flex-grow: 1; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .preload .name { |
|---|
| | | font-size: 30px; |
|---|
| | | color: #fff; |
|---|
| | | letter-spacing: 5px; |
|---|
| | | font-weight: bold; |
|---|
| | | margin-bottom: 30px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .preload .title { |
|---|
| | | color: #fff; |
|---|
| | | font-size: 14px; |
|---|
| | | margin: 30px 0 20px 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .preload .sub-title { |
|---|
| | | color: #ababab; |
|---|
| | | font-size: 12px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .preload .footer { |
|---|
| | | text-align: center; |
|---|
| | | padding: 10px 0 20px 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .preload .footer a { |
|---|
| | | font-size: 12px; |
|---|
| | | color: #ababab; |
|---|
| | | text-decoration: none; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .preload .loading { |
|---|
| | | height: 30px; |
|---|
| | | width: 30px; |
|---|
| | | border-radius: 30px; |
|---|
| | | border: 7px solid currentColor; |
|---|
| | | border-bottom-color: #2f3447 !important; |
|---|
| | | position: relative; |
|---|
| | | animation: r 1s infinite cubic-bezier(0.17, 0.67, 0.83, 0.67), |
|---|
| | | bc 2s infinite ease-in; |
|---|
| | | transform: rotate(0deg); |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes r { |
|---|
| | | from { |
|---|
| | | transform: rotate(0deg); |
|---|
| | | } |
|---|
| | | to { |
|---|
| | | transform: rotate(360deg); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .preload .loading::after, |
|---|
| | | .preload .loading::before { |
|---|
| | | content: ""; |
|---|
| | | display: inline-block; |
|---|
| | | position: absolute; |
|---|
| | | bottom: -2px; |
|---|
| | | height: 7px; |
|---|
| | | width: 7px; |
|---|
| | | border-radius: 10px; |
|---|
| | | background-color: currentColor; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .preload .loading::after { |
|---|
| | | left: -1px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .preload .loading::before { |
|---|
| | | right: -1px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes bc { |
|---|
| | | 0% { |
|---|
| | | color: #689cc5; |
|---|
| | | } |
|---|
| | | |
|---|
| | | 25% { |
|---|
| | | color: #b3b7e2; |
|---|
| | | } |
|---|
| | | |
|---|
| | | 50% { |
|---|
| | | color: #93dbe9; |
|---|
| | | } |
|---|
| | | |
|---|
| | | 75% { |
|---|
| | | color: #abbd81; |
|---|
| | | } |
|---|
| | | |
|---|
| | | 100% { |
|---|
| | | color: #689cc5; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="app"> |
|---|
| | | <div class="preload"> |
|---|
| | | <div class="container"> |
|---|
| | | <p class="name">华能石洞口第二电厂料场三维重建</p> |
|---|
| | | <div class="loading"></div> |
|---|
| | | <p class="title">正在加载资源...</p> |
|---|
| | | <p class="sub-title">初次加载资源可能需要较多时间 请耐心等待</p> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="footer"> |
|---|
| | | <a href="https://cool-js.com/" target="_blank"> https://hn.3d.com </a> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <script type="module" src="/src/main.ts"></script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| | | <!DOCTYPE html>
|
|---|
| | | <html lang="en">
|
|---|
| | | <head>
|
|---|
| | | <meta charset="utf-8" />
|
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|---|
| | | <meta name="referer" content="never" />
|
|---|
| | | <meta name="renderer" content="webkit" />
|
|---|
| | | <meta
|
|---|
| | | name="viewport"
|
|---|
| | | content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"
|
|---|
| | | />
|
|---|
| | | <title>华能上海石洞口第二电厂料场三维重建</title>
|
|---|
| | | <link rel="icon" href="favicon.ico" />
|
|---|
| | | <style>
|
|---|
| | | html,
|
|---|
| | | body,
|
|---|
| | | #app {
|
|---|
| | | height: 100%;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | * {
|
|---|
| | | margin: 0;
|
|---|
| | | padding: 0;
|
|---|
| | | font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
|
|---|
| | | "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .preload {
|
|---|
| | | display: flex;
|
|---|
| | | flex-direction: column;
|
|---|
| | | height: 100%;
|
|---|
| | | letter-spacing: 1px;
|
|---|
| | | background-color: #2f3447;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .preload .container {
|
|---|
| | | display: flex;
|
|---|
| | | justify-content: center;
|
|---|
| | | align-items: center;
|
|---|
| | | flex-direction: column;
|
|---|
| | | width: 100%;
|
|---|
| | | user-select: none;
|
|---|
| | | flex-grow: 1;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .preload .name {
|
|---|
| | | font-size: 30px;
|
|---|
| | | color: #fff;
|
|---|
| | | letter-spacing: 5px;
|
|---|
| | | font-weight: bold;
|
|---|
| | | margin-bottom: 30px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .preload .title {
|
|---|
| | | color: #fff;
|
|---|
| | | font-size: 14px;
|
|---|
| | | margin: 30px 0 20px 0;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .preload .sub-title {
|
|---|
| | | color: #ababab;
|
|---|
| | | font-size: 12px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .preload .footer {
|
|---|
| | | text-align: center;
|
|---|
| | | padding: 10px 0 20px 0;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .preload .footer a {
|
|---|
| | | font-size: 12px;
|
|---|
| | | color: #ababab;
|
|---|
| | | text-decoration: none;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .preload .loading {
|
|---|
| | | height: 30px;
|
|---|
| | | width: 30px;
|
|---|
| | | border-radius: 30px;
|
|---|
| | | border: 7px solid currentColor;
|
|---|
| | | border-bottom-color: #2f3447 !important;
|
|---|
| | | position: relative;
|
|---|
| | | animation: r 1s infinite cubic-bezier(0.17, 0.67, 0.83, 0.67),
|
|---|
| | | bc 2s infinite ease-in;
|
|---|
| | | transform: rotate(0deg);
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | @keyframes r {
|
|---|
| | | from {
|
|---|
| | | transform: rotate(0deg);
|
|---|
| | | }
|
|---|
| | | to {
|
|---|
| | | transform: rotate(360deg);
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .preload .loading::after,
|
|---|
| | | .preload .loading::before {
|
|---|
| | | content: "";
|
|---|
| | | display: inline-block;
|
|---|
| | | position: absolute;
|
|---|
| | | bottom: -2px;
|
|---|
| | | height: 7px;
|
|---|
| | | width: 7px;
|
|---|
| | | border-radius: 10px;
|
|---|
| | | background-color: currentColor;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .preload .loading::after {
|
|---|
| | | left: -1px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .preload .loading::before {
|
|---|
| | | right: -1px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | @keyframes bc {
|
|---|
| | | 0% {
|
|---|
| | | color: #689cc5;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | 25% {
|
|---|
| | | color: #b3b7e2;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | 50% {
|
|---|
| | | color: #93dbe9;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | 75% {
|
|---|
| | | color: #abbd81;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | 100% {
|
|---|
| | | color: #689cc5;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| | | </head>
|
|---|
| | | <body>
|
|---|
| | | <div id="app">
|
|---|
| | | <div class="preload">
|
|---|
| | | <div class="container">
|
|---|
| | | <p class="name">华能石洞口第二电厂料场三维重建</p>
|
|---|
| | | <div class="loading"></div>
|
|---|
| | | <p class="title">正在加载资源...</p>
|
|---|
| | | <p class="sub-title">初次加载资源可能需要较多时间 请耐心等待</p>
|
|---|
| | | </div>
|
|---|
| | |
|
|---|
| | | <div class="footer">
|
|---|
| | | <a href="https://cool-js.com/" target="_blank"> https://hn.3d.com </a>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | <script type="module" src="/src/main.ts"></script>
|
|---|
| | | </body>
|
|---|
| | | </html>
|
|---|
| | |
|---|
| | | <template> |
|---|
| | | <div class="page-login"> |
|---|
| | | <div class="box"> |
|---|
| | | <img class="logo" src="../../static/images/logo.png" alt="" /> |
|---|
| | | <!-- <p class="desc">{{ app.name }}-华能二厂料场煤堆实时三维建模</p> --> |
|---|
| | | <p class="desc">{{ app.name }}-华能二厂料场煤堆实时三维建模</p> |
|---|
| | | |
|---|
| | | <el-form label-position="top" class="form" size="medium" :disabled="saving"> |
|---|
| | | <el-form-item label="用户名"> |
|---|
| | | <el-input |
|---|
| | | v-model="form.username" |
|---|
| | | placeholder="请输入用户名" |
|---|
| | | maxlength="20" |
|---|
| | | auto-complete="off" |
|---|
| | | /> |
|---|
| | | </el-form-item> |
|---|
| | | |
|---|
| | | <el-form-item label="密码"> |
|---|
| | | <el-input |
|---|
| | | v-model="form.password" |
|---|
| | | type="password" |
|---|
| | | placeholder="请输入密码" |
|---|
| | | maxlength="20" |
|---|
| | | auto-complete="off" |
|---|
| | | /> |
|---|
| | | </el-form-item> |
|---|
| | | |
|---|
| | | <el-form-item label="验证码" class="captcha"> |
|---|
| | | <el-input |
|---|
| | | v-model="form.verifyCode" |
|---|
| | | placeholder="请输入图片验证码" |
|---|
| | | maxlength="4" |
|---|
| | | auto-complete="off" |
|---|
| | | @keyup.enter="toLogin" |
|---|
| | | /> |
|---|
| | | |
|---|
| | | <captcha |
|---|
| | | :ref="setRefs('captcha')" |
|---|
| | | v-model="form.captchaId" |
|---|
| | | class="value" |
|---|
| | | @change=" |
|---|
| | | () => { |
|---|
| | | form.verifyCode = ''; |
|---|
| | | } |
|---|
| | | " |
|---|
| | | /> |
|---|
| | | </el-form-item> |
|---|
| | | </el-form> |
|---|
| | | |
|---|
| | | <el-button round size="small" class="submit-btn" :loading="saving" @click="toLogin" |
|---|
| | | >登录</el-button |
|---|
| | | > |
|---|
| | | </div> |
|---|
| | | <div class="video"> |
|---|
| | | <video class="bgvideo" id="bgvideo" autoplay muted loop> |
|---|
| | | <source src="../../static/video/bg.mp4" type="video/mp4" /> |
|---|
| | | </video> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script lang="ts"> |
|---|
| | | import { defineComponent, reactive, ref } from "vue"; |
|---|
| | | import { ElMessage } from "element-plus"; |
|---|
| | | import Captcha from "./components/captcha.vue"; |
|---|
| | | import { useEps, useCool } from "/@/cool"; |
|---|
| | | |
|---|
| | | export default defineComponent({ |
|---|
| | | cool: { |
|---|
| | | route: { |
|---|
| | | path: "/login" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | components: { |
|---|
| | | Captcha |
|---|
| | | }, |
|---|
| | | |
|---|
| | | setup() { |
|---|
| | | const { refs, setRefs, store, router, app }: any = useCool(); |
|---|
| | | |
|---|
| | | const saving = ref<boolean>(false); |
|---|
| | | |
|---|
| | | // 登录表单数据 |
|---|
| | | const form = reactive({ |
|---|
| | | username: "", |
|---|
| | | password: "", |
|---|
| | | captchaId: "", |
|---|
| | | verifyCode: "" |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 登录 |
|---|
| | | async function toLogin() { |
|---|
| | | if (!form.username) { |
|---|
| | | return ElMessage.warning("用户名不能为空"); |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (!form.password) { |
|---|
| | | return ElMessage.warning("密码不能为空"); |
|---|
| | | } |
|---|
| | | |
|---|
| | | if (!form.verifyCode) { |
|---|
| | | return ElMessage.warning("图片验证码不能为空"); |
|---|
| | | } |
|---|
| | | |
|---|
| | | saving.value = true; |
|---|
| | | |
|---|
| | | try { |
|---|
| | | // 登录 |
|---|
| | | await store.dispatch("userLogin", form); |
|---|
| | | |
|---|
| | | // 用户信息 |
|---|
| | | await store.dispatch("userInfo"); |
|---|
| | | |
|---|
| | | // 读取Eps |
|---|
| | | await useEps(); |
|---|
| | | |
|---|
| | | // 权限菜单 |
|---|
| | | const [first] = await store.dispatch("permMenu"); |
|---|
| | | |
|---|
| | | if (!first) { |
|---|
| | | ElMessage.error("该账号没有权限"); |
|---|
| | | } else { |
|---|
| | | router.push("/"); |
|---|
| | | } |
|---|
| | | } catch (err: any) { |
|---|
| | | ElMessage.error(err); |
|---|
| | | refs.value.captcha.refresh(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | saving.value = false; |
|---|
| | | } |
|---|
| | | |
|---|
| | | return { |
|---|
| | | refs, |
|---|
| | | setRefs, |
|---|
| | | form, |
|---|
| | | saving, |
|---|
| | | toLogin, |
|---|
| | | app |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="scss"> |
|---|
| | | .page-login { |
|---|
| | | height: 100vh; |
|---|
| | | width: 100vw; |
|---|
| | | position: relative; |
|---|
| | | background-color: rgba($color: #000000, $alpha: 0.4); |
|---|
| | | |
|---|
| | | .box { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | height: 500px; |
|---|
| | | width: 500px; |
|---|
| | | padding: 80px 0; |
|---|
| | | position: absolute; |
|---|
| | | z-index: 9; |
|---|
| | | left: calc(50% - 250px); |
|---|
| | | top: calc(50% - 330px); |
|---|
| | | background-color: rgba(47, 52, 71, 0.93); |
|---|
| | | border-radius: 12px; |
|---|
| | | box-shadow: 0 2px 6px rgba($color: #000000, $alpha: 0.15); |
|---|
| | | |
|---|
| | | .logo { |
|---|
| | | height: 50px; |
|---|
| | | margin-bottom: 20px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .desc { |
|---|
| | | color: #ccc; |
|---|
| | | font-size: 12px; |
|---|
| | | margin-bottom: 60px; |
|---|
| | | letter-spacing: 1px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-form { |
|---|
| | | width: 300px; |
|---|
| | | border-radius: 3px; |
|---|
| | | |
|---|
| | | .el-form-item { |
|---|
| | | margin-bottom: 20px; |
|---|
| | | |
|---|
| | | &__label { |
|---|
| | | color: #ccc; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-input { |
|---|
| | | .el-input__inner { |
|---|
| | | border: 0; |
|---|
| | | border-bottom: 0.5px solid #999; |
|---|
| | | border-radius: 0; |
|---|
| | | padding: 0 5px; |
|---|
| | | background-color: transparent; |
|---|
| | | color: #ccc; |
|---|
| | | transition: border-color 0.3s; |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | &:focus { |
|---|
| | | border-color: #fff; |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | &:-webkit-autofill { |
|---|
| | | -webkit-text-fill-color: #fff !important; |
|---|
| | | -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; |
|---|
| | | transition: background-color 50000s ease-in-out 0s; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .captcha { |
|---|
| | | position: relative; |
|---|
| | | |
|---|
| | | .value { |
|---|
| | | position: absolute; |
|---|
| | | bottom: 1px; |
|---|
| | | right: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .submit-btn { |
|---|
| | | margin-top: 40px; |
|---|
| | | padding: 9px 40px; |
|---|
| | | color: #000; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .bgvideo { |
|---|
| | | position: absolute; |
|---|
| | | top: 50%; |
|---|
| | | left: 50%; |
|---|
| | | min-width: 100%; |
|---|
| | | min-height: 100%; |
|---|
| | | width: auto; |
|---|
| | | height: auto; |
|---|
| | | z-index: -9999; |
|---|
| | | -webkit-transform: translateX(-50%) translateY(-50%); |
|---|
| | | transform: translateX(-50%) translateY(-50%); |
|---|
| | | -webkit-transition: 1s opacity; |
|---|
| | | transition: 1s opacity; |
|---|
| | | } |
|---|
| | | .video { |
|---|
| | | position: fixed; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | z-index: -10000; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | <template>
|
|---|
| | | <div class="page-login">
|
|---|
| | | <div class="box">
|
|---|
| | | <img class="logo" src="../../static/images/logo.png" alt="" />
|
|---|
| | | <!-- <p class="desc">{{ app.name }}-华能二厂料场煤堆实时三维建模</p> -->
|
|---|
| | | <p class="desc">{{ app.name }}-华能二厂料场煤堆实时三维建模</p>
|
|---|
| | |
|
|---|
| | | <el-form label-position="top" class="form" size="medium" :disabled="saving">
|
|---|
| | | <el-form-item label="用户名">
|
|---|
| | | <el-input
|
|---|
| | | v-model="form.username"
|
|---|
| | | placeholder="请输入用户名"
|
|---|
| | | maxlength="20"
|
|---|
| | | auto-complete="off"
|
|---|
| | | />
|
|---|
| | | </el-form-item>
|
|---|
| | |
|
|---|
| | | <el-form-item label="密码">
|
|---|
| | | <el-input
|
|---|
| | | v-model="form.password"
|
|---|
| | | type="password"
|
|---|
| | | placeholder="请输入密码"
|
|---|
| | | maxlength="20"
|
|---|
| | | auto-complete="off"
|
|---|
| | | />
|
|---|
| | | </el-form-item>
|
|---|
| | |
|
|---|
| | | <el-form-item label="验证码" class="captcha">
|
|---|
| | | <el-input
|
|---|
| | | v-model="form.verifyCode"
|
|---|
| | | placeholder="请输入图片验证码"
|
|---|
| | | maxlength="4"
|
|---|
| | | auto-complete="off"
|
|---|
| | | @keyup.enter="toLogin"
|
|---|
| | | />
|
|---|
| | |
|
|---|
| | | <captcha
|
|---|
| | | :ref="setRefs('captcha')"
|
|---|
| | | v-model="form.captchaId"
|
|---|
| | | class="value"
|
|---|
| | | @change="
|
|---|
| | | () => {
|
|---|
| | | form.verifyCode = '';
|
|---|
| | | }
|
|---|
| | | "
|
|---|
| | | />
|
|---|
| | | </el-form-item>
|
|---|
| | | </el-form>
|
|---|
| | |
|
|---|
| | | <el-button round size="small" class="submit-btn" :loading="saving" @click="toLogin"
|
|---|
| | | >登录</el-button
|
|---|
| | | >
|
|---|
| | | </div>
|
|---|
| | | <div class="video">
|
|---|
| | | <video class="bgvideo" id="bgvideo" autoplay muted loop>
|
|---|
| | | <source src="../../static/video/bg.mp4" type="video/mp4" />
|
|---|
| | | </video>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | | <script lang="ts">
|
|---|
| | | import { defineComponent, reactive, ref } from "vue";
|
|---|
| | | import { ElMessage } from "element-plus";
|
|---|
| | | import Captcha from "./components/captcha.vue";
|
|---|
| | | import { useEps, useCool } from "/@/cool";
|
|---|
| | |
|
|---|
| | | export default defineComponent({
|
|---|
| | | cool: {
|
|---|
| | | route: {
|
|---|
| | | path: "/login"
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | components: {
|
|---|
| | | Captcha
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | setup() {
|
|---|
| | | const { refs, setRefs, store, router, app }: any = useCool();
|
|---|
| | |
|
|---|
| | | const saving = ref<boolean>(false);
|
|---|
| | |
|
|---|
| | | // 登录表单数据
|
|---|
| | | const form = reactive({
|
|---|
| | | username: "",
|
|---|
| | | password: "",
|
|---|
| | | captchaId: "",
|
|---|
| | | verifyCode: ""
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | // 登录
|
|---|
| | | async function toLogin() {
|
|---|
| | | if (!form.username) {
|
|---|
| | | return ElMessage.warning("用户名不能为空");
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | if (!form.password) {
|
|---|
| | | return ElMessage.warning("密码不能为空");
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | if (!form.verifyCode) {
|
|---|
| | | return ElMessage.warning("图片验证码不能为空");
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | saving.value = true;
|
|---|
| | |
|
|---|
| | | try {
|
|---|
| | | // 登录
|
|---|
| | | await store.dispatch("userLogin", form);
|
|---|
| | |
|
|---|
| | | // 用户信息
|
|---|
| | | await store.dispatch("userInfo");
|
|---|
| | |
|
|---|
| | | // 读取Eps
|
|---|
| | | await useEps();
|
|---|
| | |
|
|---|
| | | // 权限菜单
|
|---|
| | | const [first] = await store.dispatch("permMenu");
|
|---|
| | |
|
|---|
| | | if (!first) {
|
|---|
| | | ElMessage.error("该账号没有权限");
|
|---|
| | | } else {
|
|---|
| | | router.push("/");
|
|---|
| | | }
|
|---|
| | | } catch (err: any) {
|
|---|
| | | ElMessage.error(err);
|
|---|
| | | refs.value.captcha.refresh();
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | saving.value = false;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | return {
|
|---|
| | | refs,
|
|---|
| | | setRefs,
|
|---|
| | | form,
|
|---|
| | | saving,
|
|---|
| | | toLogin,
|
|---|
| | | app
|
|---|
| | | };
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | | <style lang="scss">
|
|---|
| | | .page-login {
|
|---|
| | | height: 100vh;
|
|---|
| | | width: 100vw;
|
|---|
| | | position: relative;
|
|---|
| | | background-color: rgba($color: #000000, $alpha: 0.4);
|
|---|
| | |
|
|---|
| | | .box {
|
|---|
| | | display: flex;
|
|---|
| | | flex-direction: column;
|
|---|
| | | justify-content: center;
|
|---|
| | | align-items: center;
|
|---|
| | | height: 500px;
|
|---|
| | | width: 500px;
|
|---|
| | | padding: 80px 0;
|
|---|
| | | position: absolute;
|
|---|
| | | z-index: 9;
|
|---|
| | | left: calc(50% - 250px);
|
|---|
| | | top: calc(50% - 330px);
|
|---|
| | | background-color: rgba(47, 52, 71, 0.93);
|
|---|
| | | border-radius: 12px;
|
|---|
| | | box-shadow: 0 2px 6px rgba($color: #000000, $alpha: 0.15);
|
|---|
| | |
|
|---|
| | | .logo {
|
|---|
| | | height: 50px;
|
|---|
| | | margin-bottom: 20px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .desc {
|
|---|
| | | color: #ccc;
|
|---|
| | | font-size: 12px;
|
|---|
| | | margin-bottom: 60px;
|
|---|
| | | letter-spacing: 1px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .el-form {
|
|---|
| | | width: 300px;
|
|---|
| | | border-radius: 3px;
|
|---|
| | |
|
|---|
| | | .el-form-item {
|
|---|
| | | margin-bottom: 20px;
|
|---|
| | |
|
|---|
| | | &__label {
|
|---|
| | | color: #ccc;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .el-input {
|
|---|
| | | .el-input__inner {
|
|---|
| | | border: 0;
|
|---|
| | | border-bottom: 0.5px solid #999;
|
|---|
| | | border-radius: 0;
|
|---|
| | | padding: 0 5px;
|
|---|
| | | background-color: transparent;
|
|---|
| | | color: #ccc;
|
|---|
| | | transition: border-color 0.3s;
|
|---|
| | | position: relative;
|
|---|
| | |
|
|---|
| | | &:focus {
|
|---|
| | | border-color: #fff;
|
|---|
| | | color: #fff;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | &:-webkit-autofill {
|
|---|
| | | -webkit-text-fill-color: #fff !important;
|
|---|
| | | -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
|
|---|
| | | transition: background-color 50000s ease-in-out 0s;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .captcha {
|
|---|
| | | position: relative;
|
|---|
| | |
|
|---|
| | | .value {
|
|---|
| | | position: absolute;
|
|---|
| | | bottom: 1px;
|
|---|
| | | right: 0;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .submit-btn {
|
|---|
| | | margin-top: 40px;
|
|---|
| | | padding: 9px 40px;
|
|---|
| | | color: #000;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | .bgvideo {
|
|---|
| | | position: absolute;
|
|---|
| | | top: 50%;
|
|---|
| | | left: 50%;
|
|---|
| | | min-width: 100%;
|
|---|
| | | min-height: 100%;
|
|---|
| | | width: auto;
|
|---|
| | | height: auto;
|
|---|
| | | z-index: -9999;
|
|---|
| | | -webkit-transform: translateX(-50%) translateY(-50%);
|
|---|
| | | transform: translateX(-50%) translateY(-50%);
|
|---|
| | | -webkit-transition: 1s opacity;
|
|---|
| | | transition: 1s opacity;
|
|---|
| | | }
|
|---|
| | | .video {
|
|---|
| | | position: fixed;
|
|---|
| | | width: 100%;
|
|---|
| | | height: 100%;
|
|---|
| | | overflow: hidden;
|
|---|
| | | z-index: -10000;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | import components from "./components"; |
|---|
| | | import directives from "./directives"; |
|---|
| | | import service from "./service"; |
|---|
| | | import store from "./store"; |
|---|
| | | import pages from "./pages"; |
|---|
| | | import views from "./views"; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components, |
|---|
| | | directives, |
|---|
| | | service, |
|---|
| | | store, |
|---|
| | | pages, |
|---|
| | | views |
|---|
| | | }; |
|---|
| New file |
| | |
|---|
| | | export default []; |
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | <template>
|
|---|
| | | <div>
|
|---|
| | | <h1>周期任务</h1>
|
|---|
| | | </div>
|
|---|
| | | </template> |
|---|
| New file |
| | |
|---|
| | | export default []; |
|---|
| New file |
| | |
|---|
| | | import { BaseService, Service } from "/@/cool"; |
|---|
| | | |
|---|
| | | @Service("device/device") |
|---|
| | | class DemoDevice extends BaseService { } |
|---|
| | | export default DemoDevice; |
|---|
| | |
|---|
| | | export default {}; |
|---|
| | | import DemoDevice from "./device"; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | device: { |
|---|
| | | device: new DemoDevice() |
|---|
| | | } |
|---|
| | | }; |
|---|
| New file |
| | |
|---|
| | | <template>
|
|---|
| | | <cl-crud :ref="setRefs('crud')"
|
|---|
| | | @load="onLoad">
|
|---|
| | | <el-row type="flex"
|
|---|
| | | align="middle">
|
|---|
| | | <!-- 刷新按钮 -->
|
|---|
| | | <cl-refresh-btn />
|
|---|
| | | <!-- 新增按钮 -->
|
|---|
| | | <cl-add-btn />
|
|---|
| | | <!-- 删除按钮 -->
|
|---|
| | | <cl-multi-delete-btn />
|
|---|
| | | <cl-flex1 />
|
|---|
| | | <!-- 关键字搜索 -->
|
|---|
| | | <cl-search-key />
|
|---|
| | | </el-row>
|
|---|
| | |
|
|---|
| | | <el-row>
|
|---|
| | | <!-- 数据表格 -->
|
|---|
| | | <cl-table :ref="setRefs('table')"
|
|---|
| | | v-bind="table" />
|
|---|
| | | </el-row>
|
|---|
| | |
|
|---|
| | | <el-row type="flex">
|
|---|
| | | <cl-flex1 />
|
|---|
| | | <!-- 分页控件 -->
|
|---|
| | | <cl-pagination />
|
|---|
| | | </el-row>
|
|---|
| | |
|
|---|
| | | <!-- 新增、编辑 -->
|
|---|
| | | <cl-upsert :ref="setRefs('upsert')"
|
|---|
| | | v-bind="upsert" />
|
|---|
| | | </cl-crud>
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | | <script lang="ts">
|
|---|
| | | import { defineComponent, reactive } from "vue";
|
|---|
| | | import { CrudLoad, Upsert, Table } from "@cool-vue/crud/types";
|
|---|
| | | import { useCool } from "/@/cool";
|
|---|
| | |
|
|---|
| | | export default defineComponent({
|
|---|
| | | setup() {
|
|---|
| | | const { refs, setRefs, service } = useCool();
|
|---|
| | |
|
|---|
| | | // 新增、编辑配置
|
|---|
| | | const upsert = reactive<Upsert>({
|
|---|
| | | items: [
|
|---|
| | | {
|
|---|
| | | label: "名称",
|
|---|
| | | prop: "name",
|
|---|
| | | component: {
|
|---|
| | | name: "el-input"
|
|---|
| | | },
|
|---|
| | | //是否为必填项,注：接口配置字段时没有设置默认值时，都需要选择必填
|
|---|
| | | required: true
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "逻辑ID",
|
|---|
| | | prop: "logic_id",
|
|---|
| | | component: {
|
|---|
| | | name: "el-input"
|
|---|
| | | },
|
|---|
| | | required: true
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "物理ID",
|
|---|
| | | prop: "device_id",
|
|---|
| | | component: {
|
|---|
| | | name: "el-input"
|
|---|
| | | },
|
|---|
| | | required: true
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "负责人",
|
|---|
| | | prop: "operator",
|
|---|
| | | component: {
|
|---|
| | | name: "el-input"
|
|---|
| | | },
|
|---|
| | | required: true
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "经度",
|
|---|
| | | prop: "longitude",
|
|---|
| | | component: {
|
|---|
| | | name: "el-input"
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "纬度",
|
|---|
| | | prop: "latitude",
|
|---|
| | | component: {
|
|---|
| | | name: "el-input"
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "高度",
|
|---|
| | | prop: "altitude",
|
|---|
| | | component: {
|
|---|
| | | name: "el-input"
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "安装位置",
|
|---|
| | | prop: "location",
|
|---|
| | | component: {
|
|---|
| | | name: "el-input"
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "状态",
|
|---|
| | | prop: "status",
|
|---|
| | | component: {
|
|---|
| | | name: "el-input"
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "备注",
|
|---|
| | | prop: "remark",
|
|---|
| | | component: {
|
|---|
| | | name: "el-input"
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | ]
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | // 表格配置
|
|---|
| | | const table = reactive<Table>({
|
|---|
| | | columns: [
|
|---|
| | | {
|
|---|
| | | type: "selection",
|
|---|
| | | align: "center"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "id",
|
|---|
| | | prop: "id",
|
|---|
| | | sortable: true //是否排序功能
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "运行状态",
|
|---|
| | | prop: "status",
|
|---|
| | | filters: [
|
|---|
| | | { text: "0", value: "已停止" },
|
|---|
| | | { text: "1", value: "正在运行" }
|
|---|
| | | ]
|
|---|
| | | // filters:"[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "名称",
|
|---|
| | | prop: "name"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "位置",
|
|---|
| | | prop: "location",
|
|---|
| | | width: 200
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "逻辑ID",
|
|---|
| | | prop: "logic_id"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "物理ID",
|
|---|
| | | prop: "device_id",
|
|---|
| | | width: 100
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "经度",
|
|---|
| | | prop: "longitude",
|
|---|
| | | width: 150
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "纬度",
|
|---|
| | | prop: "latitude",
|
|---|
| | | width: 150
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "高度",
|
|---|
| | | prop: "altitude"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "操作",
|
|---|
| | | type: "op"
|
|---|
| | | }
|
|---|
| | | ]
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | // crud 加载
|
|---|
| | | function onLoad({ ctx, app }: CrudLoad) {
|
|---|
| | | // 绑定 service
|
|---|
| | | ctx.service(service.device.device).done();
|
|---|
| | | app.refresh();
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | return {
|
|---|
| | | refs,
|
|---|
| | | setRefs,
|
|---|
| | | upsert,
|
|---|
| | | table,
|
|---|
| | | onLoad
|
|---|
| | | };
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | | </script>
|
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | import components from "./components"; |
|---|
| | | import directives from "./directives"; |
|---|
| | | import service from "./service"; |
|---|
| | | import store from "./store"; |
|---|
| | | import pages from "./pages"; |
|---|
| | | import views from "./views"; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components, |
|---|
| | | directives, |
|---|
| | | service, |
|---|
| | | store, |
|---|
| | | pages, |
|---|
| | | views |
|---|
| | | }; |
|---|
| New file |
| | |
|---|
| | | export default []; |
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | <template>
|
|---|
| | | <div>
|
|---|
| | | <h1>设备分组页面</h1>
|
|---|
| | | </div>
|
|---|
| | | </template> |
|---|
| New file |
| | |
|---|
| | | export default []; |
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | import components from "./components"; |
|---|
| | | import directives from "./directives"; |
|---|
| | | import service from "./service"; |
|---|
| | | import store from "./store"; |
|---|
| | | import pages from "./pages"; |
|---|
| | | import views from "./views"; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components, |
|---|
| | | directives, |
|---|
| | | service, |
|---|
| | | store, |
|---|
| | | pages, |
|---|
| | | views |
|---|
| | | }; |
|---|
| New file |
| | |
|---|
| | | export default []; |
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | <template>
|
|---|
| | | <div>
|
|---|
| | | <h1>斗轮机详情页</h1>
|
|---|
| | | </div>
|
|---|
| | | </template> |
|---|
| New file |
| | |
|---|
| | | export default []; |
|---|
| | |
|---|
| | | <template> |
|---|
| | | <cl-crud :ref="setRefs('crud')" |
|---|
| | | @load="onLoad"> |
|---|
| | | <el-row type="flex" |
|---|
| | | align="middle"> |
|---|
| | | <!-- 刷新按钮 --> |
|---|
| | | <cl-refresh-btn /> |
|---|
| | | <!-- 新增按钮 --> |
|---|
| | | <cl-add-btn /> |
|---|
| | | <!-- 删除按钮 --> |
|---|
| | | <cl-multi-delete-btn /> |
|---|
| | | <cl-flex1 /> |
|---|
| | | <!-- 关键字搜索 --> |
|---|
| | | <cl-search-key /> |
|---|
| | | </el-row> |
|---|
| | | |
|---|
| | | <el-row> |
|---|
| | | <!-- 数据表格 --> |
|---|
| | | <cl-table :ref="setRefs('table')" |
|---|
| | | v-bind="table" /> |
|---|
| | | </el-row> |
|---|
| | | |
|---|
| | | <el-row type="flex"> |
|---|
| | | <cl-flex1 /> |
|---|
| | | <!-- 分页控件 --> |
|---|
| | | <cl-pagination /> |
|---|
| | | </el-row> |
|---|
| | | |
|---|
| | | <!-- 新增、编辑 --> |
|---|
| | | <cl-upsert :ref="setRefs('upsert')" |
|---|
| | | v-bind="upsert" /> |
|---|
| | | </cl-crud> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script lang="ts"> |
|---|
| | | import { defineComponent, reactive } from "vue"; |
|---|
| | | import { CrudLoad, Upsert, Table } from "@cool-vue/crud/types"; |
|---|
| | | import { useCool } from "/@/cool"; |
|---|
| | | |
|---|
| | | export default defineComponent({ |
|---|
| | | setup() { |
|---|
| | | const { refs, setRefs, service } = useCool(); |
|---|
| | | |
|---|
| | | // 新增、编辑配置 |
|---|
| | | const upsert = reactive<Upsert>({ |
|---|
| | | items: [ |
|---|
| | | { |
|---|
| | | label: "姓名", |
|---|
| | | prop: "name", |
|---|
| | | component: { |
|---|
| | | name: "el-input" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: "名称", |
|---|
| | | prop: "title", |
|---|
| | | component: { |
|---|
| | | name: "el-input" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: "序号", |
|---|
| | | prop: "price", |
|---|
| | | component: { |
|---|
| | | name: "el-input" |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: "分类", |
|---|
| | | prop: "type", |
|---|
| | | component: { |
|---|
| | | name: "el-input" |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 表格配置 |
|---|
| | | const table = reactive<Table>({ |
|---|
| | | columns: [ |
|---|
| | | { |
|---|
| | | label: "姓名", |
|---|
| | | prop: "name" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: "设备", |
|---|
| | | prop: "title" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: "序号", |
|---|
| | | prop: "price" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: "分类", |
|---|
| | | prop: "type" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | label: "操作", |
|---|
| | | type: "op" |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // crud 加载 |
|---|
| | | function onLoad({ ctx, app }: CrudLoad) { |
|---|
| | | console.log(service); |
|---|
| | | |
|---|
| | | // 绑定 service |
|---|
| | | ctx.service(service.huaneng.huaneng).done(); |
|---|
| | | app.refresh(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | return { |
|---|
| | | refs, |
|---|
| | | setRefs, |
|---|
| | | upsert, |
|---|
| | | table, |
|---|
| | | onLoad |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | | <template>
|
|---|
| | | <cl-crud :ref="setRefs('crud')"
|
|---|
| | | @load="onLoad">
|
|---|
| | | <el-row type="flex"
|
|---|
| | | align="middle">
|
|---|
| | | <!-- 刷新按钮 -->
|
|---|
| | | <cl-refresh-btn />
|
|---|
| | | <!-- 新增按钮 -->
|
|---|
| | | <cl-add-btn />
|
|---|
| | | <!-- 删除按钮 -->
|
|---|
| | | <cl-multi-delete-btn />
|
|---|
| | | <cl-flex1 />
|
|---|
| | | <!-- 关键字搜索 -->
|
|---|
| | | <cl-search-key />
|
|---|
| | | </el-row>
|
|---|
| | |
|
|---|
| | | <el-row>
|
|---|
| | | <!-- 数据表格 -->
|
|---|
| | | <cl-table :ref="setRefs('table')"
|
|---|
| | | v-bind="table" />
|
|---|
| | | </el-row>
|
|---|
| | |
|
|---|
| | | <el-row type="flex">
|
|---|
| | | <cl-flex1 />
|
|---|
| | | <!-- 分页控件 -->
|
|---|
| | | <cl-pagination />
|
|---|
| | | </el-row>
|
|---|
| | |
|
|---|
| | | <!-- 新增、编辑 -->
|
|---|
| | | <cl-upsert :ref="setRefs('upsert')"
|
|---|
| | | v-bind="upsert" />
|
|---|
| | | </cl-crud>
|
|---|
| | | </template>
|
|---|
| | |
|
|---|
| | | <script lang="ts">
|
|---|
| | | import { defineComponent, reactive } from "vue";
|
|---|
| | | import { CrudLoad, Upsert, Table } from "@cool-vue/crud/types";
|
|---|
| | | import { useCool } from "/@/cool";
|
|---|
| | |
|
|---|
| | | export default defineComponent({
|
|---|
| | | setup() {
|
|---|
| | | const { refs, setRefs, service } = useCool();
|
|---|
| | |
|
|---|
| | | // 新增、编辑配置
|
|---|
| | | const upsert = reactive<Upsert>({
|
|---|
| | | items: [
|
|---|
| | | {
|
|---|
| | | label: "姓名",
|
|---|
| | | prop: "name",
|
|---|
| | | component: {
|
|---|
| | | name: "el-input"
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "名称",
|
|---|
| | | prop: "title",
|
|---|
| | | component: {
|
|---|
| | | name: "el-input"
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "序号",
|
|---|
| | | prop: "price",
|
|---|
| | | component: {
|
|---|
| | | name: "el-input"
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "分类",
|
|---|
| | | prop: "type",
|
|---|
| | | component: {
|
|---|
| | | name: "el-input"
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | ]
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | // 表格配置
|
|---|
| | | const table = reactive<Table>({
|
|---|
| | | columns: [
|
|---|
| | | {
|
|---|
| | | type: "selection",
|
|---|
| | | align: "center"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "姓名",
|
|---|
| | | prop: "name"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "设备",
|
|---|
| | | prop: "title"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "序号",
|
|---|
| | | prop: "price"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "分类",
|
|---|
| | | prop: "type"
|
|---|
| | | },
|
|---|
| | | {
|
|---|
| | | label: "操作",
|
|---|
| | | type: "op"
|
|---|
| | | }
|
|---|
| | | ]
|
|---|
| | | });
|
|---|
| | |
|
|---|
| | | // crud 加载
|
|---|
| | | function onLoad({ ctx, app }: CrudLoad) {
|
|---|
| | | console.log("service", service);
|
|---|
| | |
|
|---|
| | | // 绑定 service
|
|---|
| | | ctx.service(service.huaneng.huaneng).done();
|
|---|
| | | app.refresh();
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | return {
|
|---|
| | | refs,
|
|---|
| | | setRefs,
|
|---|
| | | upsert,
|
|---|
| | | table,
|
|---|
| | | onLoad
|
|---|
| | | };
|
|---|
| | | }
|
|---|
| | | });
|
|---|
| | | </script>
|
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | import components from "./components"; |
|---|
| | | import directives from "./directives"; |
|---|
| | | import service from "./service"; |
|---|
| | | import store from "./store"; |
|---|
| | | import pages from "./pages"; |
|---|
| | | import views from "./views"; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components, |
|---|
| | | directives, |
|---|
| | | service, |
|---|
| | | store, |
|---|
| | | pages, |
|---|
| | | views |
|---|
| | | }; |
|---|
| New file |
| | |
|---|
| | | export default []; |
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | <template>
|
|---|
| | | <div>
|
|---|
| | | 即时任务
|
|---|
| | | </div>
|
|---|
| | | </template> |
|---|
| New file |
| | |
|---|
| | | export default []; |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | "huaneng" |
|---|
| | | "huaneng", |
|---|
| | | "device" |
|---|
| | | ]; |
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | import components from "./components"; |
|---|
| | | import directives from "./directives"; |
|---|
| | | import service from "./service"; |
|---|
| | | import store from "./store"; |
|---|
| | | import pages from "./pages"; |
|---|
| | | import views from "./views"; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | components, |
|---|
| | | directives, |
|---|
| | | service, |
|---|
| | | store, |
|---|
| | | pages, |
|---|
| | | views |
|---|
| | | }; |
|---|
| New file |
| | |
|---|
| | | export default []; |
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | export default {}; |
|---|
| New file |
| | |
|---|
| | | export default []; |
|---|
| New file |
| | |
|---|
| | | <template>
|
|---|
| | | <div>
|
|---|
| | | 用户管理页面
|
|---|
| | | </div>
|
|---|
| | | </template> |
|---|
