antissoft / NetworkInformation

  <template>
    <el-dialog
      title="详情"
      :close-on-click-modal="false"
      :visible.sync="visible"
      class="NCC-dialog NCC-dialog_center systemInfoDialog"
      lock-scroll

      width="70%"

    >

      <el-row :gutter="15" style="height: 65vh;" class="NCC-dialog-content" v-loading="loading">

        <el-tabs class="system-info-tabs" type="border-card" tab-position='top' v-model="activeName" @tab-click="handleClick">

          <el-tab-pane label="应用信息" name="1">

            <div class="system-info" style="overflow:auto;height: calc(65vh - 65px); margin-bottom: -10px;">

              <el-col :span="24">

                  <div class="form-item">

                      <div class="label w-120">运营主体/个人:</div>

                      <p class="text">{{ dataForm.companyName || '--' }}</p>

                  </div>
              </el-col>

              <el-col :span="24">

                  <div class="form-item">

                      <div class="label w-120">应用类型:</div>

                      <p class="text">{{ dataForm.systemType | dynamicTextUP(systemTypeOptions) }}</p>

                  </div>
              </el-col>

              <el-col :span="24">
                  <div class="form-item">

                      <div class="label w-120">应用名称:</div>

                      <p class="text">{{ dataForm.systemName || "--" }}</p>
                  </div>
              </el-col>
              <el-col :span="24">
                  <div class="form-item">

                      <div class="label w-120">应用分类:</div>

                      <p class="text">{{ dataForm.systemClass | dynamicTextClassName(systemClassOptions) }}</p>
                  </div>
              </el-col>

              <template
                v-if="
                  dataForm.systemType &&
                  dataForm.systemType != '580634746028033285'
                "
              >

                <el-col :span="24">

                  <div class="form-item">

                      <div class="label w-120">特殊备案类型:</div>

                      <p class="text">{{ dataForm.specialRecordType || "--" }}</p>

                  </div>
                </el-col>
                <el-col :span="24">
                  <div class="form-item">

                      <div class="label w-120">特殊备案内容:</div>

                      <p class="text">{{ dataForm.specialRecordContent || "--" }}</p>

                  </div>
                </el-col>

                <el-col :span="24" v-if="dataForm.systemType != '580634746028033285'">
                  <div class="form-item">
                      <div class="label w-120">备案号:</div>
                      <p class="text">{{ dataForm.systemRecordNumber || "--" }}</p>
                  </div>
              </el-col>

                <el-col :span="24" v-if="dataForm.systemType == '576280043370579205'">
                  <div class="form-item">

                      <div class="label w-120">域名:</div>

                      <p class="text">{{ dataForm.domain || "--" }}</p>
                  </div>
                </el-col>

                <el-col :span="24">

                  <div class="form-item">

                      <div class="label w-120">特殊备案号:</div>

                      <p class="text">{{ dataForm.specialRecordNumber || "--" }}</p>

                  </div>
                </el-col>

                <!-- <el-col :span="24">

                  <div class="form-item">

                      <div class="label w-120">特殊备案时间:</div>

                      <p class="text">{{ ncc.dateFormat(dataForm.specialRecordTime, 'YYYY-MM-DD HH:mm:ss') || "--" }}</p>

                  </div>

                </el-col> -->

              </template>

              <el-col :span="24" v-if="dataForm.systemType == '576280004254500101'">
                <div class="form-item">

                    <div class="label w-120">安装次数:</div>

                    <p class="text">{{ dataForm.systemDownloadVolume || "--" }}<span class="start-span">更新时间：{{ ncc.dateFormat(dataForm.lastModifyTime) || ncc.dateFormat(dataForm.creatorTime) }}</span></p>
                </div>

              </el-col>

              <el-col :span="24" v-if="dataForm.systemType == '576280043370579205' || dataForm.systemType == '576280085330396421'">
                <div class="form-item">

                    <div class="label w-120">月活:</div>

                    <p class="text">{{ dataForm.MAU || "--" }}<span class="start-span">更新时间：{{ ncc.dateFormat(dataForm.lastModifyTime) || ncc.dateFormat(dataForm.creatorTime) }}</span></p>
                </div>
              </el-col>
              <el-col :span="24" v-if="dataForm.systemType == '580634746028033285'">
                <div class="form-item">

                    <div class="label w-120">粉丝量:</div>

                    <p class="text">{{ dataForm.followerCount || "--" }}<span class="start-span">更新时间：{{ ncc.dateFormat(dataForm.lastModifyTime) || ncc.dateFormat(dataForm.creatorTime) }}</span></p>
                </div>

              </el-col>

              <!-- <el-col :span="24">

                  <div class="form-item">

                      <div class="label w-120">备案许可证:</div>

                      <p class="text">{{ dataForm.recordLicense || "--" }}</p>

                  </div>

              </el-col> -->

              <el-col :span="24">

                  <div class="form-item">

                      <div class="label w-120">归属平台:</div>

                      <p class="text">{{ dataForm.platform || "--" }}</p>

                  </div>
              </el-col>

              <!-- <el-col :span="24">

                  <div class="form-item">

                      <div class="label w-120">下载量:</div>

                      <p class="text">{{ dataForm.systemDownloadVolume || "--" }}</p>

                  </div>

              </el-col> -->

              <el-col :span="24">

                  <div class="form-item">

                      <div class="label w-120">版本:</div>

                      <p class="text">{{ dataForm.version || "--" }}</p>

                  </div>
              </el-col>

              <el-col :span="24">

                  <div class="form-item">

                      <div class="label w-120">负责人姓名:</div>

                      {{ dataForm.principalName || "--" }}
                  </div>
              </el-col>

              <el-col :span="24">

                  <div class="form-item">

                      <div class="label w-120">负责人电话:</div>

                      {{ dataForm.principalPhone || "--" }}
                  </div>
              </el-col>
              <el-col :span="24">
                  <div class="form-item">

                      <div class="label w-120">办公地址:</div>

                      <p class="text">{{ dataForm.officeAddress || "--" }}</p>

                  </div>
              </el-col>

              <!-- <el-col :span="24">

                  <div class="form-item">

                      <div class="label w-120">应用图标:</div>

                      <img v-if="dataForm.systemIconModel" class="avatar" :src="define.comUrl + dataForm.systemIconModel.url">

                      <span v-else>无</span>

                  </div>

              </el-col> -->

              <el-col :span="24">
                  <div class="form-item">

                      <div class="label w-120">所属区域:</div>

                      <p class="text">{{ dataForm.areaId | dynamicText(areaOptions) }}</p>
                  </div>
              </el-col>

              <el-col :span="24">
                  <div class="form-item">
                      <div class="label w-120">备注:</div>
                      <p class="text">{{ dataForm.remark || "--" }}</p>
                  </div>
              </el-col>

              <!-- <el-col :span="24">

                  <div class="form-item">

                      <div class="label w-120">所属外协:</div>

                      <p class="text">{{ dataForm.externalAssistanceId ? '外协一' : "--" }}</p>
                  </div>

              </el-col> -->

            </div>
          </el-tab-pane>

          <el-tab-pane label="运营主体信息" name="2">

            <div class="company-info">

              <el-col :span="24">

                  <div class="form-item">

                      <div class="label w-120">运营主体/个人:</div>

                      <p class="text">{{ companyForm.companyName || "--" }}</p>

                  </div>
              </el-col>

              <!-- <el-col :span="24">

                  <div class="form-item">

                    <div class="label w-120">社会信用代码:</div>

                    <p class="text">{{ companyForm.socialCreditAgency || "--" }}</p>

                  </div>

              </el-col> -->

              <el-col :span="24">

                  <div class="form-item">

                      <div class="label w-120">运营主体法人:</div>

                      <p class="text">{{ companyForm.legalPerson || "--" }}</p>

                  </div>
              </el-col>

              <el-col :span="24">

                  <div class="form-item">

                      <div class="label w-120">运营主体地址:</div>

                      <p class="text">{{ companyForm.address || "--" }}</p>

                  </div>
              </el-col>

              <!-- <el-col :span="24">

                  <div class="form-item">

                      <div class="label w-120">资质证明:</div>
                    <div class="text" style="width: calc(120% - 120px);">

                      <NCC-UploadFz v-model="companyForm.qualificationCertificate" :fileSize="10" sizeUnit="MB" :limit="9" buttonText="点击上传" disabled/>

                    </div>

                  </div>

              </el-col> -->

              <el-col :span="24">
                  <div class="form-item">

                      <div class="label w-120">联系人:</div>

                      <p class="text">{{ companyForm.contactUser || "--" }}</p>

                  </div>
              </el-col>

              <el-col :span="24">

                  <div class="form-item">

                      <div class="label w-120">联系电话:</div>

                      <p class="text">{{ companyForm.contactPhone || "--" }}</p>

                  </div>
              </el-col>

              <el-col :span="24">

                  <div class="form-item">

                      <div class="label w-120">所属区县:</div>

                      <p class="text">{{ companyForm.areaName || "--" }}</p>

                  </div>
              </el-col>
              <el-col :span="24">
                  <div class="form-item">

                      <div class="label w-120">其他信息:</div>

                      <div v-html="companyForm.otherInfo"></div>
                  </div>
              </el-col>
            </div>
          </el-tab-pane>

          <el-tab-pane label="核查处置记录" name="3">

            <el-table :data="inspectionList" height="500" border style="width: 100%">
              <el-table-column show-overflow-tooltip prop="platformNameStr" label="应用名称"></el-table-column>
              <el-table-column show-overflow-tooltip prop="companyStr" label="运营主体"></el-table-column>

              <el-table-column show-overflow-tooltip label="问题类型" prop="questionTypeStr" align="left" />

              <el-table-column show-overflow-tooltip prop="questionClass" label="关键词"></el-table-column>

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

            </el-table>
          </el-tab-pane>

          <el-tab-pane label="监管执法记录" name="4">

            <el-table :data="handingList" height="500" border style="width: 100%">
              <el-table-column show-overflow-tooltip prop="number" label="档案号"></el-table-column>
              <el-table-column show-overflow-tooltip prop="registrationTime" label="登记时间" :formatter="ncc.tableDateFormat"></el-table-column>
              <el-table-column show-overflow-tooltip prop="systemNameStr" label="应用名称"></el-table-column>
              <el-table-column show-overflow-tooltip prop="registeredEntityStr" label="运营主体"></el-table-column>
              <el-table-column show-overflow-tooltip prop="illegalReasons" label="违法原因"></el-table-column>
              <el-table-column show-overflow-tooltip prop="punishmentRequirements" label="处罚要求"></el-table-column>
              <el-table-column show-overflow-tooltip prop="punishmentContent" label="处罚内容"></el-table-column>
              <el-table-column label="状态" prop="state" align="left" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.state" :type="ncc.getStateTagType(scope.row.state, stateOptions)">{{ scope.row.state | dynamicTextUP(stateOptions) }}</el-tag>
                </template>
              </el-table-column>

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

            </el-table>
          </el-tab-pane>

          <el-tab-pane label="数据日志" name="5">

            <div class="infinite-list-wrapper" style="overflow:auto;height: calc(65vh - 65px); margin-bottom: -10px;">

              <el-timeline class="list" v-infinite-scroll="initInfoRecord" :infinite-scroll-disabled="record_disabled">
                <el-timeline-item
                    placement="top"
                    v-for="(v, i) in updataRecordList"
                    :key="i"
                  >
                    <el-card>
                      <h4 v-if="v.content">
                        <!-- <p v-for="(item, index) in v.updataList" :key="index">
                          将“{{ item.PropertyName }}”从“{{
                            item.OldValue
                          }}”改为“{{ item.NewValue }}”
                        </p> -->
                        <p v-for="(item, index) in v.changeRecord" :key="index">{{ item }}</p>
                      </h4>
                      <h4 v-else>
                        <p>{{ v.describe }}</p>
                      </h4>
                      <p>{{ v.creatorUserId }} 提交于 {{ v.updataTime }}</p>
                    </el-card>
                </el-timeline-item>
              </el-timeline>
              <p v-if="record_loading">加载中...</p>
              <p v-if="updataRecordList.length && record_noMore">没有更多了</p>
              <el-empty v-if="!updataRecordList.length && !record_loading" description="暂无数据"></el-empty>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-row>

        <!-- 案件处理 -->
      <HandForm v-if="HandFormVisible" ref="HandForm" @refresh="(val) => {taskRefresh('HandFormVisible', val)}" />
      <ReportForm v-if="ReportFormVisible" ref="ReportForm" @refresh="(val) => {taskRefresh('ReportFormVisible', val)}" />

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
      </span>
    </el-dialog>
  </template>
  <script>
  import request from "@/utils/request";
  import { getSystemDetail, getUpdataRecord } from "@/api/baseData/info";
  import { getCompanyInfoById } from "@/api/baseData/company";

  import HandForm from '@/views/baseCaseHandling/Form.vue' // 案件处理
  import ReportForm from '@/views/baseInspectionReport/Form.vue' // 案件处理

  import infoMixin from "@/mixins/info";
  

  export default {

    components: {HandForm, ReportForm},

    mixins: [infoMixin],

    props: ['areaOptions'],

    data() {
      return {
        loading: false,
        visible: false,
  
        activeName: "1",
  
        // 应用信息
        dataForm: {
          id: undefined,
          questionFrom: undefined,
          platformName: undefined,
          platformType: undefined,
          questionType: undefined,
          questionClass: undefined,
          questionContent: undefined,
          link: undefined,
          obtainEvidence: [],
          annex: [],

          systemIconModel: '',

        },
        systemTypeOptions: [],
        systemClassOptions: [],
  
        // 公司信息
        companyForm: {},

        // 网信执法记录

        handingList: [],
  

        // 核查处置记录

        inspectionList: [],
  

        // 数据日志
        record_loading: false,
        queryList: {
          pageIndex: 1,
          pageSize: 10,
        },
        updataRecordList: [],

        record_total: '',
  			questionTypeOptions : [],
        stateOptions: [],

        HandFormVisible: false,
        ReportFormVisible: false,

        specialRecordTypeOption: [],

      };
    },
    computed: {
      record_noMore() {
        return this.updataRecordList.length >= this.record_total;
      },
      record_disabled () {
        return this.record_loading || this.record_noMore;
      }
    },
    watch: {},

    async created() {

      this.initStateTypeOption();

      this.initSystemTypeList();

      await this.initSpecialRecordTypeOption();

    },
    mounted() {},
    methods: {

      async initStateTypeOption() {
        let list = this.$store.state.meta.stateTypeList;
        !list && (list = await this.$store.dispatch('getTypeListByCode', 'stateType'));
        this.stateOptions = list;
      },

      init(row) {
        this.visible = true;

        this.dataForm.id = row.id;

        this.activeName = '1'
        this.$nextTick(() => {
          this.initSystemForm(this.dataForm.id, row.companyName)
        });
      },
      handleClick(e) {

          switch (e.index) {
              case '1':
                  // 公司信息
                  this.initCompanyForm();

                  break;

              case '2':
                  // 核查处置记录

                  this.initInspectionList(this.dataForm.id);

                  break;
              case '3':
                  // 网信执法记录

                  this.initHandingList(this.dataForm.id);

                  break;

              case '4':

                  // 数据日志

                  this.updataRecordList = [];
                  this.queryList = {
                    pageIndex: 1,
                    pageSize: 10,
                  };

                  this.initInfoRecord();
                  break;

              default:
                  break;
          }

      },
  

      // 初始化应用信息-----------------------------------------------------------------------------0

      async initSystemForm(id, companyName) {
          this.loading = true;
          let { data } = await getSystemDetail(id);
          await this.initSystemClassList(data.systemType);
          this.dataForm = data;
          this.dataForm.companyName = companyName;

          this.dataForm.specialRecordType && (this.dataForm.specialRecordType = this.specialRecordTypeOption.find(v => v.id == this.dataForm.specialRecordType).fullName);

          this.loading = false;
      },
      async initSystemTypeList() {
        let list = this.$store.state.meta.system;
        !list &&
          (list = await this.$store.dispatch("getTypeListByCode", "system"));
        this.systemTypeOptions = list;
      },
  
      async initSystemClassList(val) {
          let list = this.$store.state.meta.systemClass[val];
          !list && (list = await this.$store.dispatch('getSystemType', val));
          this.systemClassOptions = list;
      },
  

      // 初始化公司信息------------------------------------------------------------------------------1

      async initCompanyForm() {
        this.loading = true;
        let res = await getCompanyInfoById(this.dataForm.companyId);
        this.companyForm = res.data;
        this.loading = false;
      },
  

      // 核查处置记录------------------------------------------------------------------------------2
      initHandingList(id) {
        this.loading = true;
        request({
          url: `/Extend/basesysteminfo/GetHandlingList/${id}`,
          method: "get",
        }).then((res) => {
          this.loading = false;
          this.handingList = res.data;
        }).catch(() => this.loading = false);
      },
  
      // 网信执法记录--------------------------------------------------------------------------------3
      initInspectionList(id) {
        this.loading = true;
        request({
          url: `/Extend/basesysteminfo/GetInspectionList/${id}`,
          method: "get",
        }).then((res) => {
          this.loading = false;
          this.inspectionList = res.data;
        }).catch(() => this.loading = false);
      },
      // 数据日志-----------------------------------------------------------------------------------4

      async initInfoRecord() {
        this.record_loading = true;
        await getUpdataRecord({
          id: this.dataForm.id,
          ...this.queryList,
        }).then(({ data }) => {
          data.list.forEach((item) => {
            let date = new Date(item.creatorTime * 1000);
            item.updataTime = this.$m(date).format("YYYY-MM-DD HH:mm:ss");
            item.updataList = JSON.parse(item.content);
            item.changeRecord = item.content ? JSON.parse(item.describe) : item.describe;
          });
          this.record_total = data.pagination.total
          this.updataRecordList = [...this.updataRecordList, ...data.list];
          this.record_loading = false;
          this.queryList.pageIndex += 1;
        });
      },

      addOrUpdateHandle(row) {

        switch (this.activeName) {
          case "3":
          this.ReportFormVisible = true;
            this.$nextTick(() => {
              this.$refs.ReportForm.init(row.id, true);
            });
            break;
          case "4":
            this.HandFormVisible = true;
            this.$nextTick(() => {
              this.$refs.HandForm.init(row.id, true);
            });
            break;
        
          default:
            break;
        }
      },
  
      taskRefresh(key ,isrRefresh) {
        this[`${key}`] = false;
        if (isrRefresh) this.reset();
      },

    
      goBack() {
        this.$emit("refresh");
      },
      
    },
  };
  </script>
  <style lang="scss" scoped>

  .system-info-tabs {
    width: 100%;
    height: 100%;
    border-radius: 15px;
  }

  .el-dialog__wrapper.NCC-dialog.NCC-dialog_center.systemInfoDialog {
    :deep(.el-tabs__content) {

      //background: #f5f5f5;
      //border-radius: 10px;

      padding: 10px;

      margin: 10px;

    }
  }
  

  // .NCC-dialog.systemInfoDialog {
  //   :deep(.el-dialog__body) {
  //     overflow: unset !important;
  //     :deep(.el-tabs__content) {
  //       height: calc(65vh - 45px);
  //     }
  //   }
  // }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    margin-left: 10px;
  }

  .start-span {
    margin-left: 10px;
    color: red;
    font-size: 12px;
    line-height: 30px;
  }

  </style>