[1078] 增加设置电话本

web/package.json

@@ -36,7 +36,8 @@
     "vue-contextmenujs": "^1.4.11",
     "vue-router": "3.0.6",
     "vue-ztree-2.0": "^1.0.4",
-    "vuex": "3.1.0"
+    "vuex": "3.1.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.4",

web/src/api/jtDevice.js

@@ -326,5 +326,12 @@ export function queryMediaAttribute(phoneNumber) {
     }
   })
 }
+export function setPhoneBook(data) {
+  return request({
+    method: 'post',
+    url: '/api/jt1078/set-phone-book',
+    data: data
+  })
+}
 
 

web/src/store/modules/jtDevice.js

@@ -22,7 +22,7 @@ import {
   queryRecordList,
   reset,
   sendTextMessage,
-  setConfig,
+  setConfig, setPhoneBook,
   startPlayback,
   stopPlay,
   stopPlayback,
@@ -342,6 +342,16 @@ const actions = {
         reject(error)
       })
     })
+  },
+  setPhoneBook({ commit }, data) {
+    return new Promise((resolve, reject) => {
+      setPhoneBook(data).then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
   }
 }
 

web/src/views/jtDevice/dialog/mediaAttribute.vue

@@ -18,7 +18,7 @@
           <el-descriptions-item label="采样位数">{{ audioSamplingBitsEnum[attributeData.audioSamplingBits] }}</el-descriptions-item>
           <el-descriptions-item label="帧长度">{{ attributeData.audioFrameLength }}</el-descriptions-item>
           <el-descriptions-item label="音频输出">{{ attributeData.audioOutputEnable === 0 ? '不支持':'支持' }}</el-descriptions-item>
-          <el-descriptions-item label="最大物理通道数量">{{ attributeData.audioChannelMax === 0 ? '不支持':'支持' }}</el-descriptions-item>
+          <el-descriptions-item label="最大物理通道数量">{{ attributeData.audioChannelMax }}</el-descriptions-item>
         </el-descriptions>
         <el-descriptions title="视频" :column="2" style="margin-bottom: 1rem;">
           <el-descriptions-item label="编码方式">{{ videoEncoderEnum[attributeData.videoEncoder] }}</el-descriptions-item>

web/src/views/jtDevice/dialog/phoneBook.vue

@@ -0,0 +1,216 @@
+<template>
+  <div id="configInfo">
+    <el-dialog
+      v-el-drag-dialog
+      title="设置电话本"
+      width="=80%"
+      top="2rem"
+      :close-on-click-modal="false"
+      :visible.sync="showDialog"
+      :destroy-on-close="true"
+      @close="close()"
+    >
+      <el-form :inline="true" size="mini" @submit.native.prevent>
+        <el-form-item>
+          <el-button-group>
+            <el-button v-if="!showUpload" icon="el-icon-upload2" size="mini" type="primary" @click="uploadData" :disabled="phoneBookList.length === 0">导入数据</el-button>
+            <el-button v-if="showUpload" icon="el-icon-close" size="mini" type="danger" @click="uploadData">结束导入</el-button>
+            <el-button icon="el-icon-download">
+              <a style="text-align: center; text-decoration: none"
+                 href="/static/file/设置电话本模板.xlsx"
+                 download="设置电话本模板.xlsx"
+               >下载模板</a>
+            </el-button>
+          </el-button-group>
+
+        </el-form-item>
+        <el-form-item style="float: right;">
+          <el-button-group>
+            <el-button icon="el-icon-delete" size="mini" @click="clearPhoneBook">清空电话本</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="uploadPhoneBook">更新电话本</el-button>
+            <el-button icon="el-icon-document-add" size="mini" @click="appendPhoneBook">追加电话本</el-button>
+            <el-button icon="el-icon-edit-outline" size="mini" @click="editPhoneBook">修改电话本</el-button>
+          </el-button-group>
+
+        </el-form-item>
+      </el-form>
+
+      <el-table :data="phoneBookList" v-if="!showUpload && phoneBookList.length > 0" :height="500" stripe style="width: 100%" empty-text="暂无数据，点击选择或者拖入文件" @click.stop="()=>{}">
+        <el-table-column label="标志">
+          <template v-slot:default="scope">
+            <span >{{ signLabel(scope.row.sign) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="contactName" label="联系人" />
+        <el-table-column prop="phoneNumber" label="电话号码" />
+        <el-table-column label="操作" fixed="right">
+          <template v-slot:default="scope">
+            <el-button
+              size="medium"
+              type="text"
+              style="color: #f56c6c"
+              icon="el-icon-delete"
+              :loading="scope.row.addRegionLoading"
+              @click="removeRow(scope.$index)"
+            >
+              移除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-upload
+        v-if="showUpload || phoneBookList.length === 0"
+        style="width: fit-content; height: 300px; margin: 86px auto 0 auto"
+        drag
+        accept=".xls,.xlsx"
+        action=""
+        :auto-upload="false"
+        :show-file-list="false"
+        :on-change="loadFiled">
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip" slot="tip">只能上传xls/xlsx文件</div>
+      </el-upload>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+import * as XLSX from 'xlsx'
+import elDragDialog from '@/directive/el-drag-dialog'
+
+export default {
+  name: 'ConfigInfo',
+  directives: { elDragDialog },
+  props: {},
+  data() {
+    return {
+      phoneNumber: null,
+      showDialog: false,
+      showUpload: false,
+      phoneBookList: []
+    }
+  },
+  computed: {},
+  created() {},
+  methods: {
+    openDialog: function(phoneNumber) {
+      this.showDialog = true
+      this.phoneNumber = phoneNumber
+    },
+    close: function() {
+      this.showDialog = false
+    },
+    signLabel: function(sign) {
+      switch (sign){
+        case 1:
+          return '呼入'
+        case 2:
+          return '呼出'
+        case 3:
+          return '呼入/呼出'
+        default:
+          return '错误： 设置范围（1:呼入,2:呼出,3:呼入/呼出）'
+      }
+    },
+    uploadData: function() {
+      this.showUpload = !this.showUpload
+    },
+    loadFiled: function(file) {
+      if (!file.name.endsWith('.xls') && !file.name.endsWith('.xlsx')) {
+        this.$message.error('文件格式错误')
+        return
+      }
+      const fileReader = new FileReader()
+      fileReader.onload = (event) => {
+        const data = new Uint8Array(event.target.result)
+        const workbook = XLSX.read(data, { type: 'array' })
+        const sheetName = workbook.SheetNames[0]
+        const worksheet = workbook.Sheets[sheetName]
+        const jsonData = XLSX.utils.sheet_to_json(worksheet)
+        for (let i = 0; i < jsonData.length; i++) {
+          let item = jsonData[i]
+          this.phoneBookList.push({
+            sign: item['标志'],
+            phoneNumber: item['电话号码'],
+            contactName: item['联系人']
+          })
+        }
+        this.showUpload = false
+      }
+      fileReader.readAsArrayBuffer(file.raw)
+    },
+    removeRow: function(index) {
+      this.phoneBookList.splice(index, 1)
+    },
+    clearPhoneBook: function() {
+      this.$confirm('将清空终端中已有全部联系人， 确认？', '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.submit({
+          phoneNumber: this.phoneNumber,
+          type: 0
+        })
+      })
+
+    },
+    uploadPhoneBook: function() {
+      this.$confirm('将删除终端中已有全部联系人并追加当前的联系人， 确认？', '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.submit({
+          phoneNumber: this.phoneNumber,
+          type: 1,
+          phoneBookContactList: this.phoneBookList
+        })
+      })
+
+    },
+    appendPhoneBook: function() {
+      this.$confirm('将追加当前的联系人到终端中， 确认？', '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.submit({
+          phoneNumber: this.phoneNumber,
+          type: 2,
+          phoneBookContactList: this.phoneBookList
+        })
+      })
+
+    },
+    editPhoneBook: function() {
+      this.submit({
+        phoneNumber: this.phoneNumber,
+        type: 3,
+        phoneBookContactList: this.phoneBookList
+      })
+    },
+    submit: function(data) {
+      this.$store.dispatch("jtDevice/setPhoneBook", data)
+        .then(data => {
+          this.$message.success({
+            showClose: true,
+            message: '消息已下发'
+          })
+        })
+    }
+
+  }
+}
+</script>
+
+<style scoped>
+>>> .el-upload {
+  width: 100% !important;
+}
+</style>

