登录页面

src/components/loginheader.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="bgk1">
+    <div class="d-flex jc-center title_wrap">
+      
+      <div class="d-flex jc-center s-content">
+        <div class="title tiletimg">
+          <!-- <div class="ve_logo_img">
+         <el-image style="height: 100%" :src="logo" fit="contain"></el-image>
+       </div> -->
+          <!-- <span class="title-text">煤矿多种态势推演可视化和智慧应急与救援模型定制开发系统</span> -->
+          <!-- <span class="title-text">煤矿典型灾害态势推演</span> -->
+          <span class="title-text">煤矿灾害态势推演</span>
+        </div>
+      </div>
+
+     
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted, reactive } from "vue"
+import { RouterView, RouterLink } from "vue-router"
+import { request, uploadFile } from "@/utils/request"
+import logo from "@/assets/logo.png"
+import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
+import { timestampToTime, formatTime } from "@/js/lindex.js"
+import emitter from "@/utils/emitter"
+let emit = defineEmits(["handleSelect"])
+
+let headername = ref()
+const props = defineProps({
+  name: {
+    type: String
+  }
+})
+let headeractive = ref(0)
+let headerobj = ref({
+  time: "",
+  name: ""
+})
+let headertime = ref({
+  timing: null,
+  loading: true,
+  dateDay: null,
+  dateYear: null,
+  dateWeek: null,
+  weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
+})
+let headerid = ref()
+onMounted(() => {
+  timeFn()
+})
+// 当前时间
+const timeFn = () => {
+  headertime.value.timing = setInterval(() => {
+    headertime.value.dateDay = formatTime(new Date(), "HH: mm: ss")
+    headertime.value.dateYear = formatTime(new Date(), "yyyy-MM-dd")
+    headertime.value.dateWeek = headertime.value.weekday[new Date().getDay()]
+  }, 1000)
+}
+
+const handleSelect = (key) => {
+  //emitter.on('checkeclear');
+  emitter.emit("handleSelect", key)
+  headerid.value = key
+  headeractive.value = headerid.value
+  emit("handleSelect", key)
+  headername.value = ""
+}
+// const handleSelect4 = (key) => {
+//   //emitter.on('checkeclear');
+//   emitter.emit('handleSelect4',(key));
+//     headerid.value=key;
+//     headeractive.value= headerid.value;
+//     emit('handleSelect', key);
+//     headername.value="";
+// };
+emitter.on("handleSelect4", (data) => {
+  headerid.value = data
+  headeractive.value = headerid.value
+  headername.value = ""
+})
+const hname = (val) => {
+  headername.value = val // 获取项目名称
+}
+
+defineExpose({ headeractive, hname })
+</script>
+<style  lang="scss" scoped>
+@import "../../src/style/style.css";
+.headeractive {
+  background-image: url("/src/assets/img/Rectangle4562.png") !important;
+}
+.headeractive2 {
+  //  background-image: url('/src/assets/img/Rectangle45622.png') !important;
+  background-image: url("/src/assets/img/Rectangle4562.png") !important;
+  background-size: 100%;
+}
+</style>

src/router/index.js

