antissoft / NetworkInformation

  <template>
    <div class="overview">
      <el-row :gutter="20">
        <el-col :span="16">

          <div class="item-box todo">
            <div class="item-title">事件中心</div>

            <div class="item-body">
              <template>
                <el-table :data="todoTableData" style="width: 100%" stripe>
                  <el-table-column type="index" width="50"> </el-table-column>
                  <el-table-column
                    prop="teskName"
                    label="任务名称"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="teskCode"
                    label="任务编号"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="teskStatus"
                    label="状态"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="teskUser"
                    label="分配者"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="teskTime"
                    label="任务期限"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column label="操作">
                    <template>
                      <el-button type="primary" size="small">处理</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </div>
          </div>

            <!--<div
            class="item-box earmarked"
            :style="`height: calc(${
              isSHILevel ? '50vh - 115px' : '100vh - 205px'
            });`"
          >

            <div class="item-title">专项行动</div>
            <div class="item-body">
              <el-row :gutter="6" class="item-one-list">
                <el-col
                  :span="6"
                  v-for="(item, index) in aimList"
                  :key="index"
                  style="margin-bottom: 6px"
                >
                  <div class="item-one-box">
                    <div class="one-title">关于xxxxxx的专项行动</div>
                    <template v-if="item.type == 1">
                      <div class="one-info">
                        <div>区县：8（已填7）</div>
                        <div>外协：无</div>
                      </div>
                      <div class="one-info">行动时间：2024-07-01至2024-07-31</div>
                      <el-button type="text" class="el-button-qu">管理</el-button>
                      <el-button type="text" class="el-button-qu">查看</el-button>
                    </template>
                    <template v-else>
                      <div class="one-info">行动时间：2024-07-01至2024-07-31</div>
                      <div class="btn-box">
                        <el-button type="success" size="small">填报</el-button>
                        <div class="err">即将超时</div>
                      </div>
                    </template>
                  </div>
                </el-col>
              </el-row>
            </div>

          </div>-->

        </el-col>
        <el-col :span="8">

          <!-- <div class="item-box tip">

            <div class="item-title">工作提示</div>
            <div class="item-body">
              <template>
                <el-table :data="todoTableData" style="width: 100%" stripe>
                  <el-table-column
                    prop="teskName"
                    label="内容"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="teskCode"
                    label="事件"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                </el-table>
              </template>
            </div>

          </div> -->

          <div class="item-box msg">

            <div class="item-title">
              <div class="left">通知公告</div>
              <el-tooltip effect="dark" content="刷新" placement="top">
                <el-link
                  icon="icon-ym icon-ym-Refresh NCC-common-head-icon"
                  :underline="false"
                  @click="resetMsg()"
                />
              </el-tooltip>
            </div>

            <div class="item-body">
              <template>

                <el-table :data="msgList" style="width: 100%" stripe>

                  <el-table-column
                    prop="teskName"
                    label="内容"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="teskCode"
                    label="事件"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                </el-table>
              </template>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  import {
    todoObj,
    tipObj,
    areaObj,
    chObj,
  } from "@/assets/mockdata/demodata.json";

  import { computed } from "vue";

  export default {
    name: "Overview",
    data() {
      return {

        todoTableData: [],

        msgList: [],

        tipTableData: [],
        aimList: [],

      };

    },
    created() {

      this.getMsgList();

      this.getTipList();
      this.getAimList();
    },

    computed: {
      isSHILevel() {
        // 判断角色是否为‘市级办公室’

        return this.$store.state.user.islader;

      },
    },

    methods: {

      getMsgList() {

        for (let index = 0; index < 10; index++) {

          this.msgList.push(todoObj);

          this.todoTableData.push(todoObj);
        }
      },

      resetMsg() {
        this.msgList = [];
        this.getMsgList();
      },

      getTipList() {
        for (let index = 0; index < 10; index++) {
          this.tipTableData.push(tipObj);
        }
      },
      getAimList() {
        for (let index = 0; index < 12; index++) {
          if (Math.random() > 0.5) {
            this.aimList.push(areaObj);
          } else {
            this.aimList.push(chObj);
          }
        }
      },
    },

  };
  </script>
  <style scoped lang="scss">
  .overview {
    .item-box {
      width: 100%;
      border-radius: 10px;
      background-color: rgba(244, 244, 245, 0.38);
      margin-bottom: 15px;
      &.todo {

        height: calc(100vh - 210px);

      }

      //&.earmarked {

        // height: calc(50vh - 115px);

        //margin-bottom: 0;
      //}

      // &.tip {
      //   height: calc(50vh - 60px);
      // }

      &.msg {

        height: calc(100vh - 200px);

        margin-bottom: 0;
      }
      .item-title {

        display: flex;
        justify-content: space-between;
        align-items: center;

        color: rgba(255, 255, 255, 1);
        font-size: 16px;
        line-height: 23px;
        padding: 10px;

        .el-link.el-link--default {
          color: #fff !important;
        }

      }
      .item-body {
        height: calc(100% - 68px);
        margin: 0 13px;

        // padding-bottom: 28px;

        .el-table {
          border-radius: 10px;
          height: 100%;
          :deep(.el-table__body-wrapper.is-scrolling-none) {
            height: calc(100% - 47px);
            overflow-y: scroll;
          }
        }
      }
    }
    .earmarked {
      .item-title {
        margin-bottom: 0;
      }
      .item-one-list {
        max-height: 100%;
        overflow-y: scroll;
        margin-bottom: -6px;
        .item-one-box {
          box-sizing: border-box;
          background-color: #fff;
          border-radius: 5px;
          padding: 3px;
          height: 90px;
          .one-title {
            color: rgba(0, 122, 255, 1);
            font-size: 14px;
            line-height: 20px;
          }
          .one-info {
            display: flex;
            font-size: 12px;
            line-height: 20px;
          }
          .el-button-qu {
            padding: 5px 0;
          }
          .btn-box {
            margin-top: 10px;
            display: flex;
            align-items: flex-end;
            .err {
              margin-left: 10px;
              color: rgba(236, 47, 47, 1);
              font-size: 12px;
              line-height: 17px;
            }
          }
        }
      }
    }
  }
  </style>