kd-aiot-frontend-wt/src/views/home/index.vue

<template>
  <div class="box-container">
    <div class="box-container-top">
      <el-card class="card-cell middle-cell">
        <div slot="header" class="clearfix">
          <span>数据概览</span>
        </div>
        <div class="card-cell-content">
          <div
            class="card-cell-value"
            @click="handelRouterTo('/page-pro/project-initiation')"
          >
            <div class="img-box img1-url"></div>
            <div class="text-box">
              <span>{{ projectNum }}</span>
              <span>我的项目</span>
            </div>
          </div>
          <div
            class="card-cell-value"
            @click="handelRouterTo('/page-pro/task-manage')"
          >
            <div class="img-box img2-url"></div>
            <div class="text-box">
              <span>{{ taskNum }}</span>
              <span>我的任务</span>
            </div>
          </div>
          <div
            class="card-cell-value"
            @click="handelRouterTo('/page-wt/tickets')"
          >
            <div class="img-box img3-url"></div>
            <div class="text-box">
              <span>{{ workOrderNum }}</span>
              <span>我的工单</span>
            </div>
          </div>
          <div class="card-cell-value">
            <div class="img-box img4-url"></div>
            <div class="text-box">
              <span>1000</span>
              <span>我的绩效</span>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="card-cell middle-cell">
        <div slot="header" class="clearfix">
          <span>个人信息</span>
        </div>
        <div class="card-cell-info">
          <div class="card-cell-value">
            <div>
              <el-avatar
                shape="square"
                :size="80"
                src="https://empty"
                @error="errorHandler"
              >
                <img :src="user.info.avatarAddress" />
              </el-avatar>
            </div>
            <div class="text-box">
              <span>{{ user.info.name }}</span>
              <span>{{ user.info.deptName }}</span>
              <span>{{ user.info.groupName }}</span>
            </div>
          </div>
          <div class="card-cell-date">
            <span>{{ date }}</span>
            <span>{{ week }} </span>
            <span>{{ time }}</span>
          </div>
        </div>
      </el-card>
    </div>
    <div class="box-container-middle">
      <div class="box-container-middl_left">
        <el-card class="card-cell middle-cell">
          <div slot="header" class="clearfix">
            <span>流程待办</span>
          </div>
          <div style="height: 100%; width: 100%">
            <ele-pro-table
              ref="table"
              class="table-box"
              :columns="columns"
              :need-page="false"
              :toolkit="[]"
              :datasource="datasource"
              cache-key="systemHomeTable5"
            >
              <template v-slot:status="{ row }">
                <el-tag type="success" v-if="row.suspensionState === 1"
                  >激活</el-tag
                >
                <el-tag type="warning" v-if="row.suspensionState === 2"
                  >挂起</el-tag
                >
              </template>
              <template v-slot:name="{ row }">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="handleAudit('', row)"
                >
                  {{ row.name }}
                </el-link>
              </template>
              <!-- 操作列 -->
              <template v-slot:action="{ row }">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleAudit('audit', row)"
                  >处理
                </el-button>
                <!-- <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="openEdit('upDate', row)"
                >待办详情</el-button
              > -->
              </template>
            </ele-pro-table>
          </div>
        </el-card>
        <el-card class="card-cell middle-cell">
          <div slot="header" class="clearfix">
            <span>常用功能</span>
          </div>
          <draggable v-model="commonList" class="card-cell-content">
            <div
              v-for="(item, index) in commonList"
              :key="item.id"
              class="card-cell-content-box"
              @click="handleAdd(item, index)"
              :title="
                !['-999', '-1'].includes(item.id) && isDelFlag ? '点击删除' : ''
              "
              :class="
                !['-999', '-1'].includes(item.id) && isDelFlag ? 'div-del' : ''
              "
            >
              <!--            <el-popover-->
              <!--              v-if="item.id !=='-1'"-->
              <!--              placement="top-start"-->
              <!--              title=""-->
              <!--              width="10px"-->
              <!--              trigger="click"-->
              <!--              content="">-->
              <!--              <i style="color: red" class="el-icon-delete"></i>-->
              <!--              <div class="card-cell-content-div"  slot="reference">-->
              <!--                <i :class="item.icon||'el-icon-menu'"></i>-->
              <!--                <span>{{ item.name }}</span>-->
              <!--              </div>-->
              <!--            </el-popover>-->
              <!--            <el-tooltip placement="top" effect="light" v-if="item.id !=='-1'">-->
              <!--              <div slot="content">-->
              <!--                <i style="color: red;cursor: pointer;font-size: 18px" class="el-icon-delete"-->
              <!--                   @click="handleCommonListDel(item,index)"></i>-->
              <!--              </div>-->
              <!--              <div class="card-cell-content-div">-->
              <!--                <i :class="item.icon||'el-icon-s-opportunity'"></i>-->
              <!--                <span>{{ item.name }}</span>-->
              <!--              </div>-->
              <!--            </el-tooltip>-->
              <div class="card-cell-content-div">
                <i :class="item.icon || 'el-icon-s-opportunity'"></i>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </draggable>
        </el-card>
      </div>
      <div class="box-container-middl_right">
        <el-card
          v-if="list.length > 0"
          class="card-cell middle-cell card-cell_top"
        >
          <div slot="header" class="clearfix">
            <span>统一门户</span>
          </div>
          <div class="list">
            <div
              v-for="(item, index) in list"
              :class="[(index + 1) % 3 == 0 ? 'item margin_0' : 'item']"
              @click="openUrl(item)"
            >
              <div><img :src="item.img" /></div>
              <div>{{ item.name }}</div>
            </div>
          </div>
        </el-card>
        <el-card class="card-cell middle-cell card-cell_bottom">
          <div slot="header" class="clearfix">
            <span>消息提醒</span>
          </div>
          <div>
            <vue-seamless-scroll
              class="scroll-box"
              v-if="messageScrollList.length"
              :data="messageScrollList"
              :class-option="defineScroll"
            >
              <el-timeline class="scroll-box-content">
                <el-timeline-item
                  :hide-timestamp="false"
                  v-for="o in messageScrollList"
                  :key="o.id"
                >
                  <template slot="dot">
                    <span class="scroll-box-content-dot"></span>
                  </template>
                  <div class="scroll-box-content-item">
                    <span class="item-date">{{ o.createTime }}</span>
                    <span
                      class="item-text"
                      :title="`${o.templateNickname + ':' + o.templateContent}`"
                    >
                      <span style="font-size: 0.8vw">{{
                        o.templateNickname + ':'
                      }}</span>
                      {{ o.templateContent }}</span
                    >
                  </div>
                </el-timeline-item>
              </el-timeline>
            </vue-seamless-scroll>
            <el-empty v-else description="暂无"></el-empty>
          </div>
        </el-card>
      </div>
    </div>
    <!-- <div class="box-container-bottom">
    </div> -->
    <handleTask ref="handleTaskRef" @reload="reload"></handleTask>
    <detail ref="detailRef"></detail>
    <commonDialog
      ref="commonDialogRef"
      v-if="commonDialogFlag"
      :common-dialog-flag.sync="commonDialogFlag"
      @reload="getUserResourceList"
    ></commonDialog>
    <handleFormParserTask
      v-if="formParserDialogFlag"
      @reload="reload"
      :formParserDialogFlag.sync="formParserDialogFlag"
      ref="formParserDialogRef"
    ></handleFormParserTask>
  </div>
