From cd802abe94fed573b516568f8678899c9fdc7d37 Mon Sep 17 00:00:00 2001
From: yangzongjia <yangzongjia>
Date: Fri, 2 Jun 2023 19:09:25 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/device/device.js                      |  14 +-
 .../shebeitaizhang/shebeitaizhangAdd.vue      | 293 +++---
 .../shebeitaizhang/shebeitaizhangInfo.vue     | 175 ++--
 .../shebeitaizhang/shebeitaizhangList.vue     | 867 ++++++++----------
 4 files changed, 583 insertions(+), 766 deletions(-)

diff --git a/src/api/device/device.js b/src/api/device/device.js
index 5845dd4..11cd5fc 100644
--- a/src/api/device/device.js
+++ b/src/api/device/device.js
@@ -12,16 +12,18 @@ export function getDevicePage(data) {
   return request({ url: '/device/getDevicePage', method: 'GET', params: data })
 }
 
-// 子系统布防
-export function getCallArm() {
-  return request({ url: '/call/getCallArm', method: 'GET', })
+// 更新设备信息
+export function updateDevice(data) {
+  return request({ url: '/device/updateDevice', method: 'post', params: data })
 }
 
-// 子系统撤防
-export function getCallDisArm() {
-  return request({ url: '/call/getCallDisArm', method: 'GET', })
+// 根据ID获取单条
+export function getInfoById(data) {
+  return request({ url: '/device/getInfoById', method: 'GET', params: data })
 }
 
+
+
 // 创建消息消费者
 export function createCallConsumer() {
   return request({ url: '/call/createCallConsumer', method: 'GET', })
diff --git a/src/views/shebeitaizhang/shebeitaizhangAdd.vue b/src/views/shebeitaizhang/shebeitaizhangAdd.vue
index 2778b40..c942531 100644
--- a/src/views/shebeitaizhang/shebeitaizhangAdd.vue
+++ b/src/views/shebeitaizhang/shebeitaizhangAdd.vue
@@ -28,8 +28,7 @@
             </el-col>
             <el-col :span="8">
               <el-form-item>
-                <el-input v-model="addForm.posotion" maxlength="20" placeholder="请填写设备位置 " class="addinputw"
-                  clearable />
+                <el-input v-model="addForm.posotion" maxlength="20" placeholder="请填写设备位置 " class="addinputw" clearable />
               </el-form-item>
             </el-col>
           </el-row>
@@ -66,26 +65,6 @@
               </el-form-item>
             </el-col>
           </el-row>
-          <!-- <el-row>
-            <el-col :span="4" class="tleftb">
-              <span>生产厂家</span>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item>
-                <el-input v-model="addForm.manufacturerTelePhone" maxlength="20" placeholder="请填写生产厂家编码"
-                  class="addinputw" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="4" class="tleftb">
-              <span>保修截止日期</span>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item>
-                <el-date-picker type="date" placeholder="选择日期" v-model="addForm.manufacturerFax" style="width: 410px;"
-                  maxlength="20"></el-date-picker>
-              </el-form-item>
-            </el-col>
-          </el-row> -->
         </el-form>
       </div>
     </div>
@@ -93,150 +72,154 @@
 </template>
 
 <script>
-  // import req from '@/api/shebeitaizhang/shebeitaizhang'
-  // import { typeValues } from '@/api/cheliang/dictcommons'
-  import { createDevice } from '@/api/device/device'
+import { createDevice, updateDevice } from '@/api/device/device'
 
-  export default {
-    name: 'shebeitaizhangAdd',
-    data() {
-      var checkSubmit = (rule, value, callback) => {
-        const Submit = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
-        if (Submit.test(value)) {
-          return callback()
-        }
-        callback(new Error('请输入手机号'))
+export default {
+  name: 'shebeitaizhangAdd',
+  data() {
+    var checkSubmit = (rule, value, callback) => {
+      const Submit = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
+      if (Submit.test(value)) {
+        return callback()
       }
-      var checkChuanzhen = (rule, value, callback) => {
-        const BanGongDianHua = /\d{3}-\d{8}|\d{4}-\d{7}/
-        if (value) {
-          // 如果没有通过验证！！
-          if (!BanGongDianHua.test(value)) {
-            callback(new Error('请输入正确的传真格式'))
-          }
-          callback()
-        } else {
-          callback()
+      callback(new Error('请输入手机号'))
+    }
+    var checkChuanzhen = (rule, value, callback) => {
+      const BanGongDianHua = /\d{3}-\d{8}|\d{4}-\d{7}/
+      if (value) {
+        // 如果没有通过验证！！
+        if (!BanGongDianHua.test(value)) {
+          callback(new Error('请输入正确的传真格式'))
         }
+        callback()
+      } else {
+        callback()
       }
-      return {
-        tableKey: 0,
-        index: 0,
-        viewState: 1,
-        viewTitle: '',
-        dialogStatus: '',
-        sid: '',
-        isShow: true,
-        supplierType_list: [
-          { title: '摄像头', id: '1' },
-          { title: '电子围栏', id: '2' },
-          { title: '门禁', id: '3' },
-          { title: '机器人', id: '4' }
-        ],
-        addForm: {},
-        baseManufacturerBankDto: [],
-        rules: {
-          name: [{
-            required: true,
-            message: '请填写设备名称',
-            trigger: 'blur'
-          }],
-          vCode: [{
-            required: true,
-            message: '请填写验证码',
-            trigger: 'blur'
-          }],
-          type: [{
-            required: true,
-            message: '请选择设备类型',
-            trigger: 'change'
-          }]
-        },
-        submitdisabled: false
-      }
-    },
-    methods: {
-      init() {
-        typeValues({ type: 'supplierType' }).then((res) => {
-          if (res.success) {
-            this.supplierType_list = res.data
-          }
-        })
+    }
+    return {
+      tableKey: 0,
+      index: 0,
+      viewState: 1,
+      viewTitle: '',
+      dialogStatus: '',
+      sid: '',
+      isShow: true,
+      supplierType_list: [
+        { title: '摄像头', id: '1' },
+        { title: '电子围栏', id: '2' },
+        { title: '门禁', id: '3' },
+        { title: '机器人', id: '4' }
+      ],
+      addForm: {},
+      baseManufacturerBankDto: [],
+      rules: {
+        name: [{
+          required: true,
+          message: '请填写设备名称',
+          trigger: 'blur'
+        }],
+        vCode: [{
+          required: true,
+          message: '请填写验证码',
+          trigger: 'blur'
+        }],
+        type: [{
+          required: true,
+          message: '请选择设备类型',
+          trigger: 'change'
+        }]
       },
-      changeSupplierType(value) {
-        let bb = null
-        this.supplierType_list.forEach((e) => {
-          if (e.dictValue === value) {
-            bb = {
-              key: e.dictKey,
-              value: e.dictValue
-            }
+      submitdisabled: false
+    }
+  },
+  methods: {
+    init() {
+      typeValues({ type: 'supplierType' }).then((res) => {
+        if (res.success) {
+          this.supplierType_list = res.data
+        }
+      })
+    },
+    changeSupplierType(value) {
+      let bb = null
+      this.supplierType_list.forEach((e) => {
+        if (e.dictValue === value) {
+          bb = {
+            key: e.dictKey,
+            value: e.dictValue
           }
-        })
-        this.addForm.supplierType = bb.key
-      },
-      showAdd(typeSubmit) {
-        this.dialogStatus = typeSubmit
-      },
-      handleSave() {
-        this.$refs['form_obj'].validate(valid => {
-          if (valid) {
-            console.log(this.dialogStatus)
-            this.submitdisabled = true
-            if (this.dialogStatus === 'add') {
-              createDevice(this.addForm).then(resp => {
-                this.submitdisabled = false
-                console.log(resp)
-                if (resp.code == 200) {
-                  if (resp.data == true) {
-                    this.$message({ showClose: true, type: 'success', message: resp.msg })
-                  } else {
-                    this.$message({ showClose: true, type: 'error', message: resp.data })
-                  }
-                }
-              }).catch(() => {
-                this.submitdisabled = false
-              })
-            } else if (this.dialogStatus === 'edit') {
-              req.update(formobj, this.sid).then(resp => {
-                this.submitdisabled = false
-                if (resp.success) {
+        }
+      })
+      this.addForm.supplierType = bb.key
+    },
+    showAdd(typeSubmit) {
+      this.dialogStatus = typeSubmit
+    },
+    showEdit(param) {
+      this.dialogStatus = param.typeSubmit
+      this.addForm = param.info
+      this.addForm.vCode = param.info.vcode
+    },
+    handleSave() {
+      this.$refs['form_obj'].validate(valid => {
+        if (valid) {
+          console.log(this.dialogStatus)
+          this.submitdisabled = true
+          if (this.dialogStatus === 'add') {
+            createDevice(this.addForm).then(resp => {
+              this.submitdisabled = false
+              console.log(resp)
+              if (resp.code == 200) {
+                if (resp.data == true) {
                   this.$message({ showClose: true, type: 'success', message: resp.msg })
-                  this.handleReturn('true')
+                } else {
+                  this.$message({ showClose: true, type: 'error', message: resp.data })
                 }
-              }).catch(() => {
-                this.submitdisabled = false
-              })
-            }
-          } else {
-            return false
+              }
+            }).catch(() => {
+              this.submitdisabled = false
+            })
+          } else if (this.dialogStatus === 'edit') {
+            this.addForm.createTime = null
+            this.addForm.status = null
+            updateDevice(this.addForm).then(resp => {
+              this.submitdisabled = false
+              if (resp.code == 200) {
+                this.$message({ showClose: true, type: 'success', message: resp.msg })
+              }
+            }).catch(() => {
+              this.submitdisabled = false
+            })
           }
-        })
-      },
-      handleReturn(isreload) {
-        if (isreload === 'true') this.$emit('reloadlist')
-        this.dialogStatus = ''
-        this.sid = ''
-        this.addForm = {}
-        this.baseManufacturerBankDto = []
-        this.isShow = true
-        this.$refs['form_obj'].resetFields()
-        this.$emit('doback')
-      }
+        } else {
+          return false
+        }
+      })
+    },
+    handleReturn(isreload) {
+      if (isreload === 'true') this.$emit('reloadlist')
+      this.dialogStatus = ''
+      this.sid = ''
+      this.addForm = {}
+      this.baseManufacturerBankDto = []
+      this.isShow = true
+      this.$refs['form_obj'].resetFields()
+      this.$emit('doback')
     }
   }
+}
 </script>
 <style scoped>
-  .divStyle {
-    padding: 7px;
-    font-weight: bold;
-    font-size: 16px;
-    background-color: #0294d7;
-    text-align: left;
-    color: #ffffff;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
+.divStyle {
+  padding: 7px;
+  font-weight: bold;
+  font-size: 16px;
+  background-color: #0294d7;
+  text-align: left;
+  color: #ffffff;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/shebeitaizhang/shebeitaizhangInfo.vue b/src/views/shebeitaizhang/shebeitaizhangInfo.vue
index 7b6d097..9e85d65 100644
--- a/src/views/shebeitaizhang/shebeitaizhangInfo.vue
+++ b/src/views/shebeitaizhang/shebeitaizhangInfo.vue
@@ -14,11 +14,11 @@
           </div>
           <el-row>
             <el-col :span="4" class="tleftb">
-              <span>设备编码</span>
+              <span>设备验证码</span>
             </el-col>
             <el-col :span="8">
               <el-form-item>
-                <span>{{ infoForm.manufacturerName }}</span>
+                <span>{{ infoForm.vCode }}</span>
               </el-form-item>
             </el-col>
             <el-col :span="4" class="tleftb">
@@ -26,7 +26,7 @@
             </el-col>
             <el-col :span="8">
               <el-form-item>
-                <span>{{ infoForm.manufacturerAs }}</span>
+                <span>{{ infoForm.position }}</span>
               </el-form-item>
             </el-col>
           </el-row>
@@ -36,55 +36,29 @@
             </el-col>
             <el-col :span="8">
               <el-form-item>
-                <span>{{ getSupplierType(infoForm.manufacturerCode) }}</span>
+                <span>{{ getSupplierType(infoForm.type) }}</span>
               </el-form-item>
             </el-col>
             <el-col :span="4" class="tleftb">
-              <span>安装时间</span>
+              <span>备注</span>
             </el-col>
             <el-col :span="8">
               <el-form-item>
-                <span>{{ infoForm.supplierTypeValue }}</span>
+                <span>{{ infoForm.remarks }}</span>
               </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="4" class="tleftb">
-              <span>出厂时间</span>
+              <span>设备名称</span>
             </el-col>
             <el-col :span="8">
               <el-form-item>
-                <span>{{ infoForm.manufacturer }}</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4" class="tleftb">
-              <span>供货商</span>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item>
-                <span>{{ infoForm.manufacturerAddress }}</span>
+                <span>{{ infoForm.name }}</span>
               </el-form-item>
             </el-col>
           </el-row>
-          <el-row>
-            <el-col :span="4" class="tleftb">
-              <span>生产厂家</span>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item>
-                <span>{{ infoForm.manufacturerTelePhone }}</span>
-              </el-form-item>
-            </el-col>
-            <el-col :span="4" class="tleftb">
-              <span>保修截止日期</span>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item>
-                <span>{{ infoForm.manufacturerFax }}</span>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
+          <!-- <el-row>
             <el-col :span="4" class="tleftb">
               <span>状态</span>
             </el-col>
@@ -94,32 +68,12 @@
               </el-form-item>
             </el-col>
             <el-col :span="4" class="tleftb">
-              <!-- <span>所属仓库</span> -->
             </el-col>
             <el-col :span="8">
               <el-form-item>
-                <!-- <span>{{ infoForm.cangku }}</span> -->
               </el-form-item>
             </el-col>
-          </el-row>
-          <!-- <div class="title">
-            <div>开户行信息</div>
-          </div>
-          <el-table :key="tableKey" :data="baseManufacturerBankDto" :index="index" border style="width: 100%">
-            <el-table-column fixed width="60px" label="序号" type="index" :index="index + 1" align="center"/>
-            <el-table-column prop="dueBankValue" width="140px" label="账户类型" align="center"/>
-            <el-table-column prop="depositBank" width="180px" label="开户银行" align="center"/>
-            <el-table-column prop="bankAccount" width="160px" label="银行账号" align="center"/>
-            <el-table-column prop="accountName" width="130px" label="账号名称" align="center"/>
-            <el-table-column prop="bankingOutlets" width="180px" label="银行网点" align="center"/>
-            <el-table-column prop="bankAddress" width="260px" label="开户行地址" align="center"/>
-            <el-table-column prop="paymentLines" width="160px" label="联行号" align="center"/>
-            <el-table-column prop="swiftCode" width="200px" label="swiftcode(银行代码)" align="center"/>
-            <el-table-column prop="currency" width="130px" label="币种" align="center"/>
-            <el-table-column prop="remarks" width="240px" label="描述" align="center"/>
-            <el-table-column prop="actualPay" width="240px" label="厂家销售通路" align="center"/>
-            <el-table-column prop="paymentAccessNoValue" width="240px" label="付款通路编码" align="center"/>
-          </el-table> -->
+          </el-row> -->
         </el-form>
       </div>
     </div>
@@ -127,73 +81,58 @@
 </template>
 
 <script>
-  // import req from '@/api/shebeitaizhang/shebeitaizhang'
-
-  export default {
-    name: 'shebeitaizhangInfo',
-    data() {
-      return {
-        // tableKey: 0,
-        // index: 0,
-        viewTitle: '',
-        supplierType_list: [
-          { title: '摄像头', id: '1' },
-        ],
-        status_list: [
-          { title: '已损坏', id: '1' },
-          { title: '已维修', id: '2' },
-          { title: '完好', id: '3' },
-        ],
-        infoForm: {
-          manufacturerName: 'KD-22',
-          manufacturerAs: '2F金陵文脉',
-          manufacturerCode: '1',
-          supplierTypeValue: '2023-02-26 16:00:00',
-          manufacturerAddress: '大华',
-          manufacturer: '2023-02-26 12:00:00',
-          manufacturerTelePhone: '大华科技',
-          manufacturerFax: '2023-05-23',
-          status:'1',
-          cangku:'仓库1',
-        },
-        // baseManufacturerBankDto: [],
-        rules: {},
-        // submitdisabled: false
+export default {
+  name: 'shebeitaizhangInfo',
+  data() {
+    return {
+      // tableKey: 0,
+      // index: 0,
+      viewTitle: '',
+      supplierType_list: [
+        { title: '摄像头', id: '1' },
+        { title: '电子围栏', id: '2' },
+        { title: '门禁', id: '3' },
+        { title: '机器人', id: '4' }
+      ],
+      status_list: [
+        { title: '已损坏', id: '1' },
+        { title: '已维修', id: '2' },
+        { title: '完好', id: '3' },
+      ],
+      infoForm: {
+      },
+      // baseManufacturerBankDto: [],
+      rules: {},
+      // submitdisabled: false
+    }
+  },
+  methods: {
+    getStatus(item) {
+      for (var i = 0; i < this.status_list.length; i++) {
+        if (this.status_list[i].id == item) {
+          return this.status_list[i].title
+        }
       }
     },
-    methods: {
-      getStatus(item) {
-        for (var i = 0; i < this.status_list.length; i++) {
-          if (this.status_list[i].id == item) {
-            return this.status_list[i].title
-          }
-        }
-      },
-      getSupplierType(item) {
-        for (var i = 0; i < this.supplierType_list.length; i++) {
-          if (this.supplierType_list[i].id == item) {
-            return this.supplierType_list[i].title
-          }
+    getSupplierType(item) {
+      for (var i = 0; i < this.supplierType_list.length; i++) {
+        if (this.supplierType_list[i].id == item) {
+          return this.supplierType_list[i].title
         }
-      },
-      showInfo(row) {
-        this.$nextTick(() => {
-          this.$refs['form_obj'].clearValidate()
-        })
-        this.viewTitle = '设备台账详情'
-        // req.fetchBySid(row.sid).then(resp => {
-        //   this.infoForm = resp.data.infoForm
-        //   this.baseManufacturerBankDto = resp.data.baseManufacturerBankDto
-        // }).catch(e => {
-        //   this.formobj = row
-        // })
-      },
-      handleReturn() {
-        this.$emit('doback')
       }
+    },
+    showInfo(row) {
+      this.$nextTick(() => {
+        this.$refs['form_obj'].clearValidate()
+      })
+      this.viewTitle = '设备台账详情'
+      this.infoForm = row.info
+    },
+    handleReturn() {
+      this.$emit('doback')
     }
   }
+}
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/src/views/shebeitaizhang/shebeitaizhangList.vue b/src/views/shebeitaizhang/shebeitaizhangList.vue
index cccc59b..785d41e 100644
--- a/src/views/shebeitaizhang/shebeitaizhangList.vue
+++ b/src/views/shebeitaizhang/shebeitaizhangList.vue
@@ -43,7 +43,7 @@
                   </el-select>
                 </el-form-item>
                 <el-form-item label="设备类型">
-                  <el-select v-model="listQuery.supplierType" filterable clearable placeholder="请选择设备类型">
+                  <el-select v-model="listQuery.type" filterable clearable placeholder="请选择设备类型">
                     <el-option v-for="item in supplierType_list" :key="item.id" :label="item.title" :value="item.id" />
                   </el-select>
                 </el-form-item>
@@ -71,15 +71,8 @@
                     :disabled="!row.isShow && (row.supplierTypeValue === '主机厂' || row.supplierTypeValue === '分公司')"
                     @click="handleEdit(row)">编辑</el-button>
                   <el-button size="mini" type="primary" @click="handleCheck(row)">详情</el-button>
-                  <!-- <el-button size="mini" type="primary" @click="handleadd(row)">添加到仓库</el-button> -->
-                  <!-- <el-button size="mini" type="primary">处理</el-button> -->
                 </template>
               </el-table-column>
-              <!-- <el-table-column prop="jc" label="设备" width="220" header-align="center" align="center">
-                <template slot-scope="scope">
-                  <span class="bluezi" @click="handleCheck(scope.row)">{{ scope.row.bianma }}</span>
-                </template>
-              </el-table-column> -->
               <el-table-column prop="jc" label="设备编码" header-align="center" align="center">
                 <template slot-scope="scope">
                   <span>{{ scope.row.bianma }}</span>
@@ -87,37 +80,22 @@
               </el-table-column>
               <el-table-column label="设备类型" width="110" align="center">
                 <template slot-scope="scope">
-                  <span>{{ getSupplierType(scope.row.supplierTypeValue) }}</span>
+                  <span>{{ getSupplierType(scope.row.type) }}</span>
                 </template>
               </el-table-column>
               <el-table-column label="设备位置" width="" header-align="center" align="center">
                 <template slot-scope="scope">
-                  <span>{{ scope.row.weizhi }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="出厂时间" align="center">
-                <template slot-scope="scope">
-                  <span>{{ scope.row.time }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="安装时间" align="center">
-                <template slot-scope="scope">
-                  <span>{{ scope.row.anzhuangtime }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="供货商" align="center">
-                <template slot-scope="scope">
-                  <span>{{ scope.row.gonghuashang }}</span>
+                  <span>{{ scope.row.position }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="生产厂家" align="center">
+              <el-table-column label="设备名称" align="center">
                 <template slot-scope="scope">
-                  <span>{{ scope.row.owner }}</span>
+                  <span>{{ scope.row.name }}</span>
                 </template>
               </el-table-column>
-              <el-table-column label="保修截止日期" align="center">
+              <el-table-column label="备注" align="center">
                 <template slot-scope="scope">
-                  <span>{{ scope.row.policeTime }}</span>
+                  <span>{{ scope.row.remarks }}</span>
                 </template>
               </el-table-column>
               <el-table-column label="所属仓库" align="center">
@@ -149,501 +127,416 @@
 
 <script>
 
-  import Pagination from '@/components/pagination'
-  import pageye from '@/components/pagination/pageye'
-  import ButtonBar from '@/components/ButtonBar'
-  // import { typeValues, getOrgSidByPath } from '@/api/cheliang/dictcommons'
-  import shebeitaizhangAdd from './shebeitaizhangAdd'
-  import shebeitaizhangInfo from './shebeitaizhangInfo'
-  import { getDevicePage } from '@/api/device/device'
-  // import req from '@/api/shebeitaizhang/shebeitaizhang'
-  import * as echarts from "echarts";
-  import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuanb'
-  // 1.1完好率饼图
-  const wanhao_Chart = {
-    // seriesName: '完好率',
-    unit: '次',
-    color: ['#30e9ff', '#d9d9d9', '#fdc004'],
-    Data: {
-      seriesData: [
-        { value: 75, name: '完好' },
-        { value: 25, name: '不完好' },
-        // { value: 12, name: '报警' }
-      ]
-    },
-    label: {
-      normal: {
-        position: 'inner',
-        show: false
-      }
-    },
+import Pagination from '@/components/pagination'
+import pageye from '@/components/pagination/pageye'
+import ButtonBar from '@/components/ButtonBar'
+// import { typeValues, getOrgSidByPath } from '@/api/cheliang/dictcommons'
+import shebeitaizhangAdd from './shebeitaizhangAdd'
+import shebeitaizhangInfo from './shebeitaizhangInfo'
+import { getDevicePage, getInfoById } from '@/api/device/device'
+// import req from '@/api/shebeitaizhang/shebeitaizhang'
+import * as echarts from "echarts";
+import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuanb'
+// 1.1完好率饼图
+const wanhao_Chart = {
+  // seriesName: '完好率',
+  unit: '次',
+  color: ['#30e9ff', '#d9d9d9', '#fdc004'],
+  Data: {
+    seriesData: [
+      { value: 75, name: '完好' },
+      { value: 25, name: '不完好' },
+      // { value: 12, name: '报警' }
+    ]
+  },
+  label: {
+    normal: {
+      position: 'inner',
+      show: false
+    }
+  },
 
-    // radius: ['50%', '55%']
-  }
-  // 1.2维修率饼图
-  const weixiu_Chart = {
-    // seriesName: '维修率',
-    unit: '次',
-    color: ['#fe7f02', '#fdc004'],
-    Data: {
-      seriesData: [
-        { value: 15, name: '维修' },
-        { value: 85, name: '无维修' },
-        // { value: 12, name: '报警' }
-      ]
+  // radius: ['50%', '55%']
+}
+// 1.2维修率饼图
+const weixiu_Chart = {
+  // seriesName: '维修率',
+  unit: '次',
+  color: ['#fe7f02', '#fdc004'],
+  Data: {
+    seriesData: [
+      { value: 15, name: '维修' },
+      { value: 85, name: '无维修' },
+      // { value: 12, name: '报警' }
+    ]
+  },
+  label: {
+    normal: {
+      position: 'inner',
+      show: false
+    }
+  },
+
+  // radius: ['50%', '55%']
+}
+// 1.3损害率饼图
+const sunhai_Chart = {
+  // seriesName: '损害率',
+  unit: '次',
+  color: ['#d2cece', '#ff0202', '#fdc004'],
+  Data: {
+    seriesData: [
+      { value: 10, name: '损害' },
+      { value: 90, name: '无损害' }
+    ]
+  },
+  label: {
+    normal: {
+      position: 'inner',
+      show: false
+    }
+  },
+
+  // radius: ['50%', '55%']
+}
+
+export default {
+  name: 'shebeitaizhangList',
+  components: {
+    Pagination,
+    pageye,
+    ButtonBar,
+    shebeitaizhangAdd,
+    shebeitaizhangInfo, PieChartrenyuan
+  },
+  data() {
+    return {
+      wanhao_Chart: wanhao_Chart, // 1.1
+      weixiu_Chart: weixiu_Chart,
+      sunhai_Chart: sunhai_Chart,
+      btndisabled: false,
+      btnList: [
+        {
+          type: 'primary',
+          size: 'small',
+          icon: 'plus',
+          btnKey: 'toAdd',
+          btnLabel: '新增'
+        },
+        {
+          type: 'danger',
+          size: 'small',
+          icon: 'del',
+          btnKey: 'doDel',
+          btnLabel: '删除'
+        },
+        {
+          type: 'success',
+          size: 'small',
+          icon: 'export',
+          btnKey: 'import',
+          btnLabel: '导入'
+        },
+        {
+          type: 'info',
+          size: 'small',
+          icon: 'cross',
+          btnKey: 'doClose',
+          btnLabel: '关闭'
+        }
+      ],
+      viewState: 1,
+      isSearchShow: false,
+      searchxianshitit: '显示查询条件',
+      sids: [],
+      // 查询 -----------
+      tableKey: 0,
+      list: [],
+      listLoading: false,
+      listQuery: {
+        current: 1,
+        size: 5,
+        total: 0
+      },
+      supplierType_list: [
+        { title: '摄像头', id: '1' },
+        { title: '电子围栏', id: '2' },
+        { title: '门禁', id: '3' },
+        { title: '机器人', id: '4' }
+      ],
+      floor_list: [
+        { title: '一层', id: '1' },
+        { title: '二层', id: '2' },
+        { title: '三层', id: '3' },
+        { title: '四层', id: '4' },
+      ],
+      cangku_list: [
+        { title: '仓库1', id: '1' },
+        { title: '仓库2', id: '2' }
+      ],
+      status_list: [
+        { title: '已损坏', id: '1' },
+        { title: '已维修', id: '2' },
+        { title: '完好', id: '3' },
+      ],
+      rules: {}
+    }
+  },
+  mounted() {
+    this.$refs['btnbar'].setButtonList(this.btnList)
+  },
+  created() {
+    // 初始化变量
+    this.init()
+  },
+  methods: {
+    getStatus(item) {
+      for (var i = 0; i < this.status_list.length; i++) {
+        if (this.status_list[i].id == item) {
+          return this.status_list[i].title
+        }
+      }
     },
-    label: {
-      normal: {
-        position: 'inner',
-        show: false
+    getSupplierType(item) {
+      for (var i = 0; i < this.supplierType_list.length; i++) {
+        if (this.supplierType_list[i].id == item) {
+          return this.supplierType_list[i].title
+        }
       }
     },
-
-    // radius: ['50%', '55%']
-  }
-  // 1.3损害率饼图
-  const sunhai_Chart = {
-    // seriesName: '损害率',
-    unit: '次',
-    color: ['#d2cece', '#ff0202', '#fdc004'],
-    Data: {
-      seriesData: [
-        { value: 10, name: '损害' },
-        { value: 90, name: '无损害' }
-      ]
+    resetState() {
+      this.viewState = 1
     },
-    label: {
-      normal: {
-        position: 'inner',
-        show: false
+    btnHandle(btnKey) {
+      console.log('XXXXXXXXXXXXXXX    ' + btnKey)
+      switch (btnKey) {
+        case 'toAdd':
+          this.toAdd()
+          break
+        case 'doDel':
+          this.doDel()
+          break
+        case 'toChangShang':
+          this.toChangShang()
+          break
+        case 'toGain':
+          this.toGain()
+          break
+        case 'doExport':
+          this.doExport()
+          break
+        case 'doClose':
+          this.doClose()
+          break
+        default:
+          break
       }
     },
-
-    // radius: ['50%', '55%']
-  }
-
-  export default {
-    name: 'shebeitaizhangList',
-    components: {
-      Pagination,
-      pageye,
-      ButtonBar,
-      shebeitaizhangAdd,
-      shebeitaizhangInfo, PieChartrenyuan
-    },
-    data() {
-      return {
-        wanhao_Chart: wanhao_Chart, // 1.1
-        weixiu_Chart: weixiu_Chart,
-        sunhai_Chart: sunhai_Chart,
-        btndisabled: false,
-        btnList: [
-          {
-            type: 'primary',
-            size: 'small',
-            icon: 'plus',
-            btnKey: 'toAdd',
-            btnLabel: '新增'
-          },
-          {
-            type: 'danger',
-            size: 'small',
-            icon: 'del',
-            btnKey: 'doDel',
-            btnLabel: '删除'
-          },
-          //             {
-          //   type: 'primary',
-          //   size: 'small',
-          //   icon: '',
-          //   btnKey: 'toChangShang',
-          //   btnLabel: '添加到仓库'
-          // },
-          // {
-          //   type: 'primary',
-          //   size: 'small',
-          //   icon: '',
-          //   btnKey: 'toChangShang',
-          //   btnLabel: '获取厂商'
-          // },
-          // {
-          //   type: 'primary',
-          //   size: 'small',
-          //   icon: '',
-          //   btnKey: 'toGain',
-          //   btnLabel: '获取分公司'
-          // },
-          {
-            type: 'success',
-            size: 'small',
-            icon: 'export',
-            btnKey: 'import',
-            btnLabel: '导入'
-          },
-          // {
-          //   type: 'success',
-          //   size: 'small',
-          //   icon: 'export',
-          //   btnKey: 'build',
-          //   btnLabel: '导出'
-          // },
-          {
-            type: 'info',
-            size: 'small',
-            icon: 'cross',
-            btnKey: 'doClose',
-            btnLabel: '关闭'
-          }
-        ],
-        viewState: 1,
-        isSearchShow: false,
-        searchxianshitit: '显示查询条件',
-        sids: [],
-        // 查询 -----------
-        tableKey: 0,
-        list: [
-          { bianma: 'KD-22', cangku: '库房1', supplierTypeValue: '1', weizhi: '2F金陵文脉', time: '2023-02-26 12:00:00', anzhuangtime: '2023-02-26 16:00:00', gonghuashang: '大华', owner: '大华科技', policeTime: '2023-05-18', status: '1' },
-          { bianma: 'KD-22', cangku: '库房2', supplierTypeValue: '1', weizhi: '2F金陵文脉', time: '2023-02-26 12:00:00', anzhuangtime: '2023-02-26 16:00:00', gonghuashang: '大华', owner: '大华科技', policeTime: '2023-05-19', status: '1' },
-          { bianma: 'KD-22', cangku: '库房3', supplierTypeValue: '1', weizhi: '2F金陵文脉', time: '2023-02-26 12:00:00', anzhuangtime: '2023-02-26 16:00:00', gonghuashang: '大华', owner: '大华科技', policeTime: '2023-05-19', status: '2' },
-          { bianma: 'KD-22', cangku: '库房4', supplierTypeValue: '1', weizhi: '2F金陵文脉', time: '2023-02-26 12:00:00', anzhuangtime: '2023-02-26 16:00:00', gonghuashang: '大华', owner: '大华科技', policeTime: '2023-05-20', status: '2' },
-          { bianma: 'KD-22', cangku: '库房5', supplierTypeValue: '1', weizhi: '2F金陵文脉', time: '2023-02-26 12:00:00', anzhuangtime: '2023-02-26 16:00:00', gonghuashang: '大华', owner: '大华科技', policeTime: '2023-05-20', status: '2' },
-          { bianma: 'KD-22', cangku: '库房1', supplierTypeValue: '1', weizhi: '2F金陵文脉', time: '2023-02-26 12:00:00', anzhuangtime: '2023-02-26 16:00:00', gonghuashang: '大华', owner: '大华科技', policeTime: '2023-05-21', status: '1' },
-          { bianma: 'KD-22', cangku: '库房1', supplierTypeValue: '1', weizhi: '2F金陵文脉', time: '2023-02-26 12:00:00', anzhuangtime: '2023-02-26 16:00:00', gonghuashang: '大华', owner: '大华科技', policeTime: '2023-05-23', status: '1' },
-          { bianma: 'KD-22', cangku: '库房1', supplierTypeValue: '1', weizhi: '2F金陵文脉', time: '2023-02-26 12:00:00', anzhuangtime: '2023-02-26 16:00:00', gonghuashang: '大华', owner: '大华科技', policeTime: '2023-05-23', status: '3' },
-          { bianma: 'KD-22', cangku: '库房1', supplierTypeValue: '1', weizhi: '2F金陵文脉', time: '2023-02-26 12:00:00', anzhuangtime: '2023-02-26 16:00:00', gonghuashang: '大华', owner: '大华科技', policeTime: '2023-05-23', status: '3' },
-          { bianma: 'KD-22', cangku: '库房1', supplierTypeValue: '1', weizhi: '2F金陵文脉', time: '2023-02-26 12:00:00', anzhuangtime: '2023-02-26 16:00:00', gonghuashang: '大华', owner: '大华科技', policeTime: '2023-05-23', status: '3' },
-        ],
-        listLoading: false,
-        listQuery: {
-          current: 1,
-          size: 5,
-          total: 0
-        },
-        supplierType_list: [
-          { title: '摄像机', id: '1' },
-        ],
-        floor_list: [
-          { title: '一层', id: '1' },
-          { title: '二层', id: '2' },
-          { title: '三层', id: '3' },
-          { title: '四层', id: '4' },
-        ],
-        cangku_list: [
-          { title: '仓库1', id: '1' },
-          { title: '仓库2', id: '2' }
-        ],
-        status_list: [
-          { title: '已损坏', id: '1' },
-          { title: '已维修', id: '2' },
-          { title: '完好', id: '3' },
-        ],
-        rules: {}
+    // 搜索条件效果
+    clicksearchShow() {
+      this.isSearchShow = !this.isSearchShow
+      if (this.isSearchShow) {
+        this.searchxianshitit = '隐藏查询条件'
+      } else {
+        this.searchxianshitit = '显示查询条件'
       }
     },
-    mounted() {
-      this.$refs['btnbar'].setButtonList(this.btnList)
+    init() {
+      this.getList()
     },
-    created() {
-      // 初始化变量
-      this.init()
+    // getType() {
+    //   typeValues({
+    //     type: 'supplierType'
+    //   }).then((res) => {
+    //     if (res.code === '200') {
+    //       this.supplierType_list = res.data
+    //       console.log('选择楼层', this.supplierType_list)
+    //     }
+    //   })
+    // },
+    // 序号
+    indexMethod(index) {
+      var pagestart = (this.listQuery.current - 1) * this.listQuery.size
+      var pageindex = index + 1 + pagestart
+      return pageindex
     },
-    methods: {
-      getStatus(item) {
-        for (var i = 0; i < this.status_list.length; i++) {
-          if (this.status_list[i].id == item) {
-            return this.status_list[i].title
-          }
-        }
-      },
-      getSupplierType(item) {
-        for (var i = 0; i < this.supplierType_list.length; i++) {
-          if (this.supplierType_list[i].id == item) {
-            return this.supplierType_list[i].title
-          }
-        }
-      },
-      resetState() {
-        this.viewState = 1
-      },
-      btnHandle(btnKey) {
-        console.log('XXXXXXXXXXXXXXX    ' + btnKey)
-        switch (btnKey) {
-          case 'toAdd':
-            this.toAdd()
-            break
-          case 'doDel':
-            this.doDel()
-            break
-          case 'toChangShang':
-            this.toChangShang()
-            break
-          case 'toGain':
-            this.toGain()
-            break
-          case 'doExport':
-            this.doExport()
-            break
-          case 'doClose':
-            this.doClose()
-            break
-          default:
-            break
-        }
-      },
-      // 搜索条件效果
-      clicksearchShow() {
-        this.isSearchShow = !this.isSearchShow
-        if (this.isSearchShow) {
-          this.searchxianshitit = '隐藏查询条件'
+    // 查询列表信息
+    getList() {
+      this.listLoading = true
+      getDevicePage(this.listQuery).then((response) => {
+        this.listLoading = false
+        if (response.code == '200') {
+          this.list = response.data.records
+          this.listQuery.total = response.data.total
         } else {
-          this.searchxianshitit = '显示查询条件'
+          this.list = []
+          this.listQuery.total = 0
         }
-      },
-      init() {
-        this.getList()
-      },
-      // getType() {
-      //   typeValues({
-      //     type: 'supplierType'
-      //   }).then((res) => {
-      //     if (res.code === '200') {
-      //       this.supplierType_list = res.data
-      //       console.log('选择楼层', this.supplierType_list)
-      //     }
-      //   })
-      // },
-      // 序号
-      indexMethod(index) {
-        var pagestart = (this.listQuery.current - 1) * this.listQuery.size
-        var pageindex = index + 1 + pagestart
-        return pageindex
-      },
-      // 查询列表信息
-      getList() {
-        this.listLoading = true
-        console.log(this.listQuery)
-        getDevicePage(this.listQuery).then((response) => {
-          this.listLoading = false
-          console.log(response)
-          // if (response.code === '200' && response.data && response.data.total > 0) {
-          //   this.list = response.data.records
-          //   this.listQuery.total = response.data.total
-          // } else {
-          //   this.list = []
-          //   this.listQuery.total = 0
-          // }
-        })
-      },
-      // 查询按钮
-      handleFilter() {
-        this.listQuery.current = 1
-        this.getList()
-      },
-      handleReset() {
-        // this.listQuery = {
-        //   params: {
-        //     manufacturerName: '',
-        //     supplierType: '',
-        //     useOrgSid: '',
-        //     createOrgSid: '',
-        //     manufacturerTelePhone: '',
-        //     contactName: ''
-        //   },
-        //   current: 1,
-        //   size: 5
-        // }
-        // this.init()
-      },
-      // 打开添加对话框
-      toAdd() {
-        this.listQuery.typeSubmit = 'add'
-        this.viewState = 2
-        this.$refs['divadd'].showAdd(this.listQuery.typeSubmit)
-      },
+      })
+    },
+    // 查询按钮
+    handleFilter() {
+      this.listQuery.current = 1
+      this.getList()
+    },
+    handleReset() {
+    },
+    // 打开添加对话框
+    toAdd() {
+      this.viewState = 2
+      this.listQuery.typeSubmit = 'add'
+      this.$refs['divadd'].showAdd(this.listQuery.typeSubmit)
+    },
+    // 打开查看
+    handleCheck(row) {
+      getInfoById({ id: row.id }).then(res => {
+        this.viewState = 4
+        this.listQuery.info = res.data
+        this.$refs['divinfo'].showInfo(this.listQuery)
+      })
+    },
+    handleEdit(row) {
+      this.listQuery.typeSubmit = 'edit'
+      this.viewState = 2
+      getInfoById({ id: row.id }).then(res => {
+        this.listQuery.info = res.data
+        this.$refs['divadd'].showEdit(this.listQuery)
+      })
+    },
 
-      handleSelectionChange(row) {
-        const aa = []
-        row.forEach((element) => {
-          aa.push(element.sid)
-        })
-        this.sids = aa
-      },
-      // 根据本行ID删除数据
-      doDel() {
-        if (this.sids.length > 0) {
-          const tip = '请确认是否删除所选 ' + this.sids.length + ' 条记录?'
-          this.$confirm(tip, '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }).then(() => {
-            const loading = this.$loading({
-              lock: true,
-              text: 'Loading',
-              spinner: 'el-icon-loading',
-              background: 'rgba(0, 0, 0, 0.7)'
-            })
-            req.delBySids(this.sids.toString()).then(resp => {
-              if (resp.success) {
-                loading.close()
-                this.$message({ type: 'success', message: resp.msg, showClose: true })
-                this.getList()
-              } else {
-                loading.close()
-              }
-            }).catch(e => {
+    handleSelectionChange(row) {
+      const aa = []
+      row.forEach((element) => {
+        aa.push(element.sid)
+      })
+      this.sids = aa
+    },
+    // 根据本行ID删除数据
+    doDel() {
+      if (this.sids.length > 0) {
+        const tip = '请确认是否删除所选 ' + this.sids.length + ' 条记录?'
+        this.$confirm(tip, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          const loading = this.$loading({
+            lock: true,
+            text: 'Loading',
+            spinner: 'el-icon-loading',
+            background: 'rgba(0, 0, 0, 0.7)'
+          })
+          req.delBySids(this.sids.toString()).then(resp => {
+            if (resp.success) {
+              loading.close()
+              this.$message({ type: 'success', message: resp.msg, showClose: true })
+              this.getList()
+            } else {
               loading.close()
-            })
-          }).catch(() => {
+            }
+          }).catch(e => {
+            loading.close()
           })
-        } else {
-          this.$message({ type: 'error', message: '没有选择!!', showClose: true })
-          return
-        }
-      },
-      toChangShang() {
-        this.$router.push({
-          path: '/cangkuguanli/cangkuguanliList',
+        }).catch(() => {
         })
-      },
-      // toChangShang() {
-      //   req.saveGysByOrgSid(this.listQuery.params.createOrgSid).then((resp) => {
-      //     if (resp.success) {
-      //       this.$message({ showClose: true, type: 'success', message: '获取成功' })
-      //       this.getList()
-      //     }
-      //   })
-      // },
-      // toGain() {
-      //   req.saveAllByOrgSid({ orgSid: this.listQuery.params.createOrgSid }).then((resp) => {
-      //     if (resp.success) {
-      //       this.$message({ showClose: true, type: 'success', message: '获取成功' })
-      //       this.getList()
-      //     }
-      //   })
-      // },
-      handleEdit(row) {
-        // this.viewState = 3
-        // this.$refs['divadd'].showEdit(row)
-        this.viewState = 2
-        this.$refs['divadd'].showAdd(this.listQuery.params.createOrgSid)
-        // if (row.supplierTypeValue !== '主机厂' && row.supplierTypeValue !== '分公司') {
-        //   this.viewState = 3
-        //   this.$refs['divadd'].showEdit(row)
-        // } else {
-        //   this.viewState = 5
-        //   this.$refs['divHosts'].showInfo(row)
-        // }
-      },
-      // 打开查看
-      handleCheck(row) {
-        this.viewState = 4
-        this.$refs['divinfo'].showInfo(row)
-      },
-      // 导出
-      // doExport() {
-      //   basefinbankExportExcel(this.sids).then((res) => {
-      //     const blob = new Blob([res], {
-      //       type: 'application/vnd.ms-excel'
-      //     })
-      //     const objectUrl = URL.createObjectURL(blob)
-      //     window.location.href = objectUrl
-      //     this.$notify({
-      //       title: '提示',
-      //       message: '导出成功',
-      //       type: 'success',
-      //       duration: 2000
-      //     })
-      //   })
-      // },
-      doClose() {
-        this.$store.dispatch('tagsView/delView', this.$route)
-        this.$router.go(-1)
+      } else {
+        this.$message({ type: 'error', message: '没有选择!!', showClose: true })
+        return
       }
+    },
+    toChangShang() {
+      this.$router.push({
+        path: '/cangkuguanli/cangkuguanliList',
+      })
+    },
+    doClose() {
+      this.$store.dispatch('tagsView/delView', this.$route)
+      this.$router.go(-1)
     }
   }
+}
 </script>
 
 <style scoped>
-  .app-containerb {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: flex-start;
-  }
+.app-containerb {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
 
-  .webye {
-    flex: 1;
-    text-align: left;
-  }
+.webye {
+  flex: 1;
+  text-align: left;
+}
 
-  /* 饼图部分 */
-  .tbars {
-    width: 250px;
-    height: 100%;
-    /* display: flex;
+/* 饼图部分 */
+.tbars {
+  width: 250px;
+  height: 100%;
+  /* display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: flex-start;align-items: flex-start; */
-    margin: 0 20px 0 0;
-    padding: 10px;
-    background-color: #fff;
-    box-shadow: 0px 0px 10px #E9E9E9;
-    border-radius: 5px;
-  }
+  margin: 0 20px 0 0;
+  padding: 10px;
+  background-color: #fff;
+  box-shadow: 0px 0px 10px #E9E9E9;
+  border-radius: 5px;
+}
 
-  .tbar {
-    /* width: 25%; */
-    margin: 0 0px 0 0;
-    /* background-color: #fff;
+.tbar {
+  /* width: 25%; */
+  margin: 0 0px 0 0;
+  /* background-color: #fff;
     box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; */
-    padding: 10px;
-  }
+  padding: 10px;
+}
 
-  .tbar:last-of-type {
-    margin: 0;
-  }
+.tbar:last-of-type {
+  margin: 0;
+}
 
-  .tbar0 {
-    border-bottom: 0px solid #032ab8;
-  }
+.tbar0 {
+  border-bottom: 0px solid #032ab8;
+}
 
-  .tbar .title {
-    font-size: 20px;
-    padding: 0px 20px;
-    text-align: center;
-    font-weight: bold;
-    color: #333;
-    font-size: 16px;
-    /* border-bottom: 1px solid #ececee; */
-  }
+.tbar .title {
+  font-size: 20px;
+  padding: 0px 20px;
+  text-align: center;
+  font-weight: bold;
+  color: #333;
+  font-size: 16px;
+  /* border-bottom: 1px solid #ececee; */
+}
 
-  .tbar .title span {
-    padding: 0 10px 0 0;
-  }
+.tbar .title span {
+  padding: 0 10px 0 0;
+}
 
-  .tbar .bar {
-    position: relative;
-    /* display: flex;
+.tbar .bar {
+  position: relative;
+  /* display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: flex-start;align-items: center; */
-    margin: 0;
-    padding: 0px;
-    height: 190px;
-  }
+  margin: 0;
+  padding: 0px;
+  height: 190px;
+}
 
-  .tbar .bar .zhongzi {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    line-height: 240px;
-    text-align: center;
-    font-weight: bold;
-    color: #333;
-    font-size: 18px;
-  }
+.tbar .bar .zhongzi {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  line-height: 240px;
+  text-align: center;
+  font-weight: bold;
+  color: #333;
+  font-size: 18px;
+}
 </style>
\ No newline at end of file