首页，入库对话框，3D页面websocket连接开启

3 years ago · 1c5d41e269
4 changed files with 109 additions and 48 deletions
--- a/src/views/archivesManage/outInStorage/inStorage/module/inDialog.vue
+++ b/src/views/archivesManage/outInStorage/inStorage/module/inDialog.vue
@ -347,6 +347,7 @@ export default {
    background-color: #021941;
    width: 200px;
    // height: 100%;
+    overflow: auto;
  }
  .content-right {
    flex: 1;
--- a/src/views/home.vue
+++ b/src/views/home.vue
@ -2,7 +2,7 @@
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <!-- <github-corner class="github-corner" /> -->
-      <panel-group @handleSetLineChartData="handleSetLineChartData" />
+      <panel-group />
      <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <line-chart :chart-data="lineChartData" />
      </el-row> -->
@ -14,8 +14,8 @@
            <div class="search-input">
              <!-- v-model="input3"  v-model="select"-->
              <el-input placeholder="2022，办公室" class="input-with-select">
-                <el-select slot="prepend" placeholder="全目录">
-                  <el-option label="餐厅名" value="1" />
+                <el-select slot="prepend" v-model="selectValue">
+                  <el-option label="全目录" value="1" />
                  <el-option label="订单号" value="2" />
                  <el-option label="用户电话" value="3" />
                </el-select>
@ -111,7 +111,7 @@
                <svg-icon icon-class="menjin" class-name="warehouse-svg" />门禁记录
              </p>
            </h3>
-            <el-table ref="table2" style="min-width: 100%;" height="100%" :data="tableData" class="warehose-el-table" :row-class-name="rowBgColor">
+            <el-table ref="table2" style="min-width: 100%;" height="100%" :data="tableData" class="warehose-el-table" stripe>
              <el-table-column prop="time" label="时间" align="center" min-width="60" />
              <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
              <el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
@ -128,7 +128,7 @@
                <svg-icon icon-class="alerm" class-name="warehouse-svg" />报警记录
              </p>
            </h3>
-            <el-table ref="table" style="min-width: 100%;" height="100%" :data="tableData" class="warehose-el-table" :row-class-name="rowBgColor">
+            <el-table ref="table" style="min-width: 100%;" height="100%" :data="tableData" class="warehose-el-table" stripe>
              <el-table-column prop="time" label="时间" align="center" min-width="60" />
              <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
              <el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
@ -193,24 +193,24 @@ import catePie from '@/views/components/echarts/catePie.vue'
 import typePie from '@/views/components/echarts/typePie.vue'
 import data1 from './data1.json'

-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
+// const lineChartData = {
+//   newVisitis: {
+//     expectedData: [100, 120, 161, 134, 105, 160, 165],
+//     actualData: [120, 82, 91, 154, 162, 140, 145]
+//   },
+//   messages: {
+//     expectedData: [200, 192, 120, 144, 160, 130, 140],
+//     actualData: [180, 160, 151, 106, 145, 150, 130]
+//   },
+//   purchases: {
+//     expectedData: [80, 100, 121, 104, 105, 90, 100],
+//     actualData: [120, 90, 100, 138, 142, 130, 130]
+//   },
+//   shoppings: {
+//     expectedData: [130, 140, 141, 142, 145, 150, 160],
+//     actualData: [120, 82, 91, 154, 162, 140, 130]
+//   }
+// }

 export default {
  name: 'Dashboard',
@ -226,6 +226,7 @@ export default {
  },
  data() {
    return {
+      selectValue: '1',
      lendData: [18203, 23489, 29034, 104970],
      cateData: [1000, 700],
      typeData: [1110, 2000, 800, 600, 900]
@ -235,11 +236,14 @@ export default {
    this.getData()
  },
  methods: {
-    handleSetLineChartData(type) {
-      this.lineChartData = lineChartData[type]
-    },
+    // handleSetLineChartData(type) {
+    //   this.lineChartData = lineChartData[type]
+    // },
    getData() {
      this.tableData = data1.rows
+    },
+    changeActiveTab() {
+      this.$router.push({ path: '/storeManage/warehouse3D' })
    }
  }
 }
@ -285,7 +289,7 @@ export default {
    display: flex;
    justify-content: space-around;
    position: absolute;
-    bottom: 20px;
+    bottom: 15px;
    // left: 20px;
    z-index: 11;
    // width: calc(100vw - 545px);
@ -360,6 +364,9 @@ export default {
        height: 42px;
        border: 1px solid #339cff;
        background-color: #021941;
+        &::placeholder {
+          color: #fff;
+        }
      }
    }
    // border: 1px solid #339cff;
@ -377,6 +384,7 @@ export default {
      border-bottom-right-radius: 0;
      .el-input__inner {
        text-align: center;
+        color: #fff;
      }
    }
    & ::v-deep.el-input-group__append {
@ -388,6 +396,7 @@ export default {
      border-radius: 34px;
      & i {
        font-size: 25px;
+        color: #fff;
      }
    }
    & .el-select .el-input {
@ -446,4 +455,11 @@ export default {
    }
  }
 }
+::v-deep
+  .el-table--striped
+  .el-table__body
+  tr.el-table__row--striped
+  td.el-table__cell {
+  background: #02255f;
+}
 </style>
--- a/src/views/storeManage/deviceManage/module/deviceDetail.vue
+++ b/src/views/storeManage/deviceManage/module/deviceDetail.vue
@ -410,10 +410,10 @@ export default {
          }
        })
      }