web/src/views/jtDevice/list.vue

@@ -117,8 +117,8 @@
                 文本下发</el-dropdown-item>
               <el-dropdown-item command="telephoneCallback" v-bind:disabled="!scope.row.status" >
                 电话回拨</el-dropdown-item>
-<!--              <el-dropdown-item command="setPhoneBook" v-bind:disabled="!scope.row.status" >-->
-<!--                设置电话本</el-dropdown-item>-->
+              <el-dropdown-item command="setPhoneBook" v-bind:disabled="!scope.row.status" >
+                设置电话本</el-dropdown-item>
               <el-dropdown-item command="driverInfo" v-bind:disabled="!scope.row.status" >
                 驾驶员信息</el-dropdown-item>
               <el-dropdown-item command="reset" v-bind:disabled="!scope.row.status" >
@@ -154,6 +154,7 @@
     <connectionServer ref="connectionServer" />
     <controlDoor ref="controlDoor" />
     <mediaAttribute ref="mediaAttribute" />
+    <phoneBook ref="phoneBook" />
   </div>
 </template>
 
@@ -168,11 +169,13 @@ import driverInfo from './dialog/driverInfo.vue'
 import connectionServer from './dialog/connectionServer.vue'
 import controlDoor from './dialog/controlDoor.vue'
 import mediaAttribute from './dialog/mediaAttribute.vue'
+import phoneBook from './dialog/phoneBook.vue'
 
 export default {
   name: 'App',
   components: {
-    deviceEdit, configInfo, attribute, position, textMsg, telephoneCallback, driverInfo, connectionServer, controlDoor, mediaAttribute
+    deviceEdit, configInfo, attribute, position, textMsg, telephoneCallback, driverInfo, connectionServer, controlDoor
+    , mediaAttribute, phoneBook
   },
   data() {
     return {
@@ -293,6 +296,8 @@ export default {
          this.connection(itemData)
       } else if (command === 'mediaAttribute') {
          this.queryMediaAttribute(itemData)
+      } else if (command === 'setPhoneBook') {
+         this.setPhoneBook(itemData)
       } else {
         this.$message.info('尚不支持')
       }
@@ -367,12 +372,14 @@ export default {
     connection: function(itemData) {
       this.$refs.connectionServer.openDialog(itemData.phoneNumber)
     },
+    setPhoneBook: function(itemData) {
+      this.$refs.phoneBook.openDialog(itemData.phoneNumber)
+    },
     queryMediaAttribute: function(itemData) {
       this.$store.dispatch('jtDevice/queryMediaAttribute', itemData.phoneNumber)
         .then((data) => {
           this.$refs.mediaAttribute.openDialog(data)
         })
-
     },
     controlDoor: function(itemData) {
       this.$refs.controlDoor.openDialog(itemData.phoneNumber)