ISMS-Visualization-BJGD-TKT/src/views/alarm/alarmList/index.vue

<template>
  <div class="alarmList-container">
    <!-- 弹窗内容 -->
    <div class="dialog_box" :key="timer">
      <div class="search-box">
        <div class="search-item">
          <span class="search-label">时间：</span>
          <el-date-picker
            class="search-date"
            v-model="query.time"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            size="mini"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
        <div class="search-item">
          <span class="search-label">报警位号：</span>
          <el-input size="mini" v-model="query.tag" />
        </div>
        <div class="search-item">
          <span class="search-label">报警内容：</span>
          <el-input size="mini" v-model="query.key" />
        </div>
        <div class="search-item">
          <span class="search-label">所属场站：</span>
          <!-- <el-select
            size="mini"
            v-model="query.departmentId"
            clearable
            @change="searchData()"
          >
            <el-option
              v-for="item in departmentOptions"
              :key="item.id"
              :value="item.id"
              :label="item.departmentName"
            ></el-option>
          </el-select> -->
          <el-cascader
            v-model="query.departmentId"
            :options="departmentOptions"
            :props="{ checkStrictly: true }"
            clearable
            size="mini"
            placeholder="请选择部门"
            style="width: 200px"
            @change="searchData()"
          />
        </div>
        <div class="search-item">
          <span class="search-label">报警分类：</span>
          <el-select
            size="mini"
            v-model="query.category"
            clearable
            @change="searchData()"
          >
            <el-option
              v-for="item in categoryOptions"
              :key="item.dictKey"
              :value="item.dictKey"
              :label="item.dictValue"
            ></el-option>
          </el-select>
        </div>
        <div class="search-item">
          <span class="search-label"> 报警级别：</span>
          <el-select
            size="mini"
            v-model="query.level"
            clearable
            @change="searchData"
          >
            <el-option :value="'024001'" label="一级报警"></el-option>
            <el-option :value="'024002'" label="二级报警"></el-option>
            <el-option :value="'024003'" label="三级报警"></el-option>
          </el-select>
        </div>
      </div>
      <div class="search-box">
        <div class="search-item">
          <span class="search-label">确认状态：</span>
          <el-select
            size="mini"
            v-model="query.confirmStatus"
            clearable
            @change="searchData"
          >
            <el-option :value="'1'" label="已确认"></el-option>
            <el-option :value="'0'" label="未确认"></el-option>
          </el-select>
        </div>
        <div class="search-item">
          <span class="search-label"> 处理状态：</span>
          <el-select
            size="mini"
            v-model="query.dealStatus"
            clearable
            @change="searchData"
          >
            <el-option :value="'1'" label="已处理"></el-option>
            <el-option :value="'0'" label="未处理"></el-option>
          </el-select>
        </div>
        <div class="search-item">
          <span class="search-label">恢复状态：</span>
          <el-select
            size="mini"
            v-model="query.recoveryStatus"
            clearable
            @change="searchData"
          >
            <el-option :value="'1'" label="已恢复"></el-option>
            <el-option :value="'0'" label="未恢复"></el-option>
          </el-select>
        </div>
        <div class="search-btn" @click="searchData">
          <img
            :src="require('@/assets/imgs/dialog/icon_close.png')"
            alt="查询"
          />
        </div>
        <div class="search-btn" @click="handleReset">
          <img
            :src="require('@/assets/imgs/dialog/icon_reset.png')"
            alt="重置"
          />
        </div>
        <div class="search-btn2" @click="exportData">
          <el-button size="mini" type="success">导出</el-button>
        </div>
        <div class="search-btn2">
          <el-button size="mini" type="success" @click="handleConfirmMulti"
            >批量确认</el-button
          >
        </div>
        <div class="search-btn2">
          <el-button size="mini" type="success" @click="handleDealMulti"
            >批量处理</el-button
          >
        </div>
      </div>
      <!-- 内容 -->
      <div class="list-box">
        <div
          class="table-box"
          :style="{
            width: detailShow ? '1400px' : '100%',
            transition: 'all 0.8s',
          }"
        >
          <base-table-list :tableConfig="tableConfig" />
        </div>
        <div
          class="detail-box"
          :style="{
            width: detailShow ? '400px' : '0',
            visibility: detailShow ? 'visible' : 'hidden',
            transition: 'width 0.8s',
          }"
        >
          <img
            class="split-line"
            :src="require('@/assets/imgs/btn_take back@2x.png')"
            @click="hideDetail"
          />
          <div class="detail-content-box">
            <div class="detail-title">
              <img :src="require('@/assets/imgs/img_round@2x.png')" />
              <div class="title-text">报警记录详细信息</div>
            </div>
            <div class="detail-content">
              <div class="detail-item">
                <span class="detail-label">报警位号：</span>
                <span class="detail-text">{{
                  curAlarmDetail.alarmTagName
                }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">报警内容：</span>
                <span class="detail-text">{{ curAlarmDetail.content }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">报警等级：</span>
                <span class="detail-text">{{ curAlarmDetail.levelStr }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">报警类型：</span>
                <span class="detail-text">{{
                  curAlarmDetail.categoryStr
                }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">报警时间：</span>
                <span class="detail-text">{{ curAlarmDetail.eventTime }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">确认状态：</span>
                <span class="detail-text">{{
                  curAlarmDetail.confirmStatusStr
                }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">确认时间：</span>
                <span class="detail-text">{{
                  curAlarmDetail.confirmTime
                }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">确认人：</span>
                <span class="detail-text">{{
                  curAlarmDetail.confirmPersonName
                }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">处理状态：</span>
                <span class="detail-text">{{
                  curAlarmDetail.dealStatusStr
                }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">处理时间：</span>
                <span class="detail-text">{{ curAlarmDetail.dealTime }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">处理人：</span>
                <span class="detail-text">{{
                  curAlarmDetail.dealPersonName
                }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">恢复状态：</span>
                <span class="detail-text">{{
                  curAlarmDetail.recoveryStatusStr
                }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">恢复时间：</span>
                <span class="detail-text">{{
                  curAlarmDetail.recoveryTime
                }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">处理方式：</span>
                <span class="detail-text">
                  <el-radio-group v-model="curAlarmDetail.dataType">
                    <el-radio :label="0" style="color: #fff !important"
                      >正常</el-radio
                    >
                    <el-radio :label="1" style="color: #fff !important"
                      >误报</el-radio
                    >
                    <el-radio :label="2" style="color: #fff !important"
                      >测试</el-radio
                    >
                    <el-radio :label="3" style="color: #fff !important"
                      >抑制</el-radio
                    >
                  </el-radio-group>
                </span>
              </div>
              <div class="detail-item">
                <span class="detail-label">处理意见：</span>
                <el-input
                  ref="dealContent"
                  type="textarea"
                  :rows="3"
                  size="mini"
                  v-model="curAlarmDetail.dealContent"
                  placeholder="请填写处理意见"
                  :disabled="curAlarmDetail.dealStatus === '1'"
                />
              </div>
              <div class="detail-item" v-if="curAlarmDetail.imageUrl">
                <span class="detail-label">报警图片：</span>
                <div class="image-box">
                  <el-image
                    fit="contain"
                    :src="`${BASE_URL}${curAlarmDetail.imageUrl.replace(
                      '\/\/',
                      '/'
                    )}`"
                    :preview-src-list="[
                      `${BASE_URL}${curAlarmDetail.imageUrl.replace(
                        '\/\/',
                        '/'
                      )}`,
                    ]"
                  />
                </div>
              </div>
            </div>
            <div class="btn-box">
              <el-button
                class="btn-handle"
                size="mini"
                @click="handleConfirm"
                v-show="curAlarmDetail.confirmStatus == '0'"
              >
                确认
              </el-button>
              <el-button
                class="btn-handle"
                size="mini"
                @click="handleDeal"
                v-show="curAlarmDetail.dealStatus == '0'"
              >
                处理
              </el-button>
              <el-button class="btn-cancel" size="mini" @click="handleClose"
                >取消</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div class="page-box">
        <base-pagination
          :pageInfo="pageConfig"
          @pageChange="getAlarmDataList"
        ></base-pagination>
      </div>
    </div>
    <deal-multi-dialog
      :dialogConfig="dealMultiDialogConfig"
    ></deal-multi-dialog>
    <confirm-multi-dialog
      :dialogConfig="confirmMultiDialogConfig"
    ></confirm-multi-dialog>
  </div>
</template>
<script>
import {
  getAlarmDataList,
  getAlarmCount,
  getAlarmType,
  dealAlarm,
  confirmAlarm,
  getDepartmentByPid,
  download,
  exportData,
} from "@/API/alarm";
import { getDictDetailByType } from "@/API/dict";
import { downloadFile } from "@/utils/index";
import Dayjs from "dayjs";
import BaseTableList from "@/views/components/base/BaseTableList.vue";
import BasePagination from "@/views/components/base/BasePagination.vue";
import DealMultiDialog from "@/views/alarm/alarmList/components/DealMultiDialog.vue";
import ConfirmMultiDialog from "@/views/alarm/alarmList/components/ConfirmMultiDialog.vue";
import { calendarShortcuts } from "@/utils/shortcuts";
import { add } from "lodash-es";
export default {
  name: "AlarmList",
  components: {
    BaseTableList,
    BasePagination,
    DealMultiDialog,
    ConfirmMultiDialog,
  },
  data() {
    return {
      timer: new Date().getTime(),
      query: {
        time: [
          Dayjs(new Date()).subtract(1, "month").format("YYYY-MM-DD HH:mm:ss"),
          Dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"),
        ],
        category: "",
        level: "",
        dealStatus: "",
        confirmStatus: "",
        type: "",
        key: "",
        tag: "",
        recoveryStatus: "",
        departmentId: "",
      },
      pageConfig: {
        pageNo: 1,
        pageSize: 20,
        pageTotal: 0,
      },
      tableConfig: {
        needIndex: true,
        height: 760,
        // rowHeight: 42,
        // rowSpacing: 12,
        header: [
          { title: "报警时间", prop: "eventTime", width: "" },
          { title: "报警位号", prop: "alarmTagName", width: "" },
          { title: "报警分类", prop: "categoryStr", width: "" },
          { title: "报警级别", prop: "levelStr", width: "" },
          { title: "报警内容", prop: "content", width: "40%" },
          { title: "确认状态", prop: "confirmStatusStr", width: "" },
          { title: "处理状态", prop: "dealStatusStr", width: "" },
          { title: "恢复状态", prop: "recoveryStatusStr", width: "" },
        ],
        tableData: [],
        rowClick: (row) => {
          this.showDetail(row);
        },
      },
      categoryOptions: [],
      alarmTypeOptions: [],
      departmentOptions: [],
      pickerOptions: {
        shortcuts: calendarShortcuts,
      },
      detailShow: false,
      curAlarmDetail: {},
      dealMultiDialogConfig: {},
      confirmMultiDialogConfig: {},
    };
  },
  watch: {
    $route(to, from) {
      // console.log(from, "前from，后to", to);
      console.log(this.$route);
      if (this.$route.query) {
        if (this.$route.query.dateRange == "24H") {
          this.query.time = [
            Dayjs(new Date()).subtract(1, "day").format("YYYY-MM-DD HH:mm:ss"),
            Dayjs(new Date()).format("YYYY-MM-DD 23:59:59"),
          ];
        }
        if (!!this.$route.query.date) {
          console.log(
            Dayjs(
              this.$route.query.date
                .replace("年", "-")
                .replace("月", "-")
                .replace("日", "")
            )
          );
          this.query.time = [
            Dayjs(
              this.$route.query.date
                .replace("年", "-")
                .replace("月", "-")
                .replace("日", "")
            ).format("YYYY-MM-DD HH:mm:ss"),
            Dayjs(
              this.$route.query.date
                .replace("年", "-")
                .replace("月", "-")
                .replace("日", "")
            )
              .add(1, "day")
              .subtract(1, "second")
              .format("YYYY-MM-DD HH:mm:ss"),
          ];
        }
        if (!!this.$route.query.confirmStatus) {
          this.query.confirmStatus = this.$route.query.confirmStatus;
        }
        if (!!this.$route.query.dealStatus) {
          this.query.dealStatus = this.$route.query.dealStatus;
        }
        if (!!this.$route.query.level) {
          this.query.level = this.$route.query.level;
        }
        if (!!this.$route.query.recoveryStatus) {
          this.query.recoveryStatus = this.$route.query.recoveryStatus;
        }
        if (!!this.$route.query.category) {
          this.query.category = this.$route.query.category;
        } else {
          this.query.category = "";
        }
        if (!!this.$route.query.departmentId) {
          if (typeof this.$route.query.departmentId === "string") {
            this.query.departmentId = new Array(this.$route.query.departmentId);
          }
        }
      }
      this.getAlarmCategory();
      this.getAlarmDataList();
      this.getDepartmentByPid();
    },
  },
  mounted() {
    console.log(this.$route);
    if (this.$route.query.dateRange == "24H") {
      this.query.time = [
        Dayjs(new Date()).subtract(1, "day").format("YYYY-MM-DD HH:mm:ss"),
        Dayjs(new Date()).format("YYYY-MM-DD 23:59:59"),
      ];
    }
    if (!!this.$route.query.date) {
      console.log(
        Dayjs(
          this.$route.query.date
            .replace("年", "-")
            .replace("月", "-")
            .replace("日", "")
        )
      );
      this.query.time = [
        Dayjs(
          this.$route.query.date
            .replace("年", "-")
            .replace("月", "-")
            .replace("日", "")
        ).format("YYYY-MM-DD HH:mm:ss"),
        Dayjs(
          this.$route.query.date
            .replace("年", "-")
            .replace("月", "-")
            .replace("日", "")
        )
          .add(1, "day")
          .subtract(1, "second")
          .format("YYYY-MM-DD HH:mm:ss"),
      ];
    }
    if (!!this.$route.query.confirmStatus) {
      this.query.confirmStatus = this.$route.query.confirmStatus;
    }
    if (!!this.$route.query.dealStatus) {
      this.query.dealStatus = this.$route.query.dealStatus;
    }
    if (!!this.$route.query.level) {
      this.query.level = this.$route.query.level;
    }
    if (!!this.$route.query.recoveryStatus) {
      this.query.recoveryStatus = this.$route.query.recoveryStatus;
    }
    if (!!this.$route.query.category) {
      this.query.category = this.$route.query.category;
    }
    if (!!this.$route.query.departmentId) {
      if (typeof this.$route.query.departmentId === "string") {
        this.query.departmentId = new Array(this.$route.query.departmentId);
      }
    }
    // if (!!this.$route.query.station) {
    //   this.query.key = this.$route.query.station;
    // }
    this.getAlarmCategory();
    this.getAlarmDataList();
    this.getDepartmentByPid();
  },
  methods: {
    searchData() {
      this.pageConfig.pageNo = 1;
      this.getAlarmDataList();
    },
    exportData() {
      const params = {
        pageSize: 0,
        pageIndex: 0,
        dealStatus: this.query.dealStatus,
        confirmStatus: this.query.confirmStatus,
        recoveryStatus: this.query.recoveryStatus,
        category: this.query.category,
        level: this.query.level,
        type: this.query.type,
        startTime: Dayjs(this.query.time[0]).format(),
        endTime: Dayjs(this.query.time[1]).format(),
        key: this.query.key,
        tag: this.query.tag,
        departmentId:
          this.query.departmentId.length > 0
            ? this.query.departmentId[this.query.departmentId.length - 1]
            : "",
      };
      exportData(params)
        .then((res) => {
          if (res.code === 20000) {
            download({ filePath: res.data, prefix: true })
              .then((result) => {
                downloadFile(result.data);
                //crud.exportLoading = false;
              })
              .catch((error) => {
                console.error(error);
                //crud.exportLoading = false;
              });

            //window.location.href = 'file/downloadFile?filePath=' + res.data + '&delete=1'
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          console.error(error);
          //crud.exportLoading = false;
        });
    },
    async getAlarmDataList() {
      try {
        const params = {
          pageSize: this.pageConfig.pageSize,
          pageIndex: this.pageConfig.pageNo,
          dealStatus: this.query.dealStatus,
          confirmStatus: this.query.confirmStatus,
          recoveryStatus: this.query.recoveryStatus,
          category: this.query.category,
          level: this.query.level,
          type: this.query.type,
          startTime: Dayjs(this.query.time[0]).format(),
          endTime: Dayjs(this.query.time[1]).format(),
          key: this.query.key,
          tag: this.query.tag,
          departmentId:
            this.query.departmentId.length > 0
              ? this.query.departmentId[this.query.departmentId.length - 1]
              : "",
        };
        const res = await getAlarmDataList(params);
        let alarmData = res.data.content;
        // alarmData.push({
        //   eventTime: "2022-12-22 10:12:13",
        //   category: "1",
        //   content: "test",
        //   dealStatus: "1",
        //   imageUrl: "",
        // });
        this.tableConfig.tableData = alarmData;
        this.pageConfig.pageTotal = res.data.total || alarmData.length;
        // console.log(alarmData);
      } catch (err) {}
    },
    async getAlarmCount() {
      try {
        const res = await getAlarmCount();
        const { content } = res.data;
        this.categoryOptions = content;
      } catch (err) {
        console.log(err);
      }
    },
    async getAlarmCategory() {
      try {
        const param = { dictType: "100" };
        const res = await getDictDetailByType(param);
        const { content } = res.data;
        this.categoryOptions = content;
      } catch (err) {
        console.log(err);
      }
    },
    async getAlarmType(category) {
      this.query.type = "";
      this.alarmTypeOptions = [];
      if (!category) return;
      try {
        const res = await getAlarmType({ category });
        const { content } = res.data;
        this.alarmTypeOptions = content;
      } catch (err) {
        console.log(err);
      }
    },
    async getDepartmentByPid() {
      try {
        const p = { id: "0" };
        const res = await getDepartmentByPid(p);
        let { content } = res.data;
        content.forEach((element) => {
          element.value = element.id;
          element.label = element.departmentName;
          if (element.children) {
            element.children.forEach((element2) => {
              element2.value = element2.id;
              element2.label = element2.departmentName;
            });
          }
        });
        this.departmentOptions = content;
      } catch (err) {
        console.log(err);
      }
    },
    async dealAlarm() {
      const params = {
        id: this.curAlarmDetail.id,
        dealContent: this.curAlarmDetail.dealContent,
        dataType: this.curAlarmDetail.dataType,
      };
      try {
        const res = await dealAlarm(params);
        if (res.code == 20000) {
          this.hideDetail();
          this.getAlarmDataList();
          this.$message({
            message: "处理完成",
            type: "success",
          });
        }
      } catch (err) {
        console.log(err);
      }
    },
    async confirmAlarm() {
      const params = {
        id: this.curAlarmDetail.id,
        dealContent: this.curAlarmDetail.dealContent,
      };
      try {
        const res = await confirmAlarm(params);
        if (res.code == 20000) {
          this.hideDetail();
          this.getAlarmDataList();
          this.$message({
            message: "确认完成",
            type: "success",
          });
        }
      } catch (err) {
        console.log(err);
      }
    },
    handleReset() {
      this.query = {
        time: [
          Dayjs(new Date()).subtract(1, "month").format("YYYY-MM-DD HH:mm:ss"),
          Dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"),
        ],
        category: "",
        dealStatus: "",
        type: "",
      };
      this.searchData();
    },
    showDetail(row) {
      console.log(row);
      this.detailShow = true;
      this.curAlarmDetail = row;
    },
    hideDetail() {
      this.detailShow = false;
      this.curAlarmDetail = {};
    },
    handleDeal() {
      console.log(this.curAlarmDetail);
      this.dealAlarm();
    },
    handleConfirm() {
      console.log(this.curAlarmDetail);
      this.confirmAlarm();
    },
    handleClose() {
      this.hideDetail();
    },
    handleDealMulti() {
      // this.$confirm("确认退出该系统?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // }).then(async () => {
      //   await logout();
      //   localStorage.clear();
      //   //this.$router.push("/login");
      //   window.location.reload();
      // });
      let ids = this.tableConfig.tableData.map((obj, index) => {
        return obj.id;
      });
      let dialogConfig = {
        dialogId: "dealMultiDialog",
        show: true, //是否显示
        title: "批量处理",
        width: 500, //px宽度
        height: 320, //px高度
        center: true, //是否居中定位
        zIndex: 10,
        data: { ids },
      };
      this.dealMultiDialogConfig = dialogConfig;
    },
    handleConfirmMulti() {
      // this.$confirm("确认退出该系统?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // }).then(async () => {
      //   await logout();
      //   localStorage.clear();
      //   //this.$router.push("/login");
      //   window.location.reload();
      // });
      let ids = this.tableConfig.tableData.map((obj, index) => {
        return obj.id;
      });
      let dialogConfig = {
        dialogId: "confirmMultiDialog",
        show: true, //是否显示
        title: "批量确认",
        width: 500, //px宽度
        height: 320, //px高度
        center: true, //是否居中定位
        zIndex: 10,
        data: { ids },
      };
      this.confirmMultiDialogConfig = dialogConfig;
    },
  },
};
</script>
<style lang="less" scoped>
.alarmList-container {
  width: 100%;
  height: 100%;
  padding: 100px 30px 0;
  pointer-events: auto;
  box-sizing: border-box;
  .dialog_box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .search-box {
      width: 100%;
      display: flex;
      padding: 3px /* 10/192 */ 0;
      color: #fff;
      .search-item {
        display: flex;
        .search-label {
          display: inline-block;
          width: 100px;
          font-size: 14px;
          line-height: 28px;
          text-align: right;
          word-break: keep-all;
        }
        .search-date.el-input__inner {
          width: 1.666667rem /* 320/192 */;
          height: 28px;
          border-radius: 0;
          margin-right: 0;
        }
        .el-input {
          ::v-deep .el-input__inner {
            height: 28px;
            border-radius: 0;
            color: #fff;
          }
        }
        .el-select {
          margin-right: 0.052083rem /* 10/192 */;
          ::v-deep .el-input__inner {
            width: 0.572917rem /* 110/192 */;
            height: 28px;
            border-radius: 0;
            color: #fff;
            // padding-right: 0.182292rem /* 35/192 */;
          }
          ::v-deep .el-input__icon {
            line-height: 28px;
          }
        }
      }
      .search-btn {
        box-sizing: border-box;
        width: 28px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        justify-content: right;
        color: #fff;
        font-size: 0.072917rem /* 14/192 */;
        cursor: pointer;
        border: 1px solid #5bd6ff;
        border-radius: 0;
        &:hover {
          border-color: #ccc;
        }
        img {
          width: 0.083333rem /* 16/192 */;
          height: 0.083333rem /* 16/192 */;
        }
        &:last-child {
          margin-left: 10px;
        }
      }
      .search-btn2 {
        box-sizing: content-box;
        text-align: center;
        justify-content: right;
        color: #fff;
        font-size: 0.072917rem /* 14/192 */;
        cursor: pointer;
        border-radius: 0;
        margin-left: 10px;
        &:hover {
          border-color: #ccc;
        }
        img {
          width: 0.083333rem /* 16/192 */;
          height: 0.083333rem /* 16/192 */;
        }
      }
    }
    .list-box {
      width: 100%;
      height: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      display: flex;

      .table-box {
        width: 100%;
        padding: 10px;
        height: calc(100% - 70px);
        overflow-y: auto;
      }
      .detail-box {
        width: 400px;
        display: flex;
        padding-top: 20px;
        .split-line {
          flex-shrink: 0;
          width: 0.135417rem /* 26/192 */;
          height: 3.270833rem /* 628/192 */;
          cursor: pointer;
        }
        .detail-content-box {
          padding-left: 20px;
          .detail-title {
            height: 36px;
            line-height: 36px;
            display: flex;
            align-items: center;
            img {
              width: 30px;
              height: 30px;
              margin-top: 10px;
            }
            .title-text {
              width: 314px;
              margin-left: 6px;
              font-size: 15px;
              color: #cccccc;
              letter-spacing: 0.91px;
              text-shadow: 0 0 8px rgba(140, 224, 255, 0.54);
              font-weight: 600;
              border-bottom: 1px solid #6ddfff;
            }
          }
          .detail-content {
            padding-top: 10px;
            .detail-item {
              display: flex;
              margin: 10px 0;
              .detail-label {
                flex-shrink: 0;
                font-size: 14px;
                color: #c8efff;
                line-height: 24px;
                font-weight: 400;
              }
              .detail-text {
                font-size: 14px;
                color: #ffffff;
                line-height: 24px;
                font-weight: 400;
              }
              .image-box {
                display: inline-block;
                max-width: 0.833333rem /* 160/192 */;
                height: 0.46875rem /* 90/192 */;
                .el-image {
                  height: 100%;
                }
              }
            }
          }
          .btn-box {
            width: 100%;
            height: 0.15625rem /* 30/192 */;
            text-align: center;
            margin-top: 20px;
            // position: absolute;
            // bottom: 0.15625rem /* 30/192 */;
            // left: 50%;
            // transform: translate(-50%, 0);
            .el-button {
              width: 0.40625rem /* 78/192 */;
              height: 0.145833rem /* 28/192 */;
              box-sizing: border-box;
              margin-top: 0.015625rem /* 3/192 */;
              color: #fff;
              padding: 0;
              border-color: #5bd6ff;
              &:hover {
                border-color: #ccc;
              }
            }
            .btn-handle.el-button {
              background: rgba(0, 159, 221, 0.8);
            }
            .btn-cancel.el-button {
              background: rgba(7, 51, 121, 0.1);
            }
          }
        }
      }
    }
    .page-box {
      position: absolute;
      bottom: 60px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>