2

src/App.vue

@@ -21,6 +21,7 @@
 
     methods: {
       login() {
+        localStorage.removeItem("token");
         http.post("/sys/dev/user/login", {
           autoLogin: true,
           userLogin: 'sixiang',

src/components/direct.vue

@@ -6,6 +6,7 @@
             <div class="top_item"><span class="top_item_title">设备温度</span><span class="top_item_con">1111</span></div>
             <div class="top_item"><span class="top_item_title">设备总功率</span><span class="top_item_con">1111</span></div>
         </div>
+        <el-button @click="getList">123</el-button>
         <div class="center">
             <div v-for="item in list" :key="item.id">
                 <div class="center_item">
@@ -45,13 +46,14 @@
         methods: {
             getList() {
                 console.log(localStorage.getItem('token'))
+
                 // return
-                http.post("/sys/dev/device/runtime/list", {
-                    currentPage: 1,
-                    deviceName: '6D8X05-X5NAGR',
-                    identifier: 'gfConfluenceMachine',
-                    productKey: '1TOMLS7WC58409644',
-                    type: 'event'
+                http.post("/sys/dev/sn/model/list", {
+                    // currentPage: 1,
+                    // deviceName: '6D8X05-X5NAGR',
+                    // identifier: 'gfTemperatureHumidity',
+                    // productKey: '1TOMLS7WC58409644',
+                    // type: 'event'
                 }).then((res) => {
                     if (res.code == 200) {
                         let arr = res.data.list[0].value.allPathElect

src/components/exchange.vue

-<script setup lang="ts">
-    import { ref, onMounted } from 'vue'
-    import Direct from './direct.vue'
-    import { UserService } from '/src/utils/api.ts'
-
-    onMounted(() => {
-        // login1()
-
-    })
-    const login1 = async () => {
-        const loginParams = {
-            autoLogin: true,
-            username: 'sixiang',
-            password: 'qwe123',
-        }
-        const res = await UserService.login1(loginParams)
-        // console.log(res)
-    }
-
-
-
-    let activeName = ref(0)
-    const handleClick = (tab) => {
-        console.log(tab.props.name)
-    }
-
-</script>
-
 <template>
     <div class="wrapper">
-        <div class="header">
-            <el-tabs v-model="activeName" @tab-click="handleClick">
-                <el-tab-pane label="光伏智能直流汇流箱" name="0">
-                    <Direct />
-                </el-tab-pane>
-                <el-tab-pane label="配置管理" name="second">光伏智能交流汇流箱</el-tab-pane>
-                <el-tab-pane label="角色管理" name="third">光伏智能并网箱</el-tab-pane>
-            </el-tabs>
+        <div class="top">
+            <div class="top_item"><span class="top_item_title">设备SN</span><span class="top_item_con">1111</span></div>
+            <div class="top_item"><span class="top_item_title">设备状态</span><span class="top_item_con">1111</span></div>
+            <div class="top_item"><span class="top_item_title">设备温度</span><span class="top_item_con">1111</span></div>
+            <div class="top_item"><span class="top_item_title">设备总功率</span><span class="top_item_con">1111</span></div>
         </div>
+        <div class="center">
+            <img src="@/assets/img/clock.png" alt="" class="item_img">
 
+        </div>
     </div>
 </template>
+<script>
+    import http from "../utils/http";
+    export default {
+
+        data() {
+            return {
+                list: [],
+
+            };
+        },
+
+
+        created() {
+            // this.getList()
+        },
+
+
+
+        methods: {
+            getList() {
+                console.log(localStorage.getItem('token'))
+
+                // return
+                http.post("/sys/dev/device/runtime/list", {
+                    currentPage: 1,
+                    deviceName: '6D8X05-X5NAGR',
+                    identifier: 'gfConfluenceMachine',
+                    productKey: '1TOMLS7WC58409644',
+                    type: 'event'
+                }).then((res) => {
+                    if (res.code == 200) {
+                        let arr = res.data.list[0].value.allPathElect
+                        let arr2 = res.data.list[0].value.allPathPower
+                        arr.map((item, index) => {
+                            this.list.push({ id: index, voltage: arr2[index], electric: item })
+                        })
+
+                    }
+                });
+            },
+            // 关闭弹窗
+            handleClick() {
+                this.$refs.employees.resetFields();
+                this.$emit("close");
+            },
+
+        },
+    };
 
+</script>
 <style scoped>
     .wrapper {
-        /* background: #F4F7FC; */
+        background: #F4F7FC;
+        height: 100vh;
+        padding: 40px;
+    }
 
+    .top {
+        display: flex;
     }
 
+    .top_item {
+        width: 300px;
+        height: 150px;
+        background: #FFFFFF;
+        box-shadow: 0px 1px 4px 1px rgba(21, 34, 50, 0.08);
+        border-radius: 6px 6px 6px 6px;
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        margin-right: 40px;
+    }
+
+    .top_item_title {
+        font-size: 18px;
+        color: #7E84A3;
+        margin-bottom: 34px;
+    }
 
+    .top_item_con {
+        font-size: 28px;
+        color: #131523;
+    }
 
-    /* :deep(.el-tabs) {
-        --el-tabs-header-height: 70px;
+    .center {
+        background: #FFFFFF;
+        display: flex;
+        margin-top: 40px;
+        padding: 152px;
+    }
 
+    .center_item {
+        width: 227px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 34px;
     }
 
-    :deep(.el-tabs__header) {
-        margin: 0;
-        background: white;
-        margin-left: 50px;
+    .item_table_w {
+        display: flex;
+        flex-direction: column;
+        border-right: 1px solid #E5E5E5;
+        width: 227px;
+        align-items: center;
+        margin-bottom: 38px;
     }
 
-    :deep(.el-tabs__nav-wrap::after) {
-        height: 0px;
-    } */
+    .item_table {
+        border: 1px solid #B1B1B1;
+        line-height: 32px;
+        width: 152px;
+
+        text-align: center;
+        font-size: 18px;
+        color: #333333;
+        margin: 14px 0 36px 0;
+    }
+
+    .item_text {
+        border-bottom: 1px solid #B1B1B1;
+    }
+
+    .item_img {
+        width: 264.07px;
+        height: 265px;
+    }
 </style>
\ No newline at end of file

src/components/grid.vue

+<template>
+    <div class="wrapper">
+        <div class="top">
+            <div class="top_item"><span class="top_item_title">设备SN</span><span class="top_item_con">1111</span></div>
+            <div class="top_item"><span class="top_item_title">设备状态</span><span class="top_item_con">1111</span></div>
+            <div class="top_item"><span class="top_item_title">设备温度</span><span class="top_item_con">1111</span></div>
+            <div class="top_item"><span class="top_item_title">设备总功率</span><span class="top_item_con">1111</span></div>
+        </div>
+        <!-- <div class="center">
+            <img src="@/assets/img/clock.png" alt="" class="item_img">
+
+        </div> -->
+    </div>
+</template>
+<script>
+    import http from "../utils/http";
+    export default {
+
+        data() {
+            return {
+                list: [],
+
+            };
+        },
+
+
+        created() {
+            // this.getList()
+        },
+
+
+
+        methods: {
+            getList() {
+                console.log(localStorage.getItem('token'))
+
+                // return
+                http.post("/sys/dev/device/runtime/list", {
+                    currentPage: 1,
+                    deviceName: '6D8X05-X5NAGR',
+                    identifier: 'gfConfluenceMachine',
+                    productKey: '1TOMLS7WC58409644',
+                    type: 'event'
+                }).then((res) => {
+                    if (res.code == 200) {
+                        let arr = res.data.list[0].value.allPathElect
+                        let arr2 = res.data.list[0].value.allPathPower
+                        arr.map((item, index) => {
+                            this.list.push({ id: index, voltage: arr2[index], electric: item })
+                        })
+
+                    }
+                });
+            },
+            // 关闭弹窗
+            handleClick() {
+                this.$refs.employees.resetFields();
+                this.$emit("close");
+            },
+
+        },
+    };
+
+</script>
+<style scoped>
+    .wrapper {
+        background: #F4F7FC;
+        height: 100vh;
+        padding: 40px;
+    }
+
+    .top {
+        display: flex;
+    }
+
+    .top_item {
+        width: 300px;
+        height: 150px;
+        background: #FFFFFF;
+        box-shadow: 0px 1px 4px 1px rgba(21, 34, 50, 0.08);
+        border-radius: 6px 6px 6px 6px;
+        display: flex;
+        flex-direction: column;
+        padding: 20px;
+        margin-right: 40px;
+    }
+
+    .top_item_title {
+        font-size: 18px;
+        color: #7E84A3;
+        margin-bottom: 34px;
+    }
+
+    .top_item_con {
+        font-size: 28px;
+        color: #131523;
+    }
+
+    .center {
+        background: #FFFFFF;
+        display: flex;
+        margin-top: 40px;
+        padding: 152px;
+    }
+
+    .center_item {
+        width: 227px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 34px;
+    }
+
+    .item_table_w {
+        display: flex;
+        flex-direction: column;
+        border-right: 1px solid #E5E5E5;
+        width: 227px;
+        align-items: center;
+        margin-bottom: 38px;
+    }
+
+    .item_table {
+        border: 1px solid #B1B1B1;
+        line-height: 32px;
+        width: 152px;
+
+        text-align: center;
+        font-size: 18px;
+        color: #333333;
+        margin: 14px 0 36px 0;
+    }
+
+    .item_text {
+        border-bottom: 1px solid #B1B1B1;
+    }
+
+    .item_img {
+        width: 264.07px;
+        height: 265px;
+    }
+</style>
\ No newline at end of file

src/components/index.vue

@@ -5,8 +5,12 @@
                 <el-tab-pane label="光伏智能直流汇流箱" name="0">
                     <Direct />
                 </el-tab-pane>
-                <el-tab-pane label="配置管理" name="second">光伏智能交流汇流箱</el-tab-pane>
-                <el-tab-pane label="角色管理" name="third">光伏智能并网箱</el-tab-pane>
+                <el-tab-pane label="光伏智能交流汇流箱" name="second">
+                    <Exchange></Exchange>
+                </el-tab-pane>
+                <el-tab-pane label="角色管理" name="third">
+                    <Grid></Grid>
+                </el-tab-pane>
             </el-tabs>
         </div>
 
@@ -15,9 +19,13 @@
 <script>
     import http from "../utils/http";
     import Direct from './direct.vue'
+    import Exchange from './exchange.vue'
+    import Grid from './grid.vue'
     export default {
         components: {
-            Direct
+            Direct,
+            Exchange,
+            Grid
         },
         data() {
             return {
@@ -37,15 +45,16 @@
 
         methods: {
             login() {
+                localStorage.removeItem("token");
                 http.post("/sys/dev/user/login", {
                     autoLogin: true,
                     userLogin: 'sixiang',
                     userPassword: 'qwe123',
                 }).then((res) => {
                     if (res.code == 200) {
-                        // localStorage.removeItem("token");
+                        // 
                         localStorage.setItem('token', res.data.token)
-                        console.log(localStorage.getItem('token'))
+                        // console.log(localStorage.getItem('token'))
                     }
                 });
             },
@@ -68,14 +77,24 @@
 
 
     ::v-deep .el-tabs {
-        --el-tabs-header-height: 70px;
+        /* --el-tabs-header-height: 70px; */
+
 
     }
 
-    ::v-deep .el-tabs__header {
+    ::v-deep .header .el-tabs__header {
         margin: 0;
         background: white;
         margin-left: 50px;
+        display: flex;
+        margin-bottom: 30px;
+    }
+
+    ::v-deep .el-tabs__item {
+        display: inline;
+
+        margin-right: 50px;
+        padding-bottom: 40px;
     }
 
     ::v-deep.el-tabs__nav-wrap::after {

src/router/index.js

@@ -6,7 +6,7 @@ Vue.use(VueRouter)
 
 const routes = [
   {
-    path: '/index',
+    path: '/',
     name: 'home',
     component: HomeView
   },

src/utils/http.js

@@ -22,7 +22,7 @@ const http = {
   post(url, params) {
     const config = {
       method: "post",
-      url: baseURL + url,
+      url: url,
     };
     if (params) config.data = params;
     return request(config);

src/utils/request.js

@@ -14,7 +14,9 @@ const service = axios.create({
 });
 // 2.请求拦截器
 service.interceptors.request.use(
+
   (config) => {
+    console.log(1111111);
     //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
     config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
     config.headers = {
@@ -23,6 +25,7 @@ service.interceptors.request.use(
     // 这里可以用本地储存去拿token
     const token = localStorage.getItem("token"); //localStorage
     // const session = sessionStorage.getItem('token')  //sessionStorage
+    console.log(33333333)
 
     if (token) {
       config.headers.Authorization = "Bearer " + token; //如果要求携带在请求头中
@@ -30,7 +33,7 @@ service.interceptors.request.use(
     return config;
   },
   (error) => {
-    console.log(33333)
+
     Promise.reject(error);
   }
 );
@@ -38,16 +41,15 @@ service.interceptors.request.use(
 // 3.响应拦截器
 service.interceptors.response.use(
   (response) => {
-    console.log(response)
-    console.log(222222)
+
     //接收到响应数据并成功后的一些共有的处理，关闭loading等
     // token过期,请重新登录
     if (response.code == 401) {
-      localStorage.removeItem("token");
+      // localStorage.removeItem("token");
+
+      Message.warning(response.data.msg);
 
-      // Message.warning(response.data.msg);
 
-      router.replace("/");
 
       // http.post("/sys/dev/user/login", {
       //   autoLogin: true,

vue.config.js

@@ -11,14 +11,14 @@ module.exports = {
     // port: 8080, // 端口
     // https: false,
     proxy: {
-      "/api": {
+      "/": {
         // target: "http://192.168.1.168:8868/", // 代理的接口域名以及端口号；
         target: "http://120.77.240.215:8856", // 代理的接口域名以及端口号；
         ws: false, // 支持ws协议；websocket的缩写；
         changeOrigin: true, // 是否跨域
         pathRewrite: {
           // 路径替换
-          "^/api": '',
+          // "^/api": '',
         },
       },
     },