Merge branch 'master' of http://git.2weisou.com/wangxiao/zkPCproject into master

src/views/Customer/AgentManagement.vue

@@ -0,0 +1,417 @@
+<template>
+
+  <div class="box-center">
+    <!-- 头 -->
+    <div class="app-top">
+      <div class="app-titel" style="margin-top: 15px">
+        <div class="label">合同结束日期：</div>
+        <div>
+           <el-date-picker
+            v-model="value1"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </div>
+        <div class="label">服务状态：</div>
+        <div>
+          <el-select v-model="value" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="app-titel" style="margin-top: 15px">
+        <div class="label">代理商：</div>
+        <div>
+         <el-input v-model="value"></el-input>
+        </div>
+        <div class="label">运营人员：</div>
+        <div >
+          <el-input v-model="value"></el-input>
+        </div>
+      </div>
+
+      <div class="app-titel" style="margin-top: 15px">
+        <div class="label" style="color: #ffffff">筛选相关：</div>
+        <div>
+          <el-button @click="infoadd()" style="background: #2671e2; color: #ffffff"
+            >新增</el-button
+          >
+        </div>
+        <div style="margin-left: 20px">
+          <el-button style="background: #2671e2; color: #ffffff"
+            >筛选</el-button
+          >
+        </div>
+        <div style="margin-left: 20px">
+          <el-button>清空筛选条件</el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 表格 -->
+    <div class="cen-tab">
+        <el-table
+          :data="tableData"
+          stripe
+          height="400"
+          style="width: 100%">
+          <el-table-column
+            prop="date"
+            label="代理商"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="地址"
+             align="center"
+           >
+          </el-table-column>
+          <el-table-column
+            prop="address"
+            label="联系人信息"
+             align="center">
+          </el-table-column>
+
+          <el-table-column
+            prop="date"
+            label="运营人员"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="管理员账号"
+             align="center"
+           >
+          </el-table-column>
+          <el-table-column
+            prop="address"
+            label="添加日期"
+             align="center">
+          </el-table-column>
+
+          <el-table-column
+            prop="date"
+            label="合同开始日期"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="合同结束日期"
+             align="center"
+           >
+          </el-table-column>
+          <el-table-column
+            prop="address"
+            label="剩余天数"
+             align="center">
+          </el-table-column>
+           <el-table-column
+            prop="address"
+            label="服务状态"
+             align="center">
+          </el-table-column>
+           <!--  scope -->
+         <el-table-column label="操作" align="center">
+            <template slot-scope="">
+              <div style="color: #2671E2;" @click="infoeditor()">编辑</div>
+              <div style="color: #2671E2;" @click="inforeplace()">更换账号</div>
+              <div style="color: #2671E2;" @click="toinifodelete()">删除</div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div style="display: flex;justify-content:flex-end;margin-top: 10px;">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage4"
+              :page-sizes="[100, 200, 300, 400]"
+              :page-size="100"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="400">
+            </el-pagination>
+        </div>
+    </div>
+
+    <el-dialog title="新增代理" :visible.sync="dialogVisible" >
+      <el-form :model="ruleForm" label-position="labelPosition"  ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;">
+          <el-form-item label="代理商名称：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="合同起止日期：" prop="areaName">
+              <el-date-picker
+                v-model="value1"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期">
+              </el-date-picker>
+          </el-form-item>
+          <el-form-item label="联系人：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="联系手机：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="地区：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="详细地址：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+           <el-form-item label="运营人员：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+           <el-form-item label="管理员账号：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+           <el-form-item label="密码：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="add()">保存</el-button>
+      </div>
+  </el-dialog>
+
+  <el-dialog title="编辑" :visible.sync="dialogVisible2" >
+      <el-form :model="ruleForm" label-position="labelPosition"  ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;">
+          <el-form-item label="代理商名称：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="合同起止日期：" prop="areaName">
+              <el-date-picker
+                v-model="value1"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期">
+              </el-date-picker>
+          </el-form-item>
+          <el-form-item label="联系人：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="联系手机：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="地区：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="详细地址：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+           <el-form-item label="运营人员：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible2 = false">取 消</el-button>
+          <el-button type="primary" @click="editor()">保存</el-button>
+      </div>
+  </el-dialog>
+
+
+   <el-dialog title="更换账号" :visible.sync="dialogVisible3" >
+      <el-form :model="ruleForm" label-position="labelPosition"  ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;">
+           <el-form-item label="管理员账号：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+           <el-form-item label="密码：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible3 = false">取 消</el-button>
+          <el-button type="primary" @click="replace()">保存</el-button>
+      </div>
+  </el-dialog>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      options: [
+        {
+          value: "1",
+          label: "全部",
+        },
+        {
+          value: "2",
+          label: "服务器内",
+        },
+        {
+          value: "3",
+          label: "已失效",
+        },
+      ],
+      currentPage4:4,
+      value: "",
+      input: "",
+      tableData: [
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+      ],
+      dialogVisible:false,
+      dialogVisible2:false,
+      dialogVisible3:false,
+      ruleForm:{
+          areaName:'',
+          provinceItem:[],
+    },
+    };
+  },
+  mounted() {},
+  methods: {
+    //更换
+    inforeplace(){
+         this.dialogVisible3=true
+    },
+    //确认更换
+    replace(){
+         this.dialogVisible3=false
+    },
+    //编辑
+    infoeditor(){
+      this.dialogVisible2=true
+    },
+    //确认编辑
+    editor(){
+      this.dialogVisible2=false
+    },
+    //新增
+    infoadd(){
+        this.dialogVisible=true
+    },
+    //确认新增
+    add(){
+      this.dialogVisible=false
+    },
+     //删除
+    toinifodelete(){
+        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+    },
+     handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+      },
+      handleCurrentChange(val) {
+        console.log(`当前页: ${val}`);
+      }
+  },
+};
+</script>
+
+<style scoped="scoped" lang="scss" >
+.box-center {
+  width: 100%;
+  padding: 15px;
+  min-width: 1200px;
+  padding-bottom: 100px;
+}
+.cen-tab{
+  width: 100%;
+  padding: 15px;
+  background: #FFFFFF;
+  margin-top: 15px;
+}
+.tophove {
+  color: #ffffff;
+  background: #2671e2;
+}
+.app-top {
+  width: 100%;
+  background: #ffffff;
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  .app-titel {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .label {
+      font-size: 14px;
+      font-weight: 400;
+      color: #32363d;
+      line-height: 14px;
+      margin-left: 15px;
+    }
+    .toptimeqhuan {
+      height: 30px;
+      background: #ffffff;
+      display: flex;
+      align-items: center;
+    }
+    .toptimeqhuan div {
+      padding-left: 20px;
+      padding-right: 20px;
+      text-align: center;
+      line-height: 30px;
+      font-size: 14px;
+      margin-right: 15px;
+      border-radius: 4px;
+      border: 1px solid #e0e0e0;
+    }
+  }
+}
+</style>

