覃俏的暂时存储

src/api/htVehicle.js

@@ -4,19 +4,19 @@ import { mockUrl } from '@/apiConfig/virtualDevices'
 
 // 获取锁类型、锁供应商类型
 export function queryLockCreateInfo() {
-    return request({
-        url: mockUrl + '/htw/device/queryLockCreateInfo',
-        method: 'get'
-    })
+  return request({
+    url: mockUrl + '/htw/device/queryLockCreateInfo',
+    method: 'get'
+  })
 }
 
 // 查看详情
 export function queryVehicleCreateInfo(params) {
-    return request({
-        url: mockUrl + `/htw/device/queryVehicleCreateInfo?lockModel=` + params,
-        method: 'get',
-        params
-    })
+  return request({
+    url: mockUrl + `/htw/device/queryVehicleCreateInfo?lockModel=` + params,
+    method: 'get',
+    params
+  })
 }
 
 // 获取车类型、车辆供应商类型
@@ -30,81 +30,81 @@ export function queryVehicleCreateInfo(params) {
 
 // 新建设备
 export function createDevice(data) {
-    return request({
-        url: mockUrl + '/htw/device/createDevice',
-        method: 'post',
-        data
-    })
+  return request({
+    url: mockUrl + '/htw/device/createDevice',
+    method: 'post',
+    data
+  })
 }
 
 // 删除设备
 export function deleteDevice(data) {
-    return request({
-        url: mockUrl + `/htw/device/deleteDevice`,
-        method: 'post',
-        data
-    })
+  return request({
+    url: mockUrl + `/htw/device/deleteDevice?vehicleId=` + data,
+    method: 'get',
+    data
+  })
 }
 
 // 设备上线开关
 export function deviceOnline(data) {
-    return request({
-        url: mockUrl + '/htw/device/deviceOnline',
-        method: 'post',
-        data
-    })
+  return request({
+    url: mockUrl + '/htw/device/opt/deviceOnline?lockNo=' + data,
+    method: 'get',
+    data
+  })
 }
 
 // 设备下线开关
 export function deviceOffline(data) {
-    return request({
-        url: mockUrl + '/htw/device/deviceOffline',
-        method: 'post',
-        data
-    })
+  return request({
+    url: mockUrl + '/htw/device/opt/deviceOffline?lockNo=' + data,
+    method: 'get',
+    data
+  })
 }
 
 // 设备开锁
 export function unlockVehicle(data) {
-    return request({
-        url: mockUrl + '/htw/device/opt/unlockVehicle',
-        method: 'post',
-        data
-    })
+  return request({
+    url: mockUrl + '/htw/device/opt/unlockVehicle?lockNo=' + data,
+    method: 'get',
+    data
+  })
 }
 
 // 设备关锁
 export function lockVehicle(data) {
-    return request({
-        url: mockUrl + '/htw/device/opt/lockVehicle',
-        method: 'post',
-        data
-    })
+  return request({
+    url: mockUrl + '/htw/device/opt/lockVehicle?vehicleId=' + data,
+    method: 'get',
+    data
+  })
 }
 
 // 编辑
 export function updateLockAttr(data) {
-    return request({
-        url: mockUrl + '/htw/user/device/updateLockAttr',
-        method: 'post',
-        data
-    })
+  return request({
+    url: mockUrl + '/htw/user/device/updateLockAttr',
+    method: 'post',
+    data
+  })
 }
 
 // 查询用户设备详情（首页刚进来）
 export function getDevices(data) {
-    return request({
-        url: mockUrl + '/htw/user/device/getDevices',
-        method: 'post',
-        data
-    })
+  return request({
+    url: mockUrl + '/htw/user/device/getDevices',
+    method: 'post',
+    data
+  })
 }
 
 // 查询设备属性
 export function getLockAttrInfo(data) {
-    return request({
-        url: mockUrl + '/htw/user/device/getLockAttrInfo',
-        method: 'post',
-        data
-    })
-}
+  return request({
+    url: mockUrl + '/htw/user/device/getLockAttrInfo',
+    method: 'post',
+    data
+  })
+}

src/api/modulePage.js

@@ -0,0 +1,56 @@
+import request from '@/utils/request'
+import { mockUrl } from '@/apiConfig/api'
+
+// 新增业务线
+export function addBizModule(data) {
+    return request({
+        url: mockUrl + `/setting/addBizModule`,
+        method: 'post',
+        data
+    })
+}
+
+// 修改
+export function updateBizModule(data) {
+    return request({
+        url: mockUrl + `/setting/updateBizModule`,
+        method: 'post',
+        data
+    })
+}
+
+// 删除
+export function deleteBizModule(data) {
+    return request({
+        url: mockUrl + `/setting/deleteBizModule`,
+        method: 'post',
+        data
+    })
+}
+
+// 查看列表
+export function queryBizModuleList(data) {
+    return request({
+        url: mockUrl + `/setting/queryBizModuleList`,
+        method: 'post',
+        data
+    })
+}
+
+// 获取biz列表
+export function queryBizTypeList(data) {
+    return request({
+        url: mockUrl + `/setting/queryBizTypeList`,
+        method: 'post',
+        data
+    })
+}
+
+// 平台列表
+export function queryPlatFormTypeList(data) {
+    return request({
+        url: mockUrl + `/setting/queryPlatFormTypeList`,
+        method: 'post',
+        data
+    })
+}

src/api/platformPage.js

@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+import { mockUrl } from '@/apiConfig/api'
+
+// 新增业务线
+export function addPlatFormType(data) {
+    return request({
+        url: mockUrl + `/setting/addPlatFormType`,
+        method: 'post',
+        data
+    })
+}
+
+// 修改
+export function updatePlatFormType(data) {
+    return request({
+        url: mockUrl + `/setting/updatePlatFormType`,
+        method: 'post',
+        data
+    })
+}
+
+// 删除
+export function deletePlatFormType(data) {
+    return request({
+        url: mockUrl + `/setting/deletePlatFormType`,
+        method: 'post',
+        data
+    })
+}
+
+// 查看列表
+export function queryPlatFormTypeList(data) {
+    return request({
+        url: mockUrl + `/setting/queryPlatFormTypeList`,
+        method: 'post',
+        data
+    })
+}
+
+// 获取biz列表
+export function queryBizTypeList(data) {
+    return request({
+        url: mockUrl + `/setting/queryBizTypeList`,
+        method: 'post',
+        data
+    })
+}

src/api/projectPages.js

@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+import { mockUrl } from '@/apiConfig/api'
+
+// 新增
+export function createModule(data) {
+    return request({
+        url: mockUrl + `/setting/createModule`,
+        method: 'post',
+        data
+    })
+}
+
+// 修改
+export function updateModule(data) {
+    return request({
+        url: mockUrl + `/setting/updateModule`,
+        method: 'post',
+        data
+    })
+}
+
+// 删除
+export function deleteModules(data) {
+    return request({
+        url: mockUrl + `/setting/deleteModules`,
+        method: 'post',
+        data
+    })
+}
+
+// 查看列表
+export function queryModuleInfoList(data) {
+    return request({
+        url: mockUrl + `/setting/queryModuleInfoList`,
+        method: 'post',
+        data
+    })
+}
+
+// 查看列表
+export function queryModuleInfoListByModuleName(data) {
+    return request({
+        url: mockUrl + `/setting/queryModuleInfoListByModuleName`,
+        method: 'post',
+        data
+    })
+}

src/apiConfig/api.js

@@ -1,7 +1,9 @@
-/*eslint-disable*/   //规避eslint的检查，如没有eslint可不写
+/*eslint-disable*/ //规避eslint的检查，如没有eslint可不写
 export const mockUrl = 'http://10.179.24.176:8980' // 线下
-// export const mockUrl = 'http://10.179.24.123:8980' // 线上
+    // export const mockUrl = 'http://10.179.24.123:8980' // 线上
 
+
+// export const mockUrl = 'http://172.23.164.114:8980'
 // export const mockUrl = 'http://172.23.162.48:8980' // 美双姐本地
 
-export const qualityUrl = 'http://10.179.209.19:8898' // 质量度量
+// export const qualityUrl = 'http://10.179.209.19:8898' // 质量度量

src/apiConfig/virtualDevices.js

@@ -1,3 +1,3 @@
 /*eslint-disable*/ //规避eslint的检查，如没有eslint可不写
 // export const mockUrl = 'http://mock.Intra.xiaojukeji.com' // 线上
-export const mockUrl = 'http://172.23.163.93:9999/virtual-devices' // 线下
+export const mockUrl = 'http://172.23.162.181:9999/virtual-devices' // 线下

src/views/Platform/setUp/modulePage.vue

