add hangxiao role page

xiuosiot-frontend/src/api/user/index.js

@@ -18,11 +18,11 @@ export function getGifCode(data) {
   })
 }
 
-export function getInfo(token) {
+export function getInfo() {
   return request({
-    url: '/vue-admin-template/user/info',
+    url: '/user/getSession',
     method: 'get',
-    params: { token }
+    params: {}
   })
 }
 

xiuosiot-frontend/src/layout/components/Sidebar/index.vue

@@ -32,7 +32,7 @@ export default {
       'sidebar'
     ]),
     routes() {
-      return this.$router.options.routes
+      return this.$store.state.user.routes
     },
     activeMenu() {
       const route = this.$route

xiuosiot-frontend/src/permission.js

@@ -2,11 +2,13 @@
  * @Author: 龚祖望 573413756@qq.com
  * @Date: 2022-05-16 09:16:41
  * @LastEditors: 龚祖望 573413756@qq.com
- * @LastEditTime: 2022-09-16 10:39:39
+ * @LastEditTime: 2022-10-09 15:28:49
  * @FilePath: \dashengda\src\permission.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import router from './router'
+import store from './store'
+import { Message } from 'element-ui'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
 import { getToken } from '@/utils/auth' // get token from cookie
@@ -31,8 +33,31 @@ router.beforeEach(async(to, from, next) => {
       next({ path: '/overview' })
       NProgress.done()
     } else {
-      next()
+      const corpName = store.getters.corpName
-      NProgress.done()
+      if (corpName) {
+        next()
+        NProgress.done()
+      } else {
+        try {
+          const res = await store.dispatch('user/getInfo')
+          store.dispatch('user/generateRoutes', res).then(() => {
+            router.addRoutes(store.getters.asyncRouters)
+            next()
+          }).catch(async err => {
+            // remove token and go to login page to re-login
+            await store.dispatch('user/resetToken')
+            Message.error(err || 'Has Error')
+            next(`/login?redirect=${to.path}`)
+            NProgress.done()
+          })
+        } catch (error) {
+          // remove token and go to login page to re-login
+          await store.dispatch('user/resetToken')
+          Message.error(error || 'Has Error')
+          next(`/login?redirect=${to.path}`)
+          NProgress.done()
+        }
+      }
     }
   } else {
     /* has no token*/

xiuosiot-frontend/src/router/index.js

@@ -228,48 +228,36 @@ export const constantRoutes = [
       }
     ]
   },
-  {
-    path: '/data',
-    component: Layout,
-    name: 'Data',
-    meta: { title: '数据管理', icon: 'data' },
-    children: [
-      {
-        path: 'realTime',
-        name: 'RealTime',
-        component: () => import('@/views/data/realTime/index'),
-        meta: { title: '实时数据' }
-      },
-      {
-        path: 'history',
-        name: 'History',
-        component: () => import('@/views/data/history/index'),
-        meta: { title: '历史数据' }
-      },
-      {
-        path: 'value',
-        name: 'Value',
-        component: () => import('@/views/data/value/index'),
-        meta: { title: '数据价值' }
-      }
-    ]
-  },
-
-  // {
-  //   path: 'external-link',
-  //   component: Layout,
-  //   children: [
-  //     {
-  //       path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
-  //       meta: { title: 'External Link', icon: 'link' }
-  //     }
-  //   ]
-  // },
-
-  // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]
 
