订单管理

heyujie

2022-04-01 85841ef9441aff46d80c7458c928e085e78911a1

订单管理

 src/views/personalCenter/components/BasicInfo.vue

@@ -68,7 +68,7 @@
      </el-form-item>
    </el-form>
    <div class="btns">
      <div class="searchBtn" @click="searchingBtn">保存</div>
      <div class="searchBtn" @click="save">保存</div>
    </div>
  </div>
</template>
@@ -286,6 +286,9 @@
    goto(i) {
      this.activeIndex = i;
    },
    save(){

    },
    // 跳到设备详情
    checkDetail(row) {
      this.$router.push({
@@ -312,42 +315,40 @@
    },

    // 查询列表
    searchingBtn() {
      let param = {
        page: this.page,
        size: this.size,
        // startTime: this.searchTime[0],
        // endTime: this.searchTime[1],
        inputText: this.inputText,
      };
      findDevList(param)
        .then((res) => {
          this.dataList = res.data.list;
          //时间分行显示
    // searchingBtn() {
    //   let param = {
    //     page: this.page,
    //     size: this.size,
    //     // startTime: this.searchTime[0],
    //     // endTime: this.searchTime[1],
    //     inputText: this.inputText,
    //   };
    //   findDevList(param)
    //     .then((res) => {
    //       this.dataList = res.data.list;
    //       //时间分行显示

          this.dataList.forEach((item) => {
            item.installTime = item.installTime.split(" ");
            item.firstUseTime = item.firstUseTime.split(" ");
          });
          this.total = res.data.total;
          if (res.data.total <= this.size) {
            this.page = 1;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //       this.dataList.forEach((item) => {
    //         item.installTime = item.installTime.split(" ");
    //         item.firstUseTime = item.firstUseTime.split(" ");
    //       });
    //       this.total = res.data.total;
    //       if (res.data.total <= this.size) {
    //         this.page = 1;
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },

    //分页功能
    handleSizeChange(size) {
      this.size = size;
      this.searchingBtn();
    },
    //分页功能
    refrash(page) {
      this.page = page;
      this.searchingBtn();
    },

    //解绑按钮
@@ -387,13 +388,11 @@
    //解绑成功回调
    reflash() {
      this.isShowUnbind = false;
      this.searchingBtn();
    },

    clearSearch() {
      this.searchTime = this.getDateInit();
      this.inputText = "";
      this.searchingBtn();
    },

    //退出集群

 src/views/personalCenter/components/Content.vue

@@ -4,28 +4,29 @@
    <div class="right-content">
      <SubAccount v-if="activeIndex == 4"></SubAccount>
      <BasicInfo v-if="activeIndex == 3"></BasicInfo>
      <OrderMng v-if="activeIndex == 1"></OrderMng>
    </div>
  </div>
</template>

<script>
import { findDevList } from "@/api/device";
import SubAccount from "./SubAccount";
import LeftMenu from "./LeftMenu";
import BasicInfo from "./BasicInfo";
import OrderMng from "./OrderMng";

export default {
  created() {
    window._AMapSecurityConfig = {
      securityJsCode: "768ab79bdc4075aa082bc070c53bb3c4",
    };
  },
  mounted() {
    this.searchingBtn();
  },
  mounted() {},
  components: {
    SubAccount, //表格
    LeftMenu,
    BasicInfo,
    OrderMng,
  },
  data() {
    return {
@@ -51,20 +52,6 @@
      this.activeIndex = i;
    },
    // 查询列表
    searchingBtn() {
      let param = {
        page: 1,
        size: 999,
        inputText: "",
      };
      findDevList(param)
        .then((res) => {
          this.nodes = res.data.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

 src/views/personalCenter/components/InfoCard.vue

@@ -104,7 +104,6 @@
</template>

<script>
import { findAllSdk, showSystemStates } from "@/api/device";
export default {
  props: {
    node: {
@@ -112,8 +111,6 @@
    },
  },
  created() {
    this.getAlg();
    this.getDevicePerformance();
  },
  data() {
    return {
@@ -124,60 +121,9 @@
  },
  methods: {
    //获取算法信息
    async getAlg() {
      const res = await findAllSdk({
        ip: this.node.devIp,
        port: this.node.serverPort,
      });

      res.data.data.forEach((item) => {
        //计算算法总数
        if (item.installed) {
          this.algAll++;
        }
        //计算待升级算法
        if (item.installed && item.isUpgrade) {
          this.algUpgrade++;
        }
      });
    },
  
    //获取设备性能
    async getDevicePerformance() {
      const res = await showSystemStates({
        ip: this.node.devIp,
        port: this.node.serverPort,
      });
      this.devicePerformance.push({
        data: +res.data.mem.usedPercent.toString().split(".")[0],
        name: "内存",
        type: "mem",
      });
      this.devicePerformance.push({
        data: +res.data.gpu.toString().split(".")[0],
        name: "算力",
        type: "gpu",
      });
      this.devicePerformance.push({
        data: +res.data.cpu.toString().split(".")[0],
        name: "cpu",
        type: "cpu",
      });

      let distData = 0;

      res.data.disk.forEach((item) => {
        let distItem = +item.info.usedPercent.toString().split(".")[0];
        distData = distData + distItem;
      });

      this.devicePerformance.push({
        data: distData,
        name: `硬盘`,
        type: "dist",
      });

      console.log(this.devicePerformance);
    },
    
    //关闭
    close() {
      this.$emit("close");

 src/views/personalCenter/components/OrderMng.vue

New file
@@ -0,0 +1,863 @@
<template>
  <div class="order-mng" v-if="!isShowDetail">
    <div class="head-name">订单管理</div>
    <div class="search">
      <div class="left">
        <div class="id">
          订单编号/产品名称
          <el-input v-model="inputText" placeholder="请输入"></el-input>
        </div>

        <div class="cluster">
          创建时间
          <el-date-picker
            size="small"
            v-model="searchTime"
            @change="save"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </div>
      </div>

      <div class="right">
        <div class="button searchBtn" @click="save">搜索</div>
        <div class="button resetBtn" @click="save">重置</div>
      </div>
      <div class="to-excel">
        <span class="iconfont">&#xe614;</span> <span>导出</span>
      </div>
    </div>

    <div class="table-area">
      <el-table
        id="multipleTable"
        ref="multipleTable"
        tooltip-effect="dark"
        :data="dataList"
        :fit="true"
        :default-sort="{ prop: 'createTime', order: 'descending' }"
        :stripe="true"
      >
        <el-table-column label="序号" width="55" class-name="index">
          <template slot-scope="scope">{{
            scope.$index + 1 + (page - 1) * size
          }}</template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="userType" label="用户类型"></el-table-column>
        <el-table-column prop="duration" label="授权时长"></el-table-column>
        <el-table-column prop="authList" label="权限"></el-table-column>

        <el-table-column label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.isBind == 1" class="status green">已绑定</div>
            <div v-else class="status">未绑定</div>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <span class="option" @click="showDetail(scope.row)">订单详情</span>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          @current-change="refrash"
          @size-change="handleSizeChange"
          :current-page="page"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 15, 20, 25]"
          :total="total"
          background
        ></el-pagination>
      </div>
    </div>
  </div>
  <div class="order-detail" v-else>
    <div class="banner">
      <span class="iconfont">&#xe614;</span> <span class="t">订单详情</span>
    </div>
    <div class="block">
      <div class="head-name">订单信息</div>

      <div class="order-general-view">
     
        <div class="detail-list">
          <div class="item">
            <label>订单编号：</label>
            <span>{{ form.sn }}</span>
          </div>
          <div class="item">
            <label>创建时间：</label>
            <span>{{ form.createTime }}</span>
          </div>
          <div class="item">
            <label>创建人：</label>
            <span>{{ form.createUserName }}</span>
          </div>
          <div class="item">
            <label>付款方式：</label>
            <span>{{ form.source == 0 ? "激活码下载" : "线上购买" }}</span>
          </div>
          <div class="item">
            <label>订单状态：</label>
            <span>{{ form.status }}</span>
          </div>
         
          <div class="item">
            <label>订单金额：</label>
            <span>{{
              form.source == 0 ? "--" : "￥ " + form.orderMoney + " 元"
            }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="block">
      <div class="head-name">订单详情</div>
       <el-table
          id="multipleTable"
          ref="multipleTable"
          tooltip-effect="dark"
          :data="form.products"
          style="width: 100%"
          :fit="true"
          :max-height="tableHeight"
          :default-sort="{ prop: 'createTime', order: 'descending' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column prop="productName" label="产品名称" width="220"></el-table-column>
          <el-table-column prop="productTypeName" label="产品类型" width="140"></el-table-column>
          <el-table-column prop="productVersion" label="版本号" width="140"></el-table-column>
          <el-table-column label="配置详情" min-width="180">
            <template slot-scope="scope">
              <div style="text-align: left">
                <p v-if="scope.row.productType != 3 && scope.row.productType != 4 && scope.row.modules.length">
                  模块：
                  <span v-for="item in scope.row.modules" :key="item">{{ item + " " }}</span>
                </p>
                <p v-if="scope.row.productBaseDetail.hasChUnitPrice">
                  通道数量：
                  <span>{{ scope.row.ChCount }}</span>
                </p>
                <p v-if="scope.row.productBaseDetail.hasAuthPrice">
                  授权数量：
                  <span>{{ scope.row.authCount }}</span>
                </p>
                <p v-if="scope.row.productType != 3 && scope.row.productType != 4 && scope.row.sdks.length">
                  算法：
                  <span v-for="item in scope.row.sdks" :key="item">{{ item + " " }}</span>
                </p>
                <p>
                  服务时长：
                  <span>{{ scope.row.serveYear + "年" }}</span>
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="devCount" label="数量" width="110"></el-table-column>
          <el-table-column label="服务起止时间" min-width="180">
            <template slot-scope="scope">
              <p>{{ scope.row.startTime }}</p>
              <p>{{ scope.row.endTime }}</p>
            </template>
          </el-table-column>
          <el-table-column label="金额" prop="price" width="130">
            <template slot-scope="scope">{{ form.source == 0 ? "--" : "￥ " + scope.row.price + " 元" }}</template>
          </el-table-column>
          <el-table-column label="操作" min-width="200">
            <template slot-scope="scope">
              <div class="operation">
                <span style="cursor: pointer" @click="downLoadEnclosure(scope.row)" v-if="scope.row.appendix.length"
                  >下载附件</span
                >
                <span
                  style="cursor: pointer"
                  v-if="scope.row.orderStatus == 2 && (scope.row.productType == 3 || scope.row.productType == 4)"
                  @click="downLoadSoftware(scope.row)"
                  >下载软件</span
                >
                <span
                  style="cursor: pointer"
                  v-if="scope.row.orderStatus == 2 && (scope.row.productType == 2 || scope.row.productType == 1)"
                  @click="downLoadSoftware(scope.row)"
                  >下载安装包</span
                >
                <span
                  style="cursor: pointer"
                  v-if="scope.row.orderStatus == 2 && scope.row.productType == 5"
                  @click="downLoadAuth(scope.row)"
                  >下载产品密钥</span
                >
                <span style="cursor: pointer" v-if="scope.row.productType != 2" @click="toDevice(scope.row)"
                  >查看设备</span
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
    </div>
    <div class="block">
      <div class="head-name">支付信息</div>
        <el-table
          tooltip-effect="dark"
          :data="form.payInfo"
          :fit="true"
          :max-height="tableHeight"
          :default-sort="{ prop: 'createTime', order: 'descending' }"
          :span-method="tableSpanMethod"
        >
          <el-table-column prop="payMethod" label="支付渠道" width="150">
            <template slot-scope="scope">
              <div v-if="scope.row.payMethod == 1">线下汇款</div>
              <div v-if="scope.row.payMethod == 2">支付宝</div>
              <div v-if="scope.row.payMethod == 3">微信</div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="payTime" label="付款时间" align="center" min-width="150" ></el-table-column> -->
          <el-table-column prop="updateTime" label="付款时间" width="180"></el-table-column>
          <el-table-column prop="payMoney" label="付款金额" width="150"></el-table-column>
          <el-table-column
            prop="tradeNo"
            label="附件凭证号/流水号"
            v-if="form.payMethod == 2"
            width="200"
          ></el-table-column>
          <el-table-column prop="payAccount" label="付款账号" width="190"></el-table-column>
          <el-table-column label="付款单位/姓名" prop="payUser" width="220"></el-table-column>
          <el-table-column label="查看付款凭证" width="200">
            <template slot-scope="scope">
              <div>
                <el-image
                  style="width: 100px"
                  :fit="imageFit"
                  :src="`/httpImage/${scope.row.appendix}`"
                  :preview-src-list="[`/httpImage/${scope.row.appendix}`]"
                ></el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="审核状态" width="180">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.orderStatus == 11">审核中</span>
                <span v-if="scope.row.orderStatus == 12">已驳回</span>
                <span v-if="scope.row.orderStatus == 2">审核通过</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="170">
            <template slot-scope="scope">
              <div v-if="scope.row.orderStatus !== 2">
                <span class="cursor-pointer" @click="checkOrder(1)">审核通过</span>
                <span class="cursor-pointer" @click="checkOrder(2)">驳回</span>
              </div>
              <span v-else>-</span>
            </template>
          </el-table-column>
        </el-table>
    </div>
  </div>
</template>

<script>
// import Steps from "./Steps";
// import StepsCard from "./StepCard";
// import TreeBox from "./TreeBox";
export default {
  components: {},
  data() {
    return {
      searchTime: [
        this.$moment().format("YYYY-MM-DD 00:00:00"),
        this.$moment().format("YYYY-MM-DD HH:mm:ss"),
      ], //搜索时间
      page: 1,
      size: 10, //分页相关
      inputText: "", //输入框内容
      activeStep: 0,
      activeIndex: 0,
      total: 0, //总数
      dataList: [
        {
          name: "basic",
          phone: "1121313232",
          userType: "个人",
          duration: "永久",
          authList: "集群1，集群2",
          isBind: 1,
        },
      ],
      isShowAdd: false, //是否展示新增弹窗
      isShowUnbind: false, //是否展示解绑弹窗
      unbindId: "",
      durationArr: [
        {
          value: 0,
          label: "一年",
        },
        {
          value: 1,
          label: "两年",
        },
      ], //所属集群下拉框
      cluster: null, //选中的集群类型
      showQuit: false, //展示退出集群的弹窗
      showJoin: false, //展示加入集群的弹窗
      activeEquipment: null, //处理中的设备
      isShowDetail: false,
      form: {
        id: "",
        createTime: "",
        createUserName: "",
        payTime: "",
        payMethod: "",
        payAble: 0,
        orderMoney: 0,
        price: "",
        serveYear: 1,
        source: 0,
        status: "",
        products: [],
        activeCodes: [],
        payInfo: [],
      },
    };
  },
  methods: {
    goback() {
      this.isShowAdd = false;
      this.activeIndex = 0;
    },
    goto(i) {
      this.activeIndex = i;
    },
    // 跳到设备详情
    checkDetail(row) {
      this.$router.push({
        path: "/equipmentDetail",
        query: {
          id: row.devId,
          ip: row.devIp,
          port: row.serverPort,
          ndid: row.id,
        },
      });
    },

    // 跳到算法详情
    algorithmDetail(row) {
      this.$router.push({
        path: "/algorithmDetail",
        query: {
          id: row.devId,
          ip: row.devIp,
          port: row.serverPort,
        },
      });
    },

    // 查询列表

    save() {},
    //分页功能
    handleSizeChange(size) {
      this.size = size;
    },
    //分页功能
    refrash(page) {
      this.page = page;
    },

    //解绑按钮
    Untying(row) {
      console.log(row);
      this.unbindId = row.id;
      this.isShowUnbind = true;
    },

    //获得默认时间
    getDateInit() {
      // 要求 默认一个月
      const end = new Date();
      const start = new Date();
      const nowDate = new Date();
      nowDate.setHours(0);
      nowDate.setMinutes(0);
      nowDate.setSeconds(0);
      nowDate.setMilliseconds(0);
      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30);
      end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1);
      return [
        this.$moment(start).format("YYYY-MM-DD HH:mm:ss"),
        this.$moment(end).format("YYYY-MM-DD HH:mm:ss"),
      ];
    },

    //关闭新增弹窗
    closeAddBox() {
      this.isShowAdd = false;
    },
    // 关闭解绑弹窗
    closeUnbindBox() {
      this.isShowUnbind = false;
    },

    //解绑成功回调
    reflash() {
      this.isShowUnbind = false;
    },

    clearSearch() {
      this.searchTime = this.getDateInit();
      this.inputText = "";
    },

    //退出集群
    quitCluster(equipment) {
      this.activeEquipment = equipment;
      this.showQuit = true;
    },

    //加入集群
    showDetail(equipment) {
      this.activeEquipment = equipment;
      this.isShowDetail = true;
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.order-mng {
  padding: 20px;
  .head-name {
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    color: #3d3d3d;
    border-left: 4px solid #0065ff;
    padding-left: 10px;
  }
  .add-title {
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    line-height: 22px;
    color: #3d3d3d;
    margin-bottom: 30px;
    .iconfont {
      margin-right: 10px;
    }
  }
  .steps {
  }

  .searchBtn {
    width: 60px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #fff;
    background: #0065ff;
    border-radius: 3px;
    margin-right: 20px;
  }
  .right {
    display: flex;
    justify-content: space-between;
  }
  .to-excel {
    box-sizing: border-box;
    border-radius: 3px;
    background: #0064ff;
    display: flex;
    width: 84px;
    height: 32px;
    color: #fff;
    align-items: center;
    justify-content: center;
    margin-left: 195px;
  }
  .resetBtn {
    width: 60px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #0065ff;
    box-sizing: border-box;
    border: 1px solid #0065ff;
    border-radius: 3px;
  }
  .search {
    display: flex;
    font-size: 14px;
    border-bottom: 1px solid #e9ebee;
    margin-top: 30px;
    border-radius: 3px;
    box-sizing: border-box;
    padding-bottom: 20px;
    .left,
    .right,
    .id,
    .time,
    .cluster {
      display: flex;
      align-items: center;
      .el-date-editor {
        width: 300px;
        height: 32px;
        border-radius: 3px;
        border: 1px solid #c0c5cc;
      }
    }

    .id .el-input ::v-deep {
      width: 200px;
    }

    .cluster::v-deep .el-input {
      width: 300px;

      margin-left: 10px;
      margin-right: 20px;
      .el-input__icon {
        line-height: 32px;
      }
      input {
        border-radius: 0;

        &::-webkit-input-placeholder {
          color: #999;
        }

        &:focus {
          border-color: #0065ff;
        }
      }
    }

    .el-input ::v-deep {
      width: 200px;
      margin-left: 10px;
      margin-right: 20px;
      height: 32px;
      line-height: 32px;
      input {
        border-radius: 3px;
        height: 32px;
        line-height: 32px;
        &::-webkit-input-placeholder {
          color: #999;
        }

        &:focus {
          border-color: #0065ff;
        }
      }
    }

    .el-date-editor {
      width: 318px;
      height: 40px;
      margin-left: 10px;
      margin-right: 20px;
      border-radius: 0;

      &::-webkit-input-placeholder {
        color: #999;
      }

      &.is-active {
        border-color: #0065ff;
      }
    }
  }

  .btns {
    display: flex;
    margin: 20px 0;
    text-align: center;
    .add {
      margin-right: 20px;
      width: 126px;
      height: 32px;
      background: #0065ff;
      color: #fff;
      span {
        margin-right: 5px;
        line-height: 32px;
        font-size: 14px;
      }
    }

    .export {
      width: 126px;
      height: 32px;
      border: 1px solid #0065ff;
      color: #0065ff;
      box-sizing: border-box;
      span {
        margin-right: 5px;
        line-height: 32px;
        font-size: 14px;
      }
    }
  }

  .el-table ::v-deep {
    background-color: rgb(233, 235, 238);
    padding: 1px;

    &::after {
      display: none;
    }

    td.index .cell {
      padding-left: 16px;
      padding-right: 4px;
    }

    .has-gutter tr th {
      background: #f0f3f5;
      font-size: 16px;
      color: #3d3d3d;
      font-weight: 700;
    }

    td .cell {
      color: #3d3d3d;
    }

    tr:hover > td.el-table__cell {
      background-color: #fff;
    }

    .el-table__row--striped .el-table__cell {
      background-color: #f0f5fa !important;
    }
    tr:hover > td.el-table__cell {
      background-color: #fff;
    }

    .el-table__row--striped .el-table__cell {
      background-color: #f0f5fa !important;
    }

    .status {
      color: #ff4b33;

      &.green {
        color: #36b24a;
      }
    }

    .option {
      margin-right: 10px;
      color: rgb(0, 101, 255);
      cursor: pointer;
    }
  }

  .el-pagination ::v-deep {
    margin-top: 30px;
    text-align: center;
    height: 24px;
    .el-pagination__sizes {
      margin-right: 0;
    }

    button {
      margin: 0;
      background-color: #fff;
      border: 1px solid #c0c5cc;
      border-radius: 2px;
    }

    .number {
      background-color: #fff;

      &:not(.disabled):hover {
        color: #0065ff;
      }

      &:not(.disabled).active {
        background-color: #0065ff;
        color: #fff;
      }
    }

    .el-input .el-input__inner {
      padding-left: 0;

      &:hover,
      &:focus {
        border-color: #0065ff;
      }
    }
  }
}
.order-detail {
  .el-table ::v-deep {
    background-color: rgb(233, 235, 238);
    padding: 1px;

    &::after {
      display: none;
    }

    td.index .cell {
      padding-left: 16px;
      padding-right: 4px;
    }

    .has-gutter tr th {
      background: #f0f3f5;
      font-size: 16px;
      color: #3d3d3d;
      font-weight: 700;
    }

    td .cell {
      color: #3d3d3d;
    }

    tr:hover > td.el-table__cell {
      background-color: #fff;
    }

    .el-table__row--striped .el-table__cell {
      background-color: #f0f5fa !important;
    }
    tr:hover > td.el-table__cell {
      background-color: #fff;
    }

    .el-table__row--striped .el-table__cell {
      background-color: #f0f5fa !important;
    }

    .status {
      color: #ff4b33;

      &.green {
        color: #36b24a;
      }
    }

    .option {
      margin-right: 10px;
      font-size: 24px;
      color: rgb(0, 101, 255);
      cursor: pointer;
    }
  }
  // padding: 0 20px;
  background-color: #f3f5f8;
  min-height: 856px;
  .banner {
    margin-bottom: 24px;
    height: 64px;
    background: #ffffff;
    box-sizing: border-box;
    padding: 20px;
    .iconfont {
      margin-right: 10px;
      font-size: 18px;
    }
    .t {
      font-size: 16px;
      color: #666666;
      line-height: 24px;
      font-weight: 700;
    }
  }
  .block {
    box-sizing: border-box;
    padding: 20px ;
    padding-bottom: 30px;
    margin-bottom: 24px;
    background: #ffffff;
    .head-name {
      font-weight: 700;
      font-size: 16px;
      line-height: 22px;
      color: #3d3d3d;
      border-left: 4px solid #0065ff;
      padding-left: 10px;
    }
    .order-general-view {
      background: #fff;
      .order-num {
        text-align: left;
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: bold;
        color: #111111;
        line-height: 22px;
      }
      .detail-list {
        display: flex;
        flex-wrap: wrap;
        text-align: left;
        .item {
          width: 25%;
          // margin: 15px 0 0;   
           margin-top: 30px;
          label {
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            line-height: 20px;color: #666666;
          }
          span {
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 700;
         color: #3D3D3D;
            line-height: 20px;
          }
        }
        span.reserved {
          color: #ccc;
        }
      }
    }
  }
}
</style>

<style >
.el-date-table td.start-date span,
.el-date-table td.end-date span {
  background-color: #0065ff;
}

.el-button--text span {
  color: #0065ff;
}

.el-button.is-plain:hover,
.el-button.is-plain:focus {
  color: #0065ff;
  border-color: #0065ff;
}

</style>

 src/views/personalCenter/components/SubAccount.vue

@@ -23,8 +23,8 @@
      </div>

      <div class="right">
        <div class="button searchBtn" @click="searchingBtn">搜索</div>
        <div class="button resetBtn" @click="clearSearch">重置</div>
        <div class="button searchBtn" @click="save">搜索</div>
        <div class="button resetBtn" @click="save">重置</div>
      </div>
    </div>

@@ -67,29 +67,7 @@
        <el-table-column prop="userType" label="用户类型"></el-table-column>
        <el-table-column prop="duration" label="授权时长"></el-table-column>
        <el-table-column prop="authList" label="权限"></el-table-column>
        <!-- <el-table-column label="安装时间" >
          <template slot-scope="scope">
            <div v-if="scope.row.installTime.length > 1">
              <div>{{ scope.row.installTime[0] }}</div>
              <div>{{ scope.row.installTime[1] }}</div>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="首次使用时间" >
          <template slot-scope="scope">
            <div v-if="scope.row.firstUseTime.length > 1">
              <div>{{ scope.row.firstUseTime[0] }}</div>
              <div>{{ scope.row.firstUseTime[1] }}</div>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>

        <el-table-column label="所属集群" show-overflow-tooltip >
          <template> -- </template>
        </el-table-column> -->

       
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.isBind == 1" class="status green">已绑定</div>
@@ -103,7 +81,6 @@
            <span class="iconfont option" @click="joinCluster(scope.row)"
              >&#xe640;</span
            >

            <!-- 解绑 -->
            <span class="iconfont option" @click="Untying(scope.row)"
              >&#xe617;</span
@@ -151,7 +128,7 @@
    ></JoinClusterBox>
  </div>
  <div class="sub-account" v-else-if="isShowAdd">
    <div class="add-title" @click="isShowAdd = false">
    <div class="add-title" @click="isShowAdd=false">
      <span class="iconfont">&#xe614;</span>
      <span>添加子账户</span>
    </div>
@@ -212,8 +189,8 @@
      
    </el-form>
    <div class="right">
      <div class="button searchBtn" @click="searchingBtn">搜索</div>
      <div class="button resetBtn" @click="clearSearch">重置</div>
      <div class="button searchBtn" @click="save">搜索</div>
      <div class="button resetBtn" @click="save">重置</div>
    </div>
  </div>
  <div class="sub-account" v-else-if="isShowRelate">
@@ -230,8 +207,6 @@
</template>

<script>
import { findDevList } from "@/api/device";
// import AddBox from "@/views/equipmentManagement/equipmentList/components/AddBox";
import UnbindBox from "@/views/equipmentManagement/equipmentDetail/components/UnbindBox";
import QuitClusterBox from "@/views/equipmentManagement/equipmentList/components/QuitClusterBox";
import JoinClusterBox from "@/views/equipmentManagement/equipmentList/components/JoinClusterBox";
@@ -452,6 +427,7 @@
  },
  methods: {
    goback() {
      this.isShowAdd=false
      this.isShowRelate = false;
      this.activeIndex = 0;
    },
@@ -484,42 +460,17 @@
    },

    // 查询列表
    searchingBtn() {
      let param = {
        page: this.page,
        size: this.size,
        // startTime: this.searchTime[0],
        // endTime: this.searchTime[1],
        inputText: this.inputText,
      };
      findDevList(param)
        .then((res) => {
          this.dataList = res.data.list;
          //时间分行显示
   
    save(){

          this.dataList.forEach((item) => {
            item.installTime = item.installTime.split(" ");
            item.firstUseTime = item.firstUseTime.split(" ");
          });
          this.total = res.data.total;
          if (res.data.total <= this.size) {
            this.page = 1;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //分页功能
    handleSizeChange(size) {
      this.size = size;
      this.searchingBtn();
    },
    //分页功能
    refrash(page) {
      this.page = page;
      this.searchingBtn();
    },

    //解绑按钮
@@ -559,13 +510,11 @@
    //解绑成功回调
    reflash() {
      this.isShowUnbind = false;
      this.searchingBtn();
    },

    clearSearch() {
      this.searchTime = this.getDateInit();
      this.inputText = "";
      this.searchingBtn();
    },

    //退出集群
@@ -581,8 +530,7 @@
    },
  },
  mounted() {
    this.searchTime = this.getDateInit();
    this.searchingBtn();
    
  },
};
</script>