@@ -0,0 +1,370 @@
+<template>
+  <!-- 业务模块 -->
+  <div class="set-background">
+    <div class="block">
+      <el-form :model="moduleForm">
+        <div class="set-head">
+          业务模块<el-input v-model="moduleForm.bizModuleName" clearable placeholder="请填写" style="margin-left:10px;width:18%;" /> &nbsp;&nbsp;
+          业务线<el-select v-model="moduleForm.bizId" placeholder="请选择" filterable clearable style="margin-left:10px;width:18%;">
+            <el-option v-for="item in bizData" :key="item.id" :label="item.bizName" :value="item.id" />
+          </el-select>
+          平台类型<el-select v-model="moduleForm.platId" placeholder="请选择" filterable clearable style="margin-left:10px;width:18%;">
+            <el-option v-for="item in platData" :key="item.id" :label="item.platName" :value="item.id" />
+          </el-select>
+          <div style="float:right">
+            <el-button type="primary" @click="queryModuleList(moduleForm)">查询</el-button>
+            <el-button type="primary" plain @click="handleaddModule()">新增</el-button>
+          </div>
+        </div>
+      </el-form>
+      <div class="set-locate">
+        <el-table :key="tableKey" :data="moduletData" fit highlight-current-row style="width: 100%;" border :header-cell-style="{background:'#F0F2F4',color:'#606266'}">
+          <el-table-column label="序号" prop="id" min-width="40px" align="center"><template slot-scope="scope"><span>{{ scope.row.id }}</span></template> </el-table-column>
+          <el-table-column label="业务模块" prop="bizModuleName" align="center" min-width="100">
+            <template slot-scope="scope"><a href="javascript:void(0)" style="color:#20a0ff">{{ scope.row.bizModuleName }}</a></template>
+          </el-table-column>
+          <el-table-column label="平台类型" prop="platName" min-width="70px" align="center"><template slot-scope="scope"><span>{{ scope.row.platName }}</span></template> </el-table-column>
+          <el-table-column label="业务线" prop="bizId" min-width="70px" align="center"><template slot-scope="scope"><span>{{ scope.row.bizId }}</span></template> </el-table-column>
+          <el-table-column label="端类型" prop="clientType" min-width="120px" align="center"><template slot-scope="{row}"><span>{{ statusMaps.get(row.clientType) }}</span></template> </el-table-column>
+          <el-table-column label="修改人" prop="modifier" min-width="70px" align="center"><template slot-scope="scope"><span>{{ scope.row.modifier }}</span></template> </el-table-column>
+          <el-table-column label="操作" align="center" min-width="150px" class-name="small-padding fixed-width">
+            <template slot-scope="{row}">
+              <el-button type="primary" size="mini" @click="handelEditModule(row)">编辑</el-button>
+              <el-button type="danger" size="mini" @click="handelDeleteModule(row)">删除</el-button>
+
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-dialog :title="titleName" width="40%" :visible.sync="dialogFormVisible">
+          <div style="margin-left:30px">
+            <el-form ref="addModuleForms" :rules="addModuleDataRules" :model="addModuleForm">
+              <el-form-item label="业务模块" prop="bizModuleName">
+                <el-input v-model="addModuleForm.bizModuleName" placeholder="请填写" style="margin-left:7px;width:60%;" />
+              </el-form-item>
+              <el-form-item label="平台类型" prop="platId">
+                <el-select v-model="addModuleForm.platId" placeholder="请选择" filterable clearable style="margin-left:7px;width:60%;" @change="changePlat()">
+                  <el-option v-for="item in platData" :key="item.id" :label="item.platName" :value="item.id" />
+                </el-select>
+              </el-form-item>
+            </el-form>
+          </div>
+          <div align="center" style="margin-top:18px">
+            <el-button type="info" plain size="mini" @click="dialogFormVisible=false">取消</el-button>
+            <el-button type="primary" size="mini" @click="titleName === '新增' ? addModuleType(addModuleForm) :editModuleType(addModuleForm)">确定</el-button>
+          </div>
+          <div style="margin-top:6%" />
+        </el-dialog>
+
+        <el-dialog :visible.sync="dialogDeleteVisible" width="30%">
+          <div align="center" style="margin-top:-6%">
+            <b>确定要删除该业务模块吗？</b>
+          </div>
+          <div align="center" style="margin-top:38px">
+            <el-button type="primary" size="mini" @click="deleteModuleType()">确定</el-button>
+            <el-button type="danger" size="mini" @click="dialogDeleteVisible=false">取消</el-button>
+          </div>
+          <div style="margin-top:4%" />
+        </el-dialog>
+        <div>
+          <el-pagination style="margin-top:30px;" align="center" :current-page="curIndex" :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        </div>
+      </div>
+
+    </div>
+  </div></template>
+
+<script>
+import { addBizModule, updateBizModule, deleteBizModule, queryBizModuleList, queryBizTypeList, queryPlatFormTypeList } from '@/api/modulePage'
+import waves from '@/directive/waves' // waves directive
+
+var envSelections = []
+var consumerSelections = []
+
+export default {
+  name: 'ModulePage',
+  // components: { Pagination },
+  directives: { waves },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        1: 'success',
+        draft: 'info',
+        0: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      userInformation: localStorage.getItem('username'),
+      userName: localStorage.getItem('realname'),
+      statusMaps: new Map([[1, '服务端 '], [2, '客户端'], [0, '默认选项']]),
+      clientOptions: [{
+        value: 1,
+        label: '服务端'
+      }, {
+        value: 2,
+        label: '客户端'
+      }, {
+        value: 0,
+        label: '默认选项'
+      }],
+      userData: '',
+      envSelections,
+      addModuleForm: {},
+      consumerSelections,
+      bizData: [],
+      total: 0,
+      titleName: '',
+      bizForm: {
+        bizName: ''
+      },
+      moduleForm: {
+        platId: '',
+        bizId: '',
+        bizModuleName: ''
+      },
+      platData: [],
+      platType: {},
+      deleteData: {},
+      moduletData: {},
+      addModuleData: {},
+      currentBizData: [],
+      tableKey: 0,
+      curIndex: 0,
+      pageSize: 10,
+      listLoading: true,
+      dialogFormVisible: false,
+      dialogDeleteVisible: false,
+      // dialogName: '业务线名称',
+      addModuleDataRules: {
+        bizModuleName: [{ required: true, message: '业务类型不能为空', trigger: 'change' }],
+        platId: [{ required: true, message: '平台类型不能为空', trigger: 'change' }]
+      }
+
+    }
+  },
+
+  created() {
+    this.getBizList()
+    this.getPlatList()
+    this.getList()
+  },
+  methods: {
+    // 获得biztype
+    getBizList() {
+      this.bizForm.bizName = ''
+      this.bizForm.curIndex = this.curIndex - 1
+      queryBizTypeList(this.bizForm).then(response => {
+        if (response.code === 200) {
+          this.bizData = response.data.list
+        } else {
+          this.errorFun()
+        }
+      })
+    },
+    // 获取平台类型
+    getPlatList() {
+      // this.listLoading = true
+      this.indexPage = {
+        pageSize: this.pageSize,
+        curIndex: this.curIndex - 1
+      }
+      queryPlatFormTypeList(this.indexPage).then(response => {
+        this.platData = response.data.list
+        this.total = 30
+        this.listLoading = false
+      })
+    },
+
+    changePlat() {
+      this.addData = { id: this.addModuleForm.platId }
+      queryPlatFormTypeList(this.addData).then(response => {
+        this.platType = response.data.list
+        console.log(this.platType)
+        console.log(this.platType[0].bizId)
+        this.total = 30
+        this.listLoading = false
+      })
+    },
+
+    // 新增平台类型
+    handleaddModule() {
+      this.titleName = '新增'
+      this.dialogFormVisible = true
+      this.$refs.addModuleForms.resetFields()
+      this.$set(this.addModuleForm, 'bizModuleName', '')
+      this.$set(this.addModuleForm, 'platId', '')
+    },
+    addModuleType(ele) {
+      this.$refs['addModuleForms'].validate((valid) => {
+        if (valid) {
+          this.addModuleForm = ele
+          this.addModuleForm.bizModuleName = ele.bizModuleName
+          this.addModuleForm.platId = ele.platId
+          this.addModuleForm.bizId = this.platType[0].bizId
+          this.addModuleForm.clientType = this.platType[0].clientType
+          this.addModuleForm.creator = this.userInformation
+          this.addModuleForm.modifier = this.userInformation
+          addBizModule(this.addModuleForm).then(response => {
+            console.log(response)
+            if (response.code === 200) {
+              this.getList()
+              this.successFun()
+              this.dialogFormVisible = false
+            } else {
+              this.errorFun()
+            }
+          })
+        }
+      })
+    },
+    // 进首页
+    getList() {
+      // this.listLoading = true
+      this.indexPage = {
+        pageSize: this.pageSize,
+        curIndex: this.curIndex - 1
+      }
+      queryBizModuleList(this.indexPage).then(response => {
+        this.moduletData = response.data.list
+        this.total = 25
+        this.listLoading = false
+      })
+    },
+
+    // 查看
+    queryModuleList(ele) {
+      this.moduleForm.bizModuleName = ele.bizModuleName
+      this.moduleForm.bizId = ele.bizId
+      this.moduleForm.platId = ele.platId
+      // this.bizForm.pageSize = this.pageSize
+      // this.platForm.curIndex = this.curIndex - 1
+      // this.listLoading = true
+      queryBizModuleList(this.moduleForm).then(response => {
+        if (response.code === 200) {
+          // this.getMyDevicesList()
+          this.moduletData = response.data.list
+          this.dialogFormVisible = false
+          // this.listLoading = false
+        } else {
+          this.errorFun()
+        }
+      })
+    },
+    // 删除
+    handelDeleteModule(ele) {
+      this.dialogDeleteVisible = true
+      this.addModuleForm = ele
+    },
+    deleteModuleType() {
+      var bizModuleIds = [this.addModuleForm.id]
+      this.deleteData.modifier = this.userInformation
+      this.deleteData.bizModuleIds = bizModuleIds
+      deleteBizModule(this.deleteData).then(response => {
+        if (response.code === 200) {
+          this.successFun()
+          this.dialogDeleteVisible = false
+          this.getList()
+          this.bizData = response.data.list
+        } else {
+          this.errorFun()
+          // this.dialogDeleteVisible = false
+        }
+      })
+    },
+
+    // 编辑
+    handelEditModule(ele) {
+      // 不能直接赋值变量，使用Object.assign复制一级属性(注意Object.assign不算完全的深拷贝)
+      this.addModuleForm = Object.assign({}, ele)
+      // this.addModuleForm = JSON.parse(JSON.stringify(ele))
+      this.titleName = '编辑'
+      this.dialogFormVisible = true
+      this.$refs.addModuleForms.resetFields()
+      console.log(ele)
+    },
+    editPlatType(ele) {
+      this.$refs['addModuleForms'].validate((valid) => {
+        if (valid) {
+          var myDate = new Date()
+          this.addModuleForm = ele
+          this.addModuleForm.bizModuleName = ele.bizModuleName
+          this.addModuleForm.platId = ele.platId
+          this.addModuleForm.modifyTime = myDate
+          this.addModuleForm.modifier = this.userInformation
+          // this.bizTypeInfo = { bizTypeInfo: this.addBizData }
+          updateBizModule(this.addModuleForm).then(response => {
+            console.log(response)
+            if (response.code === 200) {
+              this.getList()
+              this.successFun()
+              this.dialogFormVisible = false
+            } else {
+              this.errorFun()
+            }
+          })
+        }
+      })
+    },
+
+    handleSizeChange(size) {
+      this.pageSize = size
+      this.getList()
+    },
+    handleCurrentChange(curIndex) {
+      this.curIndex = curIndex
+      this.getList()
+    },
+
+    clearValidate(formName) {
+      this.$refs[formName].clearValidate()
+    },
+
+    successFun() {
+      this.$notify({ title: 'Success', message: 'Created Successfully', type: 'success', duration: 5000 })
+    },
+    errorFun() {
+      this.$notify({ title: 'Failed', message: 'Created Failed', type: 'error', duration: 5000 })
+    }
+  }
+}
+</script>
+<style lang="stylus" scoped>
+  .set-background
+    background-color #F1F4F7
+    display flex
+    justify-content center
+    min-width 700px
+    .setPercent >>> .el-dialog__body
+      width 100%
+    .block
+      background-color rgba(255,255,255,1)
+      box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
+      border-radius 7px
+      width 93%
+      margin 25px 0
+      padding 20px
+      min-height calc(100vh - 100px)
+    .set-head
+      font-size 13px
+      width 100%
+      color #333B4A
+      white-space nowrap
+    .set-dialogfont
+      font-size 13px
+      .set-dialogfont >>> .el-input
+        width 70%
+    // .set-between
+    //   display flex
+    // .set-between >>> .el-button
+      // height 40px
+    .set-locate
+      margin-top 25px
+      // border-bottom 1px solid #BFC6DC
+      // border-left 1px solid #BFC6DC
+      // border-top 1px solid #BFC6DC
+      // border-right 1px solid #BFC6DC
+
+</style>

src/views/Platform/setUp/platformPage.vue

@@ -0,0 +1,357 @@
+<template>
+  <!-- 平台类型 -->
+  <div class="set-background">
+    <div class="block">
+      <el-form :model="platForm">
+        <div class="set-head">
+          平台类型<el-input v-model="platForm.platName" clearable placeholder="请填写" style="margin-left:10px;width:30%;" /> &nbsp;&nbsp;
+          业务线<el-select v-model="platForm.bizId" placeholder="请选择" filterable clearable style="margin-left:10px;width:30%;">
+            <el-option v-for="item in bizData" :key="item.id" :label="item.bizName" :value="item.id" />
+          </el-select>
+          <div style="float:right">
+            <el-button type="primary" @click="queryBizList(platForm)">查询</el-button>
+            <el-button type="primary" plain @click="handleaddPlat()">新增</el-button>
+          </div>
+        </div>
+      </el-form>
+      <div class="set-locate">
+        <el-table :key="tableKey" v-loading="listLoading" :data="platData" fit highlight-current-row style="width: 100%;" border :header-cell-style="{background:'#F0F2F4',color:'#606266'}">
+          <el-table-column label="序号" prop="id" min-width="50px" align="center"><template slot-scope="scope"><span>{{ scope.row.id }}</span></template> </el-table-column>
+          <el-table-column label="平台类型" prop="platName" align="center" min-width="120">
+            <template slot-scope="scope"><a href="javascript:void(0)" style="color:#20a0ff">{{ scope.row.platName }}</a></template>
+          </el-table-column>
+          <el-table-column label="业务线" prop="bizName" min-width="110px" align="center"><template slot-scope="scope"><span>{{ scope.row.bizName }}</span></template> </el-table-column>
+          <el-table-column label="端类型" prop="clientType" min-width="120px" align="center"><template slot-scope="{row}"><span>{{ statusMaps.get(row.clientType) }}</span></template> </el-table-column>
+          <el-table-column label="修改人" prop="modifier" min-width="120px" align="center"><template slot-scope="scope"><span>{{ scope.row.modifier }}</span></template> </el-table-column>
+          <el-table-column label="操作" align="center" min-width="200px" class-name="small-padding fixed-width">
+            <template slot-scope="{row}">
+              <el-button type="primary" size="mini" @click="handelEditPlat(row)">编辑</el-button>
+              <el-button type="danger" size="mini" @click="handelDeletePlat(row)">删除</el-button>
+
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-dialog :title="titleName" width="40%" :visible.sync="dialogFormVisible">
+          <div style="margin-left:30px">
+            <el-form ref="addPlatForms" :rules="addPlatDataRules" :model="addPlatForm">
+              <el-form-item label="平台类型" prop="platName">
+                <el-input v-model="addPlatForm.platName" placeholder="请填写" style="margin-left:7px;width:60%;" />
+              </el-form-item>
+              <el-form-item label="业务线" prop="bizId">
+                <el-select v-model="addPlatForm.bizId" placeholder="请选择" filterable clearable style="margin-left:20px;width:60%;">
+                  <el-option v-for="item in bizData" :key="item.id" :label="item.bizName" :value="item.id" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="端类型" prop="clientType">
+                <el-select v-model="addPlatForm.clientType" placeholder="请选择" filterable clearable style="margin-left:20px;width:60%;">
+                  <el-option v-for="item in clientOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+              </el-form-item>
+
+            </el-form>
+          </div>
+          <div align="center" style="margin-top:30px">
+            <el-button type="info" plain size="mini" @click="dialogFormVisible=false">取消</el-button>
+            <el-button type="primary" size="mini" @click="titleName === '新增' ? addPlatType(addPlatForm) :editPlatType(addPlatForm)">确定</el-button>
+          </div>
+          <div style="margin-top:6%" />
+        </el-dialog>
+
+        <el-dialog :visible.sync="dialogDeleteVisible" width="30%">
+          <div align="center" style="margin-top:-6%">
+            <b>确定要删除该平台类型吗？</b>
+          </div>
+          <div align="center" style="margin-top:35px">
+            <el-button type="primary" size="mini" @click="deletePlatType()">确定</el-button>
+            <el-button type="danger" size="mini" @click="dialogDeleteVisible=false">取消</el-button>
+          </div>
+          <div style="margin-top:4%" />
+        </el-dialog>
+        <div>
+          <!-- <el-pagination
+            align="center"
+            background
+            layout="prev, pager, next"
+            :total="50"
+            :current-page="curIndex"
+            :page-size="pageSize"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          /> -->
+          <el-pagination style="margin-top:30px;" align="center" :current-page="curIndex" :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+        </div>
+
+      </div>
+
+    </div>
+  </div></template>
+
+<script>
+import { queryBizTypeList, addPlatFormType, updatePlatFormType, deletePlatFormType, queryPlatFormTypeList } from '@/api/platformPage'
+import waves from '@/directive/waves' // waves directive
+
+var envSelections = []
+var consumerSelections = []
+
+export default {
+  name: 'PlatformPage',
+  // components: { Pagination },
+  directives: { waves },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        1: 'success',
+        draft: 'info',
+        0: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      userInformation: localStorage.getItem('username'),
+      userName: localStorage.getItem('realname'),
+      statusMaps: new Map([[1, '服务端 '], [2, '客户端'], [0, '默认选项']]),
+      clientOptions: [{
+        value: 1,
+        label: '服务端'
+      }, {
+        value: 2,
+        label: '客户端'
+      }, {
+        value: 0,
+        label: '默认选项'
+      }],
+      userData: '',
+      envSelections,
+      consumerSelections,
+      bizData: [],
+      total: 0,
+      titleName: '',
+      bizForm: {
+        bizName: ''
+      },
+      platForm: {
+        platName: '',
+        bizId: ''
+      },
+      platData: {},
+      deleteData: {},
+      addPlatForm: {},
+      currentBizData: [],
+      tableKey: 0,
+      curIndex: 0,
+      pageSize: 10,
+      listLoading: true,
+      dialogFormVisible: false,
+      dialogDeleteVisible: false,
+      // dialogName: '业务线名称',
+      addPlatDataRules: {
+        bizId: [{ required: true, message: '业务线不能为空', trigger: 'change' }],
+        clientType: [{ required: true, message: '端类型不能为空', trigger: 'change' }],
+        platName: [{ required: true, message: '平台类型名称不能为空', trigger: 'change' }]
+      }
+
+    }
+  },
+
+  created() {
+    this.getBizList()
+    this.getList()
+  },
+  methods: {
+    // 获得biztype
+    getBizList() {
+      this.bizForm.bizName = ''
+      this.bizForm.curIndex = this.curIndex - 1
+      queryBizTypeList(this.bizForm).then(response => {
+        if (response.code === 200) {
+          this.bizData = response.data.list
+        } else {
+          this.errorFun()
+        }
+      })
+    },
+    // 新增平台类型
+    handleaddPlat() {
+      this.titleName = '新增'
+      this.dialogFormVisible = true
+      this.$refs.addPlatForms.resetFields()
+      this.$set(this.addPlatForm, 'bizId', '')
+      this.$set(this.addPlatForm, 'clientType', '')
+      this.$set(this.addPlatForm, 'platName', '')
+    },
+    addPlatType(ele) {
+      this.$refs['addPlatForms'].validate((valid) => {
+        if (valid) {
+          this.addPlatForm = ele
+          this.addPlatForm.bizId = ele.bizId
+          this.addPlatForm.clientType = ele.clientType
+          this.addPlatForm.platName = ele.platName
+          this.addPlatForm.creator = this.userInformation
+          this.addPlatForm.modifier = this.userInformation
+          addPlatFormType(this.addPlatForm).then(response => {
+            console.log(response)
+            if (response.code === 200) {
+              this.getList()
+              this.successFun()
+              this.dialogFormVisible = false
+            } else {
+              this.errorFun()
+            }
+          })
+        }
+      })
+    },
+    // 进首页
+    getList() {
+      // this.listLoading = true
+      this.indexPage = {
+        pageSize: this.pageSize,
+        curIndex: this.curIndex - 1
+      }
+      queryPlatFormTypeList(this.indexPage).then(response => {
+        this.platData = response.data.list
+        this.total = 25
+        this.listLoading = false
+      })
+    },
+
+    // 查看
+    queryBizList(ele) {
+      this.platForm.platName = ele.platName
+      this.platForm.bizId = ele.bizId
+      // this.bizForm.pageSize = this.pageSize
+      // this.platForm.curIndex = this.curIndex - 1
+      console.log(ele)
+      // this.listLoading = true
+      queryPlatFormTypeList(this.platForm).then(response => {
+        if (response.code === 200) {
+          // this.getMyDevicesList()
+          this.platData = response.data.list
+          this.dialogFormVisible = false
+          // this.listLoading = false
+        } else {
+          this.errorFun()
+        }
+      })
+    },
+    // 删除
+    handelDeletePlat(ele) {
+      this.dialogDeleteVisible = true
+      this.addPlatForm = ele
+    },
+    deletePlatType() {
+      console.log(typeof (this.addPlatForm.id))
+      var platIds = [this.addPlatForm.id]
+      // bizIds.push(this.addBizData.id)
+      this.deleteData.modifier = this.userInformation
+      this.deleteData.platIds = platIds
+      deletePlatFormType(this.deleteData).then(response => {
+        if (response.code === 200) {
+          this.successFun()
+          this.dialogDeleteVisible = false
+          this.getList()
+          this.bizData = response.data.list
+        } else {
+          this.errorFun()
+          // this.dialogDeleteVisible = false
+        }
+      })
+    },
+
+    // 编辑
+    handelEditPlat(ele) {
+      // 不能直接赋值变量，使用Object.assign复制一级属性(注意Object.assign不算完全的深拷贝)
+      this.addPlatForm = Object.assign({}, ele)
+      // this.addPlatform = JSON.parse(JSON.stringify(ele))
+      this.titleName = '编辑'
+      this.dialogFormVisible = true
+      this.$refs.addPlatForms.resetFields()
+      console.log(ele)
+    },
+    editPlatType(ele) {
+      this.$refs['addPlatForms'].validate((valid) => {
+        if (valid) {
+          var myDate = new Date()
+          this.addPlatForm = ele
+          this.addPlatForm.bizId = ele.bizId
+          this.addPlatForm.clientType = ele.clientType
+          this.addPlatForm.platName = ele.platName
+          this.addPlatForm.modifyTime = myDate
+          this.addPlatForm.modifier = this.userInformation
+          // this.bizTypeInfo = { bizTypeInfo: this.addBizData }
+          updatePlatFormType(this.addPlatForm).then(response => {
+            console.log(response)
+            if (response.code === 200) {
+              this.getList()
+              this.successFun()
+              this.dialogFormVisible = false
+            } else {
+              this.errorFun()
+            }
+          })
+        }
+      })
+    },
+
+    handleSizeChange(size) {
+      this.pageSize = size
+      this.getList()
+    },
+    handleCurrentChange(curIndex) {
+      this.curIndex = curIndex
+      this.getList()
+    },
+
+    clearValidate(formName) {
+      this.$refs[formName].clearValidate()
+    },
+
+    successFun() {
+      this.$notify({ title: 'Success', message: 'Created Successfully', type: 'success', duration: 5000 })
+    },
+    errorFun() {
+      this.$notify({ title: 'Failed', message: 'Created Failed', type: 'error', duration: 5000 })
+    }
+  }
+}
+</script>
+<style lang="stylus" scoped>
+  .set-background
+    background-color #F1F4F7
+    display flex
+    justify-content center
+    min-width 700px
+    .setPercent >>> .el-dialog__body
+      width 100%
+    .block
+      background-color rgba(255,255,255,1)
+      box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
+      border-radius 7px
+      width 93%
+      margin 25px 0
+      padding 20px
+      min-height calc(100vh - 100px)
+    .set-head
+      font-size 13px
+      width 100%
+      color #333B4A
+      white-space nowrap
+    .set-dialogfont
+      font-size 13px
+      .set-dialogfont >>> .el-input
+        width 70%
+    // .set-between
+    //   display flex
+    // .set-between >>> .el-button
+      // height 40px
+    .set-locate
+      margin-top 25px
+      // border-bottom 1px solid #BFC6DC
+      // border-left 1px solid #BFC6DC
+      // border-top 1px solid #BFC6DC
+      // border-right 1px solid #BFC6DC
+
+</style>

