antissoft / NetworkInformation

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

          <div class="item-box todo">

            <div class="item-title">
              <div class="left">任务中心</div>
              <div class="right">
                <!-- <el-button type="success" size="mini" style="margin-right: 10px;" v-if="isSHILevel" @click="announceMsg">发布</el-button> -->
                <el-tooltip effect="dark" content="刷新" placement="top">
                  <el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="resetTask"/>
                </el-tooltip>
              </div>
            </div>

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

                <el-table :data="taskList" style="width: 100%" stripe v-loading="taskLoading">

                  <el-table-column type="index" width="40"> </el-table-column>
                  <el-table-column prop="taskTitle" label="任务名称" show-overflow-tooltip/>
                  <el-table-column prop="taskType" label="任务类型" show-overflow-tooltip width="100"/>
                  <el-table-column prop="taskState" label="状态" show-overflow-tooltip width="80"/>
                  <el-table-column prop="taskContent" label="任务内容" show-overflow-tooltip />

                  <el-table-column prop="deadLine" label="任务期限" show-overflow-tooltip :formatter="ncc.tableDateFormat" width="140">
                    <template slot-scope="scope">
                      <el-tag :type="ncc.timeDeadLine(scope.row.deadLine)">{{ ncc.tableDateFormat(scope.row, 'deadLine', scope.row.deadLine) }}</el-tag>
                    </template>
                  </el-table-column>

                  <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                      <el-button type="primary" size="small" @click="handleTask(scope.row)">处理</el-button>

                    </template>
                  </el-table-column>
                </el-table>

                <pagination :total="taskTotal" :page.sync="taskListQuery.currentPage" :limit.sync="taskListQuery.pageSize" @pagination="getAllTaskList" />

              </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>

              <div class="right">
                <el-button type="success" size="mini" style="margin-right: 10px;" v-if="isSHILevel" @click="announceMsg">发布</el-button>
                <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>

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

                <el-table :data="msgList" style="width: 100%" stripe v-loading="msgLoading">
                  <el-table-column prop="title" label="标题" show-overflow-tooltip>

                  </el-table-column>

                  <el-table-column label="操作" fixed="right" width="80">
                    <template slot-scope="scope">
                      <el-button type="text" @click="checkDetail(scope.row)">详情</el-button>
                    </template>

                  </el-table-column>
                </el-table>

                <pagination :total="msgTotal" :page.sync="msgListQuery.currentPage" :limit.sync="msgListQuery.pageSize" @pagination="getAllMsgList" />

              </template>
            </div>
          </div>
        </el-col>
      </el-row>

      <MsgForm v-if="MsgFormVisible" ref="MsgForm" @refresh="msgRefresh"/>

      <HandleInspectForm v-if="HandleInspectFormVisible" ref="HandleInspectForm" @refresh="(val) => {taskRefresh('HandleInspectFormVisible', val)}"/>

      <NCC-Form v-if="formVisible" ref="NCCForm" @refreshDataList="(val) => {taskRefresh('formVisible', val)}" />

    </div>
  </template>
  
  <script>

  import request from "@/utils/request";
  import MsgForm from "./msgForm.vue"

  import HandleInspectForm from "@/views/baseSystemInfo/HandleInspectForm.vue"
  import NCCForm from '@/views/baseSpecialAction/dynamicModel/list/Form'
  

  export default {
    name: "Overview",

    components: { MsgForm, HandleInspectForm, NCCForm },

    data() {
      return {

        todoTableData: [],

        tipTableData: [],
        aimList: [],

  
        msgLoading: false,
        msgListQuery: {
          currentPage: 1,
          pageSize: 20,
        },
        msgQuery: {
          keyword: ''
        },
        msgList: [],
        msgTotal: 0,
        MsgFormVisible: false,
  
        taskLoading: false,
        taskListQuery: {
          currentPage: 1,
          pageSize: 20,
        },
        taskQuery: {
          keyword: ''
        },
        taskList: [],
        taskTotal: 0,

        HandleInspectFormVisible: false,
        formVisible: false

      };

    },
    created() {

      this.getAllMsgList();
      this.getAllTaskList();

    },

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

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

      },
    },

    methods: {

      // 通知公告
      getAllMsgList() {
        this.msgLoading = true;
        let _query = {
          ...this.msgListQuery,
          ...this.msgQuery,
        };
        let query = {};
        for (let key in _query) {
          if (Array.isArray(_query[key])) {
            query[key] = _query[key].join();
          } else {
            query[key] = _query[key];
          }

        }

        request({
          url: '/SubDev/ZyOaArticle',
          method: "GET",
          params: query,
        }).then((res) => {
          this.msgList = res.data.list;
          this.msgTotal = res.data.pagination.total;
          this.msgLoading = false;

        }).catch(() => {
          this.msgLoading = false;

        });

      },

      resetMsg() {
        this.msgList = [];

        this.msgListQuery = {
          currentPage: 1,
          pageSize: 20,
        };
        this.getAllMsgList();

      },

      msgRefresh(val) {
        this.MsgFormVisible = false;
        val && this.getAllMsgList();
      },
      checkDetail(row) {
        console.log(row);
        this.MsgFormVisible = true;
        this.$nextTick(() => {
          this.$refs.MsgForm.init(row.id, true);
        })

      },

      // 发布消息通知
      announceMsg() {
        this.MsgFormVisible = true;
        this.$nextTick(() => {
          this.$refs.MsgForm.init();
        })
      },
  
      // 任务中心
      getAllTaskList() {
        this.taskLoading = true;
        let _query = {
          ...this.taskListQuery,
          ...this.taskQuery,
        };
        let query = {};
        for (let key in _query) {
          if (Array.isArray(_query[key])) {
            query[key] = _query[key].join();

          } else {

            query[key] = _query[key];

          }
        }

        request({
          url: '/Extend/BaseTaskCenter/GetListByCurretUser',
          method: "GET",
          params: query,
        }).then((res) => {
          this.taskList = res.data.list;
          this.taskTotal = res.data.pagination.total;
          this.taskLoading = false;

        }).catch(() => {
          this.taskLoading = false;

        });
      },
      resetTask() {
        this.taskList = [];
        this.taskListQuery = {
          currentPage: 1,
          pageSize: 20,
        };
        this.getAllTaskList();

      },

      async handleTask(row) {
        if(row.taskType == '归属地变更') {
          this.HandleInspectFormVisible = true;
          this.$nextTick(() => {
            this.$refs.HandleInspectForm.init(row.taskCorrelationId, true);
          })
        } else if(row.taskType == '专项行动') {
          this.formVisible = true;

          // let data = await this.getBaseSpecialActionInfo('588008032122701061');
          let data = await this.getBaseSpecialActionInfo(row.taskCorrelationId);

          var  Itemid = data.itemId || '';//数据id，没有的话就是新增 ，有的话就是修改
          var  modelId = data.formId;//关联的表单id
          var taskId = data.id; // 当前专项行动id
          var isPreview = false;//固定死，值不变
          var useFormPermission = false;//固定死，值不变
          var formData = [];
          request({
            url: '/visualdev/OnlineDev/'+modelId+'/Config',
            method: "GET",
            params:null
          }).then(res => {
            formData = res.data.formData;
            this.$refs.NCCForm.init(formData, modelId, Itemid, isPreview, useFormPermission, taskId)
          });
        }
      },
      async getBaseSpecialActionInfo(id) {
        let {data} = await request({
          url: `/Extend/BaseSpecialActionInfo/${id}`,
          method: "GET",
        })
        return data;
      },
      taskRefresh(key, val) {
        this[key] = false;
        val && this.getAllTaskList();
      }

    },

  };
  </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 - 160px);

      }

      //&.earmarked {

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

        //margin-bottom: 0;
      //}

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

      &.msg {

        height: calc(100vh - 160px);

        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% - 95px);

        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>