更新

src/App.vue

@@ -1,22 +1,9 @@
 <script setup>
-import headView from "@/components/headView.vue";
-import Businesses from "@/components/Businesses.vue";
-// import { test } from "@/api/index.js";
-// test().then(res => {
-//   console.log(res);
-// }).catch(e => {
-//   console.log(e);
-// })
+
 </script>
 
 <template>
-  <dv-full-screen-container class="body">
-    <headView></headView>
-    <div style="height: calc(100% - 60px)">
   <router-view></router-view>
-    </div>
-    <Businesses class="businesses"></Businesses>
-  </dv-full-screen-container>
 </template>
 
 <style scoped lang="scss">
@@ -24,19 +11,4 @@ import Businesses from "@/components/Businesses.vue";
   margin: 0;
   padding: 0;
 }
-
-.body {
-  background-image: url("/src/assets/img/bg.png");
-  background-size: 100% 100%;
-  color: #fff;
-}
-.businesses {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 999999;
-  width: 100%;
-  height: 100%;
-}
 </style>

src/api/index.js

@@ -1,5 +1,6 @@
 import axios from "@/utils/axios.js";
 
-export const test = () => {
-    return axios.get('/common/home');
+// 登录
+export const login = (data) => {
+    return axios.post('dataview/login', data);
 }

src/components/headView.vue

@@ -53,6 +53,12 @@ const updateClock = () => {
     seconds.toString().padStart(2, '0');
 }
 
+const logout = () => {
+  // router.replace('/login')
+  router.push('/login')
+}
+
+
 onMounted(() => {
 
   mitt.emit('map_info', info);
@@ -92,7 +98,7 @@ onMounted(() => {
         多云
       </div>
       <img class="icon item" src="/src/assets/head_img/icon.png" alt="" />
-      <div class="item">
+      <div class="item" @click="logout">
         <img src="/src/assets/head_img/close.png" alt="" />
       </div>
     </div>

src/components/videoFlv.vue

@@ -180,11 +180,11 @@ export default {
       })
 
       this.jessibuca.on('stats', function (stats) {
-        console.log('stats', stats);
+        // console.log('stats', stats);
       })
 
       this.jessibuca.on('kBps', function (kBps) {
-        console.log('kBps', kBps);
+        // console.log('kBps', kBps);
       });
 
       this.jessibuca.on("play", () => {

src/layout/index.vue

@@ -0,0 +1,81 @@
+<script setup>
+import headView from "@/components/headView.vue";
+import Businesses from "@/components/Businesses.vue";
+import { ref, nextTick, provide, onMounted, onUnmounted } from "vue";
+
+const show = ref(true);
+const reload = () => {
+  show.value = false;
+  nextTick(() => {
+    show.value = true;
+  })
+}
+
+provide('reload', reload);
+
+// 无操作每三分钟刷新页面
+let timer = null;
+const startReLoad = () => {
+  clearInterval(timer);
+  timer = setInterval(() => {
+    reload();
+  }, 3 * 60 * 1000);
+}
+
+onMounted(() => {
+  startReLoad();
+  window.addEventListener('mousemove', startReLoad);
+  window.addEventListener('keypress', startReLoad);
+  window.addEventListener('click', startReLoad);
+})
+
+onUnmounted(() => {
+  window.removeEventListener('mousemove', startReLoad);
+  window.removeEventListener('keypress', startReLoad);
+  window.removeEventListener('click', startReLoad);
+})
+
+</script>
+
+<template>
+  <dv-full-screen-container class="body">
+    <headView></headView>
+    <div style="height: calc(100% - 3.75rem)">
+      <router-view v-slot="{ Component }">
+        <transition name="scale" mode="out-in">
+          <component :is="Component"></component>
+        </transition>
+      </router-view>
+    </div>
+    <Businesses class="businesses"></Businesses>
+  </dv-full-screen-container>
+</template>
+
+<style scoped lang="scss">
+.body {
+  background-image: url("/src/assets/img/bg.png");
+  background-size: 100% 100%;
+  color: #fff;
+  background-color: rgba($color: #000000, $alpha: 0.8);
+}
+.businesses {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 999999;
+  width: 100%;
+  height: 100%;
+}
+
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.5s ease;
+}
+
+.scale-enter-from,
+.scale-leave-to {
+  opacity: 0;
+  transform: scale(0.9);
+}
+</style>

src/router/index.js

@@ -4,6 +4,11 @@ const routes = [
     {
         path: '/',
         name: 'index',
+        component: () => import('../layout/index.vue'),
+        children: [
+            {
+                path: '/',
+                name: '',
                 component: () => import('../view/index/index.vue')
             },
             {
@@ -11,10 +16,12 @@ const routes = [
                 name: 'delivery',
                 component: () => import('../view/delivery/index.vue')
             },
+        ]
+    },
     {
-        path: '/test',
-        name: 'test',
-        component: () => import('../view/test/index.vue')
+        path: '/login',
+        name: '/login',
+        component: () => import('../view/login/index.vue')
     }
 ]
 

src/store/user.js

@@ -0,0 +1,26 @@
+import { defineStore } from "pinia"
+import { ref } from "vue"
+
+export const useUserStore = defineStore('user', () => {
+
+    const userInfo = ref(JSON.parse(localStorage.getItem('userInfo') || '{}'));
+
+    const setUserInfo = (data) => {
+        userInfo.value = data;
+        localStorage.setItem('userInfo', JSON.stringify(data));
+    }
+
+    const token = ref(localStorage.getItem('token') || '');
+
+    const setToken = (data) => {
+        token.value = data;
+        localStorage.setItem('token', data);
+    }
+
+    return {
+        userInfo,
+        token,
+        setUserInfo,
+        setToken
+    }
+})

src/view/delivery/components/center.vue

@@ -184,7 +184,7 @@ const initMap = () => {
     tooltip: {
       trigger: 'item',
       formatter: function (params) {
-        console.log(params);
+        // console.log(params);
         if (params.data) {
           return `<div 
                     style="background-image: url(\'/src/assets/img/border5.png\');
@@ -198,7 +198,7 @@ const initMap = () => {
                       <div style="font-size: 12px;height: 15px;">基地名称</div>
                       <div style="font-size: 15px;font-family: 'ifonts';height: 50px;display: flex;
                     justify-content: center;
-                    align-items: center;">${'泸县原生态养殖基地'}</div>
+                    align-items: center;">${params.data.name}</div>
                     </div>`;
         } else return '';
       },
@@ -273,6 +273,14 @@ const initMap = () => {
   }
   // 使用配置项显示图表
   chart.setOption(option);
+
+  // 监听标记点的点击事件
+  chart.on('click', function (params) {
+  if (params.seriesType === 'scatter') {
+    // 处理你的点击事件逻辑
+    console.log('点击了', params.data.name);
+  }
+});
 }
 
 const filterMap = () => {
@@ -288,6 +296,7 @@ onMounted(() => {
   }
   dataValue = props.list;
   dataValue[0] = {
+    name: '福集镇养殖基地',
     value: [105.36, 29.20]
   }
   changeType('luxian');

src/view/index/components/left.vue

@@ -191,7 +191,7 @@ onMounted(() => {
           <!-- <img src="/src/assets/index_img/video.png" /> -->
           <videoFlv
             style="width: 100%; height: 100%"
-            url="http://192.168.1.27/live/test.live.flv?secret=gqig2yfkkdpimic1uwzy1l5msio0eflm"
+            url="http://192.168.1.32/live/test.live.flv?secret=gqig2yfkkdpimic1uwzy1l5msio0eflm"
           />
           <div class="title">泸县原生态养殖基地</div>
         </div>

src/view/login/index.vue

@@ -0,0 +1,226 @@
+<script setup>
+import { ref, reactive } from "vue"
+import { useRouter } from "vue-router";
+import { login } from "@/api/index.js";
+import { useUserStore } from "@/store/user.js";
+const router = useRouter()
+const show = ref(false)
+const account = ref('叙永镇')
+const password = ref('xuyongzhen')
+const isAccount = ref(false)
+const isPassword = ref(false)
+
+const userStore = useUserStore();
+
+const submit = () => {
+
+  if (!account.value) {
+    isAccount.value = true;
+    return
+  }
+  else isAccount.value = false;
+  if (!password.value) {
+    isPassword.value = true;
+
+    return
+  }
+  else isPassword.value = false;
+
+
+  login({
+    account: account.value,
+    password: password.value
+  }).then((res) => {
+    userStore.setUserInfo(res.data.user);
+    userStore.setToken(res.data.token);
+    router.push('/');
+  }).catch(e => {
+    console.log(e);
+  })
+}
+
+</script>
+
+
+<template>
+  <dv-full-screen-container class="body">
+    <div class="login-box">
+      <div class="form">
+        <div class="content" style="padding-top: 2.5rem">
+          <div class="line-box">
+            <input
+              class="ipt"
+              type="text"
+              placeholder="请输入账号"
+              v-model="account"
+            />
+            <div class="line">
+              <img
+                src="/src/assets/login_img/ZH.png"
+                alt=""
+                class="accont-icon"
+              />
+            </div>
+          </div>
+          <div class="tips">
+            <span v-show="isAccount">请输入账号</span>
+          </div>
+          <div class="line-box">
+            <input
+              class="ipt"
+              placeholder="请输入密码"
+              :type="show ? 'text' : 'password'"
+              v-model="password"
+            />
+            <div class="line">
+              <img
+                src="/src/assets/login_img/MM.png"
+                alt=""
+                class="accont-icon"
+                style=""
+              />
+              <img
+                src="/src/assets/login_img/KJ.png"
+                v-if="show"
+                alt=""
+                @click="show = false"
+                class="accont-icon"
+              />
+              <img
+                src="/src/assets/login_img/BKH.png"
+                v-else
+                @click="show = true"
+                class="accont-icon"
+              />
+            </div>
+          </div>
+          <div class="tips">
+            <span v-show="isPassword">请输入密码</span>
+          </div>
+          <button class="btn" @click="submit">登录</button>
+        </div>
+      </div>
+      <div class="title"><span>吟龙养殖溯源系统可视化大屏</span></div>
+    </div>
+  </dv-full-screen-container>
+</template>
+
+<style lang="scss" scoped>
+.body {
+  background-image: url("/src/assets/img/bg.png");
+  background-size: 100% 100%;
+  color: #fff;
+  background-color: rgba($color: #000000, $alpha: 0.8);
+}
+.login-box {
+  width: 100%;
+  height: 100%;
+  background-image: url(../../assets/login_img/bg.png);
+  background-size: 100% 100%;
+  overflow: hidden;
+  position: relative;
+  .title {
+    position: absolute;
+    top: 20%;
+    right: 10%;
+    width: 35%;
+    padding-bottom: 0.4rem;
+    height: 4rem;
+    line-height: 4rem;
+    font-size: 2.6rem;
+    font-family: "ifonts";
+    background-image: url(../../assets/login_img/title.png);
+    background-size: 100% 100%;
+
+    span {
+      background-image: -webkit-linear-gradient(top, #061028, #144e8b);
+      -webkit-background-clip: text;
+      /* -webkit-text-fill-color: transparent; */
+      color: rgba(0, 0, 0, 0);
+      -webkit-text-stroke-color: #5fa2ec;
+      -webkit-text-stroke-width: 1px;
+    }
+  }
+}
+
+.form {
+  width: 30%;
+  height: 45%;
+  position: absolute;
+  top: 25%;
+  right: 10%;
+  box-sizing: border-box;
+  background: url(../../assets/login_img/DLBG.png);
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .content {
+    width: 60%;
+    height: 60%;
+    .ipt {
+      border: 1px solid #194fa3;
+      background-color: #123266;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 0.5rem 2.5rem;
+      outline: none;
+      -webkit-user-select: auto;
+      caret-color: #fff;
+      color: white;
+    }
+    .line-box {
+      position: relative;
+      width: 100%;
+      margin-top: 1rem;
+      .line {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        pointer-events: none;
+        top: 0;
+        left: 0;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 0.5rem;
+        box-sizing: border-box;
+        align-items: center;
+      }
+      input {
+        font-size: 1rem;
+      }
+    }
+
+    input[type="password"]::-ms-reveal {
+      display: none;
+    }
+
+    .tips {
+      width: 100%;
+      height: 1.5rem;
+      margin-top: 0.3rem;
+      text-align: start;
+      color: red;
+      span {
+        margin-left: 2.5rem;
+      }
+    }
+
+    .btn {
+      width: 100%;
+      margin-top: 2rem;
+      background-color: #0040a1;
+      color: #fff;
+      border-radius: 0;
+      border: 0.1rem solid #2873ff;
+    }
+
+    .accont-icon {
+      width: 1rem;
+      height: 1rem;
+      pointer-events: all !important;
+    }
+  }
+}
+</style>