Signed-off-by: Changpeng Duan <838560574@qq.com>

pc/src/Mock/index.js

@@ -38,6 +38,7 @@ let testTable = function () {
             "userCode": "@integer(15253135600, 15253135699)",
             "name": "@region",
             "tel": "@integer(15253135600, 15253135699)",
+            "phone": "@integer(15253135600, 15253135699)",
             "shop": "@region",
             "create": "@datetime",
             "expTime": "@datetime",

pc/src/api/Navs.js

@@ -217,6 +217,24 @@ let navs = [
         "show": 4,
         "grouplist": "2,5",
         "icon": "el-icon-setting",
+    }, {
+        "clmid": "16",
+        "clmcode": "heartEquip",
+        "clmname": "心率设备",
+        "clmurl": "/heartEquip",
+        "prname": "",
+        "show": 2,
+        "grouplist": "2,5",
+        "icon": "el-icon-cpu",
+    }, {
+        "clmid": "17",
+        "clmcode": "region",
+        "clmname": "区域管理",
+        "clmurl": "/region",
+        "prname": "",
+        "show": 2,
+        "grouplist": "2,5",
+        "icon": "el-icon-map-location",
     },
 ];
 

pc/src/router/index.js

@@ -164,6 +164,38 @@ const routes = [
                     title: "下课管理",
                     clmid: "10",
                 }
