add stock page

xiuosiot-frontend/package.json

@@ -17,7 +17,7 @@
     "axios": "0.18.1",
     "core-js": "^3.6.5",
     "echarts": "^5.3.3",
-    "element-ui": "^2.15.8",
+    "element-ui": "2.15.13",
     "html-loader": "^4.2.0",
     "js-cookie": "2.2.0",
     "markdown-loader": "^8.0.0",

xiuosiot-frontend/src/api/terminal/stock.js

@@ -0,0 +1,49 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/fzDevice/selectAll',
+    method: 'get',
+    params: data || {}
+  })
+}
+
+export function getListByType(data) {
+  return request({
+    url: '/fzDevice/select',
+    method: 'get',
+    params: data || {}
+  })
+}
+
+export function getListByNo(data) {
+  return request({
+    url: '/fzDevice/selectByNo',
+    method: 'get',
+    params: data || {}
+  })
+}
+
+export function add(data) {
+  return request({
+    url: '/fzDevice/add',
+    method: 'post',
+    data
+  })
+}
+
+export function update(data) {
+  return request({
+    url: '/fzDevice/update',
+    method: 'post',
+    data
+  })
+}
+
+export function remove(data) {
+  return request({
+    url: '/fzDevice/delete',
+    method: 'post',
+    data
+  })
+}

xiuosiot-frontend/src/layout/index.vue

@@ -48,7 +48,7 @@ export default {
       }
     },
     showBreadcrumb() {
-      const whiteList = ['overview', 'terminal/add', 'terminal/plc', 'data/value', 'configuration/development', 'dashboard', 'log/accessLog', 'log/systemLog', 'rule/manage', 'rule/dataTransfer']
+      const whiteList = ['overview', 'terminal/add', 'terminal/plc', 'terminal/stock', 'data/value', 'configuration/development', 'dashboard', 'log/accessLog', 'log/systemLog', 'rule/manage', 'rule/dataTransfer']
       return whiteList.every((item) => this.$route.path.indexOf(item) === -1)
     }
   },

xiuosiot-frontend/src/router/index.js

@@ -220,6 +220,12 @@ export const asyncRouter = [
         name: 'OTA',
         component: () => import('@/views/terminal/OTA/index'),
         meta: { title: 'OTA升级', disabled: true, permission: ['dashengda', 'hangxiao', 'qianjiangdianqi'] }
+      },
+      {
+        path: 'stock',
+        name: 'Stock',
+        component: () => import('@/views/terminal/stock/index'),
+        meta: { title: '库存管理', permission: ['dashengda', 'hangxiao', 'qianjiangdianqi'] }
       }
     ]
   },

xiuosiot-frontend/src/views/components/Footer/index.vue

@@ -42,7 +42,7 @@
         <li class="font20">
           北京大学信息技术高等研究院-XiUOS矽璓工业物联操作系统
         </li>
-        <li class="font20">联系电话：15968835923</li>
+        <li class="font20">联系电话：15525816930</li>
         <li class="font20">官方网站：http://xuos.io</li>
         <li class="font20">源码网站：https://www.gitlink.org.cn/xuos/xiuos</li>
         <li class="font20">

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