+export const asyncRouter = [{
+  path: '/data',
+  component: Layout,
+  name: 'Data',
+  meta: { title: '数据管理', icon: 'data', permission: ['dashengda'] },
+  children: [
+    {
+      path: 'realTime',
+      name: 'RealTime',
+      component: () => import('@/views/data/realTime/index'),
+      meta: { title: '实时数据', permission: ['dashengda'] }
+    },
+    {
+      path: 'history',
+      name: 'History',
+      component: () => import('@/views/data/history/index'),
+      meta: { title: '历史数据', permission: ['dashengda'] }
+    },
+    {
+      path: 'value',
+      name: 'Value',
+      component: () => import('@/views/data/value/index'),
+      meta: { title: '数据价值', permission: ['dashengda'] }
+    }
+  ]
+}]
+
 const createRouter = () => new Router({
   mode: 'history', // require service support
   scrollBehavior: () => ({ y: 0 }),
@@ -277,6 +265,7 @@ const createRouter = () => new Router({
 })
 
 const router = createRouter()
+router.addRoutes(asyncRouter)
 
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
 export function resetRouter() {

xiuosiot-frontend/src/store/getters.js

@@ -4,6 +4,9 @@ const getters = {
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   name: state => state.user.name,
-  corpName: state => state.user.corpName
+  corpName: state => state.user.corpName,
+  abbrCorpName: state => state.user.abbrCorpName,
+  asyncRouters: state => state.user.asyncRouters,
+  routes: state => state.user.routes
 }
 export default getters

xiuosiot-frontend/src/store/modules/user.js

@@ -2,20 +2,50 @@
  * @Author: 龚祖望 573413756@qq.com
  * @Date: 2022-05-16 09:16:41
  * @LastEditors: 龚祖望 573413756@qq.com
- * @LastEditTime: 2022-08-31 20:21:28
+ * @LastEditTime: 2022-10-09 15:39:05
  * @FilePath: \dashengda\src\store\modules\user.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import { login, logout } from '@/api/user'
+import { login, logout, getInfo } from '@/api/user'
 import { getToken, setToken, removeToken } from '@/utils/auth'
-import { resetRouter } from '@/router'
+import { resetRouter, constantRoutes, asyncRouter } from '@/router'
+
+function filterAsyncRouter(routerMap, roles) {
+  const accessedRouters = routerMap.filter(route => {
+    if (hasPermission([roles.permissions], route)) {
+      if (route.children && route.children.length) {
+        route.children = filterAsyncRouter(route.children, roles)
+      }
+      return true
+    }
+    return false
+  })
+  return accessedRouters
+}
+
+function hasPermission(permission, route) {
+  if (route.meta && route.meta.permission) {
+    let flag = true
+    for (let i = 0; i < permission.length; i++) {
+      flag = route.meta.permission.includes(permission[i])
+      if (flag) {
+        return true
+      }
+    }
+    return false
+  }
+  return true
+}
 
 const getDefaultState = () => {
   return {
     token: getToken(),
     name: '',
     avatar: '',
-    corpName: '浙江大胜达包装股份有限公司'
+    corpName: '',
+    abbrCorpName: '',
+    permissions: [],
+    asyncRouters: []
   }
 }
 
@@ -33,6 +63,19 @@ const mutations = {
   },
   SET_AVATAR: (state, avatar) => {
     state.avatar = avatar
+  },
+  SET_CORPNAME: (state, corpName) => {
+    state.corpName = corpName
+  },
+  SET_ABBRCORPNAME: (state, abbrCorpName) => {
+    state.abbrCorpName = abbrCorpName
+  },
+  SET_PERMISSIONS: (state, permissions) => {
+    state.permissions = permissions
+  },
+  SET_ROUTERS: (state, asyncRouters) => {
+    state.asyncRouters = asyncRouters
+    state.routes = [...constantRoutes, ...asyncRouters]
   }
 }
 
@@ -42,7 +85,6 @@ const actions = {
     const { username, password } = userInfo
     const data = { username, password }
     return new Promise((resolve, reject) => {
-      // console.log('res', res)
       login(data).then(res => {
         if (res.code === '200000') {
           setToken('success')
@@ -57,26 +99,26 @@ const actions = {
     })
   },
 
-  // // get user info
+  // get user info
-  // getInfo({ commit, state }) {
+  getInfo({ commit, state }) {
-  //   return new Promise((resolve, reject) => {
+    return new Promise((resolve, reject) => {
-  //     getInfo(state.token).then(response => {
+      getInfo(state.token).then(response => {
-  //       const { data } = response
+        const { data } = response
 
-  //       if (!data) {
+        if (!data) {
-  //         return reject('Verification failed, please Login again.')
+          return reject('Verification failed, please Login again.')
-  //       }
+        }
+        // const { name, avatar } = data
 
-  //       const { name, avatar } = data
+        commit('SET_CORPNAME', data.corpname)
-
+        commit('SET_ABBRCORPNAME', data.abbrcorpname)
-  //       commit('SET_NAME', name)
+        commit('SET_PERMISSIONS', [data.permissions])
-  //       commit('SET_AVATAR', avatar)
+        resolve(data)
-  //       resolve(data)
+      }).catch(error => {
-  //     }).catch(error => {
+        reject(error)
-  //       reject(error)
+      })
-  //     })
+    })
-  //   })
+  },
-  // },
 
   // user logout
   logout({ commit, state }) {
@@ -99,6 +141,14 @@ const actions = {
       commit('RESET_STATE')
       resolve()
     })
+  },
+  generateRoutes({ commit }, roles) {
+    return new Promise(resolve => {
+      const accessedRouters = filterAsyncRouter(asyncRouter, roles)
+      console.log('accessedRouters', accessedRouters)
+      commit('SET_ROUTERS', accessedRouters)
+      resolve()
+    })
   }
 }
 

xiuosiot-frontend/src/views/login/index.vue

@@ -142,7 +142,6 @@ export default {
   watch: {
     $route: {
       handler: function(route) {
-        console.log('route', route)
         this.redirect = route.query && route.query.redirect
       },
       immediate: true

xiuosiot-frontend/src/views/overview/index.vue

@@ -2,7 +2,7 @@
  * @Author: 龚祖望 573413756@qq.com
  * @Date: 2022-05-16 09:16:41
  * @LastEditors: 龚祖望 573413756@qq.com
- * @LastEditTime: 2022-07-21 11:08:30
+ * @LastEditTime: 2022-10-09 15:42:31
  * @FilePath: \dashengda\src\views\dashboard\index.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -10,10 +10,10 @@
   <div class="dashboard-container">
     <swiper ref="mySwiper" :options="swiperOption" style="width:100%">
       <swiper-slide>
-        <img class="slide-img" src="@/assets/images/slide1.png">
+        <img class="slide-img" :src="slide1">
       </swiper-slide>
       <swiper-slide>
-        <img class="slide-img" src="@/assets/images/slide2.png">
+        <img class="slide-img" :src="slide2">
       </swiper-slide>
       <swiper-slide>
         <img class="slide-img" src="@/assets/images/slide3.png">
@@ -38,11 +38,25 @@ export default {
           delay: 3000,
           disableOnInteraction: false
         }
-      }
+      },
+      slide1: null,
+      slide2: null
     }
   },
   computed: {
-    ...mapGetters(['name'])
+    ...mapGetters(['abbrCorpName'])
+  },
+  created() {
+    switch (this.abbrCorpName) {
+      case '大胜达':
+        this.slide1 = require('@/assets/images/dashengda-slide1.png')
+        this.slide2 = require('@/assets/images/dashengda-slide2.png')
+        break
+      case '杭萧钢构':
+        this.slide1 = require('@/assets/images/hangxiao-slide1.png')
+        this.slide2 = require('@/assets/images/hangxiao-slide2.png')
+        break
+    }
   },
   mounted() {
     const imgs = document.getElementsByClassName('slide-img')

xiuosiot-frontend/src/views/terminal/PLC/index.vue

@@ -6,7 +6,7 @@
       style="align-items: baseline; margin-bottom: 30px"
     >
       <div class="header">
-        <h1 class="title">大胜达PLC管理</h1>
+        <h1 class="title">{{ abbrCorpName+'PLC管理' }}</h1>
         <span class="date">{{ date }}</span>
       </div>
     </el-row>
@@ -172,7 +172,7 @@
                       :value="item"
                     />
                   </el-select>
-                  <span v-else>{{ form.baud_rate }}</span>
+                  <span v-else>{{ form.socketConfig.baud_rate }}</span>
                 </el-form-item>
                 <el-form-item label="校验位：">
                   <el-select v-if="add" v-model="form.socketConfig.check_mode">
@@ -182,7 +182,7 @@
                       :value="item"
                     />
                   </el-select>
-                  <span v-else>{{ form.check_mode }}</span>
+                  <span v-else>{{ form.socketConfig.check_mode }}</span>
                 </el-form-item>
                 <el-form-item label="停止位：">
                   <el-select v-if="add" v-model="form.socketConfig.stop_bits">
@@ -192,7 +192,7 @@
                       :value="item"
                     />
                   </el-select>
-                  <span v-else>{{ form.stop_bits }}</span>
+                  <span v-else>{{ form.socketConfig.stop_bits }}</span>
                 </el-form-item>
                 <el-form-item label="数位号：">
                   <el-select v-if="add" v-model="form.socketConfig.data_bits">
@@ -202,7 +202,7 @@
                       :value="item"
                     />
                   </el-select>
-                  <span v-else>{{ form.data_bits }}</span>
+                  <span v-else>{{ form.socketConfig.data_bits }}</span>
                 </el-form-item>
               </el-form>
             </div>
@@ -311,15 +311,15 @@
                 <el-table-column v-if="form.brand === 'mufg'" align="center" label="监控时间" prop="monitoring_timer" />
               </el-table>
               <el-row v-if="add" type="flex" justify="space-between" style="width:60%;margin: 20px auto 0;">
-                <div>
+                <div class="table_btn">
                   <img src="@/assets/images/plus_orange.png" width="35px" @click="addParam">
                   <p>添加</p>
                 </div>
-                <div>
+                <div class="table_btn">
                   <img src="@/assets/images/minus_orange.png" width="35px" @click="removeParam">
                   <p>删除</p>
                 </div>
-                <div>
+                <div class="table_btn">
                   <img src="@/assets/images/remove_orange.png" width="35px" @click="removeAllParam">
                   <p>清空</p>
                 </div>
@@ -348,7 +348,9 @@
                 label-width="130px"
               >
                 <el-form-item label="配方名称：">
-                  <el-input v-if="add" v-model="form.productName" />
+                  <el-input v-if="add" v-model="form.productName">
+                    <template slot="prepend">{{ productPreName }}</template>
+                  </el-input>
                   <span v-else>{{ form.productName }}</span>
                 </el-form-item>
               </el-form>
@@ -371,6 +373,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import { getList, add, remove } from '@/api/terminal/plc'
 
 export default {
@@ -444,6 +447,21 @@ export default {
       currentIndex: -1
     }
   },
+  computed: {
+    ...mapGetters(['abbrCorpName']),
+    productPreName() {
+      let pre = ''
+      switch (this.abbrCorpName) {
+        case '大胜达':
+          pre = 'dsd-'
+          break
+        case '杭萧钢构':
+          pre = 'hxgg-'
+          break
+      }
+      return pre
+    }
+  },
   mounted() {
     this.date = new Date().toLocaleDateString()
     this.getList()
@@ -510,6 +528,7 @@ export default {
     },
     nextStep() {
       if (this.active === 2) {
+        this.form.productName = this.productPreName + this.form.productName
         add(this.form).then(res => {
           if (res.code === '200000') {
             this.getList()
@@ -576,12 +595,6 @@ export default {
   font-family: PingFangSC-Regular;
   color: rgba(0, 0, 0, 0.85);
 }
-.el-input {
-  line-height: 4;
-}
-.el-button:hover,.el-button:focus {
-  background-color: #fff;
-}
 .step2_params{
     .el-form-item__label{
         color: #ff4e00;
@@ -595,6 +608,9 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
+.el-button:hover,.el-button:focus {
+  background-color: #fff;
+}
 .header {
   font-family: Lato;
   .title {
@@ -627,7 +643,7 @@ export default {
     font-size: 20px;
     font-family: Microsoft YaHei;
     font-weight: bold;
-    margin: 10px;
+    margin: 10px 0;
   }
   .remove_icon {
     font-size: 18px;
@@ -975,6 +991,9 @@ export default {
             font-family: PingFangSC-Regular;
             margin: 0;
         }
+        .table_btn{
+            cursor: pointer;
+        }
     }
     .step3_tab {
       position: relative;

xiuosiot-frontend/src/views/terminal/add/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container" style="min-height: calc(100vh - 50px);">
     <el-row type="flex" justify="space-between" style="align-items: baseline;margin-bottom: 30px;">
       <div class="header">
-        <h1 class="title">大胜达现有设备接入</h1>
+        <h1 class="title">{{ abbrCorpName+'现有设备接入' }}</h1>
         <span class="date">{{ date }}</span>
         <span class="device_num">{{ '共'+activeList.length + '个设备' }}</span>
       </div>
@@ -82,7 +82,7 @@
             <el-form-item label="设备序列号：" prop="no">
               <el-input v-model="form.no" />
             </el-form-item>
-            <el-form-item label="设备描述：" prop="desc">
+            <el-form-item label="设备描述：" prop="devicedesc">
               <el-input v-model="form.devicedesc" />
             </el-form-item>
             <el-form-item label="设备状态：" prop="activestatus">
@@ -101,6 +101,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import { remove, getList, add, active } from '@/api/terminal/add'
 
 export default {
@@ -117,32 +118,32 @@ export default {
         devicedesc: '',
         activestatus: 0
       },
-      productList: [
+      // productList: [
-        {
+      //   {
-          name: '彩印车间',
+      //     name: '彩印车间',
-          src: require('@/assets/images/device.png'),
+      //     src: require('@/assets/images/device.png'),
-          color: '#00CCF2',
+      //     color: '#00CCF2',
-          val: 0
+      //     val: 0
-        },
+      //   },
-        {
+      //   {
-          name: '生产车间',
+      //     name: '生产车间',
-          src: require('@/assets/images/device2.png'),
+      //     src: require('@/assets/images/device2.png'),
-          color: '#FAB05A',
+      //     color: '#FAB05A',
-          val: 1
+      //     val: 1
-        },
+      //   },
-        {
+      //   {
-          name: '成型车间',
+      //     name: '成型车间',
-          src: require('@/assets/images/device3.png'),
+      //     src: require('@/assets/images/device3.png'),
-          color: '#46D5A0',
+      //     color: '#46D5A0',
-          val: 2
+      //     val: 2
-        },
+      //   },
-        {
+      //   {
-          name: '打包车间',
+      //     name: '打包车间',
-          src: require('@/assets/images/device4.png'),
+      //     src: require('@/assets/images/device4.png'),
-          color: '#9090F2',
+      //     color: '#9090F2',
-          val: 3
+      //     val: 3
-        }
+      //   }
-      ],
+      // ],
       deviceList: [
         {
           name: 'RV400-NPU16T-5G-AR100',
@@ -172,6 +173,49 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapGetters(['abbrCorpName']),
+    productList() {
+      let res
+      if (this.abbrCorpName === '杭萧钢构') {
+        res = [{
+          name: '数字工厂',
+          src: require('@/assets/images/device.png'),
+          color: '#00CCF2',
+          val: 0
+        }]
+      }
+      if (this.abbrCorpName === '大胜达') {
+        res = [
+          {
+            name: '彩印车间',
+            src: require('@/assets/images/device.png'),
+            color: '#00CCF2',
+            val: 0
+          },
+          {
+            name: '生产车间',
+            src: require('@/assets/images/device2.png'),
+            color: '#FAB05A',
+            val: 1
+          },
+          {
+            name: '成型车间',
+            src: require('@/assets/images/device3.png'),
+            color: '#46D5A0',
+            val: 2
+          },
+          {
+            name: '打包车间',
+            src: require('@/assets/images/device4.png'),
+            color: '#9090F2',
+            val: 3
+          }
+        ]
+      }
+      return res
+    }
+  },
   mounted() {
     this.date = new Date().toLocaleDateString()
     this.getList(0)
@@ -194,6 +238,7 @@ export default {
     },
     chooseCard(list) {
       list.forEach(item => {
+        console.log('productList', this.productList)
         const temp = this.productList.filter(product => product.name === item.productname)
         item.color = temp[0].color
         item.src = temp[0].src
@@ -321,10 +366,14 @@ export default {
     .delete-icon,
     .add-icon {
       position: absolute;
-      right: 10px;
+      right: 5px;
-      bottom: 10px;
+      bottom: 5px;
       cursor: pointer;
     }
+    .add-icon{
+      right: -4px;
+      bottom: -4px;
+    }
     .device-icon {
       vertical-align: middle;
       margin-right: 10px;

xiuosiot-frontend/src/views/terminal/monitor/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-card>
+    <el-card v-if="abbrCorpName === '大胜达'">
       <img src="@/assets/images/compass.png" class="compass"></img>
       <div class="workshop">
         <div class="elec-terminal fm100" @click="showDialog('A000001')">
@@ -79,6 +79,7 @@
         </div>
       </div></el-card>
 
+    <iframe v-else src="http://220.189.208.157:9797/login" width="100%" class="ifm" />
     <!-- 设备详情弹窗 -->
     <el-dialog title="设备监控详情" :visible.sync="visible" :top="dialogTop">
       <div class="card_detail">
@@ -123,6 +124,7 @@
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex'
 import Antenna from './components/Antenna'
 export default {
   components: { Antenna },
@@ -580,6 +582,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['abbrCorpName']),
     dialogTop() {
       return window.innerHeight > 880 ? '15vh' : '20px'
     }
@@ -646,6 +649,10 @@ export default {
     float: right;
   }
 }
+.ifm{
+  height: 850px;
+  border: medium none
+}
 .workshop {
   position: relative;
   background: url(~@/assets/images/workshop.png) no-repeat;