+            },{
+                path: '/heartEquip',
+                name: 'heartEquip',
+                component: () => import('@/views/heartEquip.vue'),
+                meta: {
+                    title: "心率设备",
+                    clmid: "10",
+                }
+            },{
+                path: '/heartLog',
+                name: 'heartLog',
+                component: () => import('@/views/heartLog.vue'),
+                meta: {
+                    title: "设备记录",
+                    clmid: "10",
+                }
+            },{
+                path: '/region',
+                name: 'region',
+                component: () => import('@/views/region.vue'),
+                meta: {
+                    title: "区域管理",
+                    clmid: "10",
+                }
+            },{
+                path: '/regionEquip',
+                name: 'regionEquip',
+                component: () => import('@/views/regionEquip.vue'),
+                meta: {
+                    title: "区域设备",
+                    clmid: "10",
+                }
             },
         ]
     }, {

pc/src/views/AdminManage.vue

@@ -45,7 +45,7 @@
     <div class="change">
       <el-button @click="addAdmin"type="primary">新增</el-button>
       <el-button @click="editList">编辑</el-button>
-      <el-button @click="delList">删除</el-button>
+      <el-button @click="delList" type="danger">删除</el-button>
     </div>
     <div class="table">
       <el-table
@@ -56,10 +56,7 @@
           element-loading-background="rgba(0, 0, 0, 0.8)"
           class=""
           @selection-change="handleSelectionChange" @current-change="clickChange"
-      > @current-change="clickChange"
-        >
-        @current-change="clickChange"
-        >
+      >
         <el-table-column label="选择" width="55">
           <template slot-scope="scope">
             <el-radio v-model="tableRadio" :label="scope.row"><i></i></el-radio>

pc/src/views/ShopManage.vue

@@ -27,7 +27,7 @@
     <div class="change">
       <el-button @click="addAdmin" type="primary">新增店面</el-button>
       <el-button @click="editList">编辑店面</el-button>
-      <el-button @click="delList">删除店面</el-button>
+      <el-button @click="delList" type="danger">删除店面</el-button>
     </div>
     <div class="table">
       <el-table

pc/src/views/coach.vue

@@ -32,7 +32,8 @@
                     :default-sort="{prop: 'date', order: 'descending'}"
                     element-loading-background="rgba(0, 0, 0, 0.8)"
                     class=""
-                    @selection-change="handleSelectionChange"                                   @current-change="clickChange"
+                    @selection-change="handleSelectionChange"
+                    @current-change="clickChange"
 >
             >
                 <el-table-column label="选择" width="55">

pc/src/views/heartEquip.vue

@@ -0,0 +1,705 @@
+<template>
+  <div class="context">
+    <div class="panel">
+      <h5>心率设备</h5>
+      <div class="panel-body">
+        <div class="panel_control">
+          <el-row :gutter="20">
+            <el-col :span="4">
+              <em>心率设备:</em>
+              <el-input v-model="panel.phone" placeholder="请输入编号" type="number"></el-input>
+            </el-col>
+            <el-col :span="4">
+              <el-button size="" type="primary" @click="query" plain>查询</el-button>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+    </div>
+    <div class="change">
+      <el-button @click="addMember" type="primary">新增心率设备</el-button>
+      <el-button @click="editList">编辑心率设备</el-button>
+      <el-button @click="delList" type="danger">删除心率设备</el-button>
+    </div>
+    <div class="table">
+      <el-table
+          :data="tableData"
+          border
+          is-horizontal-resize
+          :default-sort="{prop: 'date', order: 'descending'}"
+          element-loading-background="rgba(0, 0, 0, 0.8)"
+          class=""
+          @selection-change="handleSelectionChange" @current-change="clickChange"
+      >
+        >
+        <el-table-column label="选择" width="55">
+          <template slot-scope="scope">
+            <el-radio v-model="tableRadio" :label="scope.row"><i></i></el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column
+            type="index"
+            label="序号"
+            align="center"
+
+            width="50">
+        </el-table-column>
+        <el-table-column
+            prop="tel"
+            label="序列号"
+            align="center"
+        >
+        </el-table-column>
+        <el-table-column
+            prop="shop"
+            label="会员"
+            align="center"
+            sortable
+        >
+
+          <template slot-scope="scope">
+<!--            <el-select v-model="scope.row.shop" @change="getRowTop(scope.row)" filterable v-if="scope.row.shop">-->
+<!--              <el-option-->
+<!--                  v-for="item in panel.options"-->
+<!--                  :key="item.value"-->
+<!--                  :label="item.label"-->
+<!--                  :value="item.value">-->
+<!--              </el-option>-->
+<!--            </el-select>-->
+            <el-button @click="takeBack(scope.row)" type="danger">{{scope.row.shop}}   设备收回</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column
+            prop="id"
+            label="操作"
+        >
+          <template slot-scope="scope">
+            <el-button type="text" @click="goPage(scope.row)">记录</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <br>
+      <el-pagination
+          background
+          :total="pageination.total"
+          :page-size="pageination.pageItem"
+          @current-change="pageChange"
+      ></el-pagination>
+    </div>
+
+    <el-dialog :title="dialogTitle" :visible.sync="dialogMemberVisible" width="650px">
+      <div class="dialogContent">
+        <div class="">
+          <el-form ref="form" :model="form" label-width="160px">
+            <el-form-item label="编号">
+              <el-input v-model="form.phone"></el-input>
+            </el-form-item>
+            <el-form-item label="实体序列号">
+              <el-input v-model="form.name"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <div class="dialogFooter">
+        <el-button type="primary" size="small" v-if="form.btnType == 0" @click="confirmMember">确定</el-button>
+        <el-button type="primary" size="small" v-if="form.btnType == 1" @click="confirmEditMember">确定
+        </el-button>
+        <el-button size="small" @click="dialogMemberVisible = false">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Global from '../Global.js'
+import {
+  testTable,
+  testSelect, ShopManagerStatusEdit, ClassDetailOne
+} from "../api/getApiRes";
+
+let qs = require('qs');
+export default {
+  data() {
+    return {
+      dialogVisible: false,//其他dialog
+      dialogMemberVisible: false,//新增心率设备dialog
+      dialogLesson: false,//课时调整
+      dialogGift: false,//赠送课时调整
+      dialogExpTime: false,//有效期调整
+      dialogLessonTable: false,//心率设备课程
+      dialogTitle: '新增心率设备',
+      dialogValue: [],
+      tableRadio: [],
+      // panel 配置项目
+      panel: {
+        name: '',
+        phone: '',
+        compname: '',
+        keyword: '',
+        USERCODE: '',
+        endType: '',
+        taskstatus: 99,
+        draw: 1,
+        start: 0,
+        recordsTotal: 0,
+        tableData: [],
+        allTableData: [],
+        limit: '10',
+        multipleSort: false,
+        loading: false,
+        fileList: [],
+        multipleSelection: [],
+        detectedmac: '',
+        options: [
+          {value: 99, label: '全部'},
+          {value: 1, label: '进行中'},
+          {value: 2, label: '已完成'},
+        ],
+        endTypeOptions: [
+          {value: 99, label: '全部'},
+          {value: 30, label: '近一个月'},
+          {value: 7, label: '近一周'},
+          {value: 1, label: '当日'},
+        ],
+        time1: globalBt(),
+      },
+      multipleSelection: [],
+      pageination: {
+        pageItem: 100,
+        pageoptions: pageOptions(),
+        total: 100,
+        pageIndex: 1,
+      },
+      form: {
+        name: '',
+        userCode: '',
+        shopId: '',
+        teacherId: 0,
+        memberType: 1,
+        lesson: 1,
+        gift: 1,
+        btnType: 0,//0新建，1编辑编辑
+        memo: '',
+        phone: '',
+        expTime: '',
+        dialogdata: [],//穿梭待选
+        dialogValue: [],//穿梭已选
+      },
+      memberTypes: [
+        {value: 1, label: '年心率设备'},
+        {value: 2, label: '充值心率设备'},
+      ],
+      tableData: []
+    }
+  },
+  mounted() {
+    this.getTableQuery();
+  },
+  methods: {
+    // 设备回收
+    takeBack(row){
+      let that = this;
+      this.$confirm('是否回收用户' + row.name + '的心率设备？', '回收操作', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        let param = {
+          token: localStorage.token,
+          Id: row.Id,
+          status: 0,
+        };
+        let postdata = qs.stringify(param);
+        testTable(postdata).then(res => {
+          let json = res;
+          if (json.Code == 0) {
+            that.$message({
+              showClose: true,
+              message: row.name + '回收成功！',
+              type: 'success'
+            });
+            // table 重载
+            that.getTableQuery();
+          } else {
+            that.$message.error(json.Memo);
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消回收'
+        });
+      });
+    },
+    goPage(row){
+      this.$router.push({path:'/heartLog',id:row.id});
+    },
+    // 编辑
+    editList() {
+      let that = this;
+      this.clearForm();
+      console.log(this.tableRadio);
+      if (this.tableRadio.length == 0) {
+        this.$message.error("请先选中一条记录");
+        return false
+      }
+      let row = this.tableRadio;
+      this.form.shopid = row.ShopId;
+      this.form.userId = row.Id;
+      this.form.name = row.Name;
+      this.form.userCode = row.Usercode;
+      this.form.password = '';
+      this.form.phone = row.Phone;
+      this.form.memo = row.Memo;
+      this.form.adminType = row.AdminType;
+      this.dialogVisible = true;
+      this.dialogTitle = '编辑心率设备'
+      this.form.btnState = 1;
+      this.dialogMemberVisible = true
+    },
+    clickChange(item) {
+      this.tableRadio = item
+    },
+    // 选择课程后，获取当前课程的建议上课人数和课时消耗
+    getRowTop(row) {
+      let that = this;
+      console.log(row);
+      let param = {
+        token: localStorage.token,
+        classId: row.ClassId,
+      };
+      let postdata = qs.stringify(param);
+      ClassDetailOne(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          row.TopLimit = json.Rs.TopLimit;
+          row.ConsumeHour = json.Rs.ConsumeHour;
+        } else {
+          that.$message.error(json.Memo);
+        }
+      })
+    },
+    // 编辑
+    editMember(row) {
+      this.clearForm();
+      this.form.name = row.Name;
+      this.form.phone = row.Phone;
+      this.form.shopId = row.ShopId;
+      this.form.teacherId = row.TeacherId;
+      this.form.btnType = 1;
+      this.dialogMemberVisible = true
+      this.dialogTitle = '编辑心率设备'
+    },
+    // 禁用
+    pauseRow(row) {
+      let that = this;
+      this.$confirm('是否禁用用户' + row.name + '？', '禁用操作', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        let param = {
+          token: localStorage.token,
+          Id: row.Id,
+          status: 0,
+        };
+        let postdata = qs.stringify(param);
+        testTable(postdata).then(res => {
+          let json = res;
+          if (json.Code == 0) {
+            that.$message({
+              showClose: true,
+              message: row.name + '禁用成功！',
+              type: 'success'
+            });
+            // table 重载
+            that.getTableQuery();
+          } else {
+            that.$message.error(json.Memo);
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消禁用'
+        });
+      });
+    },
+    // 启用
+    runRow(row) {
+      let that = this;
+      this.$confirm('是否启用用户' + row.name + '？', '启用操作', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        let param = {
+          token: localStorage.token,
+          Id: row.Id,
+          status: 1,
+        };
+        let postdata = qs.stringify(param);
+        testTable(postdata).then(res => {
+          let json = res;
+          if (json.Code == 0) {
+            that.$message({
+              showClose: true,
+              message: row.name + '启用成功！',
+              type: 'success'
+            });
+            // table 重载
+            that.getTableQuery();
+          } else {
+            that.$message.error(json.Memo);
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消启用'
+        });
+      });
+    },
+    // 关闭所有
+    allDialogClose() {
+      this.dialogVisible = false;
+      this.dialogGift = false;
+      this.dialogLesson = false;
+      this.dialogExpTime = false;
+      this.dialogLessonTable = false;
+    },
+    // 确认提交新增心率设备
+    confirmMember() {
+      let that = this;
+      // checkNum
+      if (!that.form.phone) {
+        this.$message.error('错了哦，编号不能为空');
+        return false
+      }
+      if (!that.form.name) {
+        this.$message.error('错了哦，实体序列号不能为空');
+        return false
+      }
+
+      let param = {
+        token: localStorage.token,
+        shopId: localStorage.shopId,
+        name: that.form.name,
+        phone: that.form.phone,
+      };
+      let postdata = qs.stringify(param);
+      TeacherAdd(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          // 关闭弹窗
+          that.dialogMemberVisible = false;
+          // 重载列表
+          that.getTableQuery();
+          that.$message({
+            showClose: true,
+            message: '心率设备添加成功！',
+            type: 'success'
+          });
+        } else {
+          that.$message.error(json.Memo);
+        }
+      })
+    },
+    confirmEditMember() {
+      let that = this;
+      // checkNum
+      if (!that.form.phone) {
+        this.$message.error('错了哦，手机号不能为空');
+        return false
+      }
+      if (!globalCheckPhone(that.form.phone)) {
+        this.$message.error('错了哦，手机号格式不正确');
+        return false
+      }
+      if (!that.form.name) {
+        this.$message.error('错了哦，心率设备名不能为空');
+        return false
+      }
+      if (that.form.name.length > 8) {
+        this.$message.error('错了哦，心率设备名字数超过8个字');
+        return false
+      }
+      let param = {
+        token: localStorage.token,
+        shopId: localStorage.shopId,
+        teacherId: that.form.teacherId,
+        name: that.form.name,
+        phone: that.form.phone,
+      };
+      let postdata = qs.stringify(param);
+      TeacherEdit(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          // 关闭弹窗
+          that.dialogMemberVisible = false;
+          // 重载列表
+          that.getTableQuery();
+          that.$message({
+            showClose: true,
+            message: '心率设备信息编辑成功！',
+            type: 'success'
+          });
+        } else {
+          that.$message.error(json.Memo);
+        }
+      })
+    },
+    // 确认提交课时
+    confirmLesson() {
+      let that = this;
+      // checkNum
+
+      let param = {
+        token: localStorage.token,
+        userCode: that.form.userCode,
+        lesson: that.form.lesson,
+      };
+      let postdata = qs.stringify(param);
+      testSelect(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          // 关闭弹窗
+          that.dialogVisible = false;
+          // 重载列表
+          that.getTableQuery();
+          that.$message({
+            showClose: true,
+            message: '课时调整成功！',
+            type: 'success'
+          });
+        } else {
+          that.$message.error(json.Memo);
+        }
+      })
+    },
+    // 新增心率设备
+    addMember() {
+      this.clearForm();
+      this.dialogMemberVisible = true
+      this.btnType = 0;
+      this.dialogTitle = '新增心率设备'
+    },
+    // 删除
+    delList() {
+      let that = this;
+      if (this.tableRadio.length == 0) {
+        this.$message.error("请先选中一条记录");
+        return false
+      }
+      let userId = this.tableRadio.Id;
+
+      let param = {
+        token: localStorage.token,
+        userId: userId,
+        status: 9,//0禁用1启用9删除
+      };
+      let postdata = qs.stringify(param);
+
+      this.$confirm('此操作将永久删除该心率设备, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        ShopManagerStatusEdit(postdata).then(res => {
+          let json = res;
+          if (json.Code == 0) {
+            that.$message({
+              showClose: true,
+              message: '选中的心率设备已删除！',
+              type: 'success'
+            });
+            // 重载列表
+            that.getTableQuery();
+          } else {
+            that.$message.error(json.Memo);
+          }
+        });
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+    },
+
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    // 查询按钮
+    query() {
+      this.getTableQuery();
+      this.$message.success('查询完毕');
+    },
+    clearForm() {
+      // clear
+      this.form.name = '';
+      this.form.phone = '';
+      this.form.userCode = '';
+      this.form.shopId = '';
+    },
+    // 页面数据查询
+    getTableQuery() {
+      let that = this;
+      that.loading = true;
+      let param = {
+        token: localStorage.token,
+        name: this.panel.name,//
+        phone: this.panel.phone,//
+      };
+      let postdata = qs.stringify(param);
+      testTable(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          that.loading = false;
+          if (json.Rs) {
+            that.allTableData = json.Rs;
+            that.recordsTotal = json.Rs.length;
+          } else {
+            that.allTableData = [];
+            that.recordsTotal = 0;
+          }
+
+          // 设置分页数据
+          that.setPaginations();
+        } else {
+          that.$message.error(json.Memo);
+        }
+      })
+    },
+    // 设置分页数据
+    setPaginations() {
+      // 分页属性
+      let that = this;
+      that.pageination.total = that.recordsTotal;
+
+      // 默认分页
+      that.tableData = that.allTableData.filter((item, index) => {
+        return index < that.pageination.pageItem;
+      });
+    },
+    // 每页显示数量
+    handleSizeChange() {
+      let that = this;
+      that.tableData = that.allTableData.filter((item, index) => {
+        return index < that.pageination.pageItem;
+      });
+      that.draw = that.pageination.pageItem;
+      // that.getTableQuery();
+    },
+    // 翻页
+    pageChange(pageIndex) {
+      let that = this;
+      // 获取当前页
+      let index = that.pageination.pageItem * (pageIndex - 1);
+      // 数据总数
+      let nums = that.pageination.pageItem * pageIndex;
+      // 容器
+      let tables = [];
+      for (var i = index; i < nums; i++) {
+        if (that.allTableData[i]) {
+          tables.push(that.allTableData[i])
+        }
+        this.tableData = tables;
+      }
+      that.start = index * that.draw;
+      // that.getTableQuery();
+    },
+    // 自动排序
+    sortChange(params) {
+      console.log(params)
+    },
+  },
+}
+</script>
+
+<style scoped>
+@import "../assets/css/panel.css";
+
+.context {
+  height: 770px;
+  overflow-y: scroll;
+
+  display: block;
+  margin: 0 auto;
+  background-color: #fff !important;
+  padding: 30px;
+}
+
+.panel-body {
+  padding: 20px;
+  background: #F0F2F5;
+}
+
+.change {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.change button {
+  float: left;
+}
+
+.change button.pull-right {
+  float: right;
+}
+
+.dialogTitle {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  color: #000000;
+  font-size: 18px;
+  text-align: center;
+}
+
+.dialogTitle em {
+  float: none;
+  font-style: normal;
+  color: #3799FF;
+  margin: 0;
+}
+
+/deep/ .el-transfer-panel__item .el-checkbox__input {
+  left: 40px;
+}
+
+.dialogFooter {
+  width: 90%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  margin-top: 10px;
+}
+
+.dialogFooter button {
+  float: right;
+  margin-left: 10px;
+}
+
+.dialogContent {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.dialogContent .pull-left {
+  width: 30%;
+  float: left;
+}
+
+.dialogContent .pull-right {
+  width: 70%;
+  float: right;
+}
+</style>

pc/src/views/heartLog.vue

@@ -0,0 +1,366 @@
+<template>
+  <div class="context">
+    <div class="panel">
+      <h5>使用记录</h5>
+    </div>
+    <div class="table">
+      <el-table
+          :data="tableData"
+          border
+          is-horizontal-resize
+          :default-sort="{prop: 'date', order: 'descending'}"
+          element-loading-background="rgba(0, 0, 0, 0.8)"
+          class=""
+      >
+        <el-table-column
+            type="index"
+            label="序号"
+            align="center"
+            width="50">
+        </el-table-column>
+        <el-table-column
+            prop="CreatedAt"
+            label="日期"
+            :formatter="filterFmtDate"
+            sortable
+        >
+        </el-table-column>
+        <el-table-column
+            prop="OptName"
+            label="操作者"
+            sortable
+        >
+        </el-table-column>
+        <el-table-column
+            prop="OptInfo"
+            label="操作信息"
+            sortable
+        >
+          <template slot-scope="scope">
+            <span v-if="scope.row.AdminType  == 1" style="color: #005EA2">已领取</span>
+            <span v-else style="color: green">已归还</span>
+          </template>
+        </el-table-column>
+        </el-table-column>
+      </el-table>
+      <br>
+      <el-pagination
+          background
+          :total="pageination.total"
+          :page-size="pageination.pageItem"
+          @current-change="pageChange"
+      ></el-pagination>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import Global from '../Global.js'
+import {
+  OptLogListQuery,
+  testTable,
+  testSelect, ShopManagerListQuery, ShopListQuery
+} from "../api/getApiRes";
+
+let qs = require('qs');
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      dialogTitle: '新增管理员',
+      times: globalBt2(7),
+      // panel 配置项目
+      panel: {
+        userCode: '',
+        tel: '',
+        userId: '',
+        shopList: 0,
+        shopId: '',
+        options: [],
+        shopOptions: [],
+        draw: 1,
+        start: 0,
+        recordsTotal: 0,
+        tableData: [],
+        allTableData: [],
+        limit: '10',
+        multipleSort: false,
+        loading: false,
+        fileList: [],
+        multipleSelection: [],
+        detectedmac: '',
+        time1: globalBt(),
+        timeScope: globalBt2(30),
+      },
+      multipleSelection: [],
+      pageination: {
+        pageItem: 100,
+        pageoptions: pageOptions(),
+        total: 100,
+        pageIndex: 1,
+      },
+      form: {
+        name: '',
+        userCode: '',
+        shopId: '',
+      },
+      shops: [],
+      tableData: [],
+      serachBtnStatus: false,
+    }
+  },
+  mounted() {
+    this.panelSelect();
+    this.shopPanelSelect();
+    this.getTableQuery();
+  },
+  methods: {
+    shopPanelSelect(){
+      let that = this;
+      let param = {
+        token: localStorage.token,
+      };
+      let postdata = qs.stringify(param);
+      ShopListQuery(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          if (json.Rs == '') {
+            that.$message.error('当前没有可选的店铺，请先在店面管理中添加店铺!');
+            return false
+          }
+          that.panel.shopOptions = turnShopResToOption(json.Rs);
+          that.panel.shopOptions.unshift({value: '', label: "全部"});
+        } else {
+          that.$message.error(json.Memo);
+        }
+      })
+    },
+    // 加载选项
+    panelSelect() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        start: 1,
+        tableMax: 999,
+      };
+      let postdata = qs.stringify(param);
+      ShopManagerListQuery(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          that.panel.options = this.turnResToOptionByUsers(json.Rs);
+          that.panel.options.unshift({value: '', label: "全部"});
+          console.log(that.panel.options);
+        } else {
+          that.$message.error(json.Memo);
+        }
+      })
+    },
+    turnResToOptionByUsers(data) {
+      if (!data) return false
+      let ids = data.map(item => {
+        return {
+          label: item.Name + ' ' + item.Phone,
+          key: parseInt(item.Id),
+          value: parseInt(item.Id),
+        }
+      })
+      return ids
+    },
+    clearForm() {
+      // clear
+      this.form.name = '';
+      this.form.userCode = '';
+      this.form.shopId = '';
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    // 查询按钮
+    query() {
+      // 按钮倒计时
+      let that = this;
+      that.serachBtnStatus = true;
+      let totalTime = 2
+      let clock = window.setInterval(() => {
+        totalTime--
+        if (totalTime < 0) {
+          totalTime = 2;
+          that.serachBtnStatus = false;
+        }
+      }, 1000)
+
+      this.getTableQuery();
+      this.$message.success('查询完毕');
+    },
+    // 页面数据查询
+    getTableQuery() {
+      let that = this;
+      // this.getGetChildRegionSelect(0, 1);
+      that.loading = true;
+      // 查询检测设备。上级区域id，区域id必传。regionid传0，查询supregionid对应所有子区域的检测设备。 如果supregionid，regionid都传0，默认查询企业ID下所有检测设备
+      let param = {
+        token: localStorage.token,
+        name: this.panel.name,
+        phone: this.panel.phone,
+        userId: this.panel.userId,
+        bt: nonTfmtDatetoLength(that.panel.timeScope[0], 10) + " 00:00:00",
+        et: nonTfmtDatetoLength(that.panel.timeScope[1], 10) + " 23:59:59",
+        start: 1,//
+        tableMax: 9999,//
+        optShopId:this.panel.shopId,
+      };
+      let postdata = qs.stringify(param);
+      OptLogListQuery(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          that.loading = false;
+          if (json.Rs) {
+            that.allTableData = json.Rs;
+            that.recordsTotal = json.Rs.length;
+          } else {
+            that.allTableData = [];
+            that.recordsTotal = 0;
+          }
+          // 设置分页数据
+          that.setPaginations();
+        } else {
+          that.$message.error(json.Memo);
+        }
+      })
+    },
+    // 设置分页数据
+    setPaginations() {
+      // 分页属性
+      let that = this;
+      that.pageination.total = that.recordsTotal;
+      // 默认分页
+      that.tableData = that.allTableData.filter((item, index) => {
+        return index < that.pageination.pageItem;
+      });
+    },
+    // 每页显示数量
+    handleSizeChange() {
+      let that = this;
+      that.tableData = that.allTableData.filter((item, index) => {
+        return index < that.pageination.pageItem;
+      });
+      that.draw = that.pageination.pageItem;
+      that.getTableQuery();
+    },
+    // 翻页
+    pageChange(pageIndex) {
+      let that = this;
+      // 获取当前页
+      let index = that.pageination.pageItem * (pageIndex - 1);
+      // 数据总数
+      let nums = that.pageination.pageItem * pageIndex;
+      // 容器
+      let tables = [];
+      for (var i = index; i < nums; i++) {
+        if (that.allTableData[i]) {
+          tables.push(that.allTableData[i])
+        }
+        this.tableData = tables;
+      }
+      that.start = index * that.draw;
+      // that.getTableQuery();
+    },
+    // 自动排序
+    sortChange(params) {
+      console.log(params)
+    },
+    // 过滤时间
+    filterFmtDate(value, row, column) {
+      let that = this;
+      return nonTfmtDate(column, 11);
+    },
+  },
+}
+</script>
+
+<style scoped>
+@import "../assets/css/panel.css";
+
+.context {
+  height: 770px;
+  overflow-y: scroll;
+
+  display: block;
+  margin: 0 auto;
+  background-color: #fff !important;
+  padding: 30px;
+  padding-bottom: 60px;
+}
+
+.panel-body {
+  padding: 20px;
+  background: #F0F2F5;
+}
+
+.change {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.change button {
+  float: left;
+}
+
+.change button.pull-right {
+  float: right;
+}
+
+.dialogTitle {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  color: #000000;
+  font-size: 18px;
+  text-align: center;
+}
+
+.dialogTitle em {
+  float: none;
+  font-style: normal;
+  color: #3799FF;
+  margin: 0;
+}
+
+/deep/ .el-transfer-panel__item .el-checkbox__input {
+  left: 40px;
+}
+
+.dialogFooter {
+  width: 90%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  margin-top: 10px;
+}
+
+.dialogFooter button {
+  float: right;
+  margin-left: 10px;
+}
+
+/deep/ .el-date-editor .el-range__icon {
+  line-height: 22px;
+}
+
+.panel /deep/ .el-date-editor .el-range-separator {
+  line-height: 22px;
+}
+/*ipad only*/
+@media only screen and (max-width: 1366px) {
+  .panel /deep/ .el-date-editor--daterange {
+    width: 100%;
+  }
+}
+
+</style>

pc/src/views/region.vue

@@ -0,0 +1,673 @@
+<template>
+  <div class="context">
+    <div class="panel">
+      <h5>区域管理</h5>
+    </div>
+    <div class="change">
+      <el-button @click="addMember" type="primary">新增区域</el-button>
+      <el-button @click="editList">编辑区域</el-button>
+      <el-button @click="delList" type="danger">删除区域</el-button>
+    </div>
+    <div class="table">
+      <el-table
+          :data="tableData"
+          border
+          is-horizontal-resize
+          :default-sort="{prop: 'date', order: 'descending'}"
+          element-loading-background="rgba(0, 0, 0, 0.8)"
+          class=""
+          @selection-change="handleSelectionChange" @current-change="clickChange"
+      >
+        >
+        <el-table-column label="选择" width="55">
+          <template slot-scope="scope">
+            <el-radio v-model="tableRadio" :label="scope.row"><i></i></el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column
+            type="index"
+            label="序号"
+            align="center"
+            width="50">
+        </el-table-column>
+        <el-table-column
+            prop="name"
+            label="区域名称"
+            width="180">
+        </el-table-column>
+        <el-table-column
+            prop="create"
+            label="创建日期"
+            width="180">
+        </el-table-column>
+        <el-table-column
+            prop="id"
+            label="操作"
+        >
+          <template slot-scope="scope">
+            <el-button type="text" @click="goPage(scope.row)">所属设备</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <br>
+      <el-pagination
+          background
+          :total="pageination.total"
+          :page-size="pageination.pageItem"
+          @current-change="pageChange"
+      ></el-pagination>
+    </div>
+
+    <el-dialog :title="dialogTitle" :visible.sync="dialogMemberVisible" width="650px">
+      <div class="dialogContent">
+        <div class="">
+          <el-form ref="form" :model="form" label-width="160px">
+            <el-form-item label="区域名称">
+              <el-input v-model="form.name"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <div class="dialogFooter">
+        <el-button type="primary" size="small" v-if="form.btnType == 0" @click="confirmMember">确定</el-button>
+        <el-button type="primary" size="small" v-if="form.btnType == 1" @click="confirmEditMember">确定
+        </el-button>
+        <el-button size="small" @click="dialogMemberVisible = false">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Global from '../Global.js'
+import {
+  testTable,
+  testSelect,
+} from "../api/getApiRes";
+
+let qs = require('qs');
+export default {
+  data() {
+    return {
+      dialogVisible: false,//其他dialog
+      dialogMemberVisible: false,//新增区域dialog
+      dialogLesson: false,//课时调整
+      dialogGift: false,//赠送课时调整
+      dialogExpTime: false,//有效期调整
+      dialogLessonTable: false,//区域课程
+      dialogTitle: '新增区域',
+      dialogValue: [],
+      tableRadio: [],
+      // panel 配置项目
+      panel: {
+        name: '',
+        phone: '',
+        compname: '',
+        keyword: '',
+        USERCODE: '',
+        endType: '',
+        taskstatus: 99,
+        draw: 1,
+        start: 0,
+        recordsTotal: 0,
+        tableData: [],
+        allTableData: [],
+        limit: '10',
+        multipleSort: false,
+        loading: false,
+        fileList: [],
+        multipleSelection: [],
+        detectedmac: '',
+        options: [
+          {value: 99, label: '全部'},
+          {value: 1, label: '进行中'},
+          {value: 2, label: '已完成'},
+        ],
+        endTypeOptions: [
+          {value: 99, label: '全部'},
+          {value: 30, label: '近一个月'},
+          {value: 7, label: '近一周'},
+          {value: 1, label: '当日'},
+        ],
+        time1: globalBt(),
+      },
+      multipleSelection: [],
+      pageination: {
+        pageItem: 100,
+        pageoptions: pageOptions(),
+        total: 100,
+        pageIndex: 1,
+      },
+      form: {
+        name: '',
+        userCode: '',
+        shopId: '',
+        teacherId: 0,
+        memberType: 1,
+        lesson: 1,
+        gift: 1,
+        btnType: 0,//0新建，1编辑编辑
+        memo: '',
+        phone: '',
+        expTime: '',
+        dialogdata: [],//穿梭待选
+        dialogValue: [],//穿梭已选
+      },
+      memberTypes: [
+        {value: 1, label: '年区域'},
+        {value: 2, label: '充值区域'},
+      ],
+      tableData: []
+    }
+  },
+  mounted() {
+    this.getTableQuery();
+  },
+  methods: {
+    // 设备回收
+    takeBack(row){
+      let that = this;
+      this.$confirm('是否回收用户' + row.name + '的区域？', '回收操作', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        let param = {
+          token: localStorage.token,
+          Id: row.Id,
+          status: 0,
+        };
+        let postdata = qs.stringify(param);
+        testTable(postdata).then(res => {
+          let json = res;
+          if (json.Code == 0) {
+            that.$message({
+              showClose: true,
+              message: row.name + '回收成功！',
+              type: 'success'
+            });
+            // table 重载
+            that.getTableQuery();
+          } else {
+            that.$message.error(json.Memo);
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消回收'
+        });
+      });
+    },
+    goPage(row){
+      this.$router.push({path:'/heartLog',id:row.id});
+    },
+    // 编辑
+    editList() {
+      let that = this;
+      this.clearForm();
+      console.log(this.tableRadio);
+      if (this.tableRadio.length == 0) {
+        this.$message.error("请先选中一条记录");
+        return false
+      }
+      let row = this.tableRadio;
+      this.form.shopid = row.ShopId;
+      this.form.userId = row.Id;
+      this.form.name = row.Name;
+      this.form.userCode = row.Usercode;
+      this.form.password = '';
+      this.form.phone = row.Phone;
+      this.form.memo = row.Memo;
+      this.form.adminType = row.AdminType;
+      this.dialogVisible = true;
+      this.dialogTitle = '编辑区域'
+      this.form.btnState = 1;
+      this.dialogMemberVisible = true
+    },
+    clickChange(item) {
+      this.tableRadio = item
+    },
+    // 选择课程后，获取当前课程的建议上课人数和课时消耗
+    getRowTop(row) {
+      let that = this;
+      console.log(row);
+      let param = {
+        token: localStorage.token,
+        classId: row.ClassId,
+      };
+      let postdata = qs.stringify(param);
+      ClassDetailOne(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          row.TopLimit = json.Rs.TopLimit;
+          row.ConsumeHour = json.Rs.ConsumeHour;
+        } else {
+          that.$message.error(json.Memo);
+        }
+      })
+    },
+    // 编辑
+    editMember(row) {
+      this.clearForm();
+      this.form.name = row.Name;
+      this.form.phone = row.Phone;
+      this.form.shopId = row.ShopId;
+      this.form.teacherId = row.TeacherId;
+      this.form.btnType = 1;
+      this.dialogMemberVisible = true
+      this.dialogTitle = '编辑区域'
+    },
+    // 禁用
+    pauseRow(row) {
+      let that = this;
+      this.$confirm('是否禁用用户' + row.name + '？', '禁用操作', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        let param = {
+          token: localStorage.token,
+          Id: row.Id,
+          status: 0,
+        };
+        let postdata = qs.stringify(param);
+        testTable(postdata).then(res => {
+          let json = res;
+          if (json.Code == 0) {
+            that.$message({
+              showClose: true,
+              message: row.name + '禁用成功！',
+              type: 'success'
+            });
+            // table 重载
+            that.getTableQuery();
+          } else {
+            that.$message.error(json.Memo);
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消禁用'
+        });
+      });
+    },
+    // 启用
+    runRow(row) {
+      let that = this;
+      this.$confirm('是否启用用户' + row.name + '？', '启用操作', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        let param = {
+          token: localStorage.token,
+          Id: row.Id,
+          status: 1,
+        };
+        let postdata = qs.stringify(param);
+        testTable(postdata).then(res => {
+          let json = res;
+          if (json.Code == 0) {
+            that.$message({
+              showClose: true,
+              message: row.name + '启用成功！',
+              type: 'success'
+            });
+            // table 重载
+            that.getTableQuery();
+          } else {
+            that.$message.error(json.Memo);
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消启用'
+        });
+      });
+    },
+    // 关闭所有
+    allDialogClose() {
+      this.dialogVisible = false;
+      this.dialogGift = false;
+      this.dialogLesson = false;
+      this.dialogExpTime = false;
+      this.dialogLessonTable = false;
+    },
+    // 确认提交新增区域
+    confirmMember() {
+      let that = this;
+      // checkNum
+      if (!that.form.phone) {
+        this.$message.error('错了哦，编号不能为空');
+        return false
+      }
+      if (!that.form.name) {
+        this.$message.error('错了哦，实体序列号不能为空');
+        return false
+      }
+
+      let param = {
+        token: localStorage.token,
+        shopId: localStorage.shopId,
+        name: that.form.name,
+        phone: that.form.phone,
+      };
+      let postdata = qs.stringify(param);
+      TeacherAdd(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          // 关闭弹窗
+          that.dialogMemberVisible = false;
+          // 重载列表
+          that.getTableQuery();
+          that.$message({
+            showClose: true,
+            message: '区域添加成功！',
+            type: 'success'
+          });
+        } else {
+          that.$message.error(json.Memo);
+        }
+      })
+    },
+    confirmEditMember() {
+      let that = this;
+      // checkNum
+      if (!that.form.phone) {
+        this.$message.error('错了哦，手机号不能为空');
+        return false
+      }
+      if (!globalCheckPhone(that.form.phone)) {
+        this.$message.error('错了哦，手机号格式不正确');
+        return false
+      }
+      if (!that.form.name) {
+        this.$message.error('错了哦，区域名不能为空');
+        return false
+      }
+      if (that.form.name.length > 8) {
+        this.$message.error('错了哦，区域名字数超过8个字');
+        return false
+      }
+      let param = {
+        token: localStorage.token,
+        shopId: localStorage.shopId,
+        teacherId: that.form.teacherId,
+        name: that.form.name,
+        phone: that.form.phone,
+      };
+      let postdata = qs.stringify(param);
+      TeacherEdit(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          // 关闭弹窗
+          that.dialogMemberVisible = false;
+          // 重载列表
+          that.getTableQuery();
+          that.$message({
+            showClose: true,
+            message: '区域信息编辑成功！',
+            type: 'success'
+          });
+        } else {
+          that.$message.error(json.Memo);
+        }
+      })
+    },
+    // 确认提交课时
+    confirmLesson() {
+      let that = this;
+      // checkNum
+
+      let param = {
+        token: localStorage.token,
+        userCode: that.form.userCode,
+        lesson: that.form.lesson,
+      };
+      let postdata = qs.stringify(param);
+      testSelect(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          // 关闭弹窗
+          that.dialogVisible = false;
+          // 重载列表
+          that.getTableQuery();
+          that.$message({
+            showClose: true,
+            message: '课时调整成功！',
+            type: 'success'
+          });
+        } else {
+          that.$message.error(json.Memo);
+        }
+      })
+    },
+    // 新增区域
+    addMember() {
+      this.clearForm();
+      this.dialogMemberVisible = true
+      this.btnType = 0;
+      this.dialogTitle = '新增区域'
+    },
+    // 删除
+    delList() {
+      let that = this;
+      if (this.tableRadio.length == 0) {
+        this.$message.error("请先选中一条记录");
+        return false
+      }
+      let userId = this.tableRadio.Id;
+
+      let param = {
+        token: localStorage.token,
+        userId: userId,
+        status: 9,//0禁用1启用9删除
+      };
+      let postdata = qs.stringify(param);
+
+      this.$confirm('此操作将永久删除该区域, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        ShopManagerStatusEdit(postdata).then(res => {
+          let json = res;
+          if (json.Code == 0) {
+            that.$message({
+              showClose: true,
+              message: '选中的区域已删除！',
+              type: 'success'
+            });
+            // 重载列表
+            that.getTableQuery();
+          } else {
+            that.$message.error(json.Memo);
+          }
+        });
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+    },
+
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    // 查询按钮
+    query() {
+      this.getTableQuery();
+      this.$message.success('查询完毕');
+    },
+    clearForm() {
+      // clear
+      this.form.name = '';
+      this.form.phone = '';
+      this.form.userCode = '';
+      this.form.shopId = '';
+    },
+    // 页面数据查询
+    getTableQuery() {
+      let that = this;
+      that.loading = true;
+      let param = {
+        token: localStorage.token,
+        name: this.panel.name,//
+        phone: this.panel.phone,//
+      };
+      let postdata = qs.stringify(param);
+      testTable(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          that.loading = false;
+          if (json.Rs) {
+            that.allTableData = json.Rs;
+            that.recordsTotal = json.Rs.length;
+          } else {
+            that.allTableData = [];
+            that.recordsTotal = 0;
+          }
+
+          // 设置分页数据
+          that.setPaginations();
+        } else {
+          that.$message.error(json.Memo);
+        }
+      })
+    },
+    // 设置分页数据
+    setPaginations() {
+      // 分页属性
+      let that = this;
+      that.pageination.total = that.recordsTotal;
+
+      // 默认分页
+      that.tableData = that.allTableData.filter((item, index) => {
+        return index < that.pageination.pageItem;
+      });
+    },
+    // 每页显示数量
+    handleSizeChange() {
+      let that = this;
+      that.tableData = that.allTableData.filter((item, index) => {
+        return index < that.pageination.pageItem;
+      });
+      that.draw = that.pageination.pageItem;
+      // that.getTableQuery();
+    },
+    // 翻页
+    pageChange(pageIndex) {
+      let that = this;
+      // 获取当前页
+      let index = that.pageination.pageItem * (pageIndex - 1);
+      // 数据总数
+      let nums = that.pageination.pageItem * pageIndex;
+      // 容器
+      let tables = [];
+      for (var i = index; i < nums; i++) {
+        if (that.allTableData[i]) {
+          tables.push(that.allTableData[i])
+        }
+        this.tableData = tables;
+      }
+      that.start = index * that.draw;
+      // that.getTableQuery();
+    },
+    // 自动排序
+    sortChange(params) {
+      console.log(params)
+    },
+  },
+}
+</script>
+
+<style scoped>
+@import "../assets/css/panel.css";
+
+.context {
+  height: 770px;
+  overflow-y: scroll;
+
+  display: block;
+  margin: 0 auto;
+  background-color: #fff !important;
+  padding: 30px;
+}
+
+.panel-body {
+  padding: 20px;
+  background: #F0F2F5;
+}
+
+.change {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.change button {
+  float: left;
+}
+
+.change button.pull-right {
+  float: right;
+}
+
+.dialogTitle {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  color: #000000;
+  font-size: 18px;
+  text-align: center;
+}
+
+.dialogTitle em {
+  float: none;
+  font-style: normal;
+  color: #3799FF;
+  margin: 0;
+}
+
+/deep/ .el-transfer-panel__item .el-checkbox__input {
+  left: 40px;
+}
+
+.dialogFooter {
+  width: 90%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  margin-top: 10px;
+}
+
+.dialogFooter button {
+  float: right;
+  margin-left: 10px;
+}
+
+.dialogContent {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.dialogContent .pull-left {
+  width: 30%;
+  float: left;
+}
+
+.dialogContent .pull-right {
+  width: 70%;
+  float: right;
+}
+</style>

pc/src/views/region2.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="context">
+    <div class="panel">
+      <h5>区域管理</h5>
+      <el-button id="queryBtn" type="success" @click="query()" :disabled="serachBtnStatus">刷新</el-button>
+      <div class="pages">
+        <div class="shops" v-for="s in 2">
+          <h5>  小飞龙蒙正店</h5>
+          <div class="change">
+            <el-button type="primary" @click="">新增区域</el-button>
+            <el-button @click="" >编辑区域</el-button>
+            <el-button @click="" type="danger">删除区域</el-button>
+          </div>
+          <el-table
+              :data="tableData"
+              style="width: 100%">
+            <el-table-column
+                type="index"
+                label="序号"
+                align="center"
+                width="50">
+            </el-table-column>
+            <el-table-column
+                prop="name"
+                label="序列号"
+            >
+            </el-table-column>
+            <el-table-column
+                prop="name"
+                label="类型"
+            >
+            </el-table-column>
+            <el-table-column
+                prop="date"
+                label="创建日期"
+                width="180">
+            </el-table-column>
+            <el-table-column
+                prop="name"
+                label="状态"
+            >
+            </el-table-column>
+            <el-table-column
+                prop="address"
+                label="操作">
+              <template slot-scope="scope">
+                <el-button type="success" @click="run(scope.row.id)" v-if="state != 4">开启</el-button>
+                <el-button type="danger" @click="pause(scope.row.id)">暂停</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <br>
+          <br>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Global from '../Global.js'
+import {
+  testTable,
+  testSelect
+} from "../api/getApiRes";
+
+let qs = require('qs');
+export default {
+  data() {
+    return {
+      tableData:[],
+      serachBtnStatus:true
+    }
+  },
+  mounted() {
+    this.getTableQuery();
+  },
+  methods: {
+    // 查询按钮
+    query() {
+      let that = this;
+      this.getTableQuery();
+      that.serachBtnStatus = true;
+      let totalTime = 2
+      let clock = window.setInterval(() => {
+        totalTime--
+        if (totalTime < 0) {
+          totalTime = 2;
+          that.serachBtnStatus = false;
+        }
+      }, 1000)
+      this.$message.success('查询完毕');
+    },
+    // 页面数据查询
+    getTableQuery() {
+      let that = this;
+      that.loading = true;
+      let param = {
+        token: localStorage.token,
+      };
+      let postdata = qs.stringify(param);
+      testTable(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          that.loading = false;
+          if (json.Rs) {
+            that.tableData = json.Rs;
+          } else {
+            that.tableData = [];
+          }
+        } else {
+          that.$message.error(json.Memo);
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style scoped>
+@import "../assets/css/panel.css";
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.context {
+  height: 770px;
+  overflow-y: scroll;
+  display: block;
+  margin: 0 auto;
+  background-color: #fff !important;
+  padding: 30px;
+}
+
+.panel-body {
+  padding: 20px;
+  background: #F0F2F5;
+}
+
+.pages {
+  width: 100%;
+  min-height: 600px;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  padding-bottom: 80px;
+}
+.change {
+  float: right;
+}
+#queryBtn {
+  float: right;
+}
+</style>

pc/src/views/regionEquip.vue

@@ -0,0 +1,365 @@
+<template>
+  <div class="context">
+    <div class="panel">
+      <h5>所属设备 -- xx区域</h5>
+    </div>
+    <div class="table">
+      <el-table
+          :data="tableData"
+          border
+          is-horizontal-resize
+          :default-sort="{prop: 'date', order: 'descending'}"
+          element-loading-background="rgba(0, 0, 0, 0.8)"
+          class=""
+      >
+        <el-table-column
+            type="index"
+            label="序号"
+            align="center"
+            width="50">
+        </el-table-column>
+        <el-table-column
+            prop="CreatedAt"
+            label="日期"
+            :formatter="filterFmtDate"
+            sortable
+        >
+        </el-table-column>
+        <el-table-column
+            prop="OptName"
+            label="操作者"
+            sortable
+        >
+        </el-table-column>
+        <el-table-column
+            prop="OptInfo"
+            label="操作信息"
+            sortable
+        >
+          <template slot-scope="scope">
+                        <el-button type="success" @click="run(scope.row.id)" v-if="scope.row.Status != 4">开启</el-button>
+                        <el-button type="danger" @click="pause(scope.row.id)" v-if="scope.row.Status == 4">暂停</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <br>
+      <el-pagination
+          background
+          :total="pageination.total"
+          :page-size="pageination.pageItem"
+          @current-change="pageChange"
+      ></el-pagination>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import Global from '../Global.js'
+import {
+  OptLogListQuery,
+  testTable,
+  testSelect, ShopManagerListQuery, ShopListQuery
+} from "../api/getApiRes";
+
+let qs = require('qs');
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      dialogTitle: '新增管理员',
+      times: globalBt2(7),
+      // panel 配置项目
+      panel: {
+        userCode: '',
+        tel: '',
+        userId: '',
+        shopList: 0,
+        shopId: '',
+        options: [],
+        shopOptions: [],
+        draw: 1,
+        start: 0,
+        recordsTotal: 0,
+        tableData: [],
+        allTableData: [],
+        limit: '10',
+        multipleSort: false,
+        loading: false,
+        fileList: [],
+        multipleSelection: [],
+        detectedmac: '',
+        time1: globalBt(),
+        timeScope: globalBt2(30),
+      },
+      multipleSelection: [],
+      pageination: {
+        pageItem: 100,
+        pageoptions: pageOptions(),
+        total: 100,
+        pageIndex: 1,
+      },
+      form: {
+        name: '',
+        userCode: '',
+        shopId: '',
+      },
+      shops: [],
+      tableData: [],
+      serachBtnStatus: false,
+    }
+  },
+  mounted() {
+    this.panelSelect();
+    this.shopPanelSelect();
+    this.getTableQuery();
+  },
+  methods: {
+    shopPanelSelect(){
+      let that = this;
+      let param = {
+        token: localStorage.token,
+      };
+      let postdata = qs.stringify(param);
+      ShopListQuery(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          if (json.Rs == '') {
+            that.$message.error('当前没有可选的店铺，请先在店面管理中添加店铺!');
+            return false
+          }
+          that.panel.shopOptions = turnShopResToOption(json.Rs);
+          that.panel.shopOptions.unshift({value: '', label: "全部"});
+        } else {
+          that.$message.error(json.Memo);
+        }
+      })
+    },
+    // 加载选项
+    panelSelect() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+        start: 1,
+        tableMax: 999,
+      };
+      let postdata = qs.stringify(param);
+      ShopManagerListQuery(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          that.panel.options = this.turnResToOptionByUsers(json.Rs);
+          that.panel.options.unshift({value: '', label: "全部"});
+          console.log(that.panel.options);
+        } else {
+          that.$message.error(json.Memo);
+        }
+      })
+    },
+    turnResToOptionByUsers(data) {
+      if (!data) return false
+      let ids = data.map(item => {
+        return {
+          label: item.Name + ' ' + item.Phone,
+          key: parseInt(item.Id),
+          value: parseInt(item.Id),
+        }
+      })
+      return ids
+    },
+    clearForm() {
+      // clear
+      this.form.name = '';
+      this.form.userCode = '';
+      this.form.shopId = '';
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    // 查询按钮
+    query() {
+      // 按钮倒计时
+      let that = this;
+      that.serachBtnStatus = true;
+      let totalTime = 2
+      let clock = window.setInterval(() => {
+        totalTime--
+        if (totalTime < 0) {
+          totalTime = 2;
+          that.serachBtnStatus = false;
+        }
+      }, 1000)
+
+      this.getTableQuery();
+      this.$message.success('查询完毕');
+    },
+    // 页面数据查询
+    getTableQuery() {
+      let that = this;
+      // this.getGetChildRegionSelect(0, 1);
+      that.loading = true;
+      // 查询检测设备。上级区域id，区域id必传。regionid传0，查询supregionid对应所有子区域的检测设备。 如果supregionid，regionid都传0，默认查询企业ID下所有检测设备
+      let param = {
+        token: localStorage.token,
+        name: this.panel.name,
+        phone: this.panel.phone,
+        userId: this.panel.userId,
+        bt: nonTfmtDatetoLength(that.panel.timeScope[0], 10) + " 00:00:00",
+        et: nonTfmtDatetoLength(that.panel.timeScope[1], 10) + " 23:59:59",
+        start: 1,//
+        tableMax: 9999,//
+        optShopId:this.panel.shopId,
+      };
+      let postdata = qs.stringify(param);
+      OptLogListQuery(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          that.loading = false;
+          if (json.Rs) {
+            that.allTableData = json.Rs;
+            that.recordsTotal = json.Rs.length;
+          } else {
+            that.allTableData = [];
+            that.recordsTotal = 0;
+          }
+          // 设置分页数据
+          that.setPaginations();
+        } else {
+          that.$message.error(json.Memo);
+        }
+      })
+    },
+    // 设置分页数据
+    setPaginations() {
+      // 分页属性
+      let that = this;
+      that.pageination.total = that.recordsTotal;
+      // 默认分页
+      that.tableData = that.allTableData.filter((item, index) => {
+        return index < that.pageination.pageItem;
+      });
+    },
+    // 每页显示数量
+    handleSizeChange() {
+      let that = this;
+      that.tableData = that.allTableData.filter((item, index) => {
+        return index < that.pageination.pageItem;
+      });
+      that.draw = that.pageination.pageItem;
+      that.getTableQuery();
+    },
+    // 翻页
+    pageChange(pageIndex) {
+      let that = this;
+      // 获取当前页
+      let index = that.pageination.pageItem * (pageIndex - 1);
+      // 数据总数
+      let nums = that.pageination.pageItem * pageIndex;
+      // 容器
+      let tables = [];
+      for (var i = index; i < nums; i++) {
+        if (that.allTableData[i]) {
+          tables.push(that.allTableData[i])
+        }
+        this.tableData = tables;
+      }
+      that.start = index * that.draw;
+      // that.getTableQuery();
+    },
+    // 自动排序
+    sortChange(params) {
+      console.log(params)
+    },
+    // 过滤时间
+    filterFmtDate(value, row, column) {
+      let that = this;
+      return nonTfmtDate(column, 11);
+    },
+  },
+}
+</script>
+
+<style scoped>
+@import "../assets/css/panel.css";
+
+.context {
+  height: 770px;
+  overflow-y: scroll;
+
+  display: block;
+  margin: 0 auto;
+  background-color: #fff !important;
+  padding: 30px;
+  padding-bottom: 60px;
+}
+
+.panel-body {
+  padding: 20px;
+  background: #F0F2F5;
+}
+
+.change {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.change button {
+  float: left;
+}
+
+.change button.pull-right {
+  float: right;
+}
+
+.dialogTitle {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  color: #000000;
+  font-size: 18px;
+  text-align: center;
+}
+
+.dialogTitle em {
+  float: none;
+  font-style: normal;
+  color: #3799FF;
+  margin: 0;
+}
+
+/deep/ .el-transfer-panel__item .el-checkbox__input {
+  left: 40px;
+}
+
+.dialogFooter {
+  width: 90%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  margin-top: 10px;
+}
+
+.dialogFooter button {
+  float: right;
+  margin-left: 10px;
+}
+
+/deep/ .el-date-editor .el-range__icon {
+  line-height: 22px;
+}
+
+.panel /deep/ .el-date-editor .el-range-separator {
+  line-height: 22px;
+}
+/*ipad only*/
+@media only screen and (max-width: 1366px) {
+  .panel /deep/ .el-date-editor--daterange {
+    width: 100%;
+  }
+}
+
+</style>

tv/.idea/workspace.xml

@@ -20,37 +20,16 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="c813a37b-038b-4bb1-a925-c03a432a7638" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/../app/src/static/images/main/shop.jpg" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/../app/src/static/images/main/shop2.jpg" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/Headside.vue" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/static/img/blue.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/static/img/head.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/static/img/heart.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/static/img/l1.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/static/img/l2.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/static/img/l3.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/static/img/l4.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/static/img/l5.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/static/img/l6.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/static/img/logo.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/static/img/long.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/static/img/ltCube.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/static/img/mainBg.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/static/img/rtCube.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/static/img/wifi.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/views/Wait.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../app/src/page/mainpage.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../app/src/page/mainpage.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../pc/src/assets/css/panel.css" beforeDir="false" afterPath="$PROJECT_DIR$/../pc/src/assets/css/panel.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../pc/src/views/EditLessonManage.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../pc/src/views/EditLessonManage.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../pc/src/views/EditLessonTable.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../pc/src/views/EditLessonTable.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../pc/src/views/Main.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../pc/src/views/Main.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../pc/src/views/appoint.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../pc/src/views/appoint.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../pc/src/views/cost.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../pc/src/views/cost.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../pc/src/views/record.vue" beforeDir="false" afterPath="$PROJECT_DIR$/../pc/src/views/record.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/static/img/circle.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/static/img/dialog.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/static/img/rankBg.png" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/Global.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/Global.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/Index.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Index.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/Mock/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/Mock/index.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/api/getApiRes.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/api/getApiRes.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/Headside.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Headside.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/router/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/index.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/views/Main.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Main.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/Wait.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Rank.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -115,7 +94,7 @@
       <workItem from="1603951547210" duration="1144000" />
       <workItem from="1604020412952" duration="1300000" />
       <workItem from="1604022872771" duration="1602000" />
-      <workItem from="1604036567460" duration="16403000" />
+      <workItem from="1604036567460" duration="34092000" />
     </task>
     <servers />
   </component>
@@ -139,25 +118,33 @@
       <screen x="-2560" y="0" width="2560" height="1379" />
     </state>
     <state x="-1830" y="274" width="1099" height="859" key="#com.intellij.execution.impl.EditConfigurationsDialog/0.0.1920.1019/-2560.0.2560.1379@-2560.0.2560.1379" timestamp="1604022799787" />
-    <state width="1250" height="371" key="GridCell.Tab.0.bottom" timestamp="1604042585903">
+    <state width="1250" height="371" key="GridCell.Tab.0.bottom" timestamp="1604132708064">
       <screen x="-2560" y="0" width="2560" height="1379" />
     </state>
-    <state width="1250" height="371" key="GridCell.Tab.0.bottom/0.0.1920.1019/-2560.0.2560.1379@-2560.0.2560.1379" timestamp="1604042585903" />
-    <state width="1250" height="371" key="GridCell.Tab.0.center" timestamp="1604042585903">
+    <state width="1250" height="371" key="GridCell.Tab.0.bottom/0.0.1920.1019/-2560.0.2560.1379@-2560.0.2560.1379" timestamp="1604132708064" />
+    <state width="1250" height="371" key="GridCell.Tab.0.center" timestamp="1604132708064">
       <screen x="-2560" y="0" width="2560" height="1379" />
     </state>
-    <state width="1250" height="371" key="GridCell.Tab.0.center/0.0.1920.1019/-2560.0.2560.1379@-2560.0.2560.1379" timestamp="1604042585903" />
-    <state width="1250" height="371" key="GridCell.Tab.0.left" timestamp="1604042585903">
+    <state width="1250" height="371" key="GridCell.Tab.0.center/0.0.1920.1019/-2560.0.2560.1379@-2560.0.2560.1379" timestamp="1604132708064" />
+    <state width="1250" height="371" key="GridCell.Tab.0.left" timestamp="1604132708064">
       <screen x="-2560" y="0" width="2560" height="1379" />
     </state>
-    <state width="1250" height="371" key="GridCell.Tab.0.left/0.0.1920.1019/-2560.0.2560.1379@-2560.0.2560.1379" timestamp="1604042585903" />
-    <state width="1250" height="371" key="GridCell.Tab.0.right" timestamp="1604042585903">
+    <state width="1250" height="371" key="GridCell.Tab.0.left/0.0.1920.1019/-2560.0.2560.1379@-2560.0.2560.1379" timestamp="1604132708064" />
+    <state width="1250" height="371" key="GridCell.Tab.0.right" timestamp="1604132708064">
       <screen x="-2560" y="0" width="2560" height="1379" />
     </state>
-    <state width="1250" height="371" key="GridCell.Tab.0.right/0.0.1920.1019/-2560.0.2560.1379@-2560.0.2560.1379" timestamp="1604042585903" />
+    <state width="1250" height="371" key="GridCell.Tab.0.right/0.0.1920.1019/-2560.0.2560.1379@-2560.0.2560.1379" timestamp="1604132708064" />
+    <state x="-2141" y="587" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2" timestamp="1604110672658">
+      <screen x="-2560" y="0" width="2560" height="1379" />
+    </state>
+    <state x="-2141" y="587" key="com.intellij.openapi.vcs.update.UpdateOrStatusOptionsDialogupdate-v2/0.0.1920.1019/-2560.0.2560.1379@-2560.0.2560.1379" timestamp="1604110672658" />
     <state x="-1985" y="341" width="710" height="704" key="find.popup" timestamp="1603960641925">
       <screen x="-2560" y="0" width="2560" height="1379" />
     </state>
     <state x="-1985" y="341" width="710" height="704" key="find.popup/0.0.1920.1019/-2560.0.2560.1379@-2560.0.2560.1379" timestamp="1603960641925" />
+    <state x="-2342" y="308" width="840" height="1034" key="search.everywhere.popup" timestamp="1604114774442">
+      <screen x="-2560" y="0" width="2560" height="1379" />
+    </state>
+    <state x="-2342" y="308" width="840" height="1034" key="search.everywhere.popup/0.0.1920.1019/-2560.0.2560.1379@-2560.0.2560.1379" timestamp="1604114774442" />
   </component>
 </project>

tv/src/Mock/index.js

@@ -65,41 +65,22 @@ let testTable = function () {
     };
     return res;
 };