src/views/Customer/Companymanagement.vue

@@ -0,0 +1,369 @@
+<template>
+
+  <div class="box-center">
+    <!-- 头 -->
+    <div class="app-top">
+      <div class="app-titel" style="margin-top: 5px">
+        <div class="label">代理商：</div>
+        <div>
+         <el-input v-model="value"></el-input>
+        </div>
+        <div class="label">公司：</div>
+        <div>
+         <el-input v-model="value"></el-input>
+        </div>
+         <div class="label">运营人员：</div>
+         <div >
+          <el-input v-model="value"></el-input>
+        </div>
+      </div>
+
+      <div class="app-titel" style="margin-top: 15px">
+        <div class="label" style="color: #ffffff">筛选相关：</div>
+        <div>
+          <el-button @click="infoadd()" style="background: #2671e2; color: #ffffff"
+            >新增</el-button
+          >
+        </div>
+        <div style="margin-left: 20px">
+          <el-button style="background: #2671e2; color: #ffffff"
+            >筛选</el-button
+          >
+        </div>
+        <div style="margin-left: 20px">
+          <el-button>清空筛选条件</el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 表格 -->
+    <div class="cen-tab">
+        <el-table
+          :data="tableData"
+          stripe
+          height="400"
+          style="width: 100%">
+          <el-table-column
+            prop="date"
+            label="公司名称"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="代理商"
+             align="center"
+           >
+          </el-table-column>
+          <el-table-column
+            prop="date"
+            label="运营人员"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="公司地址"
+             align="center"
+           >
+          </el-table-column>
+          <el-table-column
+            prop="address"
+            label="管理员信息"
+             align="center">
+          </el-table-column>
+
+          <el-table-column
+            prop="date"
+            label="管理员账号"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="服务期楼盘"
+             align="center"
+           >
+          </el-table-column>
+           <!--  scope -->
+         <el-table-column label="操作" align="center">
+            <template slot-scope="">
+              <div style="color: #2671E2;" @click="infoeditor()">编辑</div>
+              <div style="color: #2671E2;" @click="inforeplace()">更换账号</div>
+              <div style="color: #2671E2;" @click="toinifodelete()">删除</div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div style="display: flex;justify-content:flex-end;margin-top: 10px;">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage4"
+              :page-sizes="[100, 200, 300, 400]"
+              :page-size="100"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="400">
+            </el-pagination>
+        </div>
+    </div>
+
+    <el-dialog title="新增代理" :visible.sync="dialogVisible" >
+      <el-form :model="ruleForm" label-position="labelPosition"  ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;">
+          <el-form-item label="代理商名称：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="公司名称：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="联系人：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="联系手机：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="地区：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="详细地址：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+           <el-form-item label="运营人员：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+           <el-form-item label="管理员账号：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+           <el-form-item label="密码：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="add()">保存</el-button>
+      </div>
+  </el-dialog>
+
+  <el-dialog title="编辑" :visible.sync="dialogVisible2" >
+      <el-form :model="ruleForm" label-position="labelPosition"  ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;">
+          <el-form-item label="代理商：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="公司名称：" prop="areaName">
+             <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="联系人：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="联系手机：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="地区：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="详细地址：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+           <el-form-item label="运营人员：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible2 = false">取 消</el-button>
+          <el-button type="primary" @click="editor()">保存</el-button>
+      </div>
+  </el-dialog>
+
+
+   <el-dialog title="更换账号" :visible.sync="dialogVisible3" >
+      <el-form :model="ruleForm" label-position="labelPosition"  ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;">
+           <el-form-item label="管理员账号：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+           <el-form-item label="密码：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible3 = false">取 消</el-button>
+          <el-button type="primary" @click="replace()">保存</el-button>
+      </div>
+  </el-dialog>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      options: [
+        {
+          value: "1",
+          label: "全部",
+        },
+        {
+          value: "2",
+          label: "服务器内",
+        },
+        {
+          value: "3",
+          label: "已失效",
+        },
+      ],
+      currentPage4:4,
+      value: "",
+      input: "",
+      tableData: [
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+      ],
+      dialogVisible:false,
+      dialogVisible2:false,
+      dialogVisible3:false,
+      ruleForm:{
+          areaName:'',
+          provinceItem:[],
+    },
+    };
+  },
+  mounted() {},
+  methods: {
+    //更换
+    inforeplace(){
+         this.dialogVisible3=true
+    },
+    //确认更换
+    replace(){
+         this.dialogVisible3=false
+    },
+    //编辑
+    infoeditor(){
+      this.dialogVisible2=true
+    },
+    //确认编辑
+    editor(){
+      this.dialogVisible2=false
+    },
+    //新增
+    infoadd(){
+        this.dialogVisible=true
+    },
+    //确认新增
+    add(){
+      this.dialogVisible=false
+    },
+     //删除
+    toinifodelete(){
+        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+    },
+     handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+      },
+      handleCurrentChange(val) {
+        console.log(`当前页: ${val}`);
+      }
+  },
+};
+</script>
+
+<style scoped="scoped" lang="scss" >
+.box-center {
+  width: 100%;
+  padding: 15px;
+  min-width: 1200px;
+  padding-bottom: 100px;
+}
+.cen-tab{
+  width: 100%;
+  padding: 15px;
+  background: #FFFFFF;
+  margin-top: 15px;
+}
+.tophove {
+  color: #ffffff;
+  background: #2671e2;
+}
+.app-top {
+  width: 100%;
+  background: #ffffff;
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  .app-titel {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .label {
+      font-size: 14px;
+      font-weight: 400;
+      color: #32363d;
+      line-height: 14px;
+      margin-left: 15px;
+    }
+    .toptimeqhuan {
+      height: 30px;
+      background: #ffffff;
+      display: flex;
+      align-items: center;
+    }
+    .toptimeqhuan div {
+      padding-left: 20px;
+      padding-right: 20px;
+      text-align: center;
+      line-height: 30px;
+      font-size: 14px;
+      margin-right: 15px;
+      border-radius: 4px;
+      border: 1px solid #e0e0e0;
+    }
+  }
+}
+</style>

