vue实现大屏

学上星辰

已于 2023-02-15 09:57:28 修改

阅读量767

点赞数

文章标签： vue.js 前端 javascript

于 2023-02-15 09:35:15 首次发布

本文链接：https://blog.csdn.net/qq_45326728/article/details/129037418

版权

监控中的项目

          <ul class="left_list" v-infinite-scroll="loadProject">
            <li
              v-for="(item, index) in monitorProjectLists"
              :key="item.conversationId"
              :class="stateStyle == index ? 'screenPlace' : ''"
              @click="
                changeData(
                  index,
                  item.conversationId,
                  item.roomId,
                  item.userId
                )
              "
            >
              <span>{{ item.entryName }}</span>
              <div>
                <span>{{ item.lastOfferPrice }}</span>
                <img
                  v-if="item.state == 1"
                  src="../../../assets/images/up.png"
                  alt
                />
                <em class="null" v-else></em>
              </div>
            </li>
          </ul>
          <div class="loadText" v-if="loadProjectIcon">{{ loadProjectText }}</div>
        </div>
        <!-- 项目动态 -->
        <div class="right_top">
          <p><span /> 监控中项目动态</p>

          <ul class="right_list" v-infinite-scroll="loadDynamic">
            <li v-for="item in dynamicRecordLists" :key="item.messageId">
              <p>{{ item.entryName }}</p>
              {{ item.offerTime }},竞买人 <em>{{ item.biddingNumber }}</em
              >, 报价
              <span>{{ item.offerPrice }}</span>
            </li>
          </ul>
          <div class="loadText" v-if="loadDynamicIcon">{{ loadDynamicText }}</div>
        </div>``
      </div>
      <div class="all_center">
        <!-- 竞价记录 -->
        <div class="center">
          <div class="center_title">
            <span></span>
            <p>竞价记录</p>
          </div>
          <div class="center_content">
            <div class="table-wrapper">
              <el-table
                :data="reverseBidderRecordLists"
                :show-header="true"
                height="450"
                ref='table'
                :header-cell-style="{
                  background: '#97BEE3',
                  color: '#ffffff',
                }"
              >
                <!-- <template> -->
                  <el-table-column
                    label="排序"
                    prop="index"
                    :show-overflow-tooltip="true"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span v-if="scope.$index == 0" class="green">{{
                        scope.row.sort
                      }}</span>
                      <span v-else>{{
                        scope.row.sort
                      }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="竞买号"
                    prop="userNumber"
                    :show-overflow-tooltip="true"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span v-if="scope.$index == 0" class="green">{{
                        scope.row.biddingNumber
                      }}</span>
                      <span v-else>{{ scope.row.biddingNumber }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="报价金额"
                    prop="offerPrice"
                    :show-overflow-tooltip="true"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <div class="centerBox">
                        <span v-if="scope.$index == 0" class="green">{{
                          scope.row.offerPrice
                        }}</span>
                        <span v-else>{{ scope.row.offerPrice }}</span>
                        <span v-if="scope.row.usePriority == 1" class="you"
                          >优</span
                        >
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="报价时间"
                    prop="createdAt"
                    :show-overflow-tooltip="true"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <span v-if="scope.$index == 0" class="green">{{
                        scope.row.createdText
                      }}</span>
                      <span v-else>{{ scope.row.createdText }}</span>
                    </template>
                  </el-table-column>
                <!-- </template> -->
              </el-table>
              <div class="loadText" v-if="loadMessageIcon">{{ loadMessageText }}</div>
            </div>
          </div>
        </div>
        <!-- 竞价参数 -->
        <div class="center_bottom">
          <div class="center_title">
            <span></span>
            <p>竞价参数</p>
          </div>
          <div class="center_bottom_content">
            <div class="one">
              <p>
                <span>货币单位</span>
                <span>{{ sessionInfo.monetaryUnit }}</span>
              </p>
              <p>
                <span>保证金</span>
                <span>{{ sessionInfo.bond }}</span>
              </p>
              <p>
                <span>报价方式</span>
                <span>{{ biddingMode[sessionInfo.biddingMode] }}</span>
              </p>
              <p>
                <span>是否允许底价出价</span>
                <span v-if="sessionInfo.floorPriceStatus == 0">否</span>
                <span v-if="sessionInfo.floorPriceStatus == 1">是</span>
              </p>
              <p v-if="sessionInfo.projectStatus == 4">
                <span>延时报价结束时间</span>
                <span>{{ sessionInfo.delayEndTimeText }}</span>
              </p>
              <p v-else-if="sessionInfo.projectStatus == 5">
                <span>优先权行使期结束时间</span>
                <span>{{ sessionInfo.endTimeText }}</span>
              </p>
              <p v-else>
                <span>限时报价结束时间</span>
                <span>{{ sessionInfo.endTimeText }}</span>
              </p>
            </div>
            <div class="two">
              <p>
                <span>起拍价</span>
                <span>{{ sessionInfo.startingPrice }}</span>
              </p>
              <p>
                <span>优先权人</span>
                <span>{{
                  sessionInfo.priorityInvolved
                    ? sessionInfo.priorityInvolved
                    : "无"
                }}</span>
              </p>
              <p>
                <span>保留价</span>
                <span v-if="sessionInfo.retentionPriceStatus == 0">无</span>
                <span v-else>有</span>
              </p>
              <p>
                <span>溢价率</span>
                <span>{{ sessionInfo.premiumRate }}</span>
              </p>
              <p>
                <span>延时规则</span>
                <span>{{
                  sessionInfo.biddingMode == 2
                    ? "无"
                    : sessionInfo.delaySetting
                }}</span>
              </p>
            </div>
            <div class="three">
              <p>
                <span>加价幅度</span>
                <span>{{ sessionInfo.priceIncreaseRange }}</span>
              </p>
              <p>
                <span>加价倍数</span>
                <span>{{ sessionInfo.upMaxMultiple }}</span>
              </p>
              <p>
                <span>竞价阶段</span>
                <span>
                  {{
                    sessionInfo.projectStatus === 3
                      ? "竞价期"
                      : biddingStage[sessionInfo.projectStatus]
                  }}
                </span>
              </p>
              <p>
                <span>{{
                  sessionInfo.biddingMode == 2 ? "优先权主张期" : "延时周期"
                }}</span>
                <span>{{ sessionInfo.delayPeriod }}</span>
              </p>
              <p>
                <span>
                  <br />
                </span>
                <span>
                  <br />
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="right">
        <div class="time">
          <!-- 暂停/恢复竞价 -->
          <div
            class="suspend_btn"
            v-if="
              biddingStatus.data == -1 ||
              biddingStatus.data == 0 ||
              biddingStatus.data == 5 ||
              biddingStatus.data == 6
            "
            @click="biddingStatus.data == 5 ? toRecover() : toSuspend()"
          >
            <img
              :src="operateIcon"
              style="width: 25px; height: 25px; margin-right: 5px"
            />
            <div>
              {{ biddingStatus.data == 5 ? "继续竞价" : "暂停竞价" }}
            </div>
          </div>
          <div class="suspend_btn1" v-else></div>
          <!-- 结束时间 -->
          <p v-if="biddingStatus.data == 0 || biddingStatus.data == -1">
          <!-- <p> -->
            <em>距结束:</em>
            <span>{{ dayString }}</span>
            <em>天</em>
            <span>{{ hourString }}</span>
            <em>时</em>
            <span>{{ minuteString }}</span>
            <em>分</em>
            <span>{{ secondString }}</span>
            <em>秒</em>
          </p>
          <!-- 恢复时间 -->
          <p v-if="biddingStatus.data == 6">
            <em>距恢复:</em>
            <span>{{ dayString }}</span>
            <em>天</em>
            <span>{{ hourString }}</span>
            <em>时</em>
            <span>{{ minuteString }}</span>
            <em>分</em>
            <span>{{ secondString }}</span>
            <em>秒</em>
          </p>
          <div class="fullScreen">
            <img
              @click="setScreenfull"
              v-if="full"
              src="../../../assets/images/full1.png"
              alt
            />
            <img
              @click="setScreenfull"
              v-else
              src="../../../assets/images/full2.png"
              alt
            />
          </div>
        </div>
        <!-- 人员列表 -->
        <div class="left_bottom">
          <div class="left_bottom_up">
            <div class="left_bottom_up_title">
              <p><span /> 竞买人状态</p>
              <em>报名人数{{ bidderUserTotalNumber }}人</em>
            </div>
            <div class="state">
              <span></span>
              在线用户
              <em></em>
              离线用户
            </div>
            <ul class="box" v-if="bidderUserLists">
              <li v-for="(item, index) in bidderUserLists" :key="index">
                <el-popover
                  placement="bottom"
                  width="460"
                  :offset="30"
                  trigger="hover"
                >
                  <div class="tips">
                    <p>
                      <span>竞买人名称 : {{ item.userName }}</span>
                      联系方式: {{ item.phone }}
                    </p>
                    <div class="tips_down">
                      <p>
                        <span>ip</span>
                        <em>{{ item.ip }}</em>
                      </p>
                      <p>
                        <span>进入竞价室时间</span>
                        <em>{{ item.enterTime }}</em>
                      </p>
                      <p>
                        <span>网络（毫秒）</span>
                        <em>{{ item.networkDelay }}</em>
                      </p>
                    </div>
                  </div>

                  <p
                    v-if="item.state < 1"
                    slot="reference"
                    class="box_lists"
                  >
                    {{ item.biddingNumber }}
                    <span></span>
                  </p>
                  <p v-else slot="reference" class="box_list">
                    {{ item.biddingNumber }}
                    <span></span>
                  </p>
                </el-popover>
              </li>
            </ul>
          </div>
          <ul class="left_bottom_down">
            <li v-for="(item, index) in biddingTrend" :key="index">
              竞买人
              <span>{{ item.biddingNumber }}</span>
              {{ item.state == 1 ? "进入" : "退出" }}竞价室，{{
                item.enterTime
              }}
            </li>
          </ul>
        </div>
        <!-- 走势图 -->
        <div class="right_bottom">
          <div class="right_bottom_title">
            <span> <em></em> 竞价走势图 </span>
            <p>(单位：元)</p>
          </div>
          <led-e-chart :lists="ledEChartLists" />
        </div>
      </div>
    </div>
  </div>
  <!-- 背景中的动态特效 -->
  <vue-particles
    color="#fff"
    :particleOpacity="0.7"
    :particlesNumber="100"
    shapeType="circle"
    :particleSize="4"
    linesColor="#fff"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="1"
    :hoverEffect="false"
    hoverMode="grab"
    :clickEffect="false"
    clickMode="push"
    class="lizi look"
  />
</div>

<!-- 恢复时间设置 -->
<el-dialog title="继续竞价" :visible.sync="recoverDialog" width="35%">
  <el-form
    ref="recoverRuleForm"
    label-position="right"
    label-width="150px"
    :model="recoverRuleForm"
  >
    <el-col :span="24">
      <el-form-item class="boxBox" label="服务器当前时间 :" prop>{{
        date("Y-m-d H:i:s", serviceCurrentTime)
      }}</el-form-item>
      <el-form-item class="boxBox" label="项目暂停时间 :" prop>{{
        recoverRuleForm.pausedTime
      }}</el-form-item>
      <!-- <el-form-item class="boxBox" label="项目已暂停时长 :" prop><div style="color:FireBrick;font-size:22px">{{recoverRuleForm.suspendedDuration}}</div></el-form-item> -->
      <el-form-item class="boxBox" label="项目已暂停时长 :" prop
        ><div style="color: FireBrick; font-size: 22px">
          {{ pausedDayString }}天{{ pausedHourString }}时{{
            pausedMinuteString
          }}分{{ pausedSecondString }}秒
        </div></el-form-item
      >
      <el-form-item
        class="boxBox"
        label="竞价恢复时间 :"
        prop
        style="margin-top: 10px"
      >
        <el-date-picker
          v-model="recoverRuleForm.biddingStartTime"
          type="datetime"
          :clearable="false"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col :span="24" style="margin-top: 20px">
      <el-form-item
        class="boxBox"
        label="竞价结束时间 :"
        prop="biddingEndTime"
      >
        <el-date-picker
          v-model="recoverRuleForm.biddingEndTime"
          type="datetime"
          :clearable="false"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
    </el-col>
  </el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="hide" class="recover_btn1">取 消</el-button>
    <el-button type="primary" @click="confirmRecover" class="recover_btn1"
      >确 定</el-button
    >
  </span>
</el-dialog>

export default {
mixins: [createNowTimeStampMixin(“nowTimeStampMillisecond”, Vue)],
useEasyBootIm: {
use: [
// 获取消息内容
“getMessage”,
// 获取我的会话列表
“myConversationLists”,
],
conversationWindows: [
{
use: {
// 指定key 使用竞价室id
roomId: “bidderRoomId”,
// 指定切换房间id方法名
switchRoomId: “switchBidderRoomId”,
// 指定key 使用竞价室会话id
conversationId: “bidderConversationId”,
// 指定切换会话id方法名
switchConversationId: “switchBidderConversationId”,
// 指定key 使用消息列表
messageLists: “bidderMessageLists”,
// 指定key 使用同级会话列表
peerConversationLists: “bidderPeerConversationLists”,
},
// 自动加载所有数据
autoLoadAllMessage: true,
},
{
use: {
messageLists: “dynamicRecordMessageLists”,
switchConversationId: “switchDynamicRecordConversationId”,
},
// 自动加载所有数据
autoLoadAllMessage: true,
},
],
},
created() {
this.switchDynamicRecordConversationId(-1);

this.getDictsOfferPrice();
this.getDictsStage();
window["getCallId"] = (val) => {
  this.countDown(val);
};
this.getUserId();
// this.$nextTick(() => this.consumerDynamic())

},
mounted() {
// 计算服务器与本地的时间差
timeSlot().then(res => {
console.log(res)
this.timeDifferenceMillisecond = res
})
// 加载所有自己的会话
this.$easyBootIm.loadAllConversationEmitEvent();

if (this.monitorProjectLists.length > 0) {
  this.consumerProjectList(userId);
}

this.tableListener()

},
components: {
Assets,
[ledEChart.name]: ledEChart,
},
props: {},
name: “Screenfull”,

data() {
return {
// 存储补充信息的map
biddingNumberMap: {},
messageInfoMap: {},
userMap: {},
projectMap: {},
day: “”,
hour: “”,
minute: “”,
second: “”,
promiseTimer: “”,
isFullscreen: true,
stateStyle: 0,
full: true,
list: [],
biddingTrend: [],
biddingMode: [],
biddingStage: [],
num: 0,
loadProjectInfoDate: {},
loadMessageInfoDate: {},
loadUserInfoDate: {},
loadBiddingNumberDate: {},
operateIcon: require(“…/…/…/assets/images/operate.png”),
// 恢复时间设置弹窗
recoverDialog: false,
recoverRuleForm: {
nowTime: “2022-01-01”,
biddingStartTime: “”,
biddingEndTime: “”,
},
// 项目id
projectId: 0,
conversationId: 0,
userId: 0,
currentRoomId: 0,
// 项目状态
projectStatus: {},
entryName: “”,
// bidderEndTime:0,
// 当前项目结束时间
endTime: “”,
// 已暂停时长
pausedTime: 0,
// 暂停按钮的显示/隐藏
pauseShow: false,
bidderStatus: “”,
// 下拉请求
loadProjectIcon: false,
loadMessageIcon: false,
loadDynamicIcon: false,
loadProjectText: ‘加载中…’,
loadMessageText: ‘加载中…’,
loadDynamicText: ‘加载中…’,
loadProjectTotal: 0,
loadMessageTotal: 0,
loadDynamicTotal: 0,

  // 本地时间与服务器时间差
  timeDifference: 0
};

computed: {
// 倒序竞价室记录
reverseBidderRecordLists() {
return […this.bidderRecordLists].reverse();
},
ledEChartLists() {
// 跳过加载中的数据
return this.bidderRecordLists.filter((item) => !item.isLoad);
},
bidderRecordLists() {
return (
this.messageRecordLists
// 在所有记录中找到出价类型的记录
.filter((item) => item.type === “offerPrice”)
// 数据转换
.map((message) => ({
…message,
offerPrice: message.offerPrice || “load…”,
}))
);
},
// 竞价状态
biddingStatus() {
for (let i = this.messageRecordLists.length; i > 0; --i) {
const messageRecord = this.messageRecordLists[i - 1];
if (messageRecord && messageRecord.type === “state”) {
return {
data: messageRecord.data,
msg: messageRecord.msg,
};
}
}
return { data: -2, msg: “” };
},
// 结束时间
bidderEndTime() {
if (this.messageRecordLists.length < 2) {
if (this.sessionInfo.endTime) return this.sessionInfo.endTime;
} else {
for (let i = this.messageRecordLists.length; i > 0; --i) {
const messageRecord = this.messageRecordLists[i - 1];
if (
messageRecord &&
messageRecord.type === “endTime” &&
messageRecord.data
) {
return messageRecord.data / 1000;
}
}
}

  return null;
},

messageRecordLists() {
  return this.bidderMessageLists.map((message) => {
    const fromConversationId = message.fromConversationId;
    const messageId = message.messageId;
    const sort = message.sort
    const bidderRecord = {
      sort,
      messageId,
      // 标记是否加载中
      isLoad: false,
      // 创建时间-时间戳
      createdAt: message.createdAt,
      // 创建时间-时间文本
      createdText: date("Y-m-d H:i:s", message.createdAt),
      ...this.parseBase64ToJson(message.payload),
    }; // 补充用户信息
    if (fromConversationId) {
      if (this.userMap[fromConversationId]) {
        (bidderRecord.phone =
          this.userMap[fromConversationId].phone || "---"),
          (bidderRecord.userName =
            this.userMap[fromConversationId].userName || "---");
      } else {
        (bidderRecord.phone = "load..."),
          (bidderRecord.userName = "load...");
        this.loadUserInfo(fromConversationId);
      }
    }
    // 补充用户编号
    if (fromConversationId) {
      if (this.biddingNumberMap[fromConversationId]) {
        // 竞价编号
        bidderRecord.biddingNumber =
          this.biddingNumberMap[fromConversationId];
      } else {
        // 默认是加载中...
        bidderRecord.biddingNumber = "load...";
        // 试图加载编号
        this.loadBiddingNumber(fromConversationId);
      }
    }
    try {
    } catch (e) {}
    // 判断是否还在加载数据
    if (
      (bidderRecord.isLoad =
        void 0 === bidderRecord.offerPrice ||
        null === bidderRecord.offerPrice)
    ) {
      // 价格加载中
      bidderRecord.offerPrice = "load...";
    }
    return bidderRecord;
  });
},

// 竞买人列表
bidderUserLists() {
  // 竞买人状态 - 由本房间的会话列表 过滤掉管理员 得到
  let list = this.bidderPeerConversationLists
    .map((item) => {
      const userId = item.userId;
      const conversationId = item.conversationId;
      const roomId = item.roomId;
      const bidderRecord = {
        userId,
        conversationId,
        roomId,
        state: item.state,
      };
      if (conversationId) {
        if (this.biddingNumberMap[conversationId]) {
          // 竞价编号
          bidderRecord.biddingNumber =
            this.biddingNumberMap[conversationId];
        } else {
          bidderRecord.biddingNumber = "load...";
          // 试图加载编号
          this.loadBiddingNumber(conversationId);
        }
      }
      if (conversationId) {
        // 加载用户信息
        if (this.userMap[conversationId]) {
          (bidderRecord.ip = this.userMap[conversationId].ip || "---"),
            (bidderRecord.phone =
              this.userMap[conversationId].phone || "---"),
            (bidderRecord.userName =
              this.userMap[conversationId].userName || "---"),
            (bidderRecord.enterTime = this.userMap[conversationId].enterTime
              ? date("Y-m-d H:i:s", this.userMap[conversationId].enterTime)
              : "---"),
            (bidderRecord.networkDelay =
              this.userMap[conversationId].networkDelay || "---");
        } else {
          (bidderRecord.ip = "load..."),
            (bidderRecord.phone = "load..."),
            (bidderRecord.userName = "load..."),
            (bidderRecord.enterTime = "load..."),
            (bidderRecord.networkDelay = "load..."),
            this.loadUserInfo(conversationId);
        }
      }
      return bidderRecord;
    })
    .filter(
      (item) =>
        typeof item.biddingNumber === "string" && item.biddingNumber != "" && item.biddingNumber != 'load...'
    );
  return list;
},
bidderUserTotalNumber() {
  return this.bidderUserLists.length;
  // return 1
},

// 当前项目信息
sessionInfo() {
  if (!this.currentRoomId == 0) {
    if (!this.projectMap[this.currentRoomId]) {
      this.loadProjectInfo(this.currentRoomId);
      return {};
    } else {
      let info = this.projectMap[this.currentRoomId];
      // 限时报价期结束时间
      info.endTimeText = date("Y-m-d H:i:s", info.end);
      // 延时报价期结束时间
      // info.delayEndTimeText = date("Y-m-d H:i:s", info.end + info.floorPriceStatus)
      return info;
    }
  } else {
    return {};
  }
},

// 我的项目列表
monitorProjectLists() {
  let list = this.myConversationLists
    .filter((item) => item.roomId != 0)
    .map((conversation) => {
      const userId = conversation.userId;
      const roomId = conversation.roomId;
      const conversationId = conversation.conversationId;
      const summaryMessageId = conversation.summaryMessageId;
      const payload =
        (this.getMessage(conversation.summaryMessageId) || {}).payload ||
        "";
      const payloadJson = this.parseBase64ToJson(payload);
      const lastOfferPrice = payloadJson.offerPrice
        ? payloadJson.offerPrice + "元"
        : "---";
      const info = {
        userId,
        roomId,
        conversationId,
        lastOfferPrice,
        entryName: this.projectMap[roomId]
          ? this.projectMap[roomId].entryName
          : "load...",
      };
      if (!this.projectMap[roomId]) {
        this.loadProjectInfo(roomId);
      }
      if (!this.messageInfoMap[summaryMessageId]) {
        this.loadMessageInfo(summaryMessageId);
      }
      return info;
    })
    .filter((v) => v.entryName != "load...")
    .reverse();
  return list;
},

// 项目中的动态列表
dynamicRecordLists() {
  return this.dynamicRecordMessageLists
    .map((message) => {
      const messageId = message.messageId;
      const roomId = message.fromRoomId;
      const fromConversationId = message.fromConversationId;
      const bidderRecord = {
        messageId,
        fromConversationId,
        offerPrice: message.offerPrice,
        // biddingNumber: this.biddingNumberMap[conversationId],
        entryName: this.projectMap[roomId]
          ? this.projectMap[roomId].entryName
          : "load...",
        offerTime: date("Y-m-d H:i:s", message.offerTime),
        ...this.parseBase64ToJson(message.payload),
      };
      if (fromConversationId) {
        if (this.biddingNumberMap[fromConversationId]) {
          // 竞价编号
          bidderRecord.biddingNumber = this.biddingNumberMap[
            fromConversationId
          ]
            ? this.biddingNumberMap[fromConversationId]
            : "load...";
        } else {
          // 试图加载编号
          this.loadBiddingNumber(fromConversationId);
        }
      }
      if (!this.projectMap[roomId]) {
        this.loadProjectInfo(roomId);
      }
      return bidderRecord;
    })
    .filter((item) => item.type === "offerPrice")
    .reverse();
},

// 倒计时
dayString() {
  return this.bidderEndTime
    ? this.formatNum(this.timeDifferenceToBiddingEndObj.day)
    : "--";
},
hourString() {
  return this.bidderEndTime
    ? this.formatNum(this.timeDifferenceToBiddingEndObj.hour)
    : "--";
},
minuteString() {
  return this.bidderEndTime
    ? this.formatNum(this.timeDifferenceToBiddingEndObj.minute)
    : "--";
},
secondString() {
  return this.bidderEndTime
    ? this.formatNum(this.timeDifferenceToBiddingEndObj.second)
    : "--";
},
// 时间差
timeDifferenceToBiddingEndObj() {
  // 如果 bidderEndTime 为null直接返回null
  // console.log('.......', this.timeDifferenceMillisecond).
  const timeDifferenceToBiddingEnd =
    this.bidderEndTime &&
    Math.ceil(Math.max(0, this.bidderEndTime - this.serverTimeStamp))

  return secondToD_H_M_S(timeDifferenceToBiddingEnd);
},

// 已暂停时长
pausedDayString() {
  return this.pausedTime
    ? this.formatNum(this.pausedTimeDifferenceToBiddingEndObj.day)
    : "--";
},
pausedHourString() {
  return this.pausedTime
    ? this.formatNum(this.pausedTimeDifferenceToBiddingEndObj.hour)
    : "--";
},
pausedMinuteString() {
  return this.pausedTime
    ? this.formatNum(this.pausedTimeDifferenceToBiddingEndObj.minute)
    : "--";
},
pausedSecondString() {
  return this.pausedTime
    ? this.formatNum(this.pausedTimeDifferenceToBiddingEndObj.second)
    : "--";
},
// 时间差
pausedTimeDifferenceToBiddingEndObj() {
  // 如果 bidderEndTime 为null直接返回null
  const timeDifferenceToBiddingEnd =
    this.pausedTime && Math.max(0, this.nowTimeStampMillisecond - this.pausedTime);

  return secondToD_H_M_S(timeDifferenceToBiddingEnd);
},

// 服务器与本地的时间差
serverTimeStamp() {
  return (this.nowTimeStampMillisecond * 1000 + this.timeDifferenceMillisecond)/1000
},

// 服务器当前时间
serviceCurrentTime() {
  return this.timeDifference + this.nowTimeStampMillisecond;
},

watch: {
reverseBidderRecordLists() {
this.loadProjectInfo(this.currentRoomId);
},
// 当前项目状态发生改变时，重新请求一下这个项目的信息
biddingStatus() {
this.changeProjectInfo(this.currentRoomId);
},
},
beforeDestroy() {
this.destroy();
if(this. $re f res h R ecor d C o n s u m er) t hi s .$ refreshRecordConsumer.unregister();
if(this. $m y St a t u s C o n s u m er) t hi s .$ myStatusConsumer.unregister();
if(this. $p ro j ec t L i s t) t hi s .$ projectList.unregister();
if(this. $u ser L i s t) t hi s .$ userList.unregister();
if(this. $m ess a g e C o n s u m er) t hi s .$ messageConsumer.unregister();
},

methods: {
date,
// 监听表格触底
tableListener() {
let dom = this.$refs.table.bodyWrapper
dom.addEventListener(‘scroll’, () => {
// 若用户调整了系统分辨率可能导致获取的dom.scrollTop不准确，所以使用进一法。
const scrollDistance = dom.scrollHeight - Math.ceil(dom.scrollTop) - dom.clientHeight;
if (scrollDistance <= 0) {
this.loadMessage()
}
})
},
// 加载项目触底
loadProject() {
// this.loadProjectIcon = true;
// const data = {
// userId: this.userId,
// pageSize: this.monitorProjectLists.length
// }
// updateConversationList(data).then(() => {
// setTimeout(() => this.loadProjectIcon = false, 1000)
// })
},
// 加载消息触底
loadMessage() {
if (!this.conversationId && this.conversationId === 0) return;

  const data = {
    conversationId: this.conversationId,
    pageSize: this.reverseBidderRecordLists.length
  }
  this.loadMessageIcon = true;
  updateMessageList(data).then(() => {
    setTimeout(() => this.loadMessageIcon = false, 1000)
  })
},
// 加载动态触底
loadDynamic() {
  // this.loadDynamicIcon = true;
  // const data = {
  //   conversationId: -1,
  //   pageSize: this.dynamicRecordLists.length
  // }
  // updateMessageList(data).then(() => {
  //   setTimeout(() => this.loadMessageIcon = false, 1000)
  // })
},
// 获取用户ID
getUserId() {
  getUserId().then((res) => {
    this.userId = res
    this.consumerProjectList(res);
    this.consumerDynamic(res);
    this.consumerProject(res)
  });
},
// 订阅消息列表
consumerMessage(conversationId) {
  this.$messageConsumer = eventBus.consumer("easyboot.cloud.im.conversation." + conversationId + ".message.page")
  this.$messageConsumer.handler(res => {
    // if(this.reverseBidderRecordLists[0].sort <= this.reverseBidderRecordLists.length) {
    //   this.loadMessageText = '已加载全部消息'
    //   this.loadMessageIcon = true
    //   setTimeout(() => this.loadMessageIcon = false, 1000)
    //   return;
    // } else {
      const conversationMessageIndex = res.body
      eventBus.publish('easyboot.native.im.' + EVENT_ADDRESS.CONVERSATION_MESSAGE_INDEX_UPDATED, {
        conversationId: conversationId,
        indexs: conversationMessageIndex.records
      })
    // }
  })
},
// 订阅我的项目列表
consumerProject(userId) {
  this.$ProjectConsumer = eventBus.consumer("easyboot.cloud.im.user.conversation." + userId + ".page")
  this.$ProjectConsumer.handler(res => {
    // if(this.messageRecordLists.length <= res.body.page.count) {
    //   this.loadMessageText = '已加载全部项目'
    //   this.loadMessageIcon = true
    //   setTimeout(() => this.loadMessageIcon = false, 1000)
    //   return;
    // } else {
      const conversationMessageIndex = res.body
      eventBus.publish('easyboot.native.im.' + EVENT_ADDRESS.CONVERSATION_MY_INDEX_UPDATED, {
        conversationId: conversationId,
        indexs: conversationMessageIndex.records
      })
    // }
  })
},
// 订阅所有项目动态
consumerDynamic(userId) {
  eventBus
    .consumer("easyboot.cloud.im.user." + userId + ".message.index")
    .handler((ed) => {
      const conversationMessageIndex = ed.body;
      eventBus.publish(
        this.$easyBootIm.getNativeEventBusAddressPrefixSync() +
          EVENT_ADDRESS.CONVERSATION_MESSAGE_INDEX_UPDATED,
        {
          conversationId: conversationMessageIndex.conversationId,
          indexs: [conversationMessageIndex],
        }
      );
    });
},
// 订阅当前用户（管理员）的进出情况
consumerStatus(roomId, userId) {
  this.$myStatusConsumer = eventBus.consumer(
    "com.yjs.bidding.mutil.offer." + roomId + "." + userId
  );
},
// 订阅项目列表
consumerProjectList(userId) {
  this.$projectList = eventBus.consumer(
    "easyboot.cloud.im.conversation.user." + userId + ".change"
  );
  this.$projectList.handler((msg) => {
    setTimeout(
      () =>
        this.$easyBootIm.loadPeerConversationEmitEvent(
          msg.body.conversationId,
          true
        ),
      600
    );
  });
},
// 订阅竞买人状态
consumerUserList(roomId) {
  this.$userList = eventBus.consumer(
    "easyboot.cloud.im.room." + roomId + ".conversation.change"
  );
  this.$userList.handler((msg) => {
    if (this.conversationId) {
      setTimeout(
        () =>
          this.$easyBootIm.loadPeerConversationEmitEvent(
            this.conversationId,
            true
          ),
        600
      );
    }
  });
},
// 订阅竞买人进出动态
consumerTrend(roomId) {
  // 初始化一下原有列表
  this.biddingTrend = [];

  this.$refreshRecordConsumer = eventBus.consumer(
    "com.yjs.bidding.room.state.change." + roomId
  );
  this.$refreshRecordConsumer.handler((msg) => {
    if (msg.body.conversationId) {
      // 延迟 60
      // setTimeout(() => this.$easyBootIm.loadConversationEmitEvent(this.conversationId, true), 600)
      setTimeout(
        () =>
          this.$easyBootIm.loadConversationEmitEvent(
            msg.body.conversationId,
            true
          ),
        600
      );
    }
    // 请求接口，然后刷新状态列表
    let params = { roomId: roomId };
    getLEDInfo(params).then((res) => {
      for (var i = 0; i < res.records.length; i++) {
        var time = new Date(res.records[i].time * 1000);
        var y = time.getFullYear();
        var m = time.getMonth() + 1;
        var d = time.getDate();
        res.records[i].enterTime =
          y +
          "-" +
          (m < 10 ? "0" + m : m) +
          "-" +
          (d < 10 ? "0" + d : d) +
          " " +
          time.toTimeString().substr(0, 8);
      }
      this.biddingTrend = res.records.reverse();
      // this.switchBidderConversationId(this.conversationId)
    });
  });
},
// 加载用户信息
loadUserInfo(conversationId) {
  if (
    this.loadUserInfoDate[conversationId] &&
    (new Date().getTime() -
      this.loadUserInfoDate[conversationId].getTime()) /
      1000 <
      3
  ) {
    return;
  }
  this.loadUserInfoDate[conversationId] = new Date();
  userInfo(conversationId).then((res) => {
    this.$set(this.userMap, conversationId, res);
  });
},
// 加载消息内容
loadMessageInfo(messageId) {
  if (
    this.loadMessageInfo[messageId] &&
    (new Date().getTime() - this.loadMessageInfo[messageId].getTime()) /
      1000 <
      3
  ) {
    return;
  }
  this.loadMessageInfo[messageId] = new Date();
  let info = this.getMessage(messageId);
  if (info.payload) {
    info.payload = JSON.parse(window.atob(info.payload));
  }
  this.$set(this.messageInfoMap, messageId, info);
},
// 加载用户编号
loadBiddingNumber(conversationId) {
  if (
    this.loadBiddingNumberDate[conversationId] &&
    (new Date().getTime() -
      this.loadBiddingNumberDate[conversationId].getTime()) /
      1000 <
      3
  ) {
    return;
  }
  this.loadBiddingNumberDate[conversationId] = new Date();
  biddingNumberBySessionId(conversationId).then((res) => {
    this.$set(this.biddingNumberMap, conversationId, res.biddingNumber);
  });
},
// 加载项目信息
loadProjectInfo(roomId) {
  if (roomId != 0) {
    if (
      this.loadProjectInfoDate[roomId] &&
      (new Date().getTime() - this.loadProjectInfoDate[roomId].getTime()) /
        1000 <
        3
    ) {
      return;
    }
    this.loadProjectInfoDate[roomId] = new Date();

    roomData(roomId).then((res) => {
      this.$set(this.projectMap, roomId, res);
    });
  }
},
// 改变指定项目信息
changeProjectInfo(roomId) {
  roomData(roomId).then((res) => {
    this.projectMap[roomId] = res;
  });
},

// 切换会话
changeData(index, conversationId, roomId, userId) {
  this.conversationId = conversationId;
  this.switchBidderConversationId(conversationId);
  this.consumerStatus(roomId, userId);
  this.consumerUserList(roomId);
  this.consumerTrend(roomId);
  this.consumerMessage(conversationId)
  this.stateStyle = index;
  this.getProjectId(roomId);
  this.currentRoomId = roomId;
  this.entryName = this.monitorProjectLists[index].entryName;
},

// 获取项目id
getProjectId(roomId) {
  getProjectIdNum(roomId).then((res) => {
    this.projectId = res;
    this.getProjectStatus(res);
  });
},

// 获取项目状态
getProjectStatus(id) {
  getProjectStatusInfo(id).then((res) => {
    this.projectStatus = res;
    if (res.status == 9 && res.isPaused == 0 && res.startTime) {
      // this.countTimeGap(res.startTime)
      // this.bidderEndTime = res.startTime
    }
  });
},
// 处理Base64数据
parseBase64ToJson(base64) {
  if (base64) {
    if (typeof base64 === "object") {
      return base64;
    } else {
      try {
        return base64 ? JSON.parse(window.atob(base64)) : {};
      } catch (e) {
        return {};
      }
    }
  } else {
    return {};
  }
},

// 获取字典数据（报价方式）
getDictsOfferPrice() {
  this.getDicts("bidding_mode").then((res) => {
    let obj = {};
    for (let v of res.data) {
      obj[v.dictValue] = v.dictLabel;
    }
    this.biddingMode = obj;
  });
},
// 获取字典数据（竞价阶段）
getDictsStage() {
  this.getDicts("biddingStage").then((res) => {
    let obj = {};
    for (let v of res.data) {
      obj[v.dictValue] = v.dictLabel;
    }
    this.biddingStage = obj;
  });
},

// 切换全屏
setScreenfull() {
  if (!screenfull.isEnabled) {
    this.$message({ message: "你的浏览器不支持全屏", type: "warning" });
    return false;
  }
  this.full = !this.full;
  screenfull.toggle();
},

// 销毁
destroy() {
  if (screenfull.enabled) {
    screenfull.off("change", this.change);
  }
},

// 处理时间
countDown() {
  var self = this;
  clearInterval(this.promiseTimer);
  this.promiseTimer = setInterval(function () {
    if (self.day === 0) {
      if (self.hour === 0) {
        if (self.minute !== 0 && self.second === 0) {
          self.second = 59;
          self.minute -= 1;
        } else if (self.minute === 0 && self.second === 0) {
          self.second = 0;
          self.$emit("countDowmEnd", true);
          clearInterval(self.promiseTimer);
        } else {
          self.second -= 1;
        }
      } else {
        if (self.minute !== 0 && self.second === 0) {
          self.second = 59;
          self.minute -= 1;
        } else if (self.minute === 0 && self.second === 0) {
          self.hour -= 1;
          self.minute = 59;
          self.second = 59;
        } else {
          self.second -= 1;
        }
      }
    } else {
      if (self.hour === 0 && self.minute === 0 && self.second === 0) {
        self.day -= 1;
        self.hour = 23;
        self.minute = 60;
        self.second = 60;
      } else {
        if (self.hour === 0) {
          if (self.minute !== 0 && self.second === 0) {
            self.second = 59;
            self.minute -= 1;
          } else if (self.minute === 0 && self.second === 0) {
            self.second = 0;
          } else {
            self.second -= 1;
          }
        } else {
          if (self.minute !== 0 && self.second === 0) {
            self.second = 59;
            self.minute -= 1;
          } else if (self.minute === 0 && self.second === 0) {
            self.hour -= 1;
            self.minute = 59;
            self.second = 59;
          } else {
            self.second -= 1;
          }
        }
      }
    }
  }, 1000);
},
// 获取两时间直接的时间差
countTimeGap(endTime) {
  if (endTime) {
    var nowTime = Math.round(new Date().getTime() / 1000);
    let spaceTime = endTime - nowTime;
    if (spaceTime > 0) {
      this.day = Math.floor(spaceTime / 3600 / 24);
      this.hour = Math.floor((spaceTime / 3600) % 24);
      this.minute = Math.floor((spaceTime / 60) % 60);
      this.second = Math.floor(spaceTime % 60);
      this.countDown();
    } else {
      this.day = 0;
      this.hour = 0;
      this.minute = 0;
      this.second = 0;
    }
  }
},
formatNum(num) {
  return num < 10 ? "0" + num : "" + num;
},
// 暂停项目
toSuspend() {
  this.$confirm(`是否确认暂停${this.entryName}项目！`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 确认暂停
      pausedProject(this.projectId).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.getProjectStatus(this.projectId);
        }
      });
    })
    .catch(() => {});
},
// 获取恢复竞价弹窗信息
getPausedTimeInfo(id) {
  // var timeStamp1 = Date.parse(new Date()) / 1000;
  pausedTimeInfo(id).then((res) => {
    // var timeStamp2 = Date.parse(new Date()) / 1000;
    // this.timeDifference =
    //   (timeStamp2 - timeStamp1) / 2 + res.data.currentTime - timeStamp1;
    this.recoverRuleForm.biddingEndTime = this.changeTimeMap(
      res.data.biddingEndTime
    );
    this.recoverRuleForm.biddingStartTime = this.changeTimeMap(
      res.data.biddingStartTime
    );
    this.recoverRuleForm.currentTime = this.changeTimeMap(
      res.data.currentTime
    );
    this.recoverRuleForm.pausedTime = this.changeTimeMap(
      res.data.pausedTime
    );
    this.pausedTime = res.data.pausedTime;
    // this.serviceCurrentTime = (timeStamp2 - timeStamp1) / 2 + res.date.currentTime - timeStamp1 + timeStamp3
  });
},
// 更换时间格式
changeTimeMap(time) {
  var time1 = new Date(time * 1000);
  var y = time1.getFullYear();
  var m = time1.getMonth() + 1;
  var d = time1.getDate();
  var time2 =
    y +
    "-" +
    (m < 10 ? "0" + m : m) +
    "-" +
    (d < 10 ? "0" + d : d) +
    " " +
    time1.toTimeString().substr(0, 8);
  return time2;
},
// 恢复竞价
toRecover() {
  this.getPausedTimeInfo(this.projectId);
  this.recoverDialog = true;
},
// 确定恢复时间设置
confirmRecover() {
  var data = {
    biddingStartTime: this.recoverRuleForm.biddingStartTime,
    biddingEndTime: this.recoverRuleForm.biddingEndTime,
    projectId: this.projectId,
  };
  recoverBidding(data).then((res) => {
    if (res.code == 200) {
      this.$message.success("操作成功");
      this.getProjectStatus(this.projectId);
      this.recoverDialog = false;
    }
  });
},
hide() {
  this.recoverDialog = false;
},

},
};