-      crud.status.edit = CRUD.STATUS.PREPARED
-      crud.getDataStatus(this.crud.selections[0].id).edit = CRUD.STATUS.PREPARED
      form.supplier = form.supplierId.id
      this.selectedDeviceType = form.deviceTypeId.name
+      crud.status.edit = CRUD.STATUS.PREPARED
+      crud.getDataStatus(this.crud.selections[0].id).edit = CRUD.STATUS.PREPARED
      return false
    },
    [CRUD.HOOK.beforeSubmit]() {
--- a/src/views/storeManage/warehouse3D/index.vue
+++ b/src/views/storeManage/warehouse3D/index.vue
@ -63,6 +63,10 @@ export default {
      localStorage.removeItem('isDeseCabinetPage')
    }
  },
+  created() {
+    console.log(1111)
+    this.initWebSocket()
+  },
  methods: {
    handleMessageEvent(event) {
      const _this = this
@ -91,16 +95,57 @@ export default {
    },
    destroyed() {
      window.removeEventListener('message', this.handleMessageEvent)
+    },
+    initWebSocket() {
+      // 初始化weosocket
+      const url = 'ws://192.168.99.65:7070/webSocket/testname'
+      const wsuri = url // ws地址
+      this.websocket = new WebSocket(wsuri)
+      this.websocket.onopen = this.websocketonopen
+      this.websocket.onerror = this.websocketonerror
+      this.websocket.onmessage = this.websocketonmessage
+      this.websocket.onclose = this.websocketclose
+    },
+    websocketonopen() {
+      console.log('WebSocket连接成功')
+      // co data = {
+      //   type: 'user_init',
+      //   userid: 'xxx'
+      // }
+      // this.websocket.send(
+      //   // 发送数据
+      //   JSON.stringify(data)
+      // )
+    },
+    websocketonerror(e) {
+      // 错误
+      // this.initWebSocket()
+      console.log('WebSocket连接发生错误')
+    },
+    websocketonmessage(e) {
+      // 数据接收
+      var data = JSON.parse(e.data)
+      this.$store.commit('SET_ws', data)
+      console.log('接收数据')
+      // 操作处理...
+    },
+    websocketsend(agentData) {
+      // 数据发送
+      this.websocket.send(agentData)
+    },
+    websocketclose(e) {
+      // 关闭
+      console.log('WebSocket关闭')
+      console.log(JSON.stringify(e))
    }
  }
 }
 </script>

 <style lang="scss" scoped>
-
-.warehouse-tab{
-  color: #3298FA;
-  .warehouse-nav{
+.warehouse-tab {
+  color: #3298fa;
+  .warehouse-nav {
    display: flex;
    position: absolute;
    bottom: 20px;
@ -111,7 +156,7 @@ export default {
    height: 90px;
    min-height: 90px;
    padding: 0;
-    li{
+    li {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
@ -126,38 +171,37 @@ export default {
      font-size: 18px;
      position: relative;
      cursor: default;
-      background: url('~@/assets/images/warehouse_tab_bg.png') no-repeat;
+      background: url("~@/assets/images/warehouse_tab_bg.png") no-repeat;
      background-size: 100% 100%;
-      span{
+      span {
        width: 72px;
        height: 52px;
        // position: absolute;
        // left: 60px;
        // top: 20px;
      }
-      p{
+      p {
        // flex: 1;
        text-align: left;
      }
-      &:first-child span{
-        background: url('~@/assets/images/tab_fullview_logo.png') no-repeat;
+      &:first-child span {
+        background: url("~@/assets/images/tab_fullview_logo.png") no-repeat;
      }
-      &:nth-child(2) span{
-        background: url('~@/assets/images/tab_archives_logo.png') no-repeat;
+      &:nth-child(2) span {
+        background: url("~@/assets/images/tab_archives_logo.png") no-repeat;
      }
-      &:nth-child(3) span{
-        background: url('~@/assets/images/tab_collate_logo.png') no-repeat;
+      &:nth-child(3) span {
+        background: url("~@/assets/images/tab_collate_logo.png") no-repeat;
      }
-      &:nth-child(4) span{
-        background: url('~@/assets/images/tab_read_logo.png') no-repeat;
+      &:nth-child(4) span {
+        background: url("~@/assets/images/tab_read_logo.png") no-repeat;
      }
    }
-    .active-nav{
+    .active-nav {
      color: #fff;
-      background: url('~@/assets/images/warehouse_tab_active.png') no-repeat;
+      background: url("~@/assets/images/warehouse_tab_active.png") no-repeat;
      background-size: 100% 100%;
    }
  }
-
 }
 </style>