src/views/Customer/index.vue

@@ -1,4 +1,5 @@
 <template>
+
   <div class="box-center">
     <!-- 头 -->
     <div class="app-top">
@@ -203,7 +204,6 @@
             <template slot-scope="">
               <div style="color: #2671E2;">详情</div>
               <div style="color: #2671E2;">转交</div>
-              <div style="color: #2671E2;" @click="toinifodelete()">删除</div>
             </template>
           </el-table-column>
         </el-table>

src/views/Equipment/batch.vue

@@ -0,0 +1,253 @@
+<template>
+
+  <div class="box-center">
+    <!-- 头 -->
+    <div class="app-top">
+      <div class="app-titel" style="margin-top: 5px">
+        <div class="label">批次号：</div>
+        <div>
+             <el-input v-model="value"></el-input>
+        </div>
+        <div style="margin-left: 20px">
+          <el-button style="background: #2671e2; color: #ffffff"
+            >筛选</el-button
+          >
+        </div>
+        <div style="margin-left: 20px">
+          <el-button>清空筛选条件</el-button>
+        </div>
+         <div style="margin-left: 20px">
+          <el-button @click="editorinfo()" style="background: #2671e2; color: #ffffff"
+            >添加批次</el-button
+          >
+        </div>
+      </div>
+    </div>
+
+    <!-- 表格 -->
+    <div class="cen-tab">
+        <el-table
+          :data="tableData"
+          stripe
+          height="400"
+          @selection-change="handleSelectionChange"
+          style="width: 100%">
+            <el-table-column
+              type="selection"
+              width="55">
+            </el-table-column>
+          <el-table-column
+            prop="date"
+            label="批次号"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="设备号"
+             align="center"
+           >
+          </el-table-column>
+          <el-table-column
+            prop="address"
+            label="应收设备数量"
+             align="center">
+          </el-table-column>
+
+          <el-table-column
+            prop="date"
+            label="实收设备数量"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="已验收设备数量"
+             align="center"
+           >
+          </el-table-column>
+          <el-table-column
+            prop="address"
+            label="创建时间"
+             align="center">
+          </el-table-column>
+
+          <el-table-column
+            prop="date"
+            label="备注"
+            align="center"
+          >
+          </el-table-column>
+           <!--  scope -->
+         <el-table-column label="操作" align="center">
+            <template slot-scope="">
+              <div style="color: #2671E2;">修改</div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div style="display: flex;justify-content:flex-end;margin-top: 10px;">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage4"
+              :page-sizes="[100, 200, 300, 400]"
+              :page-size="100"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="400">
+            </el-pagination>
+        </div>
+    </div>
+
+       <el-dialog title="绑定" :visible.sync="dialogVisible" >
+      <el-form :model="ruleForm" label-position="labelPosition"  ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;">
+           <el-form-item label="应收设备数量" prop="areaName">
+                <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+           <el-form-item label="实收设备数量" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="设备号开头" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="设备号结尾" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+            <el-form-item label="备注：" prop="areaName">
+              <el-input type="textarea" v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="editor()">保存</el-button>
+      </div>
+  </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentPage4:4,
+      value: "",
+      input: "",
+      tableData: [
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+      ],
+      multipleSelection:[],
+      dialogVisible:false,
+        ruleForm:{
+          areaName:'',
+          provinceItem:[],
+       },
+    };
+  },
+  mounted() {},
+  methods: {
+    editorinfo(){
+      this.dialogVisible=true;
+    },
+    editor(){
+      this.dialogVisible=false;
+    },
+     handleSelectionChange(val) {
+        this.multipleSelection = val;
+      },
+     handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+      },
+      handleCurrentChange(val) {
+        console.log(`当前页: ${val}`);
+      }
+  },
+};
+</script>
+
+<style scoped="scoped" lang="scss" >
+.box-center {
+  width: 100%;
+  padding: 15px;
+  min-width: 1200px;
+  padding-bottom: 100px;
+}
+.cen-tab{
+  width: 100%;
+  padding: 15px;
+  background: #FFFFFF;
+  margin-top: 15px;
+}
+.tophove {
+  color: #ffffff;
+  background: #2671e2;
+}
+.app-top {
+  width: 100%;
+  background: #ffffff;
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  .app-titel {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .label {
+      font-size: 14px;
+      font-weight: 400;
+      color: #32363d;
+      line-height: 14px;
+      margin-left: 15px;
+    }
+    .toptimeqhuan {
+      height: 30px;
+      background: #ffffff;
+      display: flex;
+      align-items: center;
+    }
+    .toptimeqhuan div {
+      padding-left: 20px;
+      padding-right: 20px;
+      text-align: center;
+      line-height: 30px;
+      font-size: 14px;
+      margin-right: 15px;
+      border-radius: 4px;
+      border: 1px solid #e0e0e0;
+    }
+  }
+}
+</style>