src/views/Platform/setUp/projectPage.vue

@@ -0,0 +1,311 @@
+<template>
+  <!-- 工程模块 -->
+  <div class="set-background">
+    <div class="block">
+      <el-form :model="projectForm">
+        <div class="set-head">
+          业务模块<el-input v-model="projectForm.platformType" placeholder="请填写" style="margin-left:10px;width:20%;" /> &nbsp;&nbsp;
+          业务线<el-select v-model="projectForm.biz" placeholder="请选择" filterable clearable style="margin-left:10px;width:20%;">
+            <el-option v-for="item in bizType" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+          平台类型<el-select v-model="projectForm.biz" placeholder="请选择" filterable clearable style="margin-left:10px;width:20%;">
+            <el-option v-for="item in bizType" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+          <div style="float:right">
+            <el-button type="primary">查询</el-button>
+            <el-button type="primary" plain @click="handleaddBiz()">新增</el-button>
+          </div>
+        </div>
+      </el-form>
+      <div class="set-locate">
+        <el-table :key="tableKey" :data="projectData" fit highlight-current-row style="width: 100%;" border :header-cell-style="{background:'#F0F2F4',color:'#606266'}">
+          <el-table-column label="序号" prop="No" min-width="40px" align="center" />
+          <el-table-column label="工程模块" prop="bizName" align="center" min-width="100">
+            <template slot-scope="scope"><a href="javascript:void(0)" style="color:#20a0ff">{{ scope.row.bizName }}</a></template>
+          </el-table-column>
+          <el-table-column label="业务模块" prop="editor" min-width="70px" align="center" />
+          <el-table-column label="平台类型" prop="editor" min-width="70px" align="center" />
+          <el-table-column label="业务线" prop="editor" min-width="70px" align="center" />
+          <el-table-column label="端类型" prop="editor" min-width="70px" align="center" />
+          <el-table-column label="修改人" prop="editor" min-width="70px" align="center" />
+          <el-table-column label="操作" align="center" min-width="150px" class-name="small-padding fixed-width">
+            <template slot-scope="{row}">
+              <el-button type="primary" size="mini">编辑</el-button>
+              <el-button type="danger" size="mini" @click="dialogDeleteVisible=true">删除</el-button>
+
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-dialog :visible.sync="dialogFormVisible" width="32%">
+          <div class="set-dialogfont" style="margin-left:25px;margin-top:-8px">
+            <b>工程模块</b><el-input placeholder="请填写" style="margin-left:10px;width:72%;" />
+          </div>
+          <div class="set-dialogfont" style="margin-left:35px;margin-top:10px">
+            <b>Git地址</b><el-input placeholder="请填写" style="margin-left:10px;width:74%;" />
+          </div>
+          <div class="set-dialogfont" style="margin-left:23px;margin-top:10px">
+            <b>业务模块</b><el-select v-model="projectForm.biz" placeholder="请选择业务模块" filterable clearable style="margin-left:13px;width:71.5%;">
+              <el-option v-for="item in bizType" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+          </div>
+          <div align="center" style="margin-top:30px">
+            <el-button type="info" plain size="mini" @click="dialogFormVisible=false">确定</el-button>
+            <el-button type="danger" size="mini" @click="dialogFormVisible=false">取消</el-button>
+            <div style="margin-top:3%" />
+          </div>
+        </el-dialog>
+
+        <el-dialog :visible.sync="dialogDeleteVisible" width="30%">
+          <div align="center" style="margin-top:-6%">
+            <b>确定要删除该工程模块吗？</b>
+          </div>
+          <div align="center" style="margin-top:38px">
+            <el-button type="primary" size="mini" @click="dialogDeleteVisible=false">确定</el-button>
+            <el-button type="danger" size="mini" @click="dialogDeleteVisible=false">取消</el-button>
+          </div>
+          <div style="margin-top:4%" />
+        </el-dialog>
+        <div>
+          <el-pagination
+            align="center"
+            background
+            layout="prev, pager, next"
+            :total="50"
+          />
+        </div>
+      </div>
+
+    </div>
+  </div></template>
+
+<script>
+import { createModule } from '@/api/projectPages'
+//  updateModule, deleteModules, queryModuleInfoList, queryModuleInfoListByModuleName
+import waves from '@/directive/waves' // waves directive
+
+var envSelections = []
+var consumerSelections = []
+
+export default {
+  name: 'ProjectPage',
+  // components: { Pagination },
+  directives: { waves },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        1: 'success',
+        draft: 'info',
+        0: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+      userInformation: localStorage.getItem('username'),
+      userName: localStorage.getItem('realname'),
+      userData: '',
+      envSelections,
+      consumerSelections,
+      bizData: [],
+      total: 0,
+      titleName: '',
+      bizForm: {
+        bizName: ''
+      },
+      addBizData: {},
+      deleteData: {},
+      currentBizData: [],
+      tableKey: 0,
+      curIndex: 0,
+      pageSize: 10,
+      listLoading: true,
+      dialogFormVisible: false,
+      dialogDeleteVisible: false,
+      dialogName: '业务线名称',
+      addBizDataRules: {
+        id: [{ required: true, message: 'id不能为空', trigger: 'change' }],
+        bizName: [{ required: true, message: '业务线名称不能为空', trigger: 'change' }]
+      }
+
+    }
+  },
+
+  created() {
+    this.getList()
+  },
+  methods: {
+  // 新增业务线
+    handleaddBiz() {
+      this.titleName = '新增'
+      this.dialogFormVisible = true
+      this.$refs.addBizForms.resetFields()
+    },
+    addModuleType(ele) {
+      this.$refs['addBizForms'].validate((valid) => {
+        if (valid) {
+          this.addBizData = ele
+          this.addBizData.creator = this.userInformation
+          this.addBizData.modifier = this.userInformation
+          // this.userData = { id: '', ename: this.userInformation, name: this.userNames }
+          // this.bizTypeInfo = { bizTypeInfo: this.addBizData }
+          createModule(this.addBizData).then(response => {
+            console.log(response)
+            if (response.code === 200) {
+              this.getList()
+              this.successFun()
+              this.dialogFormVisible = false
+            } else {
+              this.errorFun()
+            }
+          })
+        }
+      })
+    },
+    // // 进首页
+    // getList() {
+    //   this.listLoading = true
+    //   this.indexPage = {
+    //     pageSize: this.pageSize,
+    //     curIndex: this.curIndex - 1
+    //   }
+    //   queryBizTypeList(this.indexPage).then(response => {
+    //     this.bizData = response.data.list
+    //     this.total = 10
+    //     this.listLoading = false
+    //   })
+    // },
+
+    // // 查看
+    // queryBizList(ele) {
+    //   this.bizForm.bizName = ele.bizName
+    //   // this.bizForm.pageSize = this.pageSize
+    //   this.bizForm.curIndex = this.curIndex - 1
+    //   // this.bizTypeInfo = { bizTypeInfo: this.bizForm }
+    //   console.log(ele)
+    //   queryBizTypeList(this.bizForm).then(response => {
+    //     if (response.code === 200) {
+    //       // this.getMyDevicesList()
+    //       this.bizData = response.data.list
+    //       this.dialogFormVisible = false
+    //     } else {
+    //       this.errorFun()
+    //     }
+    //   })
+    // },
+    // // 删除
+    // handelDeleteBiz(ele) {
+    //   this.addBizData = ele
+    //   this.dialogDeleteVisible = true
+    // },
+    // deleteBizType() {
+    //   console.log(typeof (this.addBizData.id))
+    //   var bizIds = [this.addBizData.id]
+    //   // bizIds.push(this.addBizData.id)
+    //   this.deleteData.modifier = this.userInformation
+    //   this.deleteData.bizIds = bizIds
+    //   deleteBiz(this.deleteData).then(response => {
+    //     if (response.code === 200) {
+    //       this.successFun()
+    //       this.dialogDeleteVisible = false
+    //       this.getList()
+    //       this.bizData = response.data.list
+    //     } else {
+    //       this.errorFun()
+    //       // this.dialogDeleteVisible = false
+    //     }
+    //   })
+    // },
+
+    // // 编辑
+    // handelEditBiz(ele) {
+    //   this.addBizData = ele
+    //   this.titleName = '编辑'
+    //   this.dialogFormVisible = true
+    //   this.$refs.addBizForms.resetFields()
+    //   console.log(ele)
+    // },
+    // editBizType(ele) {
+    //   this.$refs['addBizForms'].validate((valid) => {
+    //     if (valid) {
+    //       var myDate = new Date()
+
+    //       this.addBizData = ele
+    //       this.addBizData.modifyTime = myDate
+    //       this.addBizData.modifier = this.userInformation
+    //       // this.bizTypeInfo = { bizTypeInfo: this.addBizData }
+    //       updateBiz(this.addBizData).then(response => {
+    //         console.log(response)
+    //         if (response.code === 200) {
+    //           // this.getMyDevicesList()
+    //           this.successFun()
+    //           // this.$refs.addBizForms.resetFields()
+    //           this.dialogFormVisible = false
+    //         } else {
+    //           this.errorFun()
+    //           // this.$refs.addBizForms.resetFields()
+    //         }
+    //       })
+    //     }
+    //   })
+    // },
+
+    handleSizeChange(size) {
+      this.pageSize = size
+      this.getList()
+    },
+    handleCurrentChange(curIndex) {
+      this.curIndex = curIndex
+      this.getList()
+    },
+
+    clearValidate(formName) {
+      this.$refs[formName].clearValidate()
+    },
+
+    successFun() {
+      this.$notify({ title: 'Success', message: 'Created Successfully', type: 'success', duration: 5000 })
+    },
+    errorFun() {
+      this.$notify({ title: 'Failed', message: 'Created Failed', type: 'error', duration: 5000 })
+    }
+  }
+}
+</script>
+<style lang="stylus" scoped>
+  .set-background
+    background-color #F1F4F7
+    display flex
+    justify-content center
+    min-width 700px
+    .setPercent >>> .el-dialog__body
+      width 100%
+    .block
+      background-color rgba(255,255,255,1)
+      box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
+      border-radius 7px
+      width 93%
+      margin 25px 0
+      padding 20px
+      min-height calc(100vh - 100px)
+    .set-head
+      font-size 13px
+      width 100%
+      color #333B4A
+      white-space nowrap
+    .set-dialogfont
+      font-size 13px
+      .set-dialogfont >>> .el-input
+        width 70%
+    // .set-between
+    //   display flex
+    // .set-between >>> .el-button
+      // height 40px
+    .set-locate
+      margin-top 25px
+      // border-bottom 1px solid #BFC6DC
+      // border-left 1px solid #BFC6DC
+      // border-top 1px solid #BFC6DC
+      // border-right 1px solid #BFC6DC
+
+</style>