@@ -47,6 +47,12 @@ const router = createRouter({
         //     }
         // },
         
+        {
+          path: '/login',
+          name: 'login',
+          component: () => import('@/view/login.vue'), // 登录页面组件
+        },
+
         {
           path: '/',
           name:'煤矿灾害态势推演',
@@ -118,7 +124,7 @@ router.beforeEach((to,from,next) =>{
     window.document.title = to.name;
     next();
   })
-  router.afterEach((to,from,next) =>{
+router.afterEach((to,from,next) =>{
     window.scrollTo(0,0);
   })
 export default router;

src/settings.js

@@ -1,6 +1,7 @@
 export const title = '前沿动力';
 export const fixedHeader = true;
 export const TokenKey = 'CAE_token';
+export const UserIdKey = 'CAE_userId';
 export const LoginUrl = 'logUrl';
 export const Caegw_ProUrl="";
-export const Caegw_LogUrl="";
+export const Caegw_LogUrl="/login";

src/utils/request.ts

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import store from '@/store'
-import { getToken } from '@/utils/token';
+import { getToken,getUserId,removeToken,removeUserId } from '@/utils/token';
 import { DES3 } from '@/utils/3des';
 import router from '@/router/index'
 import { ElMessage } from '../utils/message.js'
@@ -61,42 +61,23 @@ axios.interceptors.response.use(res => {
     if (data.returnCode == successCode) {
       return Promise.resolve(data)
     } else {
-      if (data.returnMsg === '系统没有登录或会话超时!') {
-        store.dispatch('user/changeState', {
-          key: 'token',
-          value: ''
-        })
-        store.dispatch('user/changeState', {
-          key: 'name',
-          value: ''
-        })
-        store.dispatch('user/changeState', {
-          key: 'userId',
-          value: ''
-        })
-        store.dispatch('user/changeState', {
-          key: 'loginStatus',
-          value: false
-        })
-        MessageBox.confirm('系统没有登录或会话超时, 是否登录?', '提示', {
-          confirmButtonText: '登录',
-          cancelButtonText: '取消',
-          type: 'warning'
-        })
-          .then(() => {
-            MessageBox.close()
-            // window.location.hash = "/login/index";
-            // window.location.href = "#/login/index";
-            // router.replace(`/login/index`)
-             // this.$router.replace('/login/index')
-             let logUrl = window.location.protocol+"//"+window.location.host+"/"+Caegw_LogUrl;
-             // console.log(logUrl);
-             window.location.href=logUrl
-          })
-          .catch(() => {
-            Message.info('已取消！')
-            MessageBox.close()
-          })
+      if (data.returnMsg === "用户验证失败！") {
+        removeToken();
+        removeUserId();
+        router.replace({ path: '/login' });
+        // ElMessageBox.confirm('系统没有登录或会话超时, 是否登录?', '提示', {
+        //   confirmButtonText: '登录',
+        //   cancelButtonText: '取消',
+        //   type: 'warning'
+        // })
+        //   .then(() => {
+        //     ElMessageBox.close()
+        //     router.replace({ path: '/login' });
+        //   })
+        //   .catch(() => {
+        //     Message.info('已取消！')
+        //     ElMessageBox.close()
+        //   })
       }
       return Promise.reject(data)
     }
@@ -141,8 +122,12 @@ function getUrl(channelNo = 'service') {
 //配置上行报文公共包头
 function getParams(params, channelNo) {
  // params['clientToken'] = "11112";
-  params['clientToken'] = "e47b87eec69545559d1e81e56626da68";
-  let userId ='5f06c8bc77234f969d13e160b54c27e3';
+  // params['clientToken'] = "e47b87eec69545559d1e81e56626da68";
+  // let userId ='5f06c8bc77234f969d13e160b54c27e3';
+  
+  params['clientToken'] = getToken()|| store.token || '03c540b1baf2434b8cffbb69f73b60bf';
+  let userId = getUserId() ||store.userId || '5f06c8bc77234f969d13e160b54c27e3';
+
   // let userId = store.getters.userId;
   // if (userId) {
   params['userId'] = userId;
@@ -193,7 +178,7 @@ const uploadFile = (params, channelNo = 'service', callback1) => {
   }
   let url = getUrl(channelNo);//完善请求url
   params.append("clientToken", store.getters.token || getToken());
-  params.append("userId", store.getters.userId);
+  params.append("userId", store.getters.userId || getUserId());
   params.append("channelNo", channelNo);//配置上行报文公共包头
   console.log(params);
   return new Promise((resolve, reject) => {
@@ -223,7 +208,9 @@ const getImage = (id, channelNo = 'server') => {
 
 //加密密码
 const enPassword = (password) => {
-  let token = store.getters.token || getToken();
+  
+  let token = getToken()||store.token || '03c540b1baf2434b8cffbb69f73b60bf';
+  
   return DES3.encrypt(token, password);
 }
 

src/utils/token.js

@@ -1,5 +1,5 @@
 import Cookies from 'js-cookie' // 引入js-cookie插件
-import { TokenKey } from '@/settings' // 引入settings.js
+import { TokenKey,UserIdKey } from '@/settings' // 引入settings.js
 
 /**
  * 前端uuid
@@ -32,3 +32,20 @@ export function setToken(token) {
 export function removeToken() {
   return Cookies.remove(TokenKey)
 }
+// 获取 userId
+export function getUserId() {
+  if (Cookies.get(UserIdKey) == null || Cookies.get(UserIdKey) == '' || Cookies.get(UserIdKey) == 'undefined') {
+    setUserId('guest') // 默认给一个值，实际可以根据需要进行修改
+  }
+  return Cookies.get(UserIdKey)
+}
+
+// 设置 userId
+export function setUserId(userId) {
+  return Cookies.set(UserIdKey, userId)
+}
+
+// 移除 userId
+export function removeUserId() {
+  return Cookies.remove(UserIdKey)
+}

src/view/login.vue

@@ -0,0 +1,484 @@
+<template>
+  <div class="appmian">
+    <!-- <v-scale-screen width="1920" height="1080" style="margin: 0;"> -->
+
+    <el-container>
+      <el-header>
+        <loginheader ref="loginheaderref" :name="headerobj.name" />
+      </el-header>
+      <el-main> </el-main>
+      <div class="bgk3" v-show="bgk2false">
+        <div class="bgk4"></div>
+        <div class="bgk2">
+          <div class="bjgg">
+            <el-image :src="dtu" fit="contain"></el-image>
+            <!-- 添加登录框 -->
+
+            <div class="login-form-container">
+              <div
+                class="dialog_class bgcolor tianjia"
+                style="width: 100%; height: 100%; padding: 30px"
+              >
+                <el-form :model="form" label-width="80px" >
+                  <el-form-item label="用户名:" label-width="80px" class="form-item-align-left">
+                    <el-input
+                      v-model="loginform.username"
+                      placeholder="请输入用户名"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="密码:" label-width="80px" class="form-item-align-left">
+                    <el-input
+                      v-model="loginform.password"
+                      placeholder="请输入密码"
+                    ></el-input>
+                  </el-form-item>
+
+                  <!-- <div class="captcha-wrapper">
+                    <img :src="imageUrl" alt="验证码" class="captcha-img" />
+                    <el-input
+                      v-model="loginform.captcha"
+                      placeholder="请输入验证码"
+                    />
+                  </div> -->
+
+                  <el-button 
+                  class="loginbtn" 
+                  @click="login" 
+                  style="width: 100%;"
+                  :loading="loading"
+                  :disabled="loading"
+                    >{{ loading ? '登录中...' : '登录' }}</el-button
+                  >
+                  <!-- <el-button
+                    type="primary"
+                    @click="register"
+                    style="width: 100%"
+                    >注册</el-button
+                  > -->
+                </el-form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部按钮三个页面 -->
+    </el-container>
+    <!-- </v-scale-screen> -->
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, reactive, nextTick } from "vue"
+import { RouterView, RouterLink, useRouter } from "vue-router"
+import VScaleScreen from "v-scale-screen"
+import "@/utils/flexible"
+
+import { request,enPassword } from "@/utils/request"
+
+import logo from "@/assets/logo.png"
+import {
+  ElMessage,
+  ElButton,
+  ElDialog,
+  ElSelect,
+  formEmits
+} from "element-plus"
+
+// import configurator  from "./components/configurator.vue"
+import reheader from "@/components/header.vue"
+import loginheader from "@/components/loginheader.vue"
+import result from "./result.vue"
+import Vector from "@/assets/img/Vector.png"
+import s1 from "@/assets/img/s1.png"
+import dtu from "@/assets/img/Group1317.png"
+import s2 from "@/assets/img/s2.png"
+import s3 from "@/assets/img/s3.png"
+import s4 from "@/assets/img/s4.png"
+import b from "@/assets/img/Group1317.png"
+import { timestampToTime, formatTime } from "@/js/lindex.js"
+import emitter from "@/utils/emitter"
+
+import { getToken, setToken, setUserId } from "@/utils/token"
+import router from "@/router"
+
+// import { vtkmodel2 } from "@/control/vtkModel.js";
+let activeIndeximg = ref(null)
+let reheaderref = ref()
+let loginheaderref = ref()
+let lliudialog = ref()
+let sourcedis = ref()
+let classradio = ref()
+let boundary = ref()
+let tanimation = ref()
+let state = ref()
+let menumine = ref()
+let menusen = ref()
+let indexref = ref()
+let configuratorref = ref()
+let bkmodel = ref(false)
+let modelshow = ref(true)
+const title = "灾情推演软件"
+const activeIndex = ref("1")
+const activeIndex2 = ref("1")
+let titlefalse = ref(false)
+
+let headertime = ref({
+  timing: null,
+  loading: true,
+  dateDay: null,
+  dateYear: null,
+  dateWeek: null,
+  weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
+})
+let bgk2false = ref(true)
+let headerobj = ref({
+  time: "",
+  name: ""
+})
+
+onMounted(() => {
+  timeFn()
+  // childfun();
+})
+
+// 登录相关
+let loginform = ref({
+  username: "",
+  password: "",
+  captcha: "",
+})
+
+
+let loading = ref(false)
+const codeId = ref("") // 验证码ID
+const imageUrl = ref("") // 验证码图片 URL
+
+
+const login = () => {
+  loading.value = true
+  const params = {
+    transCode: "A00002",
+    loginName: loginform.value.username,
+    password: enPassword(loginform.value.password),
+    
+    type: "",
+    
+  }
+  console.log(params)
+  request(params)
+  .then((res) => {
+    setToken(res.clientToken)
+    setUserId(res.userId)
+
+    router.push({ path: "/" })
+
+  })
+  .catch((err) => {
+    console.error('错误信息：',err);
+    ElMessage.error(err.returnMsg);
+  })
+  .finally(() => {
+    loading.value = false
+  });
+}
+
+
+const register = () => {
+  const params = {
+    transCode: "A00003",
+    userName: form.value.username,
+    password: form.value.password,
+    mailOrPhone: "123456",
+    verificationCode: "",
+    channel: "1"
+  }
+  request(params)
+    .then((res) => {
+      console.log(res)
+    })
+    .catch((err) => {
+      ElMessage.error(err.returnMsg)
+    })
+}
+
+const getcode = () => {
+
+}
+
+
+
+
+
+
+
+
+// 当前时间
+const timeFn = () => {
+  headertime.value.timing = setInterval(() => {
+    headertime.value.dateDay = formatTime(new Date(), "HH: mm: ss")
+    headertime.value.dateYear = formatTime(new Date(), "yyyy-MM-dd")
+    headertime.value.dateWeek = headertime.value.weekday[new Date().getDay()]
+  }, 1000)
+}
+
+onUnmounted(() => {})
+</script>
+<style>
+@import "../../src/style/style.css";
+</style>
+<style lang="scss" scoped>
+.appmian {
+  .el-main {
+    --el-main-padding: 0px !important;
+  }
+
+  .el-container {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    position: absolute;
+    z-index: 206;
+    top: 0;
+    background-image: url(../../src/assets/img/BJ.png) !important;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+}
+
+.ve_menu_logo {
+  width: 100%;
+  height: 70px;
+  background: #0d1639;
+  white-space: nowrap;
+  text-align: left;
+  overflow: hidden;
+  display: flex;
+  background: #0d1639;
+  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
+  border-radius: 0px 0px 0px 0px;
+  border-bottom: 1px solid;
+  box-sizing: border-box;
+  border-image: linear-gradient(
+      28deg,
+      rgba(31, 107, 255, 1),
+      rgba(31, 107, 255, 0)
+    )
+    1 1;
+
+  .ve_title {
+  }
+
+  .ve_logo_img {
+    padding-left: 30px;
+    padding-right: 30px;
+    display: inline-block;
+    box-sizing: border-box;
+    vertical-align: middle;
+    padding: 15px;
+  }
+
+  .ve_logo_title {
+    width: 160px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    margin: 0;
+    vertical-align: middle;
+    color: #68adff;
+    font-size: 20px;
+  }
+
+  .el-menu-demo {
+    width: 60% !important;
+    height: 70px;
+    border: none !important;
+    background: rgba(12, 97, 197, 0);
+
+    .el-menu-item {
+      position: relative;
+      width: 97px;
+      font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+      font-weight: bold;
+      font-size: 13px;
+      color: #68adff;
+      line-height: 15px;
+      text-align: center;
+      font-style: normal;
+      text-transform: none;
+      width: 110px;
+      height: 70px;
+      border-radius: 0px 0px 0px 0px;
+      border: none;
+    }
+
+    .is-active {
+      width: 110px;
+      height: 70px;
+      background: radial-gradient(
+        ellipse at 54px 0px,
+        #3aa0ff -37%,
+        #123066 53%
+      );
+      border-radius: 0px 0px 0px 0px;
+      border: 1px solid;
+      border-left: 1px solid rgba(16, 92, 240, 1);
+      border-right: 1px solid rgba(18, 48, 102, 1);
+      border-image: linear-gradient(
+          347deg,
+          rgba(16, 92, 240, 1),
+          rgba(18, 48, 102, 1)
+        )
+        1 1;
+
+      &:after {
+        width: 24px;
+        height: 1px;
+        background-color: #fff;
+        -webkit-transition: all ease-out 0.2s;
+        transition: all ease-out 0.2s;
+        content: "";
+        position: absolute;
+        left: 50%;
+        bottom: 15px;
+        webkit-transform: translate(-50%, 0%);
+        -moz-transform: translate(-50%, 0%);
+        transform: translate(-50%, 0%);
+      }
+    }
+  }
+
+  .ve_right {
+    // width: 350px;
+    height: 70px;
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+    display: flex;
+
+    .ve_time {
+      width: 190px;
+      height: 55px;
+      padding-top: 15px;
+      height: 70px;
+      overflow: hidden;
+      border-radius: 0px 0px 0px 0px;
+      border-left: 2px solid rgba(12, 97, 197, 0.2);
+      border-right: 2px solid rgba(12, 97, 197, 0.2);
+      box-sizing: border-box;
+      padding: 15px 5px;
+      // border-image: linear-gradient(347deg, rgba(31, 107, 255, 1), rgba(164, 195, 255, 1)) 1 1;
+      span {
+        display: block;
+        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+        color: #ffffff;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+      }
+
+      .l_huoqing {
+        font-size: 13px;
+        line-height: 15px;
+        font-weight: bold;
+        line-height: 2;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .l_time {
+        font-size: 12px;
+        line-height: 14px;
+        font-weight: 400;
+      }
+    }
+
+    .ve_timeioc {
+      width: 150px;
+      height: 70px;
+      // border-radius: 0px 0px 0px 0px;
+      // border: 1px solid;
+      // border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(164, 195, 255, 1)) 1 1;
+      font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+      font-weight: bold;
+      font-size: 13px;
+      color: #68adff;
+      line-height: 15px;
+      text-align: center;
+      font-style: normal;
+      text-transform: none;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      span {
+        padding-left: 15px;
+      }
+    }
+  }
+}
+
+.login-form-container {
+  position: absolute;
+  width: 400px;
+  height: 240px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); /* 将登录框居中 */
+  // background-color: rgba(255, 255, 255, 0.7); /* 给登录框添加透明背景色 */
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+}
+
+.form-item-align-left {
+  justify-content: flex-start;
+}
+
+.loginbtn {
+  width: 100%;
+  background-color: rgba(61, 219, 252, 0.20) !important;
+  box-sizing: border-box;
+  border: none;
+}
+
+.loginbtn:hover {
+  background-color: rgba(61, 219, 252, 0.35); /* 鼠标悬停时改变背景色 */
+  transform: scale(1.05); /* 鼠标悬停时轻微放大按钮 */
+}
+</style>
+
+<style>
+.vtkmodel1 {
+  position: absolute;
+  z-index: 100;
+  width: 100%;
+  height: 100vh;
+}
+body {
+  width: 100%;
+  height: 100vh;
+  background: #161a2a;
+  /* background:#b2bac7; */
+}
+
+button:focus,
+button:focus-visible {
+  outline: none;
+}
+
+.l_Dialog {
+  position: relative;
+}
+.main-conyeny {
+  position: absolute;
+  z-index: 206;
+  top: 70px;
+}
+.L_aside {
+  margin-top: 10px;
+  overflow: hidden;
+}
+</style>