src/views/Equipment/index.vue

@@ -0,0 +1,615 @@
+<template>
+
+  <div class="box-center">
+    <!-- 头 -->
+    <div class="app-top">
+      <div class="app-titel" style="margin-top: 5px">
+        <div class="label">设备编号：</div>
+        <div>
+         <el-input v-model="value"></el-input>
+        </div>
+        <div class="label">设备名称：</div>
+        <div>
+         <el-input v-model="value"></el-input>
+        </div>
+         <div class="label">领用人姓名：</div>
+         <div >
+          <el-input v-model="value"></el-input>
+        </div>
+      </div>
+       <div class="app-titel" style="margin-top: 15px">
+        <div class="label">楼盘：</div>
+        <div>
+         <el-input v-model="value"></el-input>
+        </div>
+        <div class="label">领用状态：</div>
+        <div>
+           <el-select v-model="value" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+        </div>
+      </div>
+      <div class="app-titel" style="margin-top: 15px">
+        <div class="label" style="color: #ffffff">筛选相关：</div>
+        <div style="margin-left: 20px">
+          <el-button style="background: #2671e2; color: #ffffff"
+            >筛选</el-button
+          >
+        </div>
+        <div style="margin-left: 20px">
+          <el-button>清空筛选条件</el-button>
+        </div>
+      </div>
+      <div class="app-titel" style="margin-top: 15px">
+        <div class="label" style="color: #ffffff">筛选相关：</div>
+        <div style="margin-left: 20px">
+          <el-button @click="Batchreturn()" style="background: #2671e2; color: #ffffff"
+            >批量归还</el-button
+          >
+        </div>
+        <div style="margin-left: 20px">
+           <el-button @click="infoMasstransfer()" style="background: #2671e2; color: #ffffff"
+            >批量转移</el-button
+          >
+        </div>
+        <div style="margin-left: 20px">
+           <el-button @click="infoBulkbinding()" style="background: #2671e2; color: #ffffff"
+            >批量绑定批次号</el-button
+          >
+        </div>
+        <div style="margin-left: 20px">
+           <el-button @click="infoadd()" style="background: #2671e2; color: #ffffff"
+            >添加</el-button
+          >
+        </div>
+      </div>
+    </div>
+
+    <!-- 表格 -->
+    <div class="cen-tab">
+        <el-table
+          :data="tableData"
+          stripe
+          height="400"
+           @selection-change="handleSelectionChange"
+          style="width: 100%">
+           <el-table-column
+              type="selection"
+              width="55">
+            </el-table-column>
+          <el-table-column
+            prop="date"
+            label="序号"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="设备编号"
+             align="center"
+           >
+          </el-table-column>
+          <el-table-column
+            prop="date"
+            label="设备名称"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="自动转写"
+             align="center"
+           >
+          </el-table-column>
+          <el-table-column
+            prop="address"
+            label="领用人"
+             align="center">
+          </el-table-column>
+
+          <el-table-column
+            prop="date"
+            label="领用状态"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="设备类型"
+             align="center"
+           > </el-table-column>
+
+            <el-table-column
+            prop="name"
+            label="楼盘名称"
+             align="center"
+           > </el-table-column>
+            <el-table-column
+            prop="name"
+            label="更新时间"
+             align="center"
+           > </el-table-column>
+            <el-table-column
+            prop="name"
+            label="批次号"
+             align="center"
+           > </el-table-column>
+            <el-table-column
+            prop="name"
+            label="验收状态"
+             align="center"
+           > </el-table-column>
+           <!--  scope -->
+         <el-table-column label="操作" align="center">
+            <template slot-scope="">
+              <div style="color: #2671E2;" @click="toinifoThereturn()">归还</div>
+              <div style="color: #2671E2;" @click="infotranscription()">转写开关</div>
+               <div style="color: #2671E2;" @click="acceptance()">验收</div>
+                <div style="color: #2671E2;" @click="toinfobinding()">绑定</div>
+                 <div style="color: #2671E2;" @click="infoeditor()">修改</div>
+              <div style="color: #2671E2;" @click="toinifodelete()">删除</div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div style="display: flex;justify-content:flex-end;margin-top: 10px;">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage4"
+              :page-sizes="[100, 200, 300, 400]"
+              :page-size="100"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="400">
+            </el-pagination>
+        </div>
+    </div>
+
+    <el-dialog title="新增设备" :visible.sync="dialogVisible" >
+      <el-form :model="ruleForm" label-position="labelPosition"  ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;">
+          <el-form-item label="设备号：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="设备名称：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="批次号：" prop="areaName">
+               <el-select v-model="value" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="楼盘：" prop="areaName">
+               <el-select v-model="value" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="关联手机号：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="设备类型：" prop="areaName">
+              <el-select v-model="value" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="add()">保存</el-button>
+      </div>
+  </el-dialog>
+
+  <el-dialog title="编辑" :visible.sync="dialogVisible2" >
+      <el-form :model="ruleForm" label-position="labelPosition"  ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;">
+          <el-form-item label="设备号：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="设备名称：" prop="areaName">
+             <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="批次号：" prop="areaName">
+              <el-select v-model="value" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="楼盘：" prop="areaName">
+              <el-select v-model="value" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="关联手机号：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+          <el-form-item label="设备类型：" prop="areaName">
+             <el-select v-model="value" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+           <el-form-item label="描述：" prop="areaName">
+              <el-input type="textarea" v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible2 = false">取 消</el-button>
+          <el-button type="primary" @click="editor()">保存</el-button>
+      </div>
+  </el-dialog>
+
+
+   <el-dialog title="绑定" :visible.sync="dialogVisible3" >
+      <el-form :model="ruleForm" label-position="labelPosition"  ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;">
+           <el-form-item label="用户：" prop="areaName">
+                <el-select v-model="value" placeholder="请选择">
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+          </el-form-item>
+           <el-form-item label="设备：" prop="areaName">
+              <el-input v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+            <el-form-item label="领用时间：" prop="areaName">
+              <el-date-picker
+                v-model="value1"
+                type="date"
+                placeholder="选择日期">
+              </el-date-picker>
+          </el-form-item>
+            <el-form-item label="备注：" prop="areaName">
+              <el-input type="textarea" v-model="ruleForm.areaName"></el-input>
+          </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible3 = false">取 消</el-button>
+          <el-button type="primary" @click="binding()">保存</el-button>
+      </div>
+  </el-dialog>
+
+
+     <el-dialog title="批量绑定批次号" :visible.sync="dialogVisible4" >
+      <el-form :model="ruleForm" label-position="labelPosition"  ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;">
+           <el-form-item label="批次号：" prop="areaName">
+                <el-select v-model="value" placeholder="请选择">
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+          </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible4 = false">取 消</el-button>
+          <el-button type="primary" @click="Bulkbinding()">保存</el-button>
+      </div>
+  </el-dialog>
+
+  <el-dialog title="批量转移" :visible.sync="dialogVisible5" >
+      <el-form :model="ruleForm" label-position="labelPosition"  ref="ruleForm" label-width="140px" style="width:60%; margin: 0 auto;">
+           <el-form-item label="楼盘：" prop="areaName">
+                <el-select v-model="value" placeholder="请选择">
+                  <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+          </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible5 = false">取 消</el-button>
+          <el-button type="primary" @click="Masstransfer()">保存</el-button>
+      </div>
+  </el-dialog>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      options: [
+        {
+          value: "1",
+          label: "全部",
+        },
+        {
+          value: "2",
+          label: "服务器内",
+        },
+        {
+          value: "3",
+          label: "已失效",
+        },
+      ],
+      currentPage4:4,
+      value: "",
+      input: "",
+      tableData: [
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+      ],
+      dialogVisible:false,
+      dialogVisible2:false,
+      dialogVisible3:false,
+      dialogVisible4:false,
+      dialogVisible5:false,
+      ruleForm:{
+          areaName:'',
+          provinceItem:[],
+       },
+       multipleSelection:[],
+
+    };
+  },
+  mounted() {},
+  methods: {
+    //批量绑定
+    infoBulkbinding(){
+         this.dialogVisible4=true
+    },
+    //批量绑定确认
+    Bulkbinding(){
+         this.dialogVisible4=false
+    },
+    //批量转移
+    infoMasstransfer(){
+         this.dialogVisible5=true
+    },
+    //批量转移确认
+    Masstransfer(){
+        this.dialogVisible5=false
+    },
+    //批量归还
+    Batchreturn(){
+      this.$confirm('确认批量归还吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message({
+          type: 'success',
+          message: '批量归还成功!'
+        });
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消批量归还'
+        });
+      });
+    },
+     handleSelectionChange(val) {
+        this.multipleSelection = val;
+      },
+    //绑定
+    toinfobinding(){
+         this.dialogVisible3=true
+    },
+    //确认绑定
+    binding(){
+         this.dialogVisible3=false
+    },
+    //编辑
+    infoeditor(){
+      this.dialogVisible2=true
+    },
+    //确认编辑
+    editor(){
+      this.dialogVisible2=false
+    },
+    //新增
+    infoadd(){
+        this.dialogVisible=true
+    },
+    //确认新增
+    add(){
+      this.dialogVisible=false
+    },
+    //验收
+    acceptance(){
+      this.$confirm('确认验收吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message({
+          type: 'success',
+          message: '验收成功!'
+        });
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消验收'
+        });
+      });
+    },
+    // 转写开关
+    infotranscription(){
+        this.$confirm('确认开启或关闭吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: '成功!'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消'
+          });
+        });
+    },
+    //归还
+    toinifoThereturn(){
+         this.$confirm('确认归还吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: '归还成功!'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消归还'
+          });
+        });
+    },
+     //删除
+    toinifodelete(){
+        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: '删除成功!'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除'
+          });
+        });
+    },
+     handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+      },
+      handleCurrentChange(val) {
+        console.log(`当前页: ${val}`);
+      }
+  },
+};
+</script>
+
+<style scoped="scoped" lang="scss" >
+.box-center {
+  width: 100%;
+  padding: 15px;
+  min-width: 1200px;
+  padding-bottom: 100px;
+}
+.cen-tab{
+  width: 100%;
+  padding: 15px;
+  background: #FFFFFF;
+  margin-top: 15px;
+}
+.tophove {
+  color: #ffffff;
+  background: #2671e2;
+}
+.app-top {
+  width: 100%;
+  background: #ffffff;
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  .app-titel {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .label {
+      font-size: 14px;
+      font-weight: 400;
+      color: #32363d;
+      line-height: 14px;
+      margin-left: 15px;
+    }
+    .toptimeqhuan {
+      height: 30px;
+      background: #ffffff;
+      display: flex;
+      align-items: center;
+    }
+    .toptimeqhuan div {
+      padding-left: 20px;
+      padding-right: 20px;
+      text-align: center;
+      line-height: 30px;
+      font-size: 14px;
+      margin-right: 15px;
+      border-radius: 4px;
+      border: 1px solid #e0e0e0;
+    }
+  }
+}
+</style>