src/views/Platform/setUp/testa.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>

src/views/Platform/teamPage.vue

@@ -1,359 +0,0 @@
-<template>
-  <el-container>
-    <el-aside width="150pt">
-      <el-tree
-        style="background: #E9EEF3; height:93vh; padding:15%;"
-        :data="bizOptions"
-        node-key="id"
-        undraggable
-        :highlight-current="true"
-        @node-click="clickFun"
-      />
-    </el-aside>
-    <el-container>
-      <el-header style="height: auto; text-align:left">
-        <div style="margin: 4%;">
-          <el-input v-model="form.name" clearable filterable placeholder="姓名" style="width:22%;margin-right:5px;" />
-          <el-input v-model="form.email" clearable filterable placeholder="邮箱" style="width:22%;margin-right:5px;" />
-          <el-select v-model="form.role" width="200" clearable placeholder="请选择角色">
-            <el-option v-for="item in roleStrings" :key="item.value" :label="item.name" :value="item.name" />
-          </el-select>
-          <el-button type="primary" style="margin-left:8%;" @click="queryList(form)">查询</el-button>
-          <el-button type="primary" @click="createGetShow">新增</el-button>
-        </div>
-
-        <el-dialog :title="titleName" width="40%" :visible.sync="dialogFormVisible">
-          <el-form ref="MemberData" :model="MemberData" status-icon :rules="serviceDataRules" label-width="60px">
-            <el-form-item v-show="hide" label="id" prop="Id" :label-width="formLabelWidths">
-              <el-input v-model="MemberData.id" autocomplete="off" style="width:75%" :disabled="true" />
-            </el-form-item>
-            <el-form-item label="姓名" prop="name" :label-width="formLabelWidths">
-              <el-input v-model="MemberData.name" autocomplete="off" style="width:75%" />
-            </el-form-item>
-            <el-form-item label="邮箱" prop="email" :label-width="formLabelWidths">
-              <el-input v-model="MemberData.email" autocomplete="off" style="width:75%" />
-            </el-form-item>
-            <el-form-item label="业务线" prop="bizId" :label-width="formLabelWidths">
-              <el-select v-model="MemberData.bizId" placeholder="请选择业务线" style="width:75%">
-                <el-option v-for="item in bizOptions" :key="item.value" :label="item.label" :value="item.value" />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="角色" prop="role" :label-width="formLabelWidths">
-              <el-select v-model="MemberData.role" placeholder="请选择角色" style="width:75%">
-                <el-option v-for="item in roleStrings" :key="item.value" :label="item.name" :value="item.name" />
-              </el-select>
-            </el-form-item>
-          </el-form>
-          <div slot="footer" class="dialog-footer">
-            <el-button @click="dialogFormVisible = false,clickClose()">关 闭</el-button>
-            <el-button v-show="Determine" type="primary" @click="titleName === '新增'?createMembers(MemberData):updateData(MemberData)">确 定</el-button>
-          </div>
-        </el-dialog>
-      </el-header>
-      <el-table :data="list" style="width: 100%; height:570vh;" row-key="id" lazy align="center">
-        <el-table-column prop="id" label="ID" width="150" align="center"><template slot-scope="scope"><span>{{ scope.row.id }}</span></template></el-table-column>
-        <el-table-column prop="name" label="姓名" width="180" align="center"><template slot-scope="scope"><span>{{ scope.row.name }}</span></template> </el-table-column>
-        <el-table-column label="team" width="180" align="center"><template slot-scope="scope"><span>{{ scope.row.teamId }}</span></template></el-table-column>
-        <el-table-column label="邮箱" width="180" align="center"><template slot-scope="scope"><span>{{ scope.row.email }}</span></template></el-table-column>
-        <el-table-column prop="role" label="角色" width="150" align="center"><template slot-scope="scope"><span>{{ scope.row.role }}</span></template></el-table-column>
-        <el-table-column label="操作" align="center" min-width="220px" fixed="right">
-          <template slot-scope="{row}">
-            <el-button size="mini" type="primary" @click="dialogFormVisible = true,queryData(row)">查看</el-button>
-            <el-button size="mini" type="primary" @click="dialogFormVisible = true,changeData(row)">编辑</el-button>
-            <el-button size="mini" type="primary" @click="deleteCodeData(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <el-footer>
-        <el-pagination :current-page="curIndex" :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
-      </el-footer>
-    </el-container>
-  </el-container>
-</template>
-
-<script>
-import { createMembers, updateMembers, deleteMembers, getMemberList } from '@/api/teamPage.js'
-
-const operateType = {
-  OPER_ADD: 1, // 新增
-  OPER_EDIT: 2, // 编辑
-  OPER_QUERY: 3 // 查看
-}
-export default {
-  name: 'TeamPage',
-  data() {
-    return {
-      centerDialogVisible: false,
-      dialogFormVisible: false,
-      Determine: true,
-      hide: true,
-      radioButton: 0,
-      titleName: '',
-      parameter: '',
-      startId: '',
-      startName: '',
-      parentFolderId: '',
-      formLabelWidths: '120px',
-      roleStrings: [{ value: 1, name: 'rd' }, { value: 2, name: 'qa' }, { value: 3, name: 'pm' }, { value: 4, name: 'other' }],
-      bizOptions: [{ label: '滴滴代驾', value: 261 }, { label: '企业级', value: 100 }, { label: 'prado', value: 330 }, { label: 'carbo', value: 331 }, { label: '海马', value: 309 }, { label: '万象', value: 102 }],
-      userInformation: localStorage.getItem('username'),
-      userNames: localStorage.getItem('realname'),
-      bizId: '',
-      curIndex: 1, // 初始页
-      pageSize: 10, // 每页的数据
-      total: 0,
-      userData: '',
-      folderName: '',
-      list: [],
-      form: {},
-      queryListData: {},
-      bizData: {},
-      MemberData: {
-        bizId: '',
-        teamId: '',
-        email: '',
-        role: '',
-        name: ''
-      },
-      formData: {
-        bizId: '',
-        teamId: '',
-        role: '',
-        email: '',
-        name: ''
-
-      },
-      serviceDataRules: {
-        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
-        bizId: [{ required: true, message: '业务线不能为空', trigger: 'change' }],
-        teamId: [{ required: true, message: '业务线不能为空', trigger: 'change' }],
-        role: [{ required: true, message: '角色不能为空', trigger: 'change' }],
-        email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }]
-      },
-      defaultProps: {
-        children: 'children',
-        label: 'label'
-      },
-      multipleSelection: []
-    }
-  },
-  created() {
-    this.getAllList()
-  },
-
-  methods: {
-    updateDetailDialog(type) {
-      if (type === operateType.OPER_ADD) {
-        this.Determine = true
-        this.hide = false
-      } else if (type === operateType.OPER_EDIT) {
-        this.hide = true
-        this.Determine = true
-      } else if (type === operateType.OPER_QUERY) {
-        this.hide = true
-        this.Determine = false
-      }
-    },
-    handleSizeChange(size) {
-      this.pageSize = size
-      this.getAllList({
-        pageSize: this.pageSize,
-        curIndex: this.curIndex
-      })
-    },
-    handleCurrentChange(curIndex) {
-      this.curIndex = curIndex
-      this.getAllList({
-        pageSize: this.pageSize,
-        curIndex: this.curIndex
-      })
-    },
-    submitForm(formName) {
-      this.$refs[formName].validate(valid => {
-        if (valid) {
-          alert('submit!')
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    },
-    resetForm(formName) {
-      this.$refs[formName].resetFields()
-    },
-
-    // 全部列表
-    getAllList() {
-      var indexPage = {
-        pageSize: this.pageSize,
-        curIndex: this.curIndex
-      }
-      getMemberList(indexPage).then(res => {
-        this.list = res.data
-        for (var a of this.list) {
-          var b = a.teamId
-          for (var c of this.bizOptions) {
-            b === c ? b = c.label : ''
-          }
-        }
-        this.total = res.total
-      })
-    },
-
-    // 查看成员详情
-    queryData(vel) {
-      this.titleName = '查看详情'
-      this.MemberData = vel
-      this.updateDetailDialog(3)
-    },
-
-    // 查询
-    queryList(val) {
-      console.log(val)
-      getMemberList(val).then(res => {
-        this.list = res.data
-        // this.form = {}
-      })
-    },
-
-    deleteCodeData(e) {
-      this.$confirm('确定删除吗?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.handleDelete(e)
-        this.$message({ type: 'success', message: '删除成功!' })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取消删除'
-        })
-      })
-    },
-
-    // 删除
-    handleDelete(e) {
-      this.userData = { id: '', ename: this.userInformation, name: this.userNames }
-      deleteMembers(e.id, this.userData).then(response => {
-        if (response.code === 200) {
-          this.getAllList()
-          // this.queryList({ 'teamId': e.teamId })
-          this.successFun()
-        } else {
-          this.errorFun(response.msg)
-        }
-      })
-    },
-
-    // 编辑
-    changeData(vel) {
-      console.log(vel)
-      this.titleName = '编辑'
-      this.MemberData = vel
-      this.updateDetailDialog(2)
-    },
-
-    updateData(vel) {
-      if (vel === this.MemberData) {
-        this.bizData = {
-          name: vel.name,
-          id: vel.id,
-          role: vel.role,
-          email: vel.email,
-          teamId: vel.bizId,
-          bizId: vel.bizId
-        }
-      } else {
-        this.bizData = vel
-        this.bizData.name = vel.name
-        this.bizData.role = vel.role
-        this.bizData.email = vel.email
-        this.bizData.teamId = vel.teamId
-        this.bizData.bizId = vel.bizId
-      }
-      this.userData = { id: '', ename: this.userInformation, name: this.userNames }
-      this.objData = { teamMembersInfo: this.bizData, user: this.userData }
-      updateMembers(this.objData).then(response => {
-        if (response.code === 200) {
-          this.dialogFormVisible = false
-          this.successFun()
-          this.getAllList()
-        } else {
-          this.errorFun()
-        }
-      })
-    },
-    // 新增需提示选择目录
-    createGetShow() {
-      this.titleName = '新增'
-      if (this.startId === '') {
-        this.$notify({ title: '提示', message: '请选择目录', duration: 2000 })
-      } else {
-        this.MemberData = {}
-        this.dialogFormVisible = true
-        this.$nextTick(() => {
-          this.$refs['MemberData'].clearValidate()
-        })
-        this.updateDetailDialog(1)
-      }
-    },
-    clickFun(e) {
-      console.log(e)
-      this.startId = e.value
-      this.startName = e.label
-      getMemberList({ teamId: e.value }).then(res => {
-        this.list = res.data
-      })
-    },
-
-    clickClose() {
-      this.startId = ''
-    },
-
-    // 新增
-    createMembers(vel) {
-      this.$refs['MemberData'].validate((valid) => {
-        if (valid) {
-          if (vel !== '') {
-            this.bizData = {
-              name: vel.name,
-              id: vel.id,
-              role: vel.role,
-              email: vel.email,
-              teamId: this.startId,
-              bizId: vel.bizId
-            }
-          }
-          this.userData = { id: '', ename: this.userInformation, name: this.userNames }
-          this.objData = { teamMembersInfo: this.bizData, user: this.userData }
-          createMembers(this.objData).then(response => {
-            if (response.code === 200) {
-              this.dialogFormVisible = false
-              this.successFun()
-              this.getAllList()
-            } else {
-              this.errorFun()
-            }
-          })
-        } else {
-          return false
-        }
-      })
-    },
-
-    successFun() {
-      this.$notify({ title: 'Success', message: 'Created Successfully', type: 'success', duration: 5000 })
-    },
-    errorFun() {
-      this.$notify({ title: 'Failed', message: 'Created Failed', type: 'error', duration: 5000 })
-    }
-  }}
-
-</script>
-
-<style>
-.headerStyle {
-  margin: 10px;
-}
-</style>

src/views/virtualDevices/HTvehicle.vue

@@ -1,76 +1,81 @@
-<template style="height=0px;improtanent">
-  <div class="app-container">
-    <el-header style="height: auto;!improtant">
-      <div class="filter-container" style="padding-bottom: 20px;!improtant">
-        <div style="font-size:13px" color="#333B4A">
-          车辆ID<el-input v-model="listQuery.vehicleId" placeholder="请填写" style="width: 130px;" class="filter-item" /> &nbsp;
-          锁ID <el-input v-model="listQuery.lockNo" placeholder="请填写" style="width: 130px;" class="filter-item" />&nbsp;
-          锁类型 <el-select v-model="listQuery.lockModel" placeholder="请填写" style="width: 130px;" class="filter-item" filterable clearable @change="getDataType(listQuery.lockModel)">
+<template>
+  <div class="set-background">
+    <div class="block">
+      <el-form :model="listQuery">
+        <div class="set-head">
+          车辆ID<el-input v-model="listQuery.vehicleId" placeholder="请填写" style="width:18%;" /> &nbsp;
+          锁ID <el-input v-model="listQuery.lockNo" placeholder="请填写" style="width:18%;" />&nbsp;
+          锁类型 <el-select v-model="listQuery.lockModel" placeholder="请填写" style="width:18%;" filterable clearable>
             <el-option v-for="item in lockModelList" :key="item.model" :label="item.modelName" :value="item.model" />
           </el-select>&nbsp;
-          状态 <el-select v-model="listQuery.lockStatus" placeholder="请填写" style="width: 130px;" class="filter-item" filterable clearable>
+          状态 <el-select v-model="listQuery.lockStatus" placeholder="请填写" style="width: 18%;" filterable clearable>
             <el-option v-for="item in lockStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>&nbsp;