@@ -114,8 +114,8 @@ export default {
     }
     return {
       loginForm: {
-        username: 'jxsd',
+        username: 'hangxiao',
-        password: 'jxsd',
+        password: 'hangxiao',
         verifycode: ''
       },
       loginRules: {

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

@@ -0,0 +1,519 @@
+<template>
+  <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">
+        <div class="type_btn">
+          <el-button-group>
+            <el-button @click="handleClick(1,'矽灵通RISCV')">矽灵通RISCV</el-button>
+            <el-button @click="handleClick(2,'矽灵通ARM')">矽灵通ARM</el-button>
+            <el-button @click="handleClick(3,'矽望通')">矽望通</el-button>
+            <el-button @click="handleClick(4,'矽慧通')">矽慧通</el-button>
+            <el-button @click="handleClick(5,'矽达通RISCV')">矽达通RISCV</el-button>
+          </el-button-group>
+          <el-button-group>
+            <el-button @click="handleClick(6,'矽达通ARM')">矽达通ARM</el-button>
+            <el-button @click="handleClick(7,'AIIT-RISCV')">AIIT-RISCV</el-button>
+            <el-button @click="handleClick(8,'AIIT-ARM')">AIIT-ARM</el-button>
+            <el-button @click="handleClick(9,'教学型RISCV')">教学型RISCV</el-button>
+            <el-button @click="handleClick(10,'教学型ARM')">教学型ARM</el-button>
+          </el-button-group>
+        </div>
+        <h1 class="title">库存管理</h1>
+        <span class="date">{{ date }}</span>
+        <el-input v-model="searchNo" placeholder="请输入终端编号" suffix-icon="el-icon-search" @change="handleSearch" />
+      </div>
+    </el-row>
+    <el-row>
+      <el-button class="add_btn" icon="el-icon-plus" @click="add">新增库存</el-button>
+    </el-row>
+    <div class="table_container">
+      <div class="title">
+        <div class="name">{{ terminalTypeDesc }}</div>
+        <div class="num">
+          <span>{{ '总数：' + totalnum }}</span>
+        </div>
+      </div>
+      <ul>
+        <li class="header">
+          <span class="column1">编号</span>
+          <span class="column2">状态</span>
+          <span class="column3">使用人</span>
+          <span class="column4">出库日期</span>
+          <span class="column5">备注</span>
+          <span class="column6" />
+        </li>
+        <li v-for="(item,index) in list" :key="index">
+          <span class="column1">{{ item.fzDeviceNo | contentForamtter }}</span>
+          <span class="column2">{{ item.fzDeviceStatus | contentForamtter }}</span>
+          <span class="column3">{{ item.fzDeviceUser | contentForamtter }}</span>
+          <span class="column4">{{ item.fzOuttime | contentForamtter }}</span>
+          <span class="column5">{{ item.fzRemark | contentForamtter }}</span>
+          <span class="column6 operation">
+            <i class="el-icon-edit" @click="edit(item)" />
+            <i class="el-icon-delete" style="margin-left: 15px;" @click="remove(item.fzDeviceNo)" />
+          </span>
+        </li>
+      </ul>
+    </div>
+
+    <!-- 库存管理弹窗 -->
+    <div v-show="visible" class="dialog_wrapper">
+      <div class="dialog-container">
+        <div class="dialog_header">
+          <p class="ip">
+            <img
+              src="@/assets/images/sysLog_type_white.png"
+              width="40px"
+            >设备名称
+          </p>
+          <p class="ip_val">{{ form.fzDeviceType }}</p>
+          <div class="remove_icon" @click="close">X</div>
+        </div>
+        <div class="dialog_content">
+          <div class="form">
+            <div class="form_content">
+              <div class="item_title">
+                <img src="@/assets/images/stock_no.png">编号
+              </div>
+              <div class="item_content">
+                <el-input v-model="form.fzDeviceNo" />
+              </div>
+              <div class="item_title">
+                <img src="@/assets/images/stock_status.png">状态
+              </div>
+              <div class="item_content">
+                <el-input v-model="form.fzDeviceStatus" />
+              </div>
+            </div>
+            <div class="line" />
+            <div class="form_content">
+              <div class="item_title">
+                <img src="@/assets/images/stock_user.png">使用<br>人
+              </div>
+              <div class="item_content">
+                <el-input v-model="form.fzDeviceUser" />
+              </div>
+              <div class="item_title">
+                <img src="@/assets/images/stock_out_date.png">出库<br>日期
+              </div>
+              <div class="item_content">
+                <el-input v-model="form.fzOuttime" />
+              </div>
+            </div>
+            <div class="line" />
+            <div class="form_content">
+              <div class="item_title">
+                <img src="@/assets/images/stock_remark.png">备注
+              </div>
+              <div class="item_content">
+                <el-input v-model="form.fzRemark" />
+              </div>
+            </div>
+            <div class="line" />
+          </div>
+          <div class="footer">
+            <el-button
+              size="medium"
+              class="cancel_btn"
+              @click="close"
+            >取消</el-button>
+            <el-button
+              size="medium"
+              class="save_btn"
+              style="border-radius: 4px"
+              type="primary"
+              @click="save"
+            >保存</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getList, getListByType, getListByNo, add, update, remove } from '@/api/terminal/stock'
+
+export default {
+  filters: {
+    contentForamtter(value) {
+      return value || '/'
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      date: '',
+      list: [],
+      current: {},
+      operationType: 1, // 1-新增，2-编辑
+      form: {},
+      totalnum: 0,
+      terminalType: 0,
+      terminalTypeDesc: '全部',
+      searchNo: ''
+    }
+  },
+  mounted() {
+    this.date = new Date().toLocaleDateString()
+    this.getList()
+  },
+  methods: {
+    getList() {
+      getList().then((res) => {
+        this.list = res.data
+        this.totalnum = res.data.length
+      })
+    },
+    getListByType(data) {
+      getListByType(data).then((res) => {
+        this.list = res.data
+        this.totalnum = res.data.length
+      })
+    },
+    handleClick(type, desc) {
+      this.terminalType = type
+      this.terminalTypeDesc = desc
+      const data = {
+        type: desc
+      }
+      this.getListByType(data)
+    },
+    handleSearch(no) {
+      console.log('no', no)
+      if (!no) {
+        this.terminalTypeDesc = '全部'
+        this.getList()
+      } else {
+        const data = {
+          device_no: no
+        }
+        getListByNo(data).then((res) => {
+          if (res.data) {
+            this.list = [res.data]
+            this.totalnum = this.list.length
+          } else {
+            this.$message.error('设备不存在')
+            this.list = []
+            this.totalnum = 0
+          }
+        })
+      }
+    },
+    remove(fzDeviceNo) {
+      remove({ fzDeviceNo }).then((res) => {
+        if (res.code === '200000') {
+          this.$message.success('删除成功')
+          this.getList()
+        }
+      })
+    },
+    showDetail(index) {
+      this.add = false
+      this.form = this.formulaList[index]
+      this.visible = true
+      this.dialogTitle = '配方查看'
+    },
+    edit(current) {
+      console.log('current', current)
+      this.form = { ...current }
+      this.operationType = 2 // 编辑
+      this.visible = true
+    },
+    add() {
+      this.form = {}
+      this.operationType = 1 // 新增
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+    },
+    async save() {
+      const data = { ...this.form }
+      const res = this.operationType === 1 ? await add(data) : this.operationType === 2 ? await update(data) : ''
+      if (res.code === '200000') {
+        this.$message.success('保存成功')
+      }
+      this.getList()
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  font-family: Lato;
+  width: 100%;
+  .title {
+    color: #174a84;
+    margin-top: 0;
+  }
+  .date {
+    color: #a5c9ff;
+  }
+  .el-input {
+    width: 280px;
+    display: inline-block;
+    margin-left: 20%;
+  }
+  .type_btn {
+    // margin-right: 10%;
+    float: right;
+
+    .el-button-group {
+      display: block;
+      margin-top: 10px;
+      .el-button {
+        width: 120px;
+      }
+    }
+  }
+}
+.add_btn {
+  width: 100%;
+  color: #fff;
+  border: 2px solid transparent;
+  background: linear-gradient(#789af3, #789af3) padding-box,
+    repeating-linear-gradient(
+      45deg,
+      #789af3 0,
+      #789af3 12px,
+      #fff 12px,
+      #fff 24px
+    );
+}
+.table_container {
+  width: 80%;
+  position: relative;
+  margin: auto;
+  margin-top: 50px;
+  padding: 30px 20px 20px;
+  border: 2px solid transparent;
+  background: linear-gradient(#e0f5e1, #e0f5e1) padding-box,
+    repeating-linear-gradient(
+      45deg,
+      #e0f5e1 0,
+      #e0f5e1 10px,
+      #20be0b 10px,
+      #20be0b 20px
+    );
+  .title {
+    display: flex;
+    position: absolute;
+    left: 50%;
+    top: 0;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    .name {
+      border-radius: 10px;
+      background-color: #20be0b;
+      padding: 10px 20px;
+    }
+    .num {
+      border-radius: 10px;
+      background-color: #20be0b;
+      padding: 10px 20px;
+      margin-left: 20px;
+    }
+  }
+  ul {
+    // margin-top: 20px;
+    padding-left: 0;
+    overflow-y: auto;
+    height: 55vh;
+    li {
+      font-family: Microsoft YaHei;
+      list-style: none;
+      line-height: 40px;
+      color: #2e4765;
+      span {
+        display: inline-block;
+        text-align: center;
+        background: linear-gradient(
+          to right,
+          #20be0b,
+          #20be0b 5px,
+          transparent 5px,
+          transparent
+        );
+        background-size: 10px 1px;
+        background-repeat: repeat-x;
+        background-position: bottom;
+      }
+    }
+  }
+  .header {
+    color: #20be0b;
+    text-align: center;
+    span {
+      background: none;
+    }
+  }
+  .column1 {
+    width: 20%;
+  }
+  .column2 {
+    width: 15%;
+  }
+  .column3 {
+    width: 15%;
+  }
+  .column4 {
+    width: 15%;
+  }
+  .column5 {
+    width: 25%;
+  }
+  .column6 {
+    width: 10%;
+  }
+  .operation {
+    color: #20be0b;
+    background: none;
+    i{
+      cursor: pointer;
+    }
+  }
+}
+.dialog_wrapper {
+  z-index: 2;
+  position: fixed;
+  left: 230px;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: 0;
+  &::before {
+    content: "";
+    position: absolute;
+    left: -230px;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 2;
+  }
+  .dialog-container {
+    z-index: 10;
+    width: 800px;
+    transform: none;
+    margin: 15vh auto;
+    position: relative;
+    border-radius: 8px;
+    font-family: Microsoft YaHei;
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+    .dialog_header {
+      background-color: #20be0b;
+      text-align: center;
+      color: #fff;
+      padding: 5px;
+      position: relative;
+      border-radius: 8px 8px 0 0;
+      p {
+        img {
+          vertical-align: middle;
+          margin-right: 12px;
+        }
+        font-size: 24px;
+        font-weight: bold;
+        margin: 5px auto;
+      }
+      .ip_val {
+        font-size: 26px;
+      }
+      .remove_icon {
+        position: absolute;
+        font-size: 18px;
+        right: 15px;
+        top: 10px;
+        cursor: pointer;
+      }
+    }
+    .dialog_content {
+      background-color: #fff;
+      border-radius: 0 0 8px 8px;
+      padding-bottom: 20px;
+      padding-top: 40px;
+      .form {
+        width: 80%;
+        margin: auto;
+        .form_content {
+          display: flex;
+          width: 100%;
+          div {
+            justify-content: center;
+            display: flex;
+            align-items: center;
+            img {
+              vertical-align: middle;
+              margin-right: 10px;
+            }
+          }
+          .item_title {
+            text-align: center;
+            background: #effbed;
+            width: 110px;
+            min-height: 90px;
+            font-size: 20px;
+            color: #20be0b;
+          }
+          .item_content {
+            flex: 1;
+            word-break: break-all;
+            padding: 9px;
+          }
+        }
+        .line {
+          width: 100%;
+          height: 2px;
+          background-image: linear-gradient(
+            to right,
+            #20be0b 0%,
+            #20be0b 50%,
+            transparent 50%
+          );
+          background-size: 18px 100%;
+          background-repeat: repeat-x;
+        }
+      }
+    }
+  }
+  .footer {
+    text-align: center;
+    margin: 20px auto;
+    .footer_btn {
+      width: 150px;
+      height: 47px;
+      border-radius: 16px;
+      background: rgba(255, 179, 0, 0.8);
+      color: #fff;
+      font-size: 16px;
+      font-weight: bold;
+      text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+    }
+    .cancel_btn{
+        border-color: #20BE0B;
+        color: #20BE0B;
+        &:hover{
+            background-color: rgba(32,190,11,0.1);
+        }
+    }
+    .save_btn{
+        border-color: #20BE0B;
+        background-color: #20BE0B;
+        border-radius: 2px;
+        &:hover{
+            background-color: #1a9f28;
+        }
+    }
+  }
+}
+::v-deep .el-input > .el-input__inner{
+  border: none;
+}
+</style>