src/views/Equipment/state.vue

@@ -0,0 +1,317 @@
+<template>
+
+  <div class="box-center">
+    <!-- 头 -->
+    <div class="app-top">
+      <div class="app-titel" style="margin-top: 5px">
+        <div class="label">设备编号：</div>
+        <div>
+         <el-input v-model="value"></el-input>
+        </div>
+        <div class="label">领用人姓名：</div>
+        <div>
+         <el-input v-model="value"></el-input>
+        </div>
+         <div class="label">楼盘名称：</div>
+         <div >
+          <el-input v-model="value"></el-input>
+        </div>
+      </div>
+
+       <div class="app-titel" style="margin-top: 15px">
+        <div class="label">设备电量：</div>
+        <div>
+         <el-input v-model="value"></el-input>
+        </div>
+        <div class="label">是否在线：</div>
+        <div>
+           <el-select v-model="value" placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+        </div>
+      </div>
+      <div class="app-titel" style="margin-top: 15px">
+        <div class="label" style="color: #ffffff">筛选相关：</div>
+        <div style="margin-left: 20px">
+          <el-button style="background: #2671e2; color: #ffffff"
+            >筛选</el-button
+          >
+        </div>
+        <div style="margin-left: 20px">
+          <el-button>清空筛选条件</el-button>
+        </div>
+         <div style="margin-left: 20px">
+          <el-button>批量开启指示灯</el-button>
+        </div>
+         <div style="margin-left: 20px">
+          <el-button>批量关闭指示灯</el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 表格 -->
+    <div class="cen-tab">
+      <div class="tongji">在线数量：0     离线数量：279</div>
+        <el-table
+          :data="tableData"
+          stripe
+          height="400"
+           @selection-change="handleSelectionChange"
+          style="width: 100%">
+           <el-table-column
+              type="selection"
+              width="55">
+            </el-table-column>
+          <el-table-column
+            prop="date"
+            label="序号"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="设备编号"
+             align="center"
+           >
+          </el-table-column>
+          <el-table-column
+            prop="date"
+            label="是否在线"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="领用人"
+             align="center"
+           >
+          </el-table-column>
+          <el-table-column
+            prop="address"
+            label="录音状态"
+             align="center">
+          </el-table-column>
+
+          <el-table-column
+            prop="date"
+            label="指示灯状态"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="设备电量"
+             align="center"
+           > </el-table-column>
+           <el-table-column
+            prop="name"
+            label="信号强度"
+             align="center"
+           > </el-table-column>
+            <el-table-column
+            prop="name"
+            label="楼盘名称"
+             align="center"
+           > </el-table-column>
+
+            <el-table-column
+            prop="name"
+            label="更新时间"
+             align="center"
+           > </el-table-column>
+            <el-table-column
+            prop="name"
+            label="开机时间"
+             align="center"
+           > </el-table-column>
+             <el-table-column
+            prop="name"
+            label="关机时间"
+             align="center"
+           > </el-table-column>
+             <el-table-column
+            prop="name"
+            label="关机状态"
+             align="center"
+           > </el-table-column>
+           <!--  scope -->
+         <el-table-column label="操作" align="center">
+            <template slot-scope="">
+              <div style="color: #2671E2;" @click="toinifoThereturn()">修改指示灯状态</div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div style="display: flex;justify-content:flex-end;margin-top: 10px;">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage4"
+              :page-sizes="[100, 200, 300, 400]"
+              :page-size="100"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="400">
+            </el-pagination>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      options: [
+        {
+          value: "1",
+          label: "全部",
+        },
+        {
+          value: "2",
+          label: "在线",
+        },
+        {
+          value: "3",
+          label: "离线",
+        },
+      ],
+      currentPage4:4,
+      value: "",
+      input: "",
+      tableData: [
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+      ],
+       multipleSelection:[],
+
+    };
+  },
+  mounted() {},
+  methods: {
+    //批量归还
+    toinifoThereturn(){
+      this.$confirm('确认更改吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$message({
+          type: 'success',
+          message: '更改成功!'
+        });
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '更改归还'
+        });
+      });
+    },
+     handleSelectionChange(val) {
+        this.multipleSelection = val;
+      },
+     handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+      },
+      handleCurrentChange(val) {
+        console.log(`当前页: ${val}`);
+      }
+  },
+};
+</script>
+
+<style scoped="scoped" lang="scss" >
+.box-center {
+  width: 100%;
+  padding: 15px;
+  min-width: 1200px;
+  padding-bottom: 100px;
+}
+.tongji{
+  padding-bottom: 10px;
+  font-size: 16px;
+  color: red;
+}
+.cen-tab{
+  width: 100%;
+  padding: 15px;
+  background: #FFFFFF;
+  margin-top: 15px;
+}
+.tophove {
+  color: #ffffff;
+  background: #2671e2;
+}
+.app-top {
+  width: 100%;
+  background: #ffffff;
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  .app-titel {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .label {
+      font-size: 14px;
+      font-weight: 400;
+      color: #32363d;
+      line-height: 14px;
+      margin-left: 15px;
+    }
+    .toptimeqhuan {
+      height: 30px;
+      background: #ffffff;
+      display: flex;
+      align-items: center;
+    }
+    .toptimeqhuan div {
+      padding-left: 20px;
+      padding-right: 20px;
+      text-align: center;
+      line-height: 30px;
+      font-size: 14px;
+      margin-right: 15px;
+      border-radius: 4px;
+      border: 1px solid #e0e0e0;
+    }
+  }
+}
+</style>