-
-          <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getDevicesList(listQuery)">搜索</el-button>
-          <el-button class="filter-item" style="margin-left: 1px;" type="primary" icon="el-icon-edit" @click="dialogFormVisible = true, createdCode()">新增</el-button>
         </div>
+        <div class="set-between">
+          <el-button type="primary" icon="el-icon-search" @click="getDevicesList(listQuery)">搜索</el-button>
+          <el-button type="primary" icon="el-icon-edit" @click="dialogFormVisible = true, createdCode()">新增</el-button>
+        </div>
+      </el-form>
+      <div class="set-locate">
+        <el-table :key="tableKey" :data="list" fit highlight-current-row style="width: 100%;" border :header-cell-style="{background:'#F0F7FF',color:'#606266'}">
+          <el-table-column label="车辆ID" prop="vehicleId" align="center" min-width="120">
+            <template slot-scope="scope"><a href="javascript:void(0)" style="color:#20a0ff" @click="dialogDetailVisible = true,deviceDetails(scope.row)">{{ scope.row.vehicleId }}</a></template>
+          </el-table-column>
+          <!-- <el-table-column label="锁ID" min-width="100px" align="center">
+            <template slot-scope="scope"><span>{{ scope.row.lockNo }}</span></template>
+          </el-table-column> -->
+          <el-table-column label="锁ID" prop="lockNo" min-width="100px" align="center" />
+          <el-table-column label="锁类型" min-width="80px" align="center">
+            <template slot-scope="scope"><span>{{ scope.row.lockModelInfo.modelName }}</span></template>
+          </el-table-column>
+
+          <el-table-column label="在线状态" class-name="status-col" min-width="100">
+            <template slot-scope="{row}"><el-tag :type="row.isOnline | statusFilter">{{ statusMaps.get(row.isOnline) }}</el-tag></template>
+          </el-table-column>
+          <el-table-column label="锁状态" class-name="status-col" min-width="100px">
+            <template slot-scope="{row}"><el-tag :type="row.lockStatus | statusFilter">{{ lockStatusMaps.get(row.lockStatus) }}</el-tag></template>
+          </el-table-column>
+          <el-table-column label="经度" min-width="80px" align="center">
+            <template slot-scope="scope"><span>{{ scope.row.deviceLng }}</span></template>
+          </el-table-column>
+          <el-table-column label="纬度" min-width="80px" align="center">
+            <template slot-scope="scope"><span>{{ scope.row.deviceLat }}</span></template>
+          </el-table-column>
+          <el-table-column label="创建时间" min-width="120px" align="center">
+            <template slot-scope="scope"><span>{{ scope.row.createTime }}</span></template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" min-width="300px" class-name="small-padding fixed-width" fixed="right">
+            <template slot-scope="{row}">
+              <el-button v-if="row.isOnline!=1" size="mini" type="success" @click="handleDeviceStatus(row, 1)">上线</el-button>
+              <el-button v-if="row.isOnline!=0" size="mini" type="danger" @click="handleDeviceStatus(row, 0)">下线</el-button>
+              <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
+              <el-button type="danger" size="mini" @click="deleteCodeData(row)">删除</el-button>
+              <el-button v-if="row.lockStatus!=0" size="mini" type="info" @click="handleLockStatus(row, 0)">关锁</el-button>
+              <el-button v-if="row.lockStatus!=1" size="mini" type="warning" @click="handleLockStatus(row, 1)">开锁</el-button>
+              <!-- <i v-if="row.lockStatus!=0" style="font-size: 25px;" class="el-icon-unlock" @click="handleLockStatus(row, 0)" />
+              <i v-if="row.lockStatus!=1" style="font-size: 25px;" class="el-icon-lock" @click="handleLockStatus(row, 1)" /> -->
+
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination
+          align="center"
+          background
+          layout="prev, pager, next"
+          :total="1000"
+        />
       </div>
-    </el-header>
-
-    <el-table :key="tableKey" :data="list" fit highlight-current-row style="width: 100%;" border :header-cell-style="{background:'#F0F7FF',color:'#606266'}">
-      <el-table-column label="车辆ID" prop="vehicleId" align="center" min-width="100">
-        <template slot-scope="scope"><a href="javascript:void(0)" style="color:#20a0ff" @click="dialogDetailVisible = true,deviceDetails(scope.row)(scope.row.vehicleId)">{{ scope.row.vehicleId }}</a></template>
-      </el-table-column>
-      <el-table-column label="锁ID" min-width="100px" align="center">
-        <template slot-scope="scope"><span>{{ scope.row.lockNo }}</span></template>
-      </el-table-column>
-      <el-table-column label="锁类型" min-width="80px" align="center">
-        <template slot-scope="scope"><span>{{ scope.row.lockModelInfo.modelName }}</span></template>
-      </el-table-column>
-
-      <el-table-column label="在线状态" class-name="status-col" min-width="100">
-        <template slot-scope="{row}"><el-tag :type="row.isOnline | statusFilter">{{ statusMaps.get(row.isOnline) }}</el-tag></template>
-      </el-table-column>
-      <el-table-column label="锁状态" class-name="status-col" min-width="100px">
-        <template slot-scope="{row}"><el-tag :type="row.lockStatus | statusFilter">{{ lockStatusMaps.get(row.lockStatus) }}</el-tag></template>
-      </el-table-column>
-      <el-table-column label="经度" min-width="80px" align="center">
-        <template slot-scope="scope"><span>{{ scope.row.deviceLng }}</span></template>
-      </el-table-column>
-      <el-table-column label="纬度" min-width="80px" align="center">
-        <template slot-scope="scope"><span>{{ scope.row.deviceLat }}</span></template>
-      </el-table-column>
-      <el-table-column label="创建时间" min-width="120px" align="center">
-        <template slot-scope="scope"><span>{{ scope.row.createTime }}</span></template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" min-width="250px" class-name="small-padding fixed-width" fixed="right">
-        <template slot-scope="{row}">
-
-          <el-button v-if="row.isOnline!=1" size="mini" type="success" @click="handleDeviceStatus(row, 1)">上线</el-button>
-          <el-button v-if="row.isOnline!=0" size="mini" type="danger" @click="handleDeviceStatus(row, 0)">下线</el-button>
-          <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
-          <el-button type="danger" size="mini" @click="deleteCodeData(row)">删除</el-button>
-          <i v-if="row.lockStatus!=0" style="font-size: 20px;" class="el-icon-unlock" @click="handleLockStatus(row, 0)" />
-          <i v-if="row.lockStatus!=1" style="font-size: 20px;" class="el-icon-lock" @click="handleLockStatus(row, 1)" />
-
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-pagination
-      align="center"
-      background
-      layout="prev, pager, next"
-      :total="1000"
-    />
-    <!-- <pagination v-show="total>0" :total="listQuery.length" :page.sync="this.curIndex" :limit.sync="this.pageSize" @pagination="getMyDevicesList" /> -->
+    </div>
+
     <!-- 新增 -->
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="75%">
-      <el-form ref="addDeviceForms" :rules="addDeviceDataRules" :model="addDeviceData" label-position="left" label-width="80px" style="width: 250px; margin-left:80px;">
-        <div class="set-font" style="display:flex;justfy-content:space-between">
-          <div style="margin-left: 20%;">
+      <el-form ref="addDeviceForms" :rules="addDeviceDataRules" :model="addDeviceData" label-position="left" label-width="80px" style="width: 100%; margin-left:0px; margin-top:25px">
+        <div class="set-font" style="display:flex;justfy-content:space-between" width="100%">
+          <div style="margin-left: 14%;">
             <el-form-item label="业务线" prop="bizType">
-              <el-input v-model="addDeviceData.bizType" :disabled="true" style="width:200px;" placeholder="单车" />
+              <el-input v-model="addDeviceData.bizType" :disabled="true" style="width:100%;" placeholder="单车" />
             </el-form-item>
 
             <el-form-item label="锁类型" prop="lockModel">
@@ -85,9 +90,9 @@
               </el-select>
             </el-form-item>
           </div>
-          <div style="margin-left: 30%;">
+          <div style="margin-left: 10%;">
             <el-form-item label="车辆个数" prop="deviceNum">
-              <el-input v-model="addDeviceData.deviceNum" style="width:200px;" placeholder="请填写" />
+              <el-input v-model="addDeviceData.deviceNum" style="width:100%;" placeholder="请填写" />
             </el-form-item>
 
             <el-form-item label="车供应商" style="flex-grow:1" prop="bikeSupplier">
@@ -112,8 +117,8 @@
     </el-dialog>
     <!-- 查看详情 -->
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogDetailVisible" width="73%">
-      <el-form ref="serviceDataForms" :rules="serviceDataRules" :model="detailData" label-position="left" label-width="110px" style="width: 200px; margin-left:66px;">
-        <div class="set-font" style="display:flex;justfy-content:space-between">
+      <el-form ref="serviceDataForms" :rules="serviceDataRules" :model="detailData" label-width="70px" style="width: 100%; margin-left:80px;">
+        <!-- <div class="set-font" style="display:flex;justfy-content:space-between">
           <div style="margin-left: 20%;">
             <el-form-item label="业务线" prop="bizType">
               <el-input v-model="detailData.bizType" :disabled="true" style="width:200px;" placeholder="单车" />
@@ -158,7 +163,50 @@
             </el-form-item>
 
           </div>
+        </div> -->
+        <!-- <div class="set-font" style="width:100%"> -->
+        <div class="table-th" style="width:82%;margin-top=15px">
+          <table cellspacing="0" width="103%;" bordercolor="#ddd" class="border-color">
+            <tr width="100%">
+              <th width="12%" height="40" style="background-color:#F1F4F7;">业务线</th>
+              <td width="15%">单车</td>
+              <th width="10%" style="background-color:#F1F4F7">锁ID</th>
+              <td width="15%"> {{ detailData.lockNo }}</td>
+            </tr>
+            <tr>
+              <th width="12%" height="40" style="background-color:#F1F4F7">经度</th>
+              <td>{{ detailData.deviceLng }}</td>
+              <th style="background-color:#F1F4F7">纬度 </th>
+              <td> {{ detailData.deviceLat }}</td>
+            </tr>
+            <tr>
+              <th width="12%" height="40" style="background-color:#F1F4F7">锁状态</th>
+              <td>{{ detailData.lockStatus }}</td>
+              <th style="background-color:#F1F4F7">车辆ID </th>
+              <td> {{ detailData.vehicleId }}</td>
+            </tr>
+            <tr>
+              <th height="40" style="background-color:#F1F4F7">EcuID</th>
+              <td>  {{ detailData.deviceId }}</td>
+              <th style="background-color:#F1F4F7">IccID</th>
+              <td> {{ detailData.iccid }}</td>
+            </tr>
+            <tr>
+              <th height="40" style="background-color:#F1F4F7">电量信息</th>
+              <td> {{ detailData.lockBatteryLevel }}</td>
+              <th style="background-color:#F1F4F7">Mac地址</th>
+              <td> {{ detailData.macAddr }}</td>
+            </tr>
+            <tr>
+              <th style="background-color:#F1F4F7">bluetooth_key</th>
+              <td> {{ detailData.bluetoothKey }}</td>
+              <th height="40" style="background-color:#F1F4F7">bluetoothPassword</th>
+              <td> {{ detailData.bluetoothPassword }}</td>
+            </tr>
+          </table>
         </div>
+        <!-- </div> -->
+
       </el-form>
       <br><br><br>
       <div slot="footer" class="dialog-footer">
@@ -167,56 +215,57 @@
       </div>
     </el-dialog>
     <!--  编辑 -->
-    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogUpdateVisible" width="75%">
-      <el-form ref="serviceDataForms" :rules="serviceDataRules" :model="serviceData" label-position="left" label-width="80px" style="width: 250px; margin-left:80px;">
-        <div class="set-font">
-          <div class="block">
-            <div style="display:flex;justify-content:space-between">
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogUpdateVisible" width="75%" class="setPercent">
+      <el-form ref="serviceDataForms" :rules="serviceDataRules" :model="serviceData" label-position="left" label-width="70px" style="width: 100%; margin-left:80px;">
+        <div class="set-font" style="width:100%">
+          <div class="block-edit">
+            <div style="display:flex;justify-content:space-between;width:92%">
               <el-form-item label="经度" prop="deviceLat">
-                <el-input v-model="serviceData.deviceLat" style="width:200px;" placeholder="单车" />
+                <el-input v-model="serviceData.deviceLat" style="width:100%;" placeholder="单车" />
               </el-form-item>
               <el-form-item label="电量" prop="lockBatteryLevel">
-                <el-input v-model="serviceData.lockBatteryLevel" style="width:200px;" placeholder="请填写" />
+                <el-input v-model="serviceData.lockBatteryLevel" style="width:100%;" placeholder="请填写" />
+              </el-form-item>
+            </div>
+            <div style="display:flex;justify-content:space-between;width:92%">
+              <el-form-item label="纬度" prop="deviceLng">
+                <el-input v-model="serviceData.deviceLng" style="width:100%;" placeholder="请填写" />
               </el-form-item>
             </div>
-            <el-form-item label="纬度" prop="deviceLng">
-              <el-input v-model="serviceData.deviceLng" style="width:200px;" placeholder="请填写" />
-            </el-form-item>
           </div>