</template>

<script>
  import { getImageUrl } from '@/utils/file';
  import { getTodoTaskPage, notifyMessagePageAPI } from '@/api/bpm/task';
  import { mapGetters } from 'vuex';
  import detail from '@/views/bpm/processInstance/detail.vue';
  import handleTask from '@/views/bpm/handleTask/index.vue';
  import { deepClone } from 'ele-admin/lib/utils/core';
  import vueSeamlessScroll from 'vue-seamless-scroll';
  import {
    projectsPageAPI,
    projectsTaskPageAPI,
    userResourceDeleteAPI,
    userResourceListAPI,
    getList
  } from '@/api/home';
  import { getWorkOrderPage } from '@/api/tickets';
  import { statistics } from '@/api/bpm/components/inspectionManage';
  import commonDialog from '@/views/home/common-dialog.vue';
  import xyy from '@/assets/xyy.jpg';
  import draggable from 'vuedraggable';
  import handleFormParserTask from '@/views/bpm/handleTask/formParser/formParserDialog.vue';

  export default {
    name: 'index',
    components: {
      handleFormParserTask,
      handleTask,
      detail,
      vueSeamlessScroll,
      commonDialog,
      draggable
    },
    data() {
      return {
        xyy,
        list: [],
        time: '',
        date: '',
        week: '',
        commonDialogFlag: false,
        formParserDialogFlag: false,
        updateTimer: null,
        projectNum: 0,
        taskNum: 0,
        workOrderNum: 0,
        messageScrollList: [],
        defineScroll: {
          step: 0.2, // 数值越大速度滚动越快
          limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        },
        commonList: [],
        isDelFlag: false,
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'processInstance.processTypeName',
            label: '流程分类',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          {
            prop: 'processInstance.name',
            label: '流程名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            prop: 'name',
            label: '任务名称',
            align: 'center',
            slot: 'name',
            showOverflowTooltip: true,
            minWidth: 200
          },
          {
            prop: 'processInstance.startUserNickname',
            label: '流程发起人',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 120
          },
          // {
          //   prop: 'suspensionState',
          //   slot: 'suspensionState',
          //   label: '状态',
          //   align: 'center',
          //   showOverflowTooltip: true,
          //   minWidth: 200
          // },

          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 180
          },

          {
            columnKey: 'action',
            label: '操作',
            width: 200,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ]
      };
    },
    computed: {
      ...mapGetters(['user'])
    },
    created() {
      // window.isFullscreen = false
      this.updateTimer = setInterval(this.updateTime, 1000);
      this.getMessageList();
      this.getProjectNum();
      this.getTaskNum();
      this.getWorkOrderNum();
      this.getUserResourceList();
      this.getPages();
      console.log(this.user);
    },
    methods: {
      openUrl(item) {
        window.open('https://' + item.linkUrl, '_blank');
      },
      async getPages() {
        let { list } = await getList({ pageNum: 1, size: 9999 });
        this.list = list.map((item) => {
          return {
            ...item,
            img: getImageUrl(item.iconPath)
          };
        });
      },
      async getProjectNum() {
        const { count } = await projectsPageAPI({
          size: 1,
          pageNum: 1,
          parentId: '0'
        });
        this.projectNum = count;
      },
      async getTaskNum() {
        const { count } = await projectsTaskPageAPI({ size: 1, pageNum: 1 });
        this.taskNum = count;
      },
      async getWorkOrderNum() {
        const { total } = await statistics();

        this.workOrderNum = total;
      },
      async getUserResourceList() {
        this.commonList = await userResourceListAPI();
        this.commonList.unshift({
          name: '添加',
          id: '-1',
          icon: 'el-icon-edit'
        });
        this.commonList.push({
          name: '删除',
          id: '-999',
          icon: 'el-icon-delete'
        });
      },
      handelRouterTo(path) {
        window.history.pushState(null, '', path);
        // this.$router.push(path);
      },
      handleAdd(item, index) {
        if (item.id == -1) {
          this.commonDialogFlag = true;
          this.$nextTick(() => {
            this.$refs.commonDialogRef.init();
          });
        } else if (item.id == -999) {
          this.isDelFlag = !this.isDelFlag;
          this.commonList.pop();
          this.commonList.push({
            name: `${this.isDelFlag ? '取消删除' : '删除'}`,
            id: '-999',
            icon: 'el-icon-delete'
          });
        } else {
          if (this.isDelFlag) return this.handleCommonListDel(item, index);

          let urlPath = item.topUrl + item.url;
          this.handelRouterTo(urlPath);
        }
      },
      async handleCommonListDel(item, index) {
        await userResourceDeleteAPI([item.id]);
        this.commonList.splice(index, 1);
      },
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return getTodoTaskPage({
          pageNo: page,
          pageSize: limit,
          ...this.params
        });
      },
      async getMessageList() {
        const { list } = await notifyMessagePageAPI({
          pageNum: 1,
          size: 9999,
          userId: this.user.info.userId
        });
        this.messageScrollList = deepClone(list);
      },
      errorHandler(err, vm) {
        console.log('图片加载失败');
      },
      //实时更新日期
      updateTime() {
        let now = new Date();
        let hours = now.getHours();
        let minutes = now.getMinutes();
        let seconds = now.getSeconds();
        this.time =
          hours.toString().padStart(2, '0') +
          ':' +
          minutes.toString().padStart(2, '0') +
          ':' +
          seconds.toString().padStart(2, '0');

        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let day = now.getDate();
        this.date = year + '年' + month + '月' + day + '日';

        let weekInfo = {
          1: '一',
          2: '二',
          3: '三',
          4: '四',
          5: '五',
          6: '六',
          0: '日'
        };
        this.week = '星期' + weekInfo[now.getDay()];
      },
      /** 处理审批按钮 */

      handleAudit(type, row) {
        if (Object.keys(row.formJson).length) {
          this.formParserDialogFlag = true;
          this.$nextTick(() => {
            this.$refs.formParserDialogRef.open({
              // id: row.processInstance.id,
              // taskId: row.id,
              // taskDefinitionKey: row.taskDefinitionKey,
              // formJson:row.formJson,
              // valueJsom:row.formJson,
              ...row
            });
          });
        } else if (type == 'audit') {
          this.$refs.handleTaskRef.open({
            id: row.processInstance.id,
            businessId: row.businessId,
            taskId: row.id,
            taskDefinitionKey: row.taskDefinitionKey,
            pcHandleRouter: row.pcHandleRouter,
            pcViewRouter: row.pcViewRouter
          });
        } else {
          this.$refs.detailRef.open(row.processInstance.id);
        }
      },

      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      }
    },
    deactivated() {
      clearInterval(this.updateTimer);
    }
  };
