yq

src/views/control/Placard.vue

@@ -1,238 +1,176 @@
 <template>
-    <div class="Placard">
-       <div class="content">
-        <div class="content_left">
-          <el-table style="width: 100%;" 
-            ref="record_table"
-            :data="list" border 
-            :header-cell-style="{'text-align': 'center'}"
-            :cell-style = "{'text-align': 'center'}"
-            :highlight-current-row="true"
-            @current-change = 'getcurrentchange'
-          >
-            <el-table-column
-              prop="name"
-              label="选择智能设备"
-              width="">
-            </el-table-column>
-          </el-table>
-        </div>
-        <div class="content_right">
-          <div style="display: flex;height: 36px;margin-bottom: 10px;background: gainsboro;">
-            <div style="flex: 1;line-height: 36px;">智能设备产品列表</div>
-            <div style="flex: 1;text-align: right;">
-              <el-button type="primary" size="small">设备数据导入</el-button>
-            </div>
-          </div>
-          <el-table style="width: 100%;" 
-            :data="list_detail" border 
-            :header-cell-style="{'text-align': 'center'}"
-            :cell-style = "{'text-align': 'center'}"
-            :highlight-current-row="true"
-          >
-            <el-table-column
-              prop="name"
-              label="产品名称"
-              width="">
-            </el-table-column>
-            <el-table-column
-              prop="device_type"
-              label="产品型号"
-              width="">
-            </el-table-column>
-            <el-table-column
-              prop="batch_num"
-              label="产品编码"
-              width="">
-            </el-table-column>
-            <el-table-column
-              prop="serialno"
-              label="产品序列号"
-              width="">
-            </el-table-column>
-            <el-table-column
-              prop="emq_password"
-              label="产品MQTT密码"
-              width="">
-            </el-table-column>
-            <el-table-column
-              prop="production_date"
-              label="生产日期"
-              width="">
-              <template slot-scope="scope">
-                {{ (scope.row.production_date).split('T')[0] }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="expire_date"
-              label="使用期限"
-              width="">
-              <template slot-scope="scope">
-                {{ (scope.row.production_date).split('T')[0] }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="register_num"
-              label="产品注册证编码"
-              width="">
-            </el-table-column>
-            <el-table-column
-              prop="vendor_name"
-              label="产品注册人"
-              width="">
-            </el-table-column>
-            <el-table-column
-              prop="address"
-              label="注册人地址"
-              width="">
-            </el-table-column>
-            <el-table-column
-              prop="contact"
-              label="注册人联系方式"
-              width="">
-            </el-table-column>
-            <el-table-column
-              prop="production_license"
-              label="注册生产许可证编号"
-              width="">
-            </el-table-column>
-            <el-table-column
-              prop="production_corporate"
-              label="产品生产企业"
-              width="">
-            </el-table-column>
-            <el-table-column
-              prop="production_address"
-              label="产品企业地址"
-              width="">
-            </el-table-column>
-            <el-table-column
-              prop="contact"
-              label="生产企业联系方式"
-              width="">
-            </el-table-column>
-            <el-table-column
-              prop="status"
-              label="激活状态"
-              width="">
-              <template slot-scope="scope">
-                {{ getstatus(scope.row.status) }}
-              </template>
-            </el-table-column>
-          </el-table>
-          <div style="text-align: right;margin-top: 10px;">
-            <el-pagination
-              @size-change="handleSizeChange"
-              @current-change="handleCurrentChange"
-              :current-page="page"
-              :page-sizes="[50,100, 200, 300, 400]"
-              :page-size="limet"
-              layout="total, sizes, prev, pager, next, jumper"
-              :total="total">
-            </el-pagination>
+  <div class="Placard">
+    <div class="content">
+      <div class="content_left">
+        <el-table style="width: 100%;" ref="record_table" :data="list" border
+          :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
+          :highlight-current-row="true" @current-change='getcurrentchange'>
+          <el-table-column prop="name" label="选择智能设备" width="">
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="content_right">
+        <div style="display: flex;height: 36px;margin-bottom: 10px;background: gainsboro;">
+          <div style="flex: 1;line-height: 36px;">智能设备产品列表</div>
+          <div style="flex: 1;text-align: right;">
+            <el-button type="primary" size="small">设备数据导入</el-button>
           </div>
         </div>
-       </div>
-        
+        <el-table style="width: 100%;" :data="list_detail" border :header-cell-style="{ 'text-align': 'center' }"
+          :cell-style="{ 'text-align': 'center' }" :highlight-current-row="true">
+          <el-table-column prop="name" label="产品名称" width="">
+          </el-table-column>
+          <el-table-column prop="device_type" label="产品型号" width="">
+          </el-table-column>
+          <el-table-column prop="batch_num" label="产品编码" width="">
+          </el-table-column>
+          <el-table-column prop="serialno" label="产品序列号" width="">
+          </el-table-column>
+          <el-table-column prop="emq_password" label="产品MQTT密码" width="">
+          </el-table-column>
+          <el-table-column prop="production_date" label="生产日期" width="">
+            <template slot-scope="scope">
+              {{ (scope.row.production_date).split('T')[0] }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="expire_date" label="使用期限" width="">
+            <template slot-scope="scope">
+              {{ (scope.row.production_date).split('T')[0] }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="register_num" label="产品注册证编码" width="">
+          </el-table-column>
+          <el-table-column prop="vendor_name" label="产品注册人" width="">
+          </el-table-column>
+          <el-table-column prop="address" label="注册人地址" width="">
+          </el-table-column>
+          <el-table-column prop="contact" label="注册人联系方式" width="">
+          </el-table-column>
+          <el-table-column prop="production_license" label="注册生产许可证编号" width="">
+          </el-table-column>
+          <el-table-column prop="production_corporate" label="产品生产企业" width="">
+          </el-table-column>
+          <el-table-column prop="production_address" label="产品企业地址" width="">
+          </el-table-column>
+          <el-table-column prop="contact" label="生产企业联系方式" width="">
+          </el-table-column>
+          <el-table-column prop="status" label="激活状态" width="">
+            <template slot-scope="scope">
+              {{ getstatus(scope.row.status) }}
+            </template>
+          </el-table-column>
+        </el-table>
+        <div style="text-align: right;margin-top: 10px;">
+          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
+            :page-sizes="[50, 100, 200, 300, 400]" :page-size="limet" layout="total, sizes, prev, pager, next, jumper"
+            :total="total">
+          </el-pagination>
+        </div>
+      </div>
     </div>
+
+  </div>
 </template>
 
 <script>
-import {devicelist,devicetypes} from '../../api/index'
+import { devicelist, devicetypes } from '../../api/index'
 export default {
-    data(){
-        return {
-            list:[],
-            list_detail:[],
-            total:0,
-            page:1,//当前页数
-            limet:50,//一页调数
+  data() {
+    return {
+      list: [],
+      list_detail: [],
+      total: 0,
+      page: 1,//当前页数
+      limet: 50,//一页调数
+    }
+  },
+  created() {
+    this.getdevicetypes()
+    // this.getnum()
+  },
+  methods: {
+    getdevicetypes() {
+      devicetypes().then(response => {
+        console.log('1111111res', response.data);
+        this.list = response.data
+        if (this.list[0].value == 1) {
+          this.list[0].name = '尿检仪'
         }
+      })
     },
-    created(){
-      this.getdevicetypes()
-      // this.getnum()
-    },
-    methods:{
-      getdevicetypes(){
-        devicetypes().then(response =>{
-          console.log('1111111res',response.data);
-          this.list=response.data
-          if(this.list[0].value==1){
-            this.list[0].name = '尿检仪'
-          }
-        })
-      },
-      getdevicelist(val){
-        const params ={
-          pageNum:this.page,
-          pageSize:this.limet,
-          deviceType:val,
-        }
-        devicelist(params).then(response =>{
-          console.log('rsponse.data',response.data);
-          if(response.state == 1){ 
-            this.list_detail = response.data.list
-            this.total = response.data.list.length
-            // this.list = response.data.list
-            // this.$refs.record_table.setCurrentRow(this.list[0])
-            // this.getdevicedetail(this.list[0].id)
-            console.log('list',response.data.list, this.list);
-          }
-        })
-      },
-      getcurrentchange(val){
-        console.log(val,'val')
-        this.getdevicelist(val.type)
-      },
-    
-      // 每页条数
-      handleSizeChange(val){
-        this.limet = val
-      },
-      // 当前页
-      handleCurrentChange(val){
-        this.page = val
-      },
-      getstatus(val){
-        switch(val){
-          case 0: return '未分配' 
-            break;
-          case 1: return '已分配'
-            break; 
-          case 2: return '包装中' 
-            break;
-          case 6: return '废弃'
-            break;
-          case 99: return '已出厂' 
-            break;
-          case 100: return '销售中'
-            break; 
-          case 101: return '已售出'
-            break;
-          default:  return '' 
+    getdevicelist(val) {
+      const params = {
+        pageNum: this.page,
+        pageSize: this.limet,
+        deviceType: val,
+      }
+      devicelist(params).then(response => {
+        console.log('rsponse.data', response.data);
+        if (response.state == 1) {
+          this.list_detail = response.data.list
+          this.total = response.data.list.length
+          // this.list = response.data.list
+          // this.$refs.record_table.setCurrentRow(this.list[0])
+          // this.getdevicedetail(this.list[0].id)
+          console.log('list', response.data.list, this.list);
         }
-      },
-      
-    }
+      })
+    },
+    getcurrentchange(val) {
+      console.log(val, 'val')
+      this.getdevicelist(val.type)
+    },
+
+    // 每页条数
+    handleSizeChange(val) {
+      this.limet = val
+    },
+    // 当前页
+    handleCurrentChange(val) {
+      this.page = val
+    },
+    getstatus(val) {
+      switch (val) {
+        case 0: return '未分配'
+          break;
+        case 1: return '已分配'
+          break;
+        case 2: return '包装中'
+          break;
+        case 6: return '废弃'
+          break;
+        case 99: return '已出厂'
+          break;
+        case 100: return '销售中'
+          break;
+        case 101: return '已售出'
+          break;
+        default: return ''
+      }
+    },
+
+  }
 
 }
 </script>
 
 <style scoped lang="scss">
-.Placard{
-    width: 100%;
-    min-height: 100%;
-    padding: 15px;
-    box-sizing: border-box;
+.Placard {
+  width: 100%;
+  min-height: 100%;
+  padding: 15px;
+  box-sizing: border-box;
 }
-.content{
+
+.content {
   display: flex;
-  .content_left{
+
+  .content_left {
     width: 15%;
     margin-right: 10px;
   }
-  .content_right{
+
+  .content_right {
     width: 84%;
   }
 }