-          <div class="block">
-            <el-form-item label="业务线" prop="bizType">
-              <el-input v-model="serviceData.bizType" :disabled="true" style="width:200px;" placeholder="无" />
-            </el-form-item>
-            <el-form-item label="锁ID" prop="lockNo">
-              <el-input v-model="serviceData.lockNo" :disabled="true" style="width:200px;" placeholder="无" />
-            </el-form-item>
-            <el-form-item label="锁状态" prop="lockStatus">
-              <el-input v-model="serviceData.lockStatus" :disabled="true" style="width:200px;" placeholder="无" />
-            </el-form-item>
-            <el-form-item label="车辆ID" prop="vehicleId">
-              <el-input v-model="serviceData.vehicleId" :disabled="true" style="width:200px;" placeholder="无" />
-            </el-form-item>
-            <!-- <el-form-item label="锁供应商" prop="returnDataTypeStr">
-              <el-input v-model="serviceData.customName" :disabled="true" style="width:200px;" placeholder="单车" />
-            </el-form-item>
-            <el-form-item label="车辆供应商" prop="returnDataTypeStr">
-              <el-input v-model="serviceData.customName" :disabled="true" style="width:200px;" placeholder="单车" />
-            </el-form-item> -->
-            <el-form-item label="EcuID" prop="deviceId">
-              <el-input v-model="serviceData.deviceId" :disabled="true" style="width:200px;" placeholder="无" />
-            </el-form-item>
-            <el-form-item label="IccID" prop="iccid">
-              <el-input v-model="serviceData.iccid" :disabled="true" style="width:200px;" placeholder="无" />
-            </el-form-item>
-            <el-form-item label="Mac地址" prop="macAddr">
-              <el-input v-model="serviceData.macAddr" :disabled="true" style="width:200px;" placeholder="无" />
-            </el-form-item>
-            <el-form-item label="bluetooth_key" prop="bluetoothKey">
-              <el-input v-model="serviceData.bluetoothKey" :disabled="true" style="width:200px;" placeholder="无" />
-            </el-form-item>
-            <el-form-item label="bluetooth_password" prop="bluetoothPassword">
-              <el-input v-model="serviceData.bluetoothPassword" :disabled="true" style="width:200px;" placeholder="无" />
-            </el-form-item>
+          <div class="block-edit table-th" style="width:82%">
+            <table cellspacing="0" width="103%;" bordercolor="#ddd" class="border-color">
+              <tr width="100%">
+                <th width="12%" height="40" style="background-color:#F1F4F7;">业务线</th>
+                <td width="15%">单车</td>
+                <th width="10%" style="background-color:#F1F4F7">锁ID</th>
+                <td width="15%"> {{ serviceData.lockNo }}</td>
+              </tr>
+              <tr>
+                <th width="12%" height="40" style="background-color:#F1F4F7">锁状态</th>
+                <td>{{ serviceData.lockStatus }}</td>
+                <th style="background-color:#F1F4F7">车辆ID </th>
+                <td> {{ serviceData.vehicleId }}</td>
+              </tr>
+              <tr>
+                <th height="40" style="background-color:#F1F4F7">EcuID</th>
+                <td>  {{ serviceData.deviceId }}</td>
+                <th style="background-color:#F1F4F7">IccID</th>
+                <td> {{ serviceData.iccid }}</td>
+              </tr>
+              <tr>
+                <th height="40" style="background-color:#F1F4F7">Mac地址</th>
+                <td> {{ serviceData.macAddr }}</td>
+                <th style="background-color:#F1F4F7">bluetooth_key</th>
+                <td> {{ serviceData.bluetoothKey }}</td>
+              </tr>
+              <tr>
+                <th height="40" style="background-color:#F1F4F7">bluetooth_password</th>
+                <td> {{ serviceData.bluetoothPassword }}</td>
+                <th style="background-color:#F1F4F7" />
+                <td />
+              </tr>
+            </table>
           </div>
         </div>
       </el-form>
@@ -228,20 +277,19 @@
     </el-dialog>
 
   </div>
-  <!-- changeCopy, -->
 </template>
 
 <script>
-import { queryLockCreateInfo, queryVehicleCreateInfo, createDevice, deleteDevice, deviceOnline, deviceOffline, unlockVehicle, lockVehicle, updateLockAttr, getDevices, getLockAttrInfo } from '@/api/htVehicle'
+import { queryLockCreateInfo, queryVehicleCreateInfo, createDevice, deleteDevice, deviceOnline, deviceOffline, unlockVehicle, lockVehicle, updateLockAttr, getDevices } from '@/api/htVehicle'
 import waves from '@/directive/waves' // waves directive
 import { parseTime } from '@/utils'
