antissoft / NetworkInformation

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

          <div class="item-box todo">

            <div class="item-title public-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" size="small">

                  <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="taskContent" label="任务内容" show-overflow-tooltip></el-table-column>

                  <el-table-column prop="taskState" label="状态" show-overflow-tooltip width="80">
                    <template slot-scope="scope">
                      <el-tag type="success">{{ scope.row.taskState }}</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="deadLine" label="任务期限" show-overflow-tooltip :formatter="ncc.tableDateFormat" width="200">

                    <template slot-scope="scope">

                      <el-tag :type="`${ncc.timeDeadLine(scope.row.deadLine)}`">{{ncc.stateDeadLine(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="createTime" label="时间" show-overflow-tooltip :formatter="ncc.tableDateFormat"></el-table-column>

                  <el-table-column prop="title" label="标题" show-overflow-tooltip>

                  </el-table-column>

                  <el-table-column label="操作" fixed="right" width="150">

                    <template slot-scope="scope">

                      <el-button type="text" @click="checkDetail(scope.row, true)">详情</el-button>

                      <el-button type="text" @click="checkDetail(scope.row)" v-if="isSHILevel">编辑</el-button>

                      <el-button type="text" style="color: red;" @click="delNew(scope.row)" v-if="isSHILevel">删除</el-button>

                    </template>

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

                <pagination :total="msgTotal" :page.sync="msgListQuery.currentPage" :limit.sync="msgListQuery.pageSize" @pagination="getAllMsgList" layout="prev, pager, next"/>

              </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)}" />

        <!-- 案件处理 -->

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

        <!-- 研判 -->
      <DisposalForm v-if="DisposalFormVisible" ref="DisposalForm" @refresh="(val) => {taskRefresh('DisposalFormVisible', val)}"/>
      <DisposalHandleForm v-if="DisposalHandleFormVisible" ref="DisposalHandleForm" @refresh="(val) => {taskRefresh('DisposalHandleFormVisible', val)}"/>

      <el-dialog
        title="专项行动详情"
        :visible.sync="dialogVisible"
        class="NCC-dialog NCC-dialog_center baseSpecialAction"
        width="60%"
        :before-close="closeDis">
        <el-row :gutter="15" class="NCC-dialog-content">
          <h4>{{dataForm.title}}</h4>
          <div class="content" v-html="dataForm.content"></div>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleEditForm(dataForm.row)">填写表单</el-button>
          <el-button @click="closeDis">取 消</el-button>
        </span>
      </el-dialog>

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

  import HandForm from '@/views/baseCaseHandling/Form.vue'

  // 研判
  import DisposalForm from "@/views/DisposalSuggestions/Form.vue";
  // 巡查处理
  import DisposalHandleForm from "@/views/DisposalSuggestions/HandleForm.vue";

  import { Loading } from 'element-ui';

  export default {
    name: "Overview",

    components: { MsgForm, HandleInspectForm, NCCForm, HandForm, DisposalForm, DisposalHandleForm },

    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,
        HandFormVisible: false,

        DisposalHandleFormVisible: false,
        DisposalFormVisible: false,

        dialogVisible: false,
        dataForm: {},

      };

    },
    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, isDetail) {

        let type1 = row.communicationAreaList.some((v) => v.IsRead)
        let type2 = row.communicationOutList.some((v) => v.IsRead)
        if(!isDetail && (type1 || type2)) {
          this.$message({
            message: '该消息已有区县/外协阅读无法编辑！',

            type: 'error'

          });
        } else {
          this.MsgFormVisible = true;
          this.$nextTick(() => {
            this.$refs.MsgForm.init(row.id, isDetail);
          })
        }

      },

      delNew(row) {

        let type1 = row.communicationAreaList.some((v) => v.IsRead)
        let type2 = row.communicationOutList.some((v) => v.IsRead)
        if(type1 || type2) {

          this.$message({

            message: '该消息已有区县阅读无法删除！',
            type: 'error'

          });

        } else {
          this.$confirm('此操作将永久删除该消息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            let res = await request({
              url: `/SubDev/ZyOaArticle/${row.id}`,
              method: "DELETE",
            });
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.getAllMsgList();
          });
        }

      },
  

      // 发布消息通知
      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.dialogVisible = true;
          this.dataForm = {
            content: row.taskContent,
            title: row.taskTitle,
            row: row,
          };
          // let loadingInstance = Loading.service({
          //   lock: true,
          //   text: 'Loading',
          //   spinner: 'el-icon-loading',
          //   background: 'rgba(255, 255, 255, 0.7)'
          // });
          // 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);
          //   loadingInstance.close();
          // });

        } else {
          let type = row.taskType;

          if(row.taskType == '核查处理' || row.taskType == '核查处置' || row.taskType == '研判') {

            let str = row.taskTitle;
            type = str.slice(1, str.indexOf('】'));
          }
          let openObject = this.getDialog(type);
          this[openObject.visible] = true;

          this.$nextTick(() => {

            this.$refs[`${openObject.node}`].init(row.taskCorrelationId, openObject.isDetail, openObject.type);

          })

        }
      },

      closeDis() {
        this.dialogVisible = false; 
        this.dataForm = {};
        this.$forceUpdate();
      },
      async handleEditForm(row) {
        let loadingInstance = Loading.service({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        });
        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);
          loadingInstance.close();
        });
      },

      getDialog(type) {

        console.log(type);
        

        switch (type) {
          case '归属地变更':
            return { visible: 'HandleInspectFormVisible', node: 'HandleInspectForm', isDetail: true }
            break;
          case '专项行动':
            
            break;
          case '案件处理':
          case '网信执法':

            return { visible: 'HandFormVisible', node: 'HandForm', isDetail: false, type: 2}

            break;
          case '研判':

          case '进一步处置':

            if(this.isSHILevel) {
              return { visible: 'DisposalFormVisible', node: 'DisposalForm', isDetail: false}
            } else {
              return { visible: 'DisposalHandleFormVisible', node: 'DisposalHandleForm', isDetail: false}
            }

            break;

          // case '进一步处置':
          //   break;

          default:
            break;
        }
      },

      async getBaseSpecialActionInfo(id) {
        let {data} = await request({
          url: `/Extend/BaseSpecialActionInfo/${id}`,
          method: "GET",
        })
        return data;
      },
      taskRefresh(key, val) {
        this[key] = false;

        key == 'formVisible' && (this.dialogVisible = false);

        val && this.getAllTaskList();
      }

    },

  };
  </script>
  <style scoped lang="scss">
  .overview {
    .item-box {
      width: 100%;
      border-radius: 10px;

      background-color: rgba(228, 231, 237, 0.23);
      // margin-bottom: 15px;
      // border-image-source:url('/src/assets/images/box-bc.png');
      // border-image-slice:33%;
      // border-image-width:40px;
      // border-image-outset:0; 
      // border-image-repeat:repeat;   
      overflow: hidden;

      &.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;
      }

      .public-title {
        width: calc(100% - 20px);
        height: 30px;
        position: relative;
        top: 0;
        left: 5px;
        color: white;
        padding-left: 16px;
        line-height: 30px;
        font-size: 14px;
        &::before {
          width: 4px;
          height: 20px;
          top: 5px;
          position: absolute;
          content: "";
          background: #2997e4;
          border-radius: 2px;
          left: 5px;
        }
      }

      .item-title {

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

        padding: 0px 15px;
        margin: 6px 10px;
        // 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;
            }
          }
        }
      }
    }
  }

  .baseSpecialAction {
    h4 {
      text-align: center;
      line-height: 40px;
      border-bottom: 1px solid #ccc;
    }
    .content {
      padding: 20px;
      border-bottom: 1px solid #ccc;
    }
    .tag-group {
      margin: 10px 0;
    }
    .title-tag {
      margin: 5px 8px;
    }
    :deep(.el-tag) {
      margin: 4px 4px;
    }
  }

  </style>