src/views/ReceivingRecords/index.vue

@@ -0,0 +1,413 @@
+<template>
+
+  <div class="box-center">
+    <!-- 头 -->
+    <div class="app-top">
+       <div class="app-titel">
+        <div class="label" style="color: #32363D;font-weight: 400;font-size: 16px;">楼盘选择：</div>
+        <div>
+          <el-select v-model="value" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="app-titel" style="margin-top: 15px">
+        <div class="label">时间：</div>
+        <div class="toptimeqhuan">
+          <div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)">
+            全部
+          </div>
+          <div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)">
+            15天内
+          </div>
+          <div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)">
+            30天内
+          </div>
+        </div>
+        <div>
+           <el-date-picker
+            v-model="value1"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </div>
+      </div>
+
+      <div class="app-titel" style="margin-top: 15px">
+        <div class="label">客户名称：</div>
+        <div>
+             <el-input v-model="value"></el-input>
+        </div>
+        <div class="label">客户意向：</div>
+        <div >
+         <el-select v-model="value" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+         <div class="label">录音类型：</div>
+        <div>
+         <el-select v-model="value" placeholder="请选择">
+            <el-option
+              v-for="item in options2"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+
+      <div class="app-titel" style="margin-top: 15px">
+        <div class="label">置业顾问：</div>
+        <div>
+          <el-select v-model="value" placeholder="请选择">
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="label">标注顾问：</div>
+        <div >
+         <el-select v-model="value" placeholder="请选择">
+            <el-option
+              v-for="item in options5"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="label">接待时长：</div>
+        <div >
+         <el-select v-model="value" placeholder="请选择">
+            <el-option
+              v-for="item in options3"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+         <div class="label">到访次数：</div>
+        <div>
+         <el-select v-model="value" placeholder="请选择">
+            <el-option
+              v-for="item in options4"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+
+      <div class="app-titel" style="margin-top: 15px">
+        <div class="label" style="color: #ffffff">筛选相关：</div>
+        <div style="margin-left: 20px">
+          <el-button style="background: #2671e2; color: #ffffff"
+            >筛选</el-button
+          >
+        </div>
+        <div style="margin-left: 20px">
+          <el-button>清空筛选条件</el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 表格 -->
+    <div class="cen-tab">
+        <el-table
+          :data="tableData"
+          stripe
+          height="400"
+          style="width: 100%">
+          <el-table-column
+            prop="date"
+            label="接待开始时间"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="顾问"
+             align="center"
+           >
+          </el-table-column>
+          <el-table-column
+            prop="address"
+            label="客户"
+             align="center">
+          </el-table-column>
+
+          <el-table-column
+            prop="date"
+            label="录音时长"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="录音类型"
+             align="center"
+           >
+          </el-table-column>
+          <el-table-column
+            prop="address"
+            label="标注顾问"
+             align="center">
+          </el-table-column>
+
+          <el-table-column
+            prop="date"
+            label="客户意向"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="执行率"
+             align="center"
+           >
+          </el-table-column>
+          <el-table-column
+            prop="address"
+            label="禁忌执行率"
+             align="center">
+          </el-table-column>
+           <!--  scope -->
+         <el-table-column label="操作" align="center">
+            <template slot-scope="">
+              <div style="color: #2671E2;">查看</div>
+              <div style="color: #2671E2;">下载文本</div>
+              <div style="color: #2671E2;">下载录音</div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div style="display: flex;justify-content:flex-end;margin-top: 10px;">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage4"
+              :page-sizes="[100, 200, 300, 400]"
+              :page-size="100"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="400">
+            </el-pagination>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      TimetoAhoose: 2,
+      options: [
+        {
+          value: "1",
+          label: "全部",
+        },
+        {
+          value: "2",
+          label: "服务器内",
+        },
+        {
+          value: "3",
+          label: "已失效",
+        },
+      ],
+       options2: [
+        {
+          value: "1",
+          label: "有效录音",
+        },
+        {
+          value: "2",
+          label: "无效录音",
+        },
+      ],
+       options3: [
+        {
+          value: "1",
+          label: "0-15分钟",
+        },
+        {
+          value: "2",
+          label: "16-30分钟",
+        },
+        {
+          value: "3",
+          label: "31-60分钟",
+        },
+        {
+          value: "4",
+          label: "61-90分钟",
+        },
+        {
+          value: "5",
+          label: "90分钟以上",
+        },
+      ],
+      options4: [
+        {
+          value: "1",
+          label: "首次到访",
+        },
+        {
+          value: "2",
+          label: "2次到访",
+        },
+        {
+          value: "3",
+          label: "3次到访",
+        },
+        {
+          value: "4",
+          label: "三次以上",
+        },
+      ],
+      options5: [
+        {
+          value: "1",
+          label: "已标注",
+        },
+        {
+          value: "2",
+          label: "未标注",
+        },
+        {
+          value: "3",
+          label: "全部",
+        },
+      ],
+      currentPage4:4,
+      value: "",
+      input: "",
+      tableData: [
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          address: " 1518 弄",
+        },
+      ],
+    };
+  },
+  mounted() {},
+  methods: {
+     handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+      },
+      handleCurrentChange(val) {
+        console.log(`当前页: ${val}`);
+      }
+  },
+};
+</script>
+
+<style scoped="scoped" lang="scss" >
+.box-center {
+  width: 100%;
+  padding: 15px;
+  min-width: 1200px;
+  padding-bottom: 100px;
+}
+.cen-tab{
+  width: 100%;
+  padding: 15px;
+  background: #FFFFFF;
+  margin-top: 15px;
+}
+.tophove {
+  color: #ffffff;
+  background: #2671e2;
+}
+.app-top {
+  width: 100%;
+  background: #ffffff;
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  .app-titel {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .label {
+      font-size: 14px;
+      font-weight: 400;
+      color: #32363d;
+      line-height: 14px;
+      margin-left: 15px;
+    }
+    .toptimeqhuan {
+      height: 30px;
+      background: #ffffff;
+      display: flex;
+      align-items: center;
+    }
+    .toptimeqhuan div {
+      padding-left: 20px;
+      padding-right: 20px;
+      text-align: center;
+      line-height: 30px;
+      font-size: 14px;
+      margin-right: 15px;
+      border-radius: 4px;
+      border: 1px solid #e0e0e0;
+    }
+  }
+}
+</style>