-import Pagination from '@/components/Pagination' // secondary package based on el-pagination
+// import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 
 var envSelections = []
 var consumerSelections = []
 
 export default {
-  name: 'Httpmock',
+  name: 'HTvehicle',
   // components: { Pagination },
   directives: { waves },
   filters: {
@@ -261,30 +309,23 @@ export default {
       dialogDetailVisible: false,
       dialogUpdateVisible: false,
       shouldShow: false,
-
       total: 0,
       num: '',
       tableKey: 0,
       list: null,
       curIndex: 1,
       pageSize: 10,
-
-      statusMaps: new Map([[1, '已开启'], [0, '未开启']]),
+      statusMaps: new Map([[1, '在线'], [0, '下线']]),
       lockStatusMaps: new Map([[1, '已开锁'], [0, '已关锁']]),
-      statusOperateMap: new Map([[1, '开启'], [0, '关闭']]),
-      options: [{ value: '', label: '全部显示' }, { value: '1', label: '已开启' }, { value: '0', label: '未开启' }],
+      statusOperateMaps: new Map([[1, '在线'], [0, '离线']]),
+      options: [{ value: '', label: '全部显示' }, { value: '1', label: '在线' }, { value: '0', label: '离线' }],
       bizType: [{ value: '1', label: '电单车' }, { value: '2', label: '单车' }],
       lockStatusOptions: [{ value: '1', label: '已开锁' }, { value: '2', label: '已关锁' }],
       lockModelList: [],
       lockSupplierList: [],
       bikeModelList: [],
       bikeSupplierList: [],
-      listQuery: {
-        // lockModel: '',
-        // bikeModel: '',
-        // vehicleId: '',
-        // lockNo: ''
-      },
+      listQuery: {},
       textMap: {
         update: '编辑',
         create: '新增',
@@ -296,23 +337,11 @@ export default {
       importanceOptions: [1, 2, 3],
       envSelectDataType: '',
       envSelections,
-      methodProtocol: 'http',
       consumerSelections,
       sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
       statusOptions: ['published', 'draft', 'deleted'],
       showReviewer: false,
       showSubmitBtn: true,
-      // temp: {
-      //   id: undefined,
-      //   importance: 1,
-      //   actualUrl: '',
-      //   creator: '',
-      //   mockUrl: '',
-      //   timestamp: new Date(),
-      //   title: '',
-      //   type: '',
-      //   status: 'published'
-      // },
       addDeviceData: {
         bizType: '单车',
         lockModel: '',
@@ -418,7 +447,6 @@ export default {
       this.serviceData = vel
       this.dialogUpdateVisible = true
     },
-
     updateData(vel) {
       if (vel === this.serviceData) {
         this.bizData = {
@@ -460,7 +488,6 @@ export default {
         type: 'warning'
       }).then(() => {
         this.handleDelete(e)
-        // this.$message({ type: 'success', message: '删除成功!' })
       }).catch(() => {
         this.$message({
           type: 'info',
@@ -470,41 +497,38 @@ export default {
     },
 
     handleDelete(row) {
-      var deleteData = { 'vehicleId': row.vehicleId }
-      deleteDevice(deleteData).then(response => {
+      // var deleteData = { 'vehicleId': row.vehicleId }
+      deleteDevice(row.vehicleId).then(response => {
         if (response.code === 200) {
           this.getMyDevicesList()
           this.$notify({ title: 'Success', message: response.msg, type: 'success', duration: 3000 })
         } else {
+          this.getMyDevicesList()
           this.$notify({ title: 'Failed', message: response.msg, type: 'error', duration: 3000 })
         }
       })
     },
 
-    handleFilter() {
-      // this.getList()
-    },
-
     // 设备上线、下线调用
     handleDeviceStatus(row, isOnline) {
-      var statusData = { 'lockNo': row.lockNo }
+      // var statusData = { 'lockNo': row.lockNo }
       if (isOnline === 1) {
-        deviceOnline(statusData).then(response => {
+        deviceOnline(row.lockNo).then(response => {
           if (response.code === 200) {
             row.isOnline = isOnline
-            this.$message({ message: row.lockNo.toString() + ' ' + this.statusOperateMap.get(isOnline) + '成功！', type: 'success' })
+            this.$message({ message: '锁ID:' + row.lockNo.toString() + ' ' + this.statusOperateMaps.get(isOnline) + '成功！', type: 'success' })
           } else {
-            this.$message({ message: row.lockNo.toString() + ' ' + this.statusOperateMap.get(isOnline) + '失败！', type: 'danger' })
+            this.$message({ message: '锁ID:' + row.lockNo.toString() + ' ' + this.statusOperateMaps.get(isOnline) + '失败！', type: 'danger' })
           }
         })
       }
       if (isOnline === 0) {
-        deviceOffline(statusData).then(response => {
+        deviceOffline(row.lockNo).then(response => {
           if (response.code === 200) {
             row.isOnline = isOnline
-            this.$message({ message: row.lockNo.toString() + ' ' + this.statusOperateMap.get(isOnline) + '成功！', type: 'success' })
+            this.$message({ message: '锁ID:' + row.lockNo.toString() + ' ' + this.statusOperateMaps.get(isOnline) + '成功！', type: 'success' })
           } else {
-            this.$message({ message: row.lockNo.toString() + ' ' + this.statusOperateMap.get(isOnline) + '失败！', type: 'danger' })
+            this.$message({ message: '锁ID:' + row.lockNo.toString() + ' ' + this.statusOperateMaps.get(isOnline) + '失败！', type: 'danger' })
           }
         })
       }
@@ -512,25 +536,23 @@ export default {
 
     // 点击锁开启，关闭时调用
     handleLockStatus(row, lockStatus) {
-      var lockStatusData = { 'lockNo': row.lockNo }
-      var vehicleStatusData = { 'vehicleId': row.vehicleId }
       if (lockStatus === 1) {
-        unlockVehicle(lockStatusData).then(response => {
+        unlockVehicle(row.lockNo).then(response => {
           if (response.code === 200) {
             row.lockStatus = lockStatus
-            this.$message({ message: row.lockNo.toString() + ' ' + this.statusOperateMap.get(lockStatus) + '成功！', type: 'success' })
+            this.$message({ message: '锁ID:' + row.lockNo.toString() + ' ' + this.lockStatusMaps.get(lockStatus) + '成功！', type: 'success' })
           } else {
-            this.$message({ message: row.lockNo.toString() + ' ' + this.statusOperateMap.get(lockStatus) + '失败！', type: 'danger' })
+            this.$message({ message: '锁ID:' + row.lockNo.toString() + ' ' + this.lockStatusMaps.get(lockStatus) + '失败！', type: 'danger' })
           }
         })
       }
       if (lockStatus === 0) {
-        lockVehicle(vehicleStatusData).then(response => {
+        lockVehicle(row.vehicleId).then(response => {
           if (response.code === 200) {
             row.lockStatus = lockStatus
-            this.$message({ message: row.lockNo.toString() + ' ' + this.statusOperateMap.get(lockStatus) + '成功！', type: 'success' })
+            this.$message({ message: '锁ID:' + row.lockNo.toString() + ' ' + this.lockStatusMaps.get(lockStatus) + '成功！', type: 'success' })
           } else {
-            this.$message({ message: row.lockNo.toString() + ' ' + this.statusOperateMap.get(lockStatus) + '失败！', type: 'danger' })
+            this.$message({ message: '锁ID:' + row.lockNo.toString() + ' ' + this.lockStatusMaps.get(lockStatus) + '失败！', type: 'danger' })
           }
         })
       }
@@ -542,14 +564,14 @@ export default {
         if (valid) {
           this.addDeviceData = ele
           this.addDeviceData.bizType = 2
-          console.log(this.userData)
           this.userData = { id: '', ename: this.userInformation, name: this.userNames }
           this.objData = { htwDeviceInfo: this.addDeviceData, user: this.userData }
           createDevice(this.objData).then(response => {
+            console.log(response)
             if (response.code === 200) {
-              this.dialogFormVisible = false
-              // this.getList()
+              this.getMyDevicesList()
               this.$notify({ title: 'Success', message: response.msg, type: 'success', duration: 3000 })
+              this.dialogFormVisible = false
             } else {
               this.$notify({ title: 'Failed', message: response.msg, type: 'error', duration: 3000 })
             }
@@ -558,58 +580,6 @@ export default {
       })
     },
 
-    // 查看
-    handleCheck(row) {
-      // this.shouldShow = true
-      // this.serviceData = row
-
-      // this.dialogStatus = 'update'
-      // this.dialogFormVisible = true
-      // this.showSubmitBtn = false
-
-    },
-    // 复制
-    handleCopy(row) {
-      this.serviceData = row
-      // var queryData = { id: row.id }
-      this.shouldShow = false
-
-      this.dialogStatus = 'create'
-      this.dialogFormVisible = true
-      this.showSubmitBtn = true
-      // this.$nextTick(() => {
-      //   this.$refs['serviceDataForms'].clearValidate()
-      // })
-      // })
-    },
-    qq(ele) {
-      // this.$refs['serviceDataForms'].validate((valid) => {
-      //   if (valid) {
-      //     console.log(ele)
-      //     const tempData = {
-      //       id: this.serviceData.id,
-      //       customName: this.serviceData.customName,
-      //       url: this.serviceData.url,
-      //       envChannel: this.serviceData.envChannel,
-      //       method: ele.method,
-      //       actualUrl: this.serviceData.actualUrl,
-      //       status: this.serviceData.status,
-      //       creator: this.serviceData.creator,
-      //       returnDataType: ele.returnDataTypeStr,
-      //       mockUrl: this.serviceData.mockUrl
-      //     }
-      //     updateService(tempData).then(response => {
-      //       if (response.code === 200) {
-      //         this.dialogFormVisible = false
-      //         this.getList()
-      //         this.$notify({ title: 'Success', message: response.msg, type: 'success', duration: 2000 })
-      //       } else {
-      //         this.$notify({ title: 'Failed', message: response.msg, type: 'error', duration: 2000 })
-      //       }
-      //     })
-      //   }
-      // })
-    },
     formatJson(filterVal, jsonData) {
       return jsonData.map(v => filterVal.map(j => {
         if (j === 'timestamp') {
@@ -628,48 +598,83 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.showInfo {
-  width: 400px;
-  height: 400px;
-  text-align: center;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%,-50%);
-}
-.showZm {
-  position:absolute;
-  background-color: #ccc;
-  width: 100%;
-  height: 100%;
-  opacity: 0.5;
-}
-.showBtn {
-  color: red;
-  padding-left: 200px;
-}
-.filter-item {
-  margin-top: 10px;
-}
-.box {
-    flex-direction: column ;
-}
-</style>
-
 <style lang="stylus" scoped>
-  .app-container >>> .el-dialog
-    background-color #F2F3F6
+  .set-background
+    background-color #F1F4F7
+    display flex
+    justify-content center
+    min-width 700px
+    .setPercent >>> .el-dialog__body
+      width 100%
+    .block
+      background-color rgba(255,255,255,1)
+      box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
+      border-radius 7px
+      width 93%
+      margin 25px 0
+      padding 20px
+      min-height calc(100vh - 100px)
+    .block >>> .el-form
+      display flex
+      justify-content space-between
+    .block >>> .el-form-item
+      display flex
+      width 20%
+      margin-right 10px
+    .block >>> .el-select
+      width 13%
+      margin-right 10px
+    .block >>> .el-form-item__content
+      margin-left 0 !important
+    .block >>> th
+      background-color #F0F7FF !important
+    .set-head
+      font-size 13px
+      width 100%
+      color #333B4A
+    // .set-head >>> .el-input
+    //   width 18%
+    .set-between
+      display flex
+    .set-between >>> .el-button
+      height 40px
+    .set-locate
+      margin-top 20px
+      .specail-lock
+        display flex
+        justify-content center
+      .el-icon-lock
+        font-size 20px
+        margin 4px 7px 0 0
+        opacity 0.7
     .set-font >>> .el-input__inner
       color #3e3c3c
     .set-font >>>  .is-disabled input::placeholder
       color #3e3c3c
-    .block
+    .block-edit
       background-color rgba(255,255,255,1)
       box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
       border-radius 7px
       width 59vw
       margin-top 25px
       padding 20px
+    .table-th
+      text-align center
+      .border-color
+        margin-left -12px
+        border-right 0px solid #dcdfe6
+        border-bottom 0px solid #dcdfe6
+        border-left 1px solid #dcdfe6
+        border-top 1px solid #dcdfe6
+      .border-color td
+        border-bottom 1px solid #dcdfe6
+        border-right 1px solid #dcdfe6
+      .border-color th
+        border-bottom 1px solid #dcdfe6
+        border-right 1px solid #dcdfe6
+    .table-th >>> .table
+      border-top 1px solid #999
+      border-left 1px solid #999
+      border-spacing 0
+
 </style>

src/views/virtualDevices/HTvehicle2.vue

@@ -0,0 +1,711 @@
+<template style="height=0px;improtanent">
+  <div class="app-container,set-background">
+    <div class="block">
+      <el-header style="height: auto;!improtant">
+        <div class="filter-container" style="padding-bottom: 20px;!improtant">
+          <div style="font-size:13px" color="#333B4A">
+            车辆ID<el-input v-model="listQuery.vehicleId" placeholder="请填写" style="width: 130px;" class="filter-item" /> &nbsp;
+            锁ID <el-input v-model="listQuery.lockNo" placeholder="请填写" style="width: 130px;" class="filter-item" />&nbsp;
+            锁类型 <el-select v-model="listQuery.lockModel" placeholder="请填写" style="width: 130px;" class="filter-item" filterable clearable @change="getDataType(listQuery.lockModel)">
+              <el-option v-for="item in lockModelList" :key="item.model" :label="item.modelName" :value="item.model" />
+            </el-select>&nbsp;
+            状态 <el-select v-model="listQuery.lockStatus" placeholder="请填写" style="width: 130px;" class="filter-item" filterable clearable>
+              <el-option v-for="item in lockStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>&nbsp;
+
+            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getDevicesList(listQuery)">搜索</el-button>
+            <el-button class="filter-item" style="margin-left: 1px;" type="primary" icon="el-icon-edit" @click="dialogFormVisible = true, createdCode()">新增</el-button>
+          </div>
+        </div>
+      </el-header>
+
+      <el-table :key="tableKey" :data="list" fit highlight-current-row style="width: 100%;" border :header-cell-style="{background:'#F0F7FF',color:'#606266'}">
+        <el-table-column label="车辆ID" prop="vehicleId" align="center" min-width="100">
+          <template slot-scope="scope"><a href="javascript:void(0)" style="color:#20a0ff" @click="dialogDetailVisible = true,deviceDetails(scope.row)(scope.row.vehicleId)">{{ scope.row.vehicleId }}</a></template>
+        </el-table-column>
+        <el-table-column label="锁ID" min-width="100px" align="center">
+          <template slot-scope="scope"><span>{{ scope.row.lockNo }}</span></template>
+        </el-table-column>
+        <el-table-column label="锁类型" min-width="80px" align="center">
+          <template slot-scope="scope"><span>{{ scope.row.lockModelInfo.modelName }}</span></template>
+        </el-table-column>
+
+        <el-table-column label="在线状态" class-name="status-col" min-width="100">
+          <template slot-scope="{row}"><el-tag :type="row.isOnline | statusFilter">{{ statusMaps.get(row.isOnline) }}</el-tag></template>
+        </el-table-column>
+        <el-table-column label="锁状态" class-name="status-col" min-width="100px">
+          <template slot-scope="{row}"><el-tag :type="row.lockStatus | statusFilter">{{ lockStatusMaps.get(row.lockStatus) }}</el-tag></template>
+        </el-table-column>
+        <el-table-column label="经度" min-width="80px" align="center">
+          <template slot-scope="scope"><span>{{ scope.row.deviceLng }}</span></template>
+        </el-table-column>
+        <el-table-column label="纬度" min-width="80px" align="center">
+          <template slot-scope="scope"><span>{{ scope.row.deviceLat }}</span></template>
+        </el-table-column>
+        <el-table-column label="创建时间" min-width="120px" align="center">
+          <template slot-scope="scope"><span>{{ scope.row.createTime }}</span></template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" min-width="250px" class-name="small-padding fixed-width" fixed="right">
+          <template slot-scope="{row}">
+
+            <el-button v-if="row.isOnline!=1" size="mini" type="success" @click="handleDeviceStatus(row, 1)">上线</el-button>
+            <el-button v-if="row.isOnline!=0" size="mini" type="danger" @click="handleDeviceStatus(row, 0)">下线</el-button>
+            <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
+            <el-button type="danger" size="mini" @click="deleteCodeData(row)">删除</el-button>
+            <i v-if="row.lockStatus!=0" style="font-size: 20px;" class="el-icon-unlock" @click="handleLockStatus(row, 0)" />
+            <i v-if="row.lockStatus!=1" style="font-size: 20px;" class="el-icon-lock" @click="handleLockStatus(row, 1)" />
+
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        align="center"
+        background
+        layout="prev, pager, next"
+        :total="1000"
+      />
+      <!-- <pagination v-show="total>0" :total="listQuery.length" :page.sync="this.curIndex" :limit.sync="this.pageSize" @pagination="getMyDevicesList" /> -->
+      <!-- 新增 -->
+      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="75%">
+        <el-form ref="addDeviceForms" :rules="addDeviceDataRules" :model="addDeviceData" label-position="left" label-width="80px" style="width: 250px; margin-left:80px;">
+          <div class="set-font" style="display:flex;justfy-content:space-between">
+            <div style="margin-left: 20%;">
+              <el-form-item label="业务线" prop="bizType">
+                <el-input v-model="addDeviceData.bizType" :disabled="true" style="width:200px;" placeholder="单车" />
+              </el-form-item>
+
+              <el-form-item label="锁类型" prop="lockModel">
+                <el-select v-model="addDeviceData.lockModel" class="filter-item" filterable clearable placeholder="请填写" @change="chooseLockType()">
+                  <el-option v-for="item in lockModelList" :key="item.model" :label="item.modelName" :value="item.model" />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item label="锁供应商" prop="lockSupplier">
+                <el-select v-model="addDeviceData.lockSupplier" :disabled="shouldShow" class="filter-item" filterable clearable placeholder="请填写">
+                  <el-option v-for="item in lockSupplierList" :key="item.supplierId" :label="item.supplierName" :value="item.supplierId" />
+                </el-select>
+              </el-form-item>
+            </div>
+            <div style="margin-left: 30%;">
+              <el-form-item label="车辆个数" prop="deviceNum">
+                <el-input v-model="addDeviceData.deviceNum" style="width:200px;" placeholder="请填写" />
+              </el-form-item>
+
+              <el-form-item label="车供应商" style="flex-grow:1" prop="bikeSupplier">
+                <el-select v-model="addDeviceData.bikeSupplier" class="filter-item" filterable clearable placeholder="请填写">
+                  <el-option v-for="item in bikeSupplierList" :key="item.supplierId" :label="item.supplierName" :value="item.supplierId" />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item label="车辆类型" prop="bikeModel">
+                <el-select v-model="addDeviceData.bikeModel" class="filter-item" filterable clearable placeholder="请填写">
+                  <el-option v-for="item in bikeModelList" :key="item.model" :label="item.modelName" :value="item.model" />
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+        </el-form>
+        <br><br><br>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取消</el-button>
+          <el-button v-if="showSubmitBtn" type="primary" @click="createData(addDeviceData)">确定</el-button>
+        </div>
+      </el-dialog>
+      <!-- 查看详情 -->
+      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogDetailVisible" width="73%">
+        <el-form ref="serviceDataForms" :rules="serviceDataRules" :model="detailData" label-position="left" label-width="110px" style="width: 200px; margin-left:66px;">
+          <div class="set-font" style="display:flex;justfy-content:space-between">
+            <div style="margin-left: 20%;">
+              <el-form-item label="业务线" prop="bizType">
+                <el-input v-model="detailData.bizType" :disabled="true" style="width:200px;" placeholder="单车" />
+              </el-form-item>
+
+              <el-form-item label="锁ID" prop="lockNo">
+                <el-input v-model="detailData.lockNo" :disabled="true" style="width:200px;color:#3e3c3c !important" placeholder="无" />
+              </el-form-item>
+
+              <el-form-item label="车辆ID" prop="vehicleId">
+                <el-input v-model="detailData.vehicleId" :disabled="true" style="width:200px;" placeholder="无" />
+              </el-form-item>
+              <el-form-item label="锁状态" prop="lockStatus">
+                <el-input v-model="detailData.lockStatus" :disabled="true" style="width:200px;" placeholder="无" />
+              </el-form-item>
+              <el-form-item label="经度" prop="deviceLng">
+                <el-input v-model="detailData.deviceLng" :disabled="true" style="width:200px;" placeholder="无" />
+              </el-form-item>
+              <el-form-item label="纬度" prop="deviceLat">
+                <el-input v-model="detailData.deviceLat" :disabled="true" style="width:200px;" placeholder="无" />
+              </el-form-item>
+
+            </div>
+            <div style="margin-left: 30%;">
+              <el-form-item label="EcuID" prop="deviceId">
+                <el-input v-model="detailData.deviceId" :disabled="true" style="width:200px;" placeholder="无" />
+              </el-form-item>
+              <el-form-item label="IccID" prop="iccid">
+                <el-input v-model="detailData.iccid" :disabled="true" style="width:200px;" placeholder="无" />
+              </el-form-item>
+              <el-form-item label="Mac地址" prop="macAddr">
+                <el-input v-model="detailData.macAddr" :disabled="true" style="width:200px;" placeholder="无" />
+              </el-form-item>
+              <el-form-item label="电量信息" prop="lockBatteryLevel">
+                <el-input v-model="detailData.lockBatteryLevel" :disabled="true" style="width:200px;" placeholder="无" />
+              </el-form-item>
+              <el-form-item label="bluetooth_key" prop="bluetoothKey">
+                <el-input v-model="detailData.bluetoothKey" :disabled="true" style="width:200px;" placeholder="无" />
+              </el-form-item>
+              <el-form-item label="bluetooth_password" prop="bluetoothPassword">
+                <el-input v-model="detailData.bluetoothPassword" :disabled="true" style="width:200px;" placeholder="无" />
+              </el-form-item>
+
+            </div>
+          </div>
+        </el-form>
+        <br><br><br>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogDetailVisible = false">关闭</el-button>
+        <!-- <el-button v-if="showSubmitBtn" type="primary">确定</el-button> -->
+        </div>
+      </el-dialog>
+      <!--  编辑 -->
+      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogUpdateVisible" width="75%">
+        <el-form ref="serviceDataForms" :rules="serviceDataRules" :model="serviceData" label-position="left" label-width="80px" style="width: 250px; margin-left:80px;">
+          <div class="set-font">
+            <div class="block">
+              <div style="display:flex;justify-content:space-between">
+                <el-form-item label="经度" prop="deviceLat">
+                  <el-input v-model="serviceData.deviceLat" style="width:200px;" placeholder="单车" />
+                </el-form-item>
+                <el-form-item label="电量" prop="lockBatteryLevel">
+                  <el-input v-model="serviceData.lockBatteryLevel" style="width:200px;" placeholder="请填写" />
+                </el-form-item>
+              </div>
+              <el-form-item label="纬度" prop="deviceLng">
+                <el-input v-model="serviceData.deviceLng" style="width:200px;" placeholder="请填写" />
+              </el-form-item>
+            </div>
+            <div class="block">
+              <el-form-item label="业务线" prop="bizType">
+                <el-input v-model="serviceData.bizType" :disabled="true" style="width:200px;" placeholder="无" />
+              </el-form-item>
+              <el-form-item label="锁ID" prop="lockNo">
+                <el-input v-model="serviceData.lockNo" :disabled="true" style="width:200px;" placeholder="无" />
+              </el-form-item>
+              <el-form-item label="锁状态" prop="lockStatus">
+                <el-input v-model="serviceData.lockStatus" :disabled="true" style="width:200px;" placeholder="无" />
+              </el-form-item>
+              <el-form-item label="车辆ID" prop="vehicleId">
+                <el-input v-model="serviceData.vehicleId" :disabled="true" style="width:200px;" placeholder="无" />
+              </el-form-item>
+              <!-- <el-form-item label="锁供应商" prop="returnDataTypeStr">
+              <el-input v-model="serviceData.customName" :disabled="true" style="width:200px;" placeholder="单车" />
+            </el-form-item>
+            <el-form-item label="车辆供应商" prop="returnDataTypeStr">
+              <el-input v-model="serviceData.customName" :disabled="true" style="width:200px;" placeholder="单车" />
+            </el-form-item> -->
+              <el-form-item label="EcuID" prop="deviceId">
+                <el-input v-model="serviceData.deviceId" :disabled="true" style="width:200px;" placeholder="无" />
+              </el-form-item>
+              <el-form-item label="IccID" prop="iccid">
+                <el-input v-model="serviceData.iccid" :disabled="true" style="width:200px;" placeholder="无" />
+              </el-form-item>
+              <el-form-item label="Mac地址" prop="macAddr">
+                <el-input v-model="serviceData.macAddr" :disabled="true" style="width:200px;" placeholder="无" />
+              </el-form-item>
+              <el-form-item label="bluetooth_key" prop="bluetoothKey">
+                <el-input v-model="serviceData.bluetoothKey" :disabled="true" style="width:200px;" placeholder="无" />
+              </el-form-item>
+              <el-form-item label="bluetooth_password" prop="bluetoothPassword">
+                <el-input v-model="serviceData.bluetoothPassword" :disabled="true" style="width:200px;" placeholder="无" />
+              </el-form-item>
+            </div>
+          </div>
+        </el-form>
+        <br><br><br>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogUpdateVisible = false">取消</el-button>
+          <el-button v-if="showSubmitBtn" type="primary" @click="updateData(serviceData)">确定</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+  <!-- changeCopy, -->
+</template>
+
+<script>
+import { queryLockCreateInfo, queryVehicleCreateInfo, createDevice, deleteDevice, deviceOnline, deviceOffline, unlockVehicle, lockVehicle, updateLockAttr, getDevices, getLockAttrInfo } from '@/api/htVehicle'
+import waves from '@/directive/waves' // waves directive
+import { parseTime } from '@/utils'
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
+
+var envSelections = []
+var consumerSelections = []
+
+export default {
+  name: 'Httpmock',
+  // components: { Pagination },
+  directives: { waves },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        1: 'success',
+        draft: 'info',
+        0: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  data() {
+    return {
+
+      dialogFormVisible: false,
+      dialogDetailVisible: false,
+      dialogUpdateVisible: false,
+      shouldShow: false,
+
+      total: 0,
+      num: '',
+      tableKey: 0,
+      list: null,
+      curIndex: 1,
+      pageSize: 10,
+
+      statusMaps: new Map([[1, '在线'], [0, '离线']]),
+      lockStatusMaps: new Map([[1, '已开锁'], [0, '已关锁']]),
+      statusOperateMap: new Map([[1, '在线'], [0, '离线']]),
+      options: [{ value: '', label: '全部显示' }, { value: '1', label: '在线' }, { value: '0', label: '离线' }],
+      bizType: [{ value: '1', label: '电单车' }, { value: '2', label: '单车' }],
+      lockStatusOptions: [{ value: '1', label: '已开锁' }, { value: '2', label: '已关锁' }],
+      lockModelList: [],
+      lockSupplierList: [],
+      bikeModelList: [],
+      bikeSupplierList: [],
+      listQuery: {
+        // lockModel: '',
+        // bikeModel: '',
+        // vehicleId: '',
+        // lockNo: ''
+      },
+      textMap: {
+        update: '编辑',
+        create: '新增',
+        details: '设备详情'
+      },
+      userInformation: localStorage.getItem('username'),
+      userNames: localStorage.getItem('realname'),
+      userData: '',
+      importanceOptions: [1, 2, 3],
+      envSelectDataType: '',
+      envSelections,
+      methodProtocol: 'http',
+      consumerSelections,
+      sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
+      statusOptions: ['published', 'draft', 'deleted'],
+      showReviewer: false,
+      showSubmitBtn: true,
+      // temp: {
+      //   id: undefined,
+      //   importance: 1,
+      //   actualUrl: '',
+      //   creator: '',
+      //   mockUrl: '',
+      //   timestamp: new Date(),
+      //   title: '',
+      //   type: '',
+      //   status: 'published'
+      // },
+      addDeviceData: {
+        bizType: '单车',
+        lockModel: '',
+        bikeModel: '',
+        deviceNum: '',
+        lockSupplier: '',
+        bikeSupplier: ''
+      },
+      detailData: {
+        bizType: '单车',
+        vehicleId: ''
+
+      },
+      serviceData: {
+        bizType: '单车'
+
+      },
+      serviceDataRules: {},
+      serviceDataExt: {
+        id: 0
+      },
+      dialogStatus: '',
+      listLoading: true,
+      dialogDetails: false,
+
+      dialogPvVisible: false,
+      pvData: [],
+      addDeviceDataRules: {
+        lockModel: [{ required: true, message: '锁类型不能为空', trigger: 'change' }],
+        bikeModel: [{ required: true, message: '车辆类型不能为空', trigger: 'change' }],
+        deviceNum: [{ required: true, message: '车辆个数不能为空', trigger: 'change' }],
+        lockSupplier: [{ required: true, message: '锁供应商不能为空', trigger: 'change' }],
+        bikeSupplier: [{ required: true, message: '车辆供应商不能为空', trigger: 'change' }]
+
+      },
+      downloadLoading: false
+    }
+  },
+  created() {
+    this.getMyDevicesList()
+    this.getLockModelList()
+  },
+  methods: {
+    createdCode() {
+      this.dialogStatus = 'create'
+    },
+    // 查看设备详情
+    deviceDetails(vel) {
+      this.dialogStatus = 'details'
+      console.log('参数：' + vel)
+      this.detailData = vel
+    },
+
+    //  获取锁类型、锁供应商类型
+    getLockModelList() {
+      queryLockCreateInfo().then(response => {
+        // console.log(response.data)
+        this.lockModelList = response.data.modelInfos
+        this.lockSupplierList = response.data.supplierInfos
+      })
+      // queryLockCreateInfo().catch(res => {
+      //   console.log(res)
+      // })
+    },
+
+    // 获取车类型、车供应商
+    chooseLockType() {
+      // console.log(this.addDeviceData.lockModel)
+      queryVehicleCreateInfo(this.addDeviceData.lockModel).then(response => {
+        // console.log(response.data)
+        this.bikeModelList = response.data.modelInfos
+        this.bikeSupplierList = response.data.supplierInfos
+        console.log(this.bikeModelList)
+      })
+    },
+
+    // 搜索
+    getDevicesList(vel) {
+      this.listQuery = vel
+      this.userData = { id: '', ename: this.userInformation, name: this.userNames }
+      this.objData = { deviceQueryInfo: this.listQuery, user: this.userData }
+      getDevices(this.objData).then(response => {
+        this.list = response.data
+        this.total = response.data.total
+      })
+    },
+    // 进首页
+    getMyDevicesList() {
+      this.userData = { id: '', ename: this.userInformation, name: this.userNames }
+      this.objData = { deviceQueryInfo: this.listQuery, user: this.userData }
+      getDevices(this.objData).then(response => {
+        this.list = response.data
+        this.serviceData = response.data
+        this.detailData = response.data
+        this.total = response.data.total
+        console.log(this.detailData)
+      })
+    },
+    // 编辑
+    handleUpdate(vel) {
+      console.log(vel)
+      this.dialogStatus = 'update'
+      this.serviceData = vel
+      this.dialogUpdateVisible = true
+    },
+
+    updateData(vel) {
+      if (vel === this.serviceData) {
+        this.bizData = {
+          lockNo: vel.lockNo,
+          lockBatteryLevel: vel.lockBatteryLevel,
+          deviceLat: vel.deviceLat,
+          deviceLng: vel.deviceLng
+        }
+      } else {
+        this.bizData = vel
+        this.bizData.lockNo = vel.lockNo
+        this.bizData.lockBatteryLevel = vel.lockBatteryLevel
+        this.bizData.deviceLat = vel.deviceLat
+        this.bizData.deviceLng = vel.deviceLng
+      }
+
+      updateLockAttr(this.bizData).then(response => {
+        if (response.code === 200) {
+          this.dialogUpdateVisible = false
+          // this.getList()
+          this.$notify({ title: 'Success', message: response.msg, type: 'success', duration: 3000 })
+        } else {
+          this.$notify({ title: 'Failed', message: response.msg, type: 'error', duration: 3000 })
+        }
+      })
+    },
+    // 删除设备
+    explain() {
+      if (this.showexplain === false) {
+        this.showexplain = true
+      } else {
+        this.showexplain = false
+      }
+    },
+    deleteCodeData(e) {
+      this.$confirm('确定要删除这条车辆信息吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.handleDelete(e)
+        // this.$message({ type: 'success', message: '删除成功!' })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+
+    handleDelete(row) {
+      // var deleteData = { 'vehicleId': row.vehicleId }
+      deleteDevice(row.vehicleId).then(response => {
+        if (response.code === 200) {
+          this.getMyDevicesList()
+          this.$notify({ title: 'Success', message: response.msg, type: 'success', duration: 3000 })
+        } else {
+          this.getMyDevicesList()
+          this.$notify({ title: 'Failed', message: response.msg, type: 'error', duration: 3000 })
+        }
+      })
+    },
+
+    handleFilter() {
+      // this.getList()
+    },
+
+    // 设备上线、下线调用
+    handleDeviceStatus(row, isOnline) {
+      // var statusData = { 'lockNo': row.lockNo }
+      if (isOnline === 1) {
+        deviceOnline(row.lockNo).then(response => {
+          if (response.code === 200) {
+            row.isOnline = isOnline
+            this.$message({ message: row.lockNo.toString() + ' ' + this.statusOperateMap.get(isOnline) + '成功！', type: 'success' })
+          } else {
+            this.$message({ message: row.lockNo.toString() + ' ' + this.statusOperateMap.get(isOnline) + '失败！', type: 'danger' })
+          }
+        })
+      }
+      if (isOnline === 0) {
+        deviceOffline(row.lockNo).then(response => {
+          if (response.code === 200) {
+            row.isOnline = isOnline
+            this.$message({ message: row.lockNo.toString() + ' ' + this.statusOperateMap.get(isOnline) + '成功！', type: 'success' })
+          } else {
+            this.$message({ message: row.lockNo.toString() + ' ' + this.statusOperateMap.get(isOnline) + '失败！', type: 'danger' })
+          }
+        })
+      }
+    },
+
+    // 点击锁开启，关闭时调用
+    handleLockStatus(row, lockStatus) {
+      // var lockStatusData = { 'lockNo': row.lockNo }
+      // var vehicleStatusData = { 'vehicleId': row.vehicleId }
+      if (lockStatus === 1) {
+        unlockVehicle(row.lockNo).then(response => {
+          if (response.code === 200) {
+            row.lockStatus = lockStatus
+            this.$message({ message: row.lockNo.toString() + ' ' + this.statusOperateMap.get(lockStatus) + '成功！', type: 'success' })
+          } else {
+            this.$message({ message: row.lockNo.toString() + ' ' + this.statusOperateMap.get(lockStatus) + '失败！', type: 'danger' })
+          }
+        })
+      }
+      if (lockStatus === 0) {
+        lockVehicle(row.vehicleId).then(response => {
+          if (response.code === 200) {
+            row.lockStatus = lockStatus
+            this.$message({ message: row.lockNo.toString() + ' ' + this.statusOperateMap.get(lockStatus) + '成功！', type: 'success' })
+          } else {
+            this.$message({ message: row.lockNo.toString() + ' ' + this.statusOperateMap.get(lockStatus) + '失败！', type: 'danger' })
+          }
+        })
+      }
+    },
+
+    // 点击提交时调用
+    createData(ele) {
+      this.$refs['addDeviceForms'].validate((valid) => {
+        if (valid) {
+          this.addDeviceData = ele
+          this.addDeviceData.bizType = 2
+          console.log(this.userData)
+          this.userData = { id: '', ename: this.userInformation, name: this.userNames }
+          this.objData = { htwDeviceInfo: this.addDeviceData, user: this.userData }
+          createDevice(this.objData).then(response => {
+            console.log(response)
+            if (response.code === 200) {
+              this.getMyDevicesList()
+              this.$notify({ title: 'Success', message: response.msg, type: 'success', duration: 3000 })
+              this.dialogFormVisible = false
+            } else {
+              this.$notify({ title: 'Failed', message: response.msg, type: 'error', duration: 3000 })
+            }
+          })
+        }
+      })
+    },
+
+    // 查看
+    handleCheck(row) {
+      // this.shouldShow = true
+      // this.serviceData = row
+
+      // this.dialogStatus = 'update'
+      // this.dialogFormVisible = true
+      // this.showSubmitBtn = false
+
+    },
+    // 复制
+    handleCopy(row) {
+      this.serviceData = row
+      // var queryData = { id: row.id }
+      this.shouldShow = false
+
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+      this.showSubmitBtn = true
+      // this.$nextTick(() => {
+      //   this.$refs['serviceDataForms'].clearValidate()
+      // })
+      // })
+    },
+    qq(ele) {
+      // this.$refs['serviceDataForms'].validate((valid) => {
+      //   if (valid) {
+      //     console.log(ele)
+      //     const tempData = {
+      //       id: this.serviceData.id,
+      //       customName: this.serviceData.customName,
+      //       url: this.serviceData.url,
+      //       envChannel: this.serviceData.envChannel,
+      //       method: ele.method,
+      //       actualUrl: this.serviceData.actualUrl,
+      //       status: this.serviceData.status,
+      //       creator: this.serviceData.creator,
+      //       returnDataType: ele.returnDataTypeStr,
+      //       mockUrl: this.serviceData.mockUrl
+      //     }
+      //     updateService(tempData).then(response => {
+      //       if (response.code === 200) {
+      //         this.dialogFormVisible = false
+      //         this.getList()
+      //         this.$notify({ title: 'Success', message: response.msg, type: 'success', duration: 2000 })
+      //       } else {
+      //         this.$notify({ title: 'Failed', message: response.msg, type: 'error', duration: 2000 })
+      //       }
+      //     })
+      //   }
+      // })
+    },
+    formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => {
+        if (j === 'timestamp') {
+          return parseTime(v[j])
+        } else {
+          return v[j]
+        }
+      }))
+    },
+    redirectTo(id, mehtodName, methodProtocol) {
+      console.log(methodProtocol)
+      this.$router.push({
+        path: `/mock/httpmock/${id}`, query: { mehtodName: mehtodName, methodProtocol: methodProtocol }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.showInfo {
+  width: 400px;
+  height: 400px;
+  text-align: center;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+}
+.showZm {
+  position:absolute;
+  background-color: #ccc;
+  width: 100%;
+  height: 100%;
+  opacity: 0.5;
+}
+.showBtn {
+  color: red;
+  padding-left: 200px;
+}
+.filter-item {
+  margin-top: 10px;
+}
+.box {
+    flex-direction: column ;
+}
+</style>
+
+<style lang="stylus" scoped>
+  .set-background
+    background-color #F2F3F6
+    display flex
+    justify-content center
+    min-width 700px
+     .block
+      background-color rgba(255,255,255,1)
+      box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
+      border-radius 7px
+      width 93%
+      margin-top 25px
+      padding 20px
+      min-height calc(100vh - 50px)
+    .block >>> .el-form
+      display flex
+      justify-content space-between
+    .block >>> .el-form-item
+      display flex
+      width 20%
+      margin-right 10px
+    .block >>> .el-select
+      width 13%
+      margin-right 10px
+    .block >>> .el-form-item__content
+      margin-left 0 !important
+    .block >>> th
+      background-color #F0F7FF !important
+    .set-between
+      display flex
+    .set-between >>> .el-button
+      height 40px
+    .set-locate
+      margin-top 20px
+  .app-container >>> .el-dialog
+    background-color #F2F3F6
+    .set-font >>> .el-input__inner
+      color #3e3c3c
+    .set-font >>>  .is-disabled input::placeholder
+      color #3e3c3c
+    .block
+      background-color rgba(255,255,255,1)
+      box-shadow 0px 0px 11px 0px rgba(238,240,245,1)
+      border-radius 7px
+      width 59vw
+      margin-top 25px
+      padding 20px
+</style>