add hangxiao role page

2022-10-10 09:54:41 +08:00 · 2022-10-10 09:54:41 +08:00 · 459ede974e
parent cb729319ba
commit 459ede974e
15 changed files with 278 additions and 123 deletions
--- a/xiuosiot-frontend/src/api/user/index.js
+++ b/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: {}
  })
 }

--- a/xiuosiot-frontend/src/assets/images/dashengda-slide1.png
+++ b/xiuosiot-frontend/src/assets/images/dashengda-slide1.png
--- a/xiuosiot-frontend/src/assets/images/dashengda-slide2.png
+++ b/xiuosiot-frontend/src/assets/images/dashengda-slide2.png
--- a/xiuosiot-frontend/src/assets/images/hangxiao-slide1.png
+++ b/xiuosiot-frontend/src/assets/images/hangxiao-slide1.png
--- a/xiuosiot-frontend/src/assets/images/hangxiao-slide2.png
+++ b/xiuosiot-frontend/src/assets/images/hangxiao-slide2.png
--- a/xiuosiot-frontend/src/layout/components/Sidebar/index.vue
+++ b/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
--- a/xiuosiot-frontend/src/permission.js
+++ b/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()
-      NProgress.done()
+      const corpName = store.getters.corpName
+      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*/
--- a/xiuosiot-frontend/src/router/index.js
+++ b/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() {
--- a/xiuosiot-frontend/src/store/getters.js
+++ b/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
--- a/xiuosiot-frontend/src/store/modules/user.js
+++ b/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
-  // getInfo({ commit, state }) {
-  //   return new Promise((resolve, reject) => {
-  //     getInfo(state.token).then(response => {
-  //       const { data } = response
+  // get user info
+  getInfo({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      getInfo(state.token).then(response => {
+        const { data } = response

-  //       if (!data) {
-  //         return reject('Verification failed, please Login again.')
-  //       }
+        if (!data) {
+          return reject('Verification failed, please Login again.')
+        }
+        // const { name, avatar } = data

-  //       const { name, avatar } = data
-
-  //       commit('SET_NAME', name)
-  //       commit('SET_AVATAR', avatar)
-  //       resolve(data)
-  //     }).catch(error => {
-  //       reject(error)
-  //     })
-  //   })
-  // },
+        commit('SET_CORPNAME', data.corpname)
+        commit('SET_ABBRCORPNAME', data.abbrcorpname)
+        commit('SET_PERMISSIONS', [data.permissions])
+        resolve(data)
+      }).catch(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()
+    })
  }
 }

--- a/xiuosiot-frontend/src/views/login/index.vue
+++ b/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
--- a/xiuosiot-frontend/src/views/overview/index.vue
+++ b/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')
--- a/xiuosiot-frontend/src/views/terminal/PLC/index.vue
+++ b/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;
--- a/xiuosiot-frontend/src/views/terminal/add/index.vue
+++ b/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: [
-        {
-          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
-        }
-      ],
+      // productList: [
+      //   {
+      //     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
+      //   }
+      // ],
      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;
-      bottom: 10px;
+      right: 5px;
+      bottom: 5px;
      cursor: pointer;
    }
+    .add-icon{
+      right: -4px;
+      bottom: -4px;
+    }
    .device-icon {
      vertical-align: middle;
      margin-right: 10px;
--- a/xiuosiot-frontend/src/views/terminal/monitor/index.vue
+++ b/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;