</script>

<style scoped lang="scss">
  .box-container {
    // height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 96px);
    // width: calc(100%);

    .box-container-top {
      height: 22%;
      width: 100%;
      min-height: 180px;
      display: flex;
      justify-content: space-between;

      .middle-cell:nth-child(1) {
        flex: 0 0 75%;

        .card-cell-content {
          padding: 0;
          height: 100%;
          background: #2e80ee;
          display: flex;
          align-items: center;

          :hover {
            background: #79aef5;
          }

          .card-cell-value {
            cursor: pointer;
            height: 100%;
            display: flex;
            flex: 0 0 25%;
            align-items: center;
            justify-content: center;

            .img1-url {
              background-image: url('@/assets/home-logo-1.png');
            }

            .img2-url {
              background-image: url('@/assets/home-logo-2.png');
            }

            .img3-url {
              background-image: url('@/assets/home-logo-3.png');
            }

            .img4-url {
              background-image: url('@/assets/home-logo-4.png');
            }

            .img-box {
              width: 60px;
              height: 60px;
              position: relative;
              background-size: contain;
              background-repeat: no-repeat;
            }

            .text-box {
              height: 70px;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              color: #ffffff;
              padding: 0 10px;

              :nth-child(1) {
                font-size: 1.5vw;
                font-family: fantasy;
              }

              :nth-child(2) {
                font-size: 1vw;
              }
            }
          }
        }
      }

      .middle-cell:nth-child(2) {
        flex: 0 0 24.2%;
        .card-cell-info {
          padding: 0 10px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-weight: bold;

          .card-cell-value {
            display: flex;
            height: 80px;

            .text-box {
              margin: 0 10px;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              font-size: 0.7vw;
              color: #000000;
            }
          }

          .card-cell-date {
            height: 80px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-end;
            color: #000000;
            font-size: 0.7vw;
            margin: 0 10px;
          }
        }
      }
    }

    .box-container-middle {
      flex: 1 0 auto;
      height: 0;
      overflow: hidden;
      margin: 10px 0;
      display: flex;
      min-height: 280px;
      justify-content: space-between;

      .box-container-middl_left {
        flex: 0 0 75%;
        display: flex;
        flex-direction: column;
        min-width: 0;
        .middle-cell:nth-child(1) {
          flex: 1;
          margin-bottom: 10px;
          .table-box {
            height: 100%;
            display: flex;
            flex-direction: column;
            :deep(.el-table) {
              flex: 1;
              display: flex;
              flex-direction: column;
              .el-table__body-wrapper {
                flex: 1;
                overflow-y: auto;
              }
            }
          }
        }
        .middle-cell:nth-child(2) {
          flex: 0 0 130px;
          .card-cell-content {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: nowrap;
            align-content: center;
            height: 100%;
            overflow-x: auto;
            padding: 0 10px;

            .card-cell-content-box {
              display: flex;
              flex-direction: column;
              align-items: center;
              height: 80%;
              width: 100%;
              border: 1px solid #e3e5e4;
              justify-content: space-evenly;
              flex: 0 0 5.5%;
              padding: 8px 0;
              border-radius: 5px;
              margin-right: 10px;
              cursor: pointer;

              &:hover {
                background: #dee4e9;
              }
            }

            .card-cell-content-div {
              height: 100%;
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-evenly;
            }

            .card-cell-content-div i {
              font-size: 2vw;
            }

            .card-cell-content-div span {
              letter-spacing: 2px;
              font-weight: 600;
            }
          }

          .middle-cell {
            flex: 0 0 100%;
          }
        }
        :deep(.el-card__body) {
          overflow: hidden;
        }
      }

      .box-container-middl_right {
        flex: 0 0 24.2%;
        display: flex;
        flex-direction: column;
        min-width: 0;
        .middle-cell:nth-child(1) {
          flex: 4;
        }
        .middle-cell:nth-child(2) {
          flex: 3;
        }
        .card-cell_top {
          margin-bottom: 10px;
        }
        :deep(.el-card__body) {
          overflow: auto;
          .list {
            flex: 1;
            padding: 10px;
            box-sizing: border-box;
            .item {
              background: url('@/assets/bg.png');
              background-repeat: no-repeat;
              background-size: 100% 100%;
              display: inline-block;
              width: 32%;
              margin-right: 2%;
              aspect-ratio: 16/19;
              padding: 10px;
              box-sizing: border-box;
              margin-bottom: 10px;
              border-radius: 5px;
              cursor: pointer;
              > div:first-child {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                > img {
                  width: 100%;
                  aspect-ratio: 16/16;
                }
              }
              > div:last-child {
                color: #1383f1;
                font-weight: bold;
                font-size: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }
            .margin_0 {
              margin-right: 0;
            }
          }
        }
      }

      .middle-cell:nth-child(1) {
        flex: 0 0 70%;
      }

      .middle-cell:nth-child(2) {
        flex: 0 0 29.2%;
        :deep(.el-card__body) {
          overflow: auto;
          .list {
            flex: 1;
            padding: 10px;
            box-sizing: border-box;
            .item {
              background: url('@/assets/bg.png');
              background-repeat: no-repeat;
              background-size: 100% 100%;
              display: inline-block;
              width: 32%;
              margin-right: 2%;
              aspect-ratio: 16/20;
              padding: 10px;
              box-sizing: border-box;
              margin-bottom: 10px;
              border-radius: 5px;
              cursor: pointer;
              > div:first-child {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                > img {
                  width: 100%;
                  aspect-ratio: 16/16;
                }
              }
              > div:last-child {
                color: #1383f1;
                font-weight: bold;
                padding: 10px;
                font-size: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }
            .margin_0 {
              margin-right: 0;
            }
          }
        }
      }
      // > div:first-child {
      //   flex: 0 0 70%;
      //   display: flex;
      //   flex-direction: column;
      //   .table-box {
      //     height: 100%;
      //     padding: 10px;
      //     box-sizing: border-box;
      //     display: flex;
      //     flex-direction: column;
      //   }
      //   .middle-cell:nth-child(1) {
      //     flex: 1;
      //     margin-bottom: 10px;
      //   }
      //   .middle-cell:nth-child(2) {
      //     width: 100%;
      //     display: flex;
      //     flex-direction: column;
      //     height: 200px;
      //     // min-height: 100px;
      //     // min-width: 400px;

      //     .card-cell-content {
      //       display: flex;
      //       align-items: center;
      //       justify-content: flex-start;
      //       flex-wrap: nowrap;
      //       align-content: center;
      //       height: 100%;
      //       overflow-x: auto;
      //       padding: 0 10px;

      //       .card-cell-content-box {
      //         display: flex;
      //         flex-direction: column;
      //         align-items: center;
      //         height: 80%;
      //         width: 100%;
      //         border: 1px solid #e3e5e4;
      //         justify-content: space-evenly;
      //         flex: 0 0 5.5%;
      //         padding: 8px 0;
      //         border-radius: 5px;
      //         margin-right: 10px;
      //         cursor: pointer;

      //         &:hover {
      //           background: #dee4e9;
      //         }
      //       }

      //       .card-cell-content-div {
      //         height: 100%;
      //         width: 100%;
      //         display: flex;
      //         flex-direction: column;
      //         align-items: center;
      //         justify-content: space-evenly;
      //       }

      //       .card-cell-content-div i {
      //         font-size: 2vw;
      //       }

      //       .card-cell-content-div span {
      //         letter-spacing: 2px;
      //         font-weight: 600;
      //       }
      //     }

      //     .middle-cell {
      //       flex: 0 0 100%;
      //     }
      //   }
      // }

      // > div:nth-child(2) {
      //   flex: 0 0 29.2%;
      //   display: flex;
      //   flex-direction: column;
      //   .middle-cell:nth-child(1) {
      //     flex: 1;
      //     margin-bottom: 10px;
      //     display: flex;
      //     flex-direction: column;
      //     .list {
      //       flex: 1;
      //       padding: 10px;
      //       box-sizing: border-box;
      //       .item {
      //         display: inline-block;
      //         width: 32%;
      //         margin-right: 2%;
      //         padding: 5px;
      //         box-sizing: border-box;
      //         margin-bottom: 10px;
      //         border-radius: 5px;
      //         border: 1px solid #ddd;
      //         cursor: pointer;
      //         > div:first-child {
      //           flex: 1;
      //           display: flex;
      //           align-items: center;
      //           justify-content: center;
      //           > img {
      //             height: 60px;
      //             width: 60px;
      //           }
      //         }
      //         > div:last-child {
      //           height: 30px;
      //           font-size: 16px;
      //           display: flex;
      //           align-items: center;
      //           justify-content: center;
      //         }
      //       }
      //       .margin_0 {
      //         margin-right: 0;
      //       }
      //     }
      //   }
      //   .middle-cell:nth-child(2) {
      //     width: 100%;
      //     display: flex;
      //     flex-direction: column;
      //     height: 250px;
      //   }
      // }
    }

    .box-container-bottom {
      width: 100%;
      display: flex;
      height: 300px;
      justify-content: space-between;
      .middle-cell:nth-child(1) {
        flex: 0 0 70%;
      }

      .middle-cell:nth-child(2) {
        flex: 0 0 29.2%;
      }
      .card-cell-content {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-content: center;
        height: 100%;
        overflow-x: auto;
        padding: 0 10px;

        .card-cell-content-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          height: 80%;
          width: 100%;
          border: 1px solid #e3e5e4;
          justify-content: space-evenly;
          flex: 0 0 5.5%;
          padding: 8px 0;
          border-radius: 5px;
          margin-right: 10px;
          cursor: pointer;

          &:hover {
            background: #dee4e9;
          }
        }

        .card-cell-content-div {
          height: 100%;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
        }

        .card-cell-content-div i {
          font-size: 2vw;
        }

        .card-cell-content-div span {
          letter-spacing: 2px;
          font-weight: 600;
        }
      }

      .middle-cell {
        flex: 0 0 100%;
      }
    }
  }

  .el-card + .el-card {
    margin-top: 0;
  }

  ::v-deep .el-card__header {
    padding: 10px !important;

    span {
      font-weight: bold;
    }
  }

  ::v-deep .el-card__body {
    height: calc(100% - 40px);
    padding: 0;
  }

  .scroll-box {
    height: 80%;
    width: 100%;
    padding: 25px 0 0 0;
    overflow: hidden;

    .scroll-box-content {
      height: 80%;
      width: 100%;
      position: relative;
      left: 10px;

      .scroll-box-content-dot {
        width: 10px;
        height: 10px;
        background: #ffffff;
        border-radius: 15px;
        border: 2px solid #2d80ee;
      }

      .scroll-box-content-item {
        margin-top: 5px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        .item-date {
          width: 30%;
          color: #979c9e;
          font-size: 0.7vw;
          line-height: 16px;
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .item-text {
          width: 80%;
          color: #555555;
          font-size: 0.7vw;

          line-height: 16px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin: 5px 0 0 0px;
        }
      }
    }
  }

  .el-timeline-item {
    list-style-type: none;
    line-height: 19px;
  }

  .el-timeline-item__wrapper {
    padding-left: 17px;
  }

  .el-empty {
    padding: 0;
  }

  .div-del {
    background: #cccccc !important;
    position: relative;
  }

  .div-del::after {
    content: '—';
    position: absolute;
    padding: 5px; /* 按钮的内边距 */
    background-color: rgba(255, 0, 0, 0.91);
    color: white;
    border-radius: 50%;
  }
</style>