-let testTableLong = function () {
+let getUserList = function () {
     let item = [];
-
-    let members = [
-        {id: 1, name: '霍元甲', userCode: '15253135600', vipType: 1},
-        {id: 2, name: '陈真', userCode: '15253135602', vipType: 2},
-        {id: 3, name: '成龙', userCode: '15253135604', vipType: 1},
-    ]
-
-    for (var i = 0; i < 70; i++) {
+    for (var i = 0; i < 5; i++) {
         item.push({
+            "name": "@region",
+            "percent":  "@integer(0, 100)",
+            "heartJump":  "@integer(70, 150)",
+            "calc":  "@integer(200, 1000)",
+            "ck": "@integer(100, 200)",
+            "topCk": "@integer(150, 200)",
+            "step":  "@integer(200, 10000)",
             "id": "@guid",
             "userCode": "@integer(15253135600, 15253135699)",
-            "name": "@region",
-            "tel": "@integer(15253135600, 15253135699)",
-            "shop": "@region",
-            "create": "@datetime",
-            "expTime": "@datetime",
-            "valid": "@datetime",
-            "Confirmed": "@integer(36844, 368449)",
-            "Deaths": "@integer(1099, 10993)",
-            "Recovered": "@integer(1986, 9999)",
-            "kick": "@integer(1986, 9999)",
-            "Status": "@integer(1, 2)",
-            "color": "@hex",
-            "memo": "@paragraph(1, 1)",
-            "dialogValue": "@range(1, 3)",
-            "vipType": "@integer(1, 2)",
-            "members": members,
-            "wxVisible": "@integer(0, 1)",
-            "timeLong": "12:00-14:00",
-            "timeScope":  [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+            "head":"@image"
         })
     }
-
     let res = {
         Rs: item,
         Code: 0,
@@ -107,69 +88,7 @@ let testTableLong = function () {
     };
     return res;
 };
-
-let testSelect = function () {
-    let item = [];
-    for (var i = 0; i < 30; i++) {
-        item.push({
-            "key": i + 1,
-            "value": i + 1,
-            "label": "@region",
-        })
-    }
-
-    let res = {
-        Rs: item,
-        Code: 0,
-        Memo: ''
-    };
-    return res;
-};
-
-let SignIn = function () {
-
-    let Rs = {
-        token: "@guid"
-    };
-    let res = {
-        Rs: Rs,
-        Code: 0,
-        Memo: '登陆成功'
-    };
-    return res;
-};
-
-let editbasicinfo = function () {
-
-    let res = {
-        Code: 0,
-        Memo: '修改成功'
-    };
-    return res;
-};
-
-let modPwd = function () {
-    let res = {
-        Code: 0,
-        Memo: '修改成功'
-    };
-    return res;
-};
-let logout = function () {
-    let res = {
-        Code: 0,
-        Memo: '退出成功'
-    };
-    return res;
-};
-
-Mock.mock('/api/testSelect', 'post', testSelect());
 Mock.mock('/api/testTable', 'post', testTable());
-Mock.mock('/api/testTableLong', 'post', testTableLong());
-Mock.mock('/api/worldDetail', 'post', worldDetail());
-Mock.mock('/api/SignIn', 'post', SignIn());//用户登录
-Mock.mock('/api/editbasicinfo', 'post', editbasicinfo());//用户设置修改
-Mock.mock('/api/modPwd', 'post', modPwd());//密码修改
-Mock.mock('/api/logout', 'post', logout());//退出登陆
+Mock.mock('/api/getUserList', 'post', getUserList());
 
 export default Mock;

tv/src/api/getApiRes.js

@@ -12,527 +12,7 @@ function getApiBasic(url, postdata) {
 }
 
 // 调用的api改写成方法
-export function worldDetail(postdata) {
-    let url = headapi + 'worldDetail';
+export function getUserList(postdata) {
+    let url = headapi + 'getUserList';
     return getApiBasic(url, postdata);
 }
-
-
-export function editbasicinfo(postdata) {
-    let url = headapi + 'editbasicinfo';
-    return getApiBasic(url, postdata);
-}
-
-export function modPwd(postdata) {
-    let url = headapi + 'modPwd';
-    return getApiBasic(url, postdata);
-}
-
-export function logout(postdata) {
-    let url = headapi + 'logout';
-    return getApiBasic(url, postdata);
-}
-
-// 调用的api改写成方法
-export function testTable(postdata) {
-    let url = headapi + 'testTable';
-    return getApiBasic(url, postdata);
-}
-
-export function testTableLong(postdata) {
-    let url = headapi + 'testTableLong';
-    return getApiBasic(url, postdata);
-}
-
-export function testSelect(postdata) {
-    let url = headapi + 'testSelect';
-    return getApiBasic(url, postdata);
-}
-
-// Auth
-
-// 获取验证图片
-export function GenVerifyPic(postdata) {
-    let url = headapi + 'v1/Auth/GenVerifyPic';
-    return getApiBasic(url, postdata);
-}
-
-// 修改密码 √
-export function PassEdit(postdata) {
-    let url = headapi + 'v1/Auth/PassEdit';
-    return getApiBasic(url, postdata);
-}
-
-// 用户登录 √
-export function SignIn(postdata) {
-    let url = headapi + 'v1/Auth/SignIn';
-    return getApiBasic(url, postdata);
-}
-
-// 用户退出
-export function SignOut(postdata) {
-    let url = headapi + 'v1/Auth/SignOut';
-    return getApiBasic(url, postdata);
-}
-
-// 用户添加
-export function SignUp(postdata) {
-    let url = headapi + 'v1/Auth/SignUp';
-    return getApiBasic(url, postdata);
-}
-
-// 用户微信登录
-export function WXSignIn(postdata) {
-    let url = headapi + 'v1/Auth/WXSignIn';
-    return getApiBasic(url, postdata);
-}
-
-// class
-// √ 课程添加
-export function ClassAdd(postdata) {
-    let url = headapi + 'v1/Class/ClassAdd';
-    return getApiBasic(url, postdata);
-}
-// 课程统计
-export function ClassStatistics(postdata) {
-    let url = headapi + 'v1/Class/ClassStatistics';
-    return getApiBasic(url, postdata);
-}
-
-// √ 课程颜色修改
-export function ClassColorEdit(postdata) {
-    let url = headapi + 'v1/Class/ClassColorEdit';
-    return getApiBasic(url, postdata);
-}
-
-// 课程单条查询
-export function ClassDetailOne(postdata) {
-    let url = headapi + 'v1/Class/ClassDetailOne';
-    return getApiBasic(url, postdata);
-}
-// √ 课程基本信息修改
-export function ClassEdit(postdata) {
-    let url = headapi + 'v1/Class/ClassEdit';
-    return getApiBasic(url, postdata);
-}
-
-// √ 课程列表查询
-export function ClassListQuery(postdata) {
-    let url = headapi + 'v1/Class/ClassListQuery';
-    return getApiBasic(url, postdata);
-}
-
-// √ 课程状态修改
-export function ClassStatusEdit(postdata) {
-    let url = headapi + 'v1/Class/ClassStatusEdit';
-    return getApiBasic(url, postdata);
-}
-
-// 课程会员增删
-export function ClassVipuserEdit(postdata) {
-    let url = headapi + 'v1/Class/ClassVipuserEdit';
-    return getApiBasic(url, postdata);
-}
-
-// 课程会员查询
-export function ClassVipuserQuery(postdata) {
-    let url = headapi + 'v1/Class/ClassVipuserQuery';
-    return getApiBasic(url, postdata);
-}
-
-// 课程微信可见状态修改
-export function ClassVisibleStatusEdit(postdata) {
-    let url = headapi + 'v1/Class/ClassVisibleStatusEdit';
-    return getApiBasic(url, postdata);
-}
-// order
-// 最新预约列表查询
-export function LastOrderQuery(postdata) {
-    let url = headapi + 'v1/Order/LastOrderQuery';
-    return getApiBasic(url, postdata);
-}
-// 管理员今日预约添加
-export function OrderAddByManager(postdata) {
-    let url = headapi + 'v1/Order/OrderAddByManager';
-    return getApiBasic(url, postdata);
-}
-// 管理员今日预约取消
-export function OrderCancelByManager(postdata) {
-    let url = headapi + 'v1/Order/OrderCancelByManager';
-    return getApiBasic(url, postdata);
-}
-// 预约记录查询
-export function OrderListQuery(postdata) {
-    let url = headapi + 'v1/Order/OrderListQuery';
-    return getApiBasic(url, postdata);
-}
-// 今日预约统计
-export function OrderStatistics(postdata) {
-    let url = headapi + 'v1/Order/OrderStatistics';
-    return getApiBasic(url, postdata);
-}
-// 今日课程预约总览
-export function TodayClassOrderQuery(postdata) {
-    let url = headapi + 'v1/Order/TodayClassOrderQuery';
-    return getApiBasic(url, postdata);
-}
-// 课程预约列表
-export function ClassOrderQuery(postdata) {
-    let url = headapi + 'v1/Order/ClassOrderQuery';
-    return getApiBasic(url, postdata);
-}
-// 今日会员预约列表查询
-export function TodayVipOrderQuery(postdata) {
-    let url = headapi + 'v1/Order/TodayVipOrderQuery';
-    return getApiBasic(url, postdata);
-}
-// 会员预约列表查询
-export function VipUserOrderQuery(postdata) {
-    let url = headapi + 'v1/Order/VipUserOrderQuery';
-    return getApiBasic(url, postdata);
-}
-
-// SchoolTimeTable
-
-// 正在进行课程列表
-export function ClassOngoingList(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/ClassOngoingList';
-    return getApiBasic(url, postdata);
-}
-// 课程表预览
-export function SchoolTimetablePreview(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/SchoolTimetablePreview';
-    return getApiBasic(url, postdata);
-}
-// 课程详情判断是否可删除
-export function STTDetailAllowDelCheck(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/STTDetailAllowDelCheck';
-    return getApiBasic(url, postdata);
-}
-// 下课记录详情删除
-export function ClassOverDetailDel(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/ClassOverDetailDel';
-    return getApiBasic(url, postdata);
-}
-// 课程表详情微信可预约状态修改
-export function STTDetailWxOrderEdit(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/STTDetailWxOrderEdit';
-    return getApiBasic(url, postdata);
-}
-// 某日课程表查询
-export function ClassListByOrderDate(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/ClassListByOrderDate';
-    return getApiBasic(url, postdata);
-}
-
-
-// 确认下课
-export function ClassOverConfirm(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/ClassOverConfirm';
-    return getApiBasic(url, postdata);
-}
-// 下课记录详情添加
-export function ClassOverDetailAdd(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/ClassOverDetailAdd';
-    return getApiBasic(url, postdata);
-}
-// 下课记录详情列表
-export function ClassOverDetailListQuery(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/ClassOverDetailListQuery';
-    return getApiBasic(url, postdata);
-}
-// 下课记录详情状态修改
-export function ClassOverDetailStatusEdit(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/ClassOverDetailStatusEdit';
-    return getApiBasic(url, postdata);
-}
-// 待下课课程列表
-export function ClassOverPrepare(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/ClassOverPrepare';
-    return getApiBasic(url, postdata);
-}
-// 下课准备
-export function ClassPreFinishListQuery(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/ClassPreFinishListQuery';
-    return getApiBasic(url, postdata);
-}
-
-// 课程表基本信息添加
-export function STTBasicAdd(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/STTBasicAdd';
-    return getApiBasic(url, postdata);
-}
-// 课程表基本信息修改
-export function STTBasicEdit(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/STTBasicEdit';
-    return getApiBasic(url, postdata);
-}
-
-// 课程表基本列表查询
-export function STTBasicListQuery(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/STTBasicListQuery';
-    return getApiBasic(url, postdata);
-}
-// 课程表上下线状态修改
-export function STTBasicOfflineEdit(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/STTBasicOfflineEdit';
-    return getApiBasic(url, postdata);
-}
-// 课程表状态修改
-export function STTBasicStatusEdit(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/STTBasicStatusEdit';
-    return getApiBasic(url, postdata);
-}
-
-// 课程表详情批量保存
-export function STTDetailBatchSave(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/STTDetailBatchSave';
-    return getApiBasic(url, postdata);
-}
-// 课程表详情列表查询
-export function STTDetailListQuery(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/STTDetailListQuery';
-    return getApiBasic(url, postdata);
-}
-// 复制课程表
-export function SchoolTimeTableCopy(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/SchoolTimeTableCopy';
-    return getApiBasic(url, postdata);
-}
-// 今日未上课课程列表查询
-export function WaitingBeginClassList(postdata) {
-    let url = headapi + 'v1/SchoolTimeTable/WaitingBeginClassList';
-    return getApiBasic(url, postdata);
-}
-
-// shop
-// √ 店铺添加
-export function ShopAdd(postdata) {
-    let url = headapi + 'v1/Shop/ShopAdd';
-    return getApiBasic(url, postdata);
-}
-// 店铺微信预约状态修改
-export function ShopWxStatusEdit(postdata) {
-    let url = headapi + 'v1/Shop/ShopWxStatusEdit';
-    return getApiBasic(url, postdata);
-}
-// 店铺单条查询
-export function ShopDetailOne(postdata) {
-    let url = headapi + 'v1/Shop/ShopDetailOne';
-    return getApiBasic(url, postdata);
-}
-
-// √ 店铺详情查询
-export function ShopDetailQuery(postdata) {
-    let url = headapi + 'v1/User/ShopDetailQuery';
-    return getApiBasic(url, postdata);
-}
-//  操作日志列表查询
-export function OptLogListQuery(postdata) {
-    let url = headapi + 'v1/User/OptLogListQuery';
-    return getApiBasic(url, postdata);
-}
-
-
-// 店铺修改
-export function ShopEdit(postdata) {
-    let url = headapi + 'v1/Shop/ShopEdit';
-    return getApiBasic(url, postdata);
-}
-
-// 店铺列表查询
-export function ShopListQuery(postdata) {
-    let url = headapi + 'v1/Shop/ShopListQuery';
-    return getApiBasic(url, postdata);
-}
-
-// 店铺状态修改
-export function ShopStatusEdit(postdata) {
-    let url = headapi + 'v1/Shop/ShopStatusEdit';
-    return getApiBasic(url, postdata);
-}
-
-// SttPlan
-// 课程表模板基本信息添加
-export function SttPlanBasicAdd(postdata) {
-    let url = headapi + 'v1/SttPlan/SttPlanBasicAdd';
-    return getApiBasic(url, postdata);
-}
-
-// 课程表模板详情预览
-export function SttPlanPreview(postdata) {
-    let url = headapi + 'v1/SttPlan/SttPlanPreview';
-    return getApiBasic(url, postdata);
-}
-
-// 课程表模板基本信息修改
-export function SttPlanBasicEdit(postdata) {
-    let url = headapi + 'v1/SttPlan/SttPlanBasicEdit';
-    return getApiBasic(url, postdata);
-}
-
-// 课程表模板基本信息列表查询
-export function SttPlanBasicListQuery(postdata) {
-    let url = headapi + 'v1/SttPlan/SttPlanBasicListQuery';
-    return getApiBasic(url, postdata);
-}
-
-// 课程表模板店铺通用修改
-export function SttPlanBasicShopEdit(postdata) {
-    let url = headapi + 'v1/SttPlan/SttPlanBasicShopEdit';
-    return getApiBasic(url, postdata);
-}
-
-// 课程表模板复制
-export function SttPlanCopy(postdata) {
-    let url = headapi + 'v1/SttPlan/SttPlanCopy';
-    return getApiBasic(url, postdata);
-}
-// 课程表模板基本信息状态修改
-export function SttPlanBasicStatusEdit(postdata) {
-    let url = headapi + 'v1/SttPlan/SttPlanBasicStatusEdit';
-    return getApiBasic(url, postdata);
-}
-
-// 课程表模板详情列表查询
-export function SttPlanDetailListQuery(postdata) {
-    let url = headapi + 'v1/SttPlan/SttPlanDetailListQuery';
-    return getApiBasic(url, postdata);
-}
-// 课程表模板发布
-export function SttPlanPublish(postdata) {
-    let url = headapi + 'v1/SttPlan/SttPlanPublish';
-    return getApiBasic(url, postdata);
-}
-
-// 课程表模板详情批量保存
-export function SttPlanDetailBatchSave(postdata) {
-    let url = headapi + 'v1/SttPlan/SttPlanDetailBatchSave';
-    return getApiBasic(url, postdata);
-}
-
-// teacher
-// 教练信息添加 √
-export function TeacherAdd(postdata) {
-    let url = headapi + 'v1/Teacher/TeacherAdd';
-    return getApiBasic(url, postdata);
-}
-// 教练信息修改  √
-export function TeacherEdit(postdata) {
-    let url = headapi + 'v1/Teacher/TeacherEdit';
-    return getApiBasic(url, postdata);
-}
-// 教练信息列表查询  √
-export function TeacherListQuery(postdata) {
-    let url = headapi + 'v1/Teacher/TeacherListQuery';
-    return getApiBasic(url, postdata);
-}
-// 教练状态修改  √
-export function TeacherStatusEdit(postdata) {
-    let url = headapi + 'v1/Teacher/TeacherStatusEdit';
-    return getApiBasic(url, postdata);
-}
-
-// User
-// √
-export function ManagerSelfQuery(postdata) {
-    let url = headapi + 'v1/User/ManagerSelfQuery';
-    return getApiBasic(url, postdata);
-}
-
-// √ 店铺管理员添加
-export function ShopManagerAdd(postdata) {
-    let url = headapi + 'v1/User/ShopManagerAdd';
-    return getApiBasic(url, postdata);
-}
-
-// 店铺管理员修改
-export function ShopManagerEdit(postdata) {
-    let url = headapi + 'v1/User/ShopManagerEdit';
-    return getApiBasic(url, postdata);
-}
-
-// 店铺管理员列表查询
-export function ShopManagerListQuery(postdata) {
-    let url = headapi + 'v1/User/ShopManagerListQuery';
-    return getApiBasic(url, postdata);
-}
-
-// 店铺管理员状态修改
-export function ShopManagerStatusEdit(postdata) {
-    let url = headapi + 'v1/User/ShopManagerStatusEdit';
-    return getApiBasic(url, postdata);
-}
-// 会员用户课时调整
-export function VipUserHourEdit(postdata) {
-    let url = headapi + 'v1/User/VipUserHourEdit';
-    return getApiBasic(url, postdata);
-}
-// 会员统计
-export function VipUserStatistics(postdata) {
-    let url = headapi + 'v1/User/VipUserStatistics';
-    return getApiBasic(url, postdata);
-}
-// 会员课程增删
-export function VipUserClassEdit(postdata) {
-    let url = headapi + 'v1/User/VipUserClassEdit';
-    return getApiBasic(url, postdata);
-}
-// 会员有效期调整
-export function VipUserExpEdit(postdata) {
-    let url = headapi + 'v1/User/VipUserExpEdit';
-    return getApiBasic(url, postdata);
-}
-
-// 会员用户添加
-export function VipUserAdd(postdata) {
-    let url = headapi + 'v1/User/VipUserAdd ';
-    return getApiBasic(url, postdata);
-}
-
-// 会员用户基本信息修改
-export function VipUserEdit(postdata) {
-    let url = headapi + 'v1/User/VipUserEdit ';
-    return getApiBasic(url, postdata);
-}
-// 会员消费记录查询
-export function VipUserConsumeListQuery(postdata) {
-    let url = headapi + 'v1/User/VipUserConsumeListQuery ';
-    return getApiBasic(url, postdata);
-}
-
-// 会员用户列表
-export function VipUserListQuery(postdata) {
-    let url = headapi + 'v1/User/VipUserListQuery';
-    return getApiBasic(url, postdata);
-}
-
-
-// 会员用户基本信息查询
-export function VipUserSimpleQuery(postdata) {
-    let url = headapi + 'v1/User/VipUserSimpleQuery ';
-    return getApiBasic(url, postdata);
-}
-
-// 会员用户状态修改
-export function VipUserStatusEdit(postdata) {
-    let url = headapi + 'v1/User/VipUserStatusEdit ';
-    return getApiBasic(url, postdata);
-}
-
-// 通过Name查询Take用户信息
-export function QueryTakeCustomerByName(postdata) {
-    let url = headapi + 'v1/Take/QueryTakeCustomerByName ';
-    return getApiBasic(url, postdata);
-}
-//
-// 绑定Take用户
-export function BindTakeCustomer(postdata) {
-    let url = headapi + 'v1/Take/BindTakeCustomer ';
-    return getApiBasic(url, postdata);
-}
-
-
-
-
-

tv/src/components/Headside.vue

@@ -47,7 +47,7 @@ export default {
 
 <style scoped>
 .headerContainer {
-  height: 10%;
+  height: 2%;
   overflow: hidden;
   display: block;
   margin: 0 auto;

tv/src/router/index.js

@@ -28,6 +28,14 @@ const routes = [
                     title: "首页",
                     clmid: "1",
                 }
+            },{
+                path: '/rank',
+                name: 'Rank',
+                component: () => import('@/views/Rank.vue'),
+                meta: {
+                    title: "排名",
+                    clmid: "2",
+                }
             },
         ]
     }, {

tv/src/views/Main.vue

@@ -3,46 +3,16 @@
     <Headside></Headside>
     <div class="userList">
       <ul>
-        <!--        单个-->
-        <!--        <li v-for="s in single" :class="thisClassName" v-show="single">-->
-        <!--          <div class="ltLi"></div>-->
-        <!--          <div class="centerLi">-->
-        <!--            <div class="topLi">-->
-        <!--              <div class="cla">-->
-        <!--                <span>{{ s.percent }}</span><s>%</s>-->
-        <!--              </div>-->
-        <!--              <div class="human">-->
-        <!--                <img src="../static/img/head.png" height="300" width="300"/>-->
-        <!--                <span class="name">{{ s.name }}</span>-->
-        <!--              </div>-->
-        <!--              <div class="heartJump">-->
-        <!--                <span>{{ s.heartJump }}</span><img src="../static/img/heart.png" width="53"/>-->
-        <!--              </div>-->
-        <!--            </div>-->
-        <!--            <div class="bottomLi">-->
-        <!--              <div class="btcla">-->
-        <!--                卡路里 {{ s.calc }}-->
-        <!--              </div>-->
-        <!--              <div class="btck">-->
-        <!--                步数 {{ s.step }}-->
-        <!--              </div>-->
-        <!--              <div class="step">-->
-        <!--                CK {{ s.ck }}-->
-        <!--              </div>-->
-        <!--            </div>-->
-        <!--          </div>-->
-        <!--          <div class="rtLi"></div>-->
-        <!--          <img class="long" src="../static/img/long.png"/>-->
-        <!--        </li>-->
-        <!--        多个-->
-        <li v-for="(s,i) in students" :class="studentsClassName[i]" v-show="students">
+        <li v-for="(s,i) in students" :class="studentsClassName[i].name" v-show="students">
+          <div class="ltLi" v-if="students.length == 1"></div>
           <div class="centerLi">
             <div class="topLi">
               <div class="cla">
                 <span>{{ s.percent }}</span><s>%</s>
               </div>
               <div class="human">
-                <img src="../static/img/head.png" height="300" width="300"/>
+                <!--                <img src="../static/img/head.png" height="300" width="300"/>-->
+                <img :src="s.head" height="300" width="300"/>
                 <span class="name">{{ s.name }}</span>
               </div>
               <div class="heartJump">
@@ -61,6 +31,7 @@
               </div>
             </div>
           </div>
+          <div class="rtLi" v-if="students.length == 1"></div>
         </li>
       </ul>
     </div>
@@ -112,76 +83,150 @@
         </li>
       </ul>
     </div>
+
+    <el-dialog
+        title=""
+        :visible.sync="dialogVisible"
+        width="36%"
+        :show-close="false"
+    >
+      <div class="eggContainer">
+        <h5>单次CK值（新个人记录）</h5>
+        <div class="dgCenter">
+          <div class="dghead">
+<!--            <img src="../static/img/head.png" height="147" width="147"/>-->
+            <img :src="dialogMsg.head" height="147" width="147"/>
+            <s>{{dialogMsg.name}}</s>
+          </div>
+          <div class="score">
+            <em>{{dialogMsg.ck}}</em>
+            <span>
+             打破了历史记录{{dialogMsg.topCk}}
+        </span>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+
+
   </div>
 </template>
 
 <script>
 import Headside from '@/components/Headside'
+import {getUserList} from '@/api/getApiRes'
+
+let qs = require('qs');
 
 export default {
   name: "Main",
   data() {
     return {
-      thisClassName: 'max',
+      thisClassName: '',
       studentsClassName: [],
-      students: [
-        {
-          name: '张宇宁',
-          percent: 48,
-          heartJump: 93,
-          calc: 556,
-          ck: 8.5,
-          step: 200,
-        },
-        {
-          name: '张宇宁',
-          percent: 22,
-          heartJump: 93,
-          calc: 556,
-          ck: 8.5,
-          step: 200,
-        }
-      ],
-      single: [
-        // {
-        //   name: '张宇宁',
-        //   percent: 48,
-        //   heartJump: 93,
-        //   calc: 556,
-        //   ck: 8.5,
-        //   step: 200,
-        // }
-      ],
+      students: [],
+      single: [],
+      dialogVisible: false,
+      dialogMsg: '',
     }
   },
   mounted() {
     // this.colorType(91);
+    this.GetgetUserList()
+
   },
   methods: {
-    colorType(percent) {
+    // 启动一个成就彩蛋
+    createEgg(msg) {
+      this.OpenEgg(msg)
+    },
+    OpenEgg(msg) {
+      this.dialogMsg = msg;
+      this.dialogVisible = true;
+
+      // 倒计时5秒自动关闭
       let that = this;
-      let per = parseInt(percent);
-      switch (true) {
-        case per >= 90:
-          that.thisClassName = 'max red';
-          break
-        case per <= 89 && per > 80:
-          that.thisClassName = 'max brown';
-          break
-        case per <= 79 && per > 70:
-          that.thisClassName = 'max yellow';
-          break
-        case per <= 69 && per > 54:
-          that.thisClassName = 'max green';
-          break
-        case per <= 54 && per > 39:
-          that.thisClassName = 'max violet';
-          break
-        case per <= 39:
-          that.thisClassName = 'max blue';
-          break
+      let totalTime = 5
+      let clock = window.setInterval(() => {
+        totalTime--
+        if (totalTime < 0) {
+          totalTime = 5;
+          that.dialogVisible = false;
+        }
+      }, 1000)
+    },
+    GetgetUserList() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+      };
+      let postdata = qs.stringify(param);
+      getUserList(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          that.students = json.Rs;
+
+          that.giveClassName(json.Rs)
+          // test 启动一个成就彩蛋
+          this.createEgg(json.Rs[0]);
+        } else {
+          that.$message.error(json.Memo);
+        }
+      })
+    },
+    // 给每一个数据加类名，一次遍历全部赋值
+    giveClassName(res) {
+      let that = this;
+      let numberClass = '';
+      let colorClass = '';
+      for (let i = 0; i < res.length; i++) {
+        switch (true) {
+          case  res.length == 1:
+            numberClass = 'max';
+            break
+          case  res.length == 2:
+            numberClass = 'two';
+            break
+          case  res.length <= 6 && res.length > 1:
+            numberClass = 'six';
+            break
+          case  res.length <= 9 && res.length > 6:
+            numberClass = 'nine';
+            break
+          case res.length <= 16 && res.length > 9:
+            numberClass = 'sixteen';
+            break
+          case res.length > 16:
+            numberClass = 'twenty';
+            break
+        }
+
+        let per = parseInt(res[i].percent);
+        switch (true) {
+          case per >= 90:
+            colorClass = 'red';
+            break
+          case per <= 89 && per > 80:
+            colorClass = 'brown';
+            break
+          case per <= 79 && per > 70:
+            colorClass = 'yellow';
+            break
+          case per <= 69 && per > 54:
+            colorClass = 'green';
+            break
+          case per <= 54 && per > 39:
+            colorClass = 'violet';
+            break
+          case per <= 39:
+            colorClass = 'blue';
+            break
+        }
+        that.studentsClassName[i] = {
+          name: numberClass + ' ' + colorClass,
+        }
       }
-    }
+    },
   },
   components: {
     Headside
@@ -212,7 +257,7 @@ ul, li {
 }
 
 .userList {
-  width: 100%;
+  width: 96%;
   height: 80%;
   overflow: hidden;
   display: block;
@@ -263,27 +308,27 @@ ul, li {
   background: #028FE1;
 }
 
-.max.blue .centerLi {
+.blue .centerLi {
   background: #028FE1;
 }
 
-.max.violet .centerLi {
+.violet .centerLi {
   background: #6D26FA;
 }
 
-.max.green .centerLi {
+.green .centerLi {
   background: #0AB105;
 }
 
-.max.yellow .centerLi {
+.yellow .centerLi {
   background: #BACC01;
 }
 
-.max.brown .centerLi {
+.brown .centerLi {
   background: #EA8813;
 }
 
-.max.red .centerLi {
+.red .centerLi {
   background: #CF1122;
 }
 
@@ -349,6 +394,7 @@ ul, li {
   width: 40%;
   float: left;
   padding-top: 3%;
+  overflow: hidden;
 }
 
 .human img {
@@ -408,13 +454,13 @@ ul, li {
 
 .levelIcon {
   position: absolute;
-  bottom: 3%;
+  bottom: 5px;
   width: 100%;
   overflow: hidden;
   display: block;
   margin: 0 auto;
-  height: 130px;
-  padding-bottom: 10px;
+  height: 120px;
+  padding-bottom: 5px;
 }
 
 .levelIcon ul {
@@ -570,6 +616,514 @@ ul, li {
   float: right;
   z-index: 222;
   overflow: visible;
+}
+
+/*two*/
+.two {
+  width: 48%;
+  height: 475px;
+  float: left;
+  border: 2px solid #fff;
+}
+
+.two:nth-child(2) {
+  float: right;
+}
+
+.two .centerLi .cla {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 180px;
+  letter-spacing: -0.05em;
+  height: 310px;
+  line-height: 310px;
+}
+
+.two .centerLi .cla s {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 38px;
+  letter-spacing: -0.05em;
+  top: -120px;
+}
+
+.two .human {
+  padding-top: 8%;
+}
+
+.two img {
+  width: 280px;
+  height: 280px;
+}
+
+.two .name {
+  width: 290px;
+  height: 60px;
+  font-family: "PingFang SC";
+  font-weight: 500;
+  font-size: 40px;
+  text-align: center;
+  color: #fff;
+  line-height: 60px;
+}
+
+.two .centerLi .heartJump {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 140px;
+  letter-spacing: -0.05em;
+  text-align: center;
+  color: #fff;
+  height: 310px;
+  line-height: 310px;
+}
+
+.two .centerLi .heartJump img {
+  width: 25px;
+  height: 25px;
+  top: -110px;
+}
+
+.two .bottomLi {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 40px;
+  color: #fff;
+  padding-bottom: 5px;
+}
+
+
+/*six*/
+.six {
+  width: 31%;
+  float: left;
+  margin-right: 2%;
+  margin-bottom: 2%;
+  border: 2px solid #fff;
+}
+
+.six:nth-child(3) {
+  margin-right: 0
+}
+
+.six:nth-child(6) {
+  margin-right: 0
+}
+
+.six .centerLi .cla {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 100px;
+  letter-spacing: -0.05em;
+  height: 220px;
+  line-height: 220px;
+}
+
+.six .centerLi .cla s {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 40px;
+  letter-spacing: -0.05em;
+  top: -60px;
+}
+
+.six .human {
+  padding-top: 6%;
+}
+
+.six img {
+  width: 160px;
+  height: 160px;
+}
+
+.six .name {
+  width: 180px;
+  height: 40px;
+  font-family: "PingFang SC";
+  font-weight: 500;
+  font-size: 30px;
+  text-align: center;
+  color: #fff;
+  line-height: 40px;
+}
+
+.six .centerLi .heartJump {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 100px;
+  letter-spacing: -0.05em;
+  text-align: center;
+  color: #fff;
+  height: 220px;
+  line-height: 220px;
+}
+
+.six .centerLi .heartJump img {
+  width: 25px;
+  height: 25px;
+  top: -60px;
+}
+
+.six .bottomLi {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 32px;
+  color: #fff;
+  padding-bottom: 15px;
+}
+
+/*nine*/
+.nine {
+  width: 31.5%;
+  float: left;
+  margin-right: 2%;
+  margin-bottom: 2%;
+  border: 2px solid #fff;
+}
+
+.nine:nth-child(3) {
+  margin-right: 0
+}
+
+.nine:nth-child(6) {
+  margin-right: 0
+}
+
+.nine:nth-child(9) {
+  margin-right: 0
+}
+
+.nine .centerLi .cla {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 79px;
+  letter-spacing: -0.05em;
+  height: 150px;
+  line-height: 150px;
+}
+
+.nine .centerLi .cla s {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 36px;
+  letter-spacing: -0.05em;
+  top: -60px;
+}
+
+.nine .human {
+  padding-top: 2%;
+}
+
+.nine img {
+  width: 100px;
+  height: 100px;
+}
+
+.nine .name {
+  width: 120px;
+  height: 30px;
+  font-family: "PingFang SC";
+  font-weight: 500;
+  font-size: 24px;
+  text-align: center;
+  color: #fff;
+  line-height: 30px;
+}
+
+.nine .centerLi .heartJump {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 79px;
+  letter-spacing: -0.05em;
+  text-align: center;
+  color: #fff;
+  height: 150px;
+  line-height: 150px;
+}
+
+.nine .centerLi .heartJump img {
+  width: 25px;
+  height: 25px;
+  top: -60px;
+}
+
+.nine .bottomLi {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 24px;
+  color: #fff;
+  padding-bottom: 5px;
+}
+
+/*sixteen*/
+.sixteen {
+  width: 23.5%;
+  float: left;
+  margin-right: 0.3%;
+  margin-bottom: 0.3%;
+  border: 2px solid #fff;
+}
+
+.sixteen:nth-child(4) {
+  margin-right: 0
+}
+
+.sixteen:nth-child(8) {
+  margin-right: 0
+}
+
+.sixteen:nth-child(12) {
+  margin-right: 0
+}
+
+.sixteen:nth-child(16) {
+  margin-right: 0
+}
+
+.sixteen .centerLi .cla {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 49px;
+  letter-spacing: -0.05em;
+  height: 100px;
+  line-height: 120px;
+}
+
+.sixteen .centerLi .cla s {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 30px;
+  letter-spacing: -0.05em;
+  top: -30px;
+}
+
+.sixteen .human {
+  padding-top: 2%;
+  height: 120px;
+  overflow: hidden;
+}
+
+.sixteen img {
+  width: 90px;
+  height: 90px;
+}
+
+.sixteen .name {
+  width: 100px;
+  height: 26px;
+  font-family: "PingFang SC";
+  font-weight: 500;
+  font-size: 20px;
+  text-align: center;
+  color: #fff;
+  line-height: 26px;
+}
+
+.sixteen .centerLi .heartJump {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 49px;
+  letter-spacing: -0.05em;
+  text-align: center;
+  color: #fff;
+  height: 100px;
+  line-height: 120px;
+}
+
+.sixteen .centerLi .heartJump img {
+  width: 20px;
+  height: 20px;
+  top: -30px;
+}
+
+.sixteen .bottomLi {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 22px;
+  color: #fff;
+  padding-bottom: 5px;
+}
+
+/*twenty*/
+.twenty {
+  width: 19.5%;
+  float: left;
+  margin-right: 0.3%;
+  margin-bottom: 0.3%;
+  border: 2px solid #fff;
+}
+
+.twenty:nth-child(5) {
+  margin-right: 0
+}
+
+.twenty:nth-child(10) {
+  margin-right: 0
+}
+
+.twenty:nth-child(15) {
+  margin-right: 0
+}
+
+.twenty:nth-child(20) {
+  margin-right: 0
+}
+
+.twenty .centerLi .cla {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 40px;
+  letter-spacing: -0.05em;
+  height: 90px;
+  line-height: 90px;
+}
+
+.twenty .centerLi .cla s {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 16px;
+  letter-spacing: -0.05em;
+  top: -20px;
+}
+
+.twenty .human {
+  padding-top: 2%;
+  height: 110px;
+  overflow: hidden;
+}
+
+.twenty img {
+  width: 90px;
+  height: 90px;
+}
+
+.twenty .name {
+  width: 80px;
+  height: 24px;
+  font-family: "PingFang SC";
+  font-weight: 500;
+  font-size: 16px;
+  text-align: center;
+  color: #fff;
+  line-height: 24px;
+}
+
+.twenty .centerLi .heartJump {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 40px;
+  letter-spacing: -0.05em;
+  text-align: center;
+  color: #fff;
+  height: 90px;
+  line-height: 90px;
+}
+
+.twenty .centerLi .heartJump img {
+  width: 14px;
+  height: 14px;
+  top: -20px;
+}
+
+.twenty .bottomLi {
+  font-family: HeadLineA;
+  font-weight: normal;
+  font-size: 18px;
+  color: #fff;
+  padding-bottom: 5px;
+}
+
+/*成就彩蛋*/
+/deep/ .el-dialog {
+  background: url("../static/img/dialog.png");
+  background-position: top center;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  min-height: 50%;
+  box-shadow: none;
+}
+
+.eggContainer {
+  width: 87%;
+  overflow: hidden;
+  margin: 0 auto;
+  float: left;
+}
+
+.eggContainer h5 {
+  font-family: Roboto;
+  font-weight: normal;
+  font-size: 36px;
+  text-align: center;
+  color: #fff;
+  margin: 0;
+  margin-bottom: 5%;
+}
+
+.eggContainer .dgCenter {
+  width: 90%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.dgCenter .dghead {
+  width: 40%;
+  float: left;
+}
+
+.dghead img {
+  width: 140px;
+  height: 140px;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  padding: 3px;
+  border-radius: 250px;
+  border: 2px solid #fff;
+}
+
+.dghead s {
+  font-family: Roboto;
+  font-weight: normal;
+  font-size: 30px;
+  text-align: center;
+  color: #fff;
+  font-style: normal;
+  text-decoration: none;
+  margin-top: 10px;
+}
+
+.score {
+  width: 60%;
+  float: right;
+}
+
+.score em {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  font-family: Roboto;
+  font-weight: bold;
+  font-size: 90px;
+  text-align: center;
+  color: #fff;
+  font-style: normal;
+  height: 150px;
+  line-height: 150px;
+}
+
+.score span {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  font-family: Roboto;
+  font-weight: normal;
+  font-size: 30px;
+  color: #fff;
+  text-align: center;
 
 }
 </style>

tv/src/views/Rank.vue

@@ -0,0 +1,425 @@
+<template>
+  <div class="rank">
+    <Headside></Headside>
+    <div class="rankContainer">
+      <div class="lt">
+        <h5>本周场馆卡路里总消耗</h5>
+        <div class="sum">
+          <span class="sumBg"></span>
+          <em>{{sum}}</em>
+          <s>千卡</s>
+        </div>
+        <div class="bottom">
+        <div class="topOne" v-if="false">
+          <h5>单次CK值（新个人记录）</h5>
+          <ul>
+            <li>
+              <div class="dgCenter">
+                <div class="dghead">
+                  <!--                              <img src="../static/img/head.png" height="147" width="147"/>-->
+                  <img :src="topMsg.head" height="147" width="147"/>
+                  <s>{{ topMsg.name }}</s>
+                </div>
+                <div class="score">
+                  <em>{{ topMsg.ck }}</em>
+                  <span>
+                      打破了历史记录{{ topMsg.topCk }}
+                   </span>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="heros" v-else>
+          <h5>本周卡路里消耗英雄榜</h5>
+          <ul>
+            <li v-for="hero in 3">
+              <img :src="topMsg.head" height="147" width="147"/>
+               <em>No.1</em>{{ topMsg.name }}
+              <span>{{ topMsg.topCk }}千卡</span>
+            </li>
+          </ul>
+        </div>
+        </div>
+      </div>
+      <div class="rt">
+        <h5>月度CK值排行</h5>
+        <ul>
+          <li v-for="s in students">
+            <img src="../static/img/head.png" height="147" width="147"/>
+            <em>刘伟峰</em>
+            <s>125.0</s>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Headside from '@/components/Headside'
+import {getUserList} from '@/api/getApiRes'
+
+let qs = require('qs');
+export default {
+  data() {
+    return {
+      sum: '29177',
+      unite:'卡路里',
+      topMsg: '',
+      students: [],
+    }
+  },
+  mounted() {
+    this.GetgetUserList()
+  },
+  methods: {
+    GetgetUserList() {
+      let that = this;
+      let param = {
+        token: localStorage.token,
+      };
+      let postdata = qs.stringify(param);
+      getUserList(postdata).then(res => {
+        let json = res;
+        if (json.Code == 0) {
+          that.topMsg = json.Rs[0];
+          that.students = json.Rs;
+        } else {
+          that.$message.error(json.Memo);
+        }
+      })
+    },
+  },
+  components: {
+    Headside
+  }
+}
+</script>
+
+<style scoped>
+.rank {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  background: url("../static/img/rankBg.png");
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+
+.rankContainer {
+  width: 90%;
+  height: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.rankContainer .lt {
+  width: 60%;
+  height: 100%;
+  float: left;
+}
+
+.rankContainer .rt {
+  width: 40%;
+  float: right;
+}
+
+.rankContainer .lt > h5 {
+  font-family: Roboto;
+  font-weight: normal;
+  font-size: 44px;
+  text-align: left;
+  color: #fff;
+  margin: 5% auto;
+}
+
+.rankContainer .sum {
+  position: relative;
+  bottom: 300px;
+  width: 100%;
+  height: 35%;
+  overflow: visible;
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+  z-index: 666;
+}
+.sumBg {
+  position: relative;
+  bottom: -450px;
+  width: 100%;
+  height: 300px;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  background: url("../static/img/circle.png") bottom center;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  z-index: 222;
+}
+
+.sum em {
+  font-family: Roboto;
+  font-weight: 900;
+  font-size: 250px;
+  text-align: center;
+  color: #fff;
+  font-family: Roboto;
+  font-weight: 900;
+  font-size: 250px;
+  text-align: center;
+  color: #fff;
+  text-shadow: 0px 0px 50px rgba(0, 0, 0, 0.52);
+  font-style: normal;
+  text-shadow: #E85297 5px 0 0, #E85297 0 5px 0, #E85297 -5px 0 0, #E85297 0 -5px 0;
+}
+
+.sum s {
+  font-style: normal;
+  font-family: Roboto;
+  font-weight: normal;
+  font-size: 44px;
+  text-align: center;
+  color: #fff;
+  text-decoration: none;
+}
+
+.topOne {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.topOne h5 {
+  font-family: Roboto;
+  font-weight: normal;
+  font-size: 36px;
+  text-align: left;
+  color: #fff;
+  margin: 1% 0;
+}
+
+ul, li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.topOne ul {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  padding-left: 3px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.topOne li {
+  width: 44%;
+  float: left;
+  border-radius: 5px;
+  background: rgba(0.0 .0 .0 .1);
+  box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
+  padding-top: 23px;
+  padding-bottom: 20px;
+}
+
+.topOne .dgCenter {
+  width: 96%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+
+.dgCenter .dghead {
+  width: 40%;
+  float: left;
+}
+
+.dghead img {
+  width: 120px;
+  height: 120px;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  padding: 3px;
+  border-radius: 250px;
+  border: 2px solid #fff;
+}
+
+.dghead s {
+  font-family: Roboto;
+  font-weight: normal;
+  font-size: 30px;
+  text-align: center;
+  color: #fff;
+  font-style: normal;
+  text-decoration: none;
+  margin-top: 10px;
+}
+
+.score {
+  width: 60%;
+  float: right;
+}
+
+.score em {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  font-family: Roboto;
+  font-weight: bold;
+  font-size: 90px;
+  text-align: center;
+  color: #fff;
+  font-style: normal;
+  height: 140px;
+  line-height: 140px;
+}
+
+.score span {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  font-family: Roboto;
+  font-weight: normal;
+  font-size: 24px;
+  color: #fff;
+  text-align: center;
+}
+
+.rt > h5 {
+  font-family: Roboto;
+  font-weight: normal;
+  font-size: 36px;
+  text-align: center;
+  color: #fff;
+  margin: 0;
+  margin-bottom: 3%;
+}
+
+.rt ul {
+  width: 80%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+.rt li {
+  width: 80%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  margin-bottom: 20px;
+  padding: 10px 4%;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+  box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
+}
+
+.rt li img {
+  width: 70px;
+  height: 70px;
+  filter: drop-shadow(0px 0px 6px #bf00ff);
+  border: 2px solid #fff;
+  float: left;
+  border-radius: 250px;
+  margin-right: 3%;
+}
+
+.rt li em {
+  font-family: Roboto;
+  font-weight: normal;
+  font-size: 30px;
+  text-align: center;
+  color: #fff;
+  font-style: normal;
+  float: left;
+  line-height: 80px;
+}
+
+.rt li s {
+  font-family: Roboto;
+  font-weight: normal;
+  font-size: 30px;
+  text-align: right;
+  color: #fff;
+  text-decoration: none;
+  line-height: 80px;
+  float: right;
+}
+.heros>h5 {
+  font-family: Roboto;
+  font-weight: normal;
+  font-size: 36px;
+  text-align: left;
+  color: #fff;
+  margin: 1% 0;
+}
+.heros ul {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  padding-left: 3px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.heros li {
+  width: 220px;
+  float: left;
+  border-radius: 5px;
+  background: rgba(0.0 .0 .0 .1);
+  box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.3);
+  padding-top: 6px;
+  padding-bottom: 8px;
+  color: #fff;
+  font-size: 30px;
+  text-align: center;
+  margin-right: 5%;
+}
+.heros li img {
+  width: 120px;
+  height: 120px;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+  padding: 3px;
+  border-radius: 250px;
+  border: 2px solid #fff;
+}
+.heros li em {
+  font-family: Roboto;
+  font-weight: bold;
+  font-size: 30px;
+  text-align: center;
+  color: #FA5114;
+  font-style: normal;
+}
+.heros li span {
+  width: 100%;
+  overflow: hidden;
+  display: block;
+  margin: 0 auto;
+}
+.bottom {
+  position: relative;
+  width: 100%;
+  bottom: 0%;
+}
+</style>

tv/src/views/Wait.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="wait">
-    wait page
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Wait"
-}
-</script>
-
-<style scoped>
-
-</style>