hi-ucs/back/src/views/modules/abilityStatistics/index.vue

<template>
  <div>
    <div class="container">
      <!-- <div class='container-left'  v-if='homeIsShow'>
        <div class='left-search'>
            <div>
                <input type="text" class='input-style' placeholder="请输入部门关键词" v-model="inputTxt">
                <div class='input-search'  @click='searchBtn'>
                    <img src="@/assets/img/搜索.png" style='margin-top:7px;margin-left:16px' >
                </div>
            </div>
        </div>
        <el-tree
            class='tree-style'
            :data="treeData"
            :props="defaultProps"
            accordion
            @node-click="handleNodeClick">
           <span slot-scope="{ node }" class='tree-text-style'>
                <img  src="@/assets/img/一级图标.png" style="width: 16px; height: 16px" />
                {{ node.label }}
           </span>
        </el-tree>
         </div> -->
      <el-form :inline="true">
        <!--起始日期 @keyup.enter.native="getDataList()"-->
        <el-form-item>
          <span>日期：</span>
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <!--审核状态-->
        <el-form-item >
          <span>审核状态：</span>
          <el-select
            v-model="examineStatus"
            placeholder="请选审核状态"
            clearable
          >
          <el-option label="全部" value="-1"></el-option>
          <el-option label="审核中" value="0"></el-option>
            <el-option  label="通过" value="1"></el-option>
            <el-option  label="不通过" value="2"></el-option>
          </el-select>
        </el-form-item>

        <!--部门-->
        <el-form-item>
          <span>部门名称：</span>
          <el-select
            v-model="abilityDepartment"
            placeholder="请选择部门"
            clearable
          >
            <el-option label="全部" value=""></el-option>
            <el-option
              v-for="item in departmentSelects"
              :key="item.label"
              v-bind="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <!--类型-->
        <el-form-item>
          <span>类型：</span>
          <el-select v-model="abilityType" placeholder="请选择类型" clearable>
            <el-option label="全部" value=""></el-option>
            <el-option
              v-for="item in typeOptions"
              :key="item.name"
              :label="item.name"
              :value="item.name"
              v-bind="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <!--操作按钮查询-->
        <el-form-item>
          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
        <!--操作按钮重置-->
        <el-form-item>
          <el-button type="primary" @click="resetDataList()">{{
            $t('reset')
          }}</el-button>
        </el-form-item>
        <!-- 导出 -->
        <a class='export' :href="exportExcel+exportExcelType+'?'+exportExcelCondition+'&token='+token">导出</a>
        <!-- <el-form-item>
          <el-button type="primary" @click="exportExcel()">导出</el-button>
        </el-form-item> -->
      </el-form>
      <el-card shadow="never" class="aui-card--fill" v-if="homeIsShow">
        <div class="mod-demand__bsdemand">
          <!--  <div class='top-box'>
            <span class='title'>能力统计</span>
            <div class='title-list-style'>
            <div v-for="(item,index) in titleList" :key='index' class='title-single' :class="{'choseStyle':choseId=== index}" @click="choseBtn(index)">
             <span class='box-style'>{{item.name}}</span>
            </div>
           </div>
        </div> -->

          <div class="second-title">
            <span
              style="margin-right: 30px"
              :class="[
                departmentId === 1 || departmentId === 3
                  ? 'departmentStyle'
                  : ''
              ]"
              @click="handleChose(3)"
            >
              能力上架统计
            </span>
            <span
              :class="[
                departmentId === 2 || departmentId === 4
                  ? 'departmentStyle'
                  : ''
              ]"
              @click="handleChose(4)"
            >
              能力使用统计
            </span>
            <!--   <span v-if='this.choseId===0' :class="[departmentId===3?'departmentStyle':'']"  @click="handleChose(3)">
                能力上架明细
            </span>
           <span v-if='this.choseId===0' :class="[departmentId===4?'departmentStyle':'']"  @click="handleChose(4)">
                能力使用明细
            </span> -->
            <span v-if="detailFlag" class="detail-button" @click="goToDetail()">
              明细
            </span>
            <span v-else class="detail-button" @click="goToBack()"> 返回 </span>
          </div>
          <div class="line-style"></div>
          <!--统计表-->
          <el-table
            :data="tableData"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
            border
            style="width: 100%"
            v-show="this.departmentId === 1"
          >
            <el-table-column prop="name" label="上架部门" min-width="100%">
            </el-table-column>
            <el-table-column label="组件">
              <el-table-column prop="znsf" label="智能算法" min-width="100%">
              </el-table-column>
              <el-table-column prop="tcfw" label="图层服务" min-width="100%">
              </el-table-column>
              <el-table-column
                prop="kfzj"
                label="通用开发组件"
                min-width="100%"
              >
              </el-table-column>
              <el-table-column
                prop="ywzj"
                label="业务能力组件"
                min-width="100%"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column prop="yyzy" label="应用资源" min-width="100%">
            </el-table-column>
            <el-table-column prop="zj" label="总计" min-width="100%">
            </el-table-column>
          </el-table>
          <el-table
            :data="tableData"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
            border
            style="width: 100%"
            v-show="this.departmentId === 2"
          >
            <el-table-column prop="name" label="申请部门" min-width="100%">
            </el-table-column>
            <el-table-column label="组件">
              <el-table-column prop="znsf" label="智能算法" min-width="100%">
              </el-table-column>
              <el-table-column prop="tcfw" label="图层服务" min-width="100%">
              </el-table-column>
              <el-table-column
                prop="kfzj"
                label="通用开发组件"
                min-width="100%"
              >
              </el-table-column>
              <el-table-column
                prop="ywzj"
                label="业务能力组件"
                min-width="100%"
              >
              </el-table-column>
            </el-table-column>
            <el-table-column prop="yyzy" label="应用资源" min-width="100%">
            </el-table-column>
            <el-table-column prop="hys" label="会议室" min-width="100%" v-show='departmentId == 2'>
            </el-table-column>
            <el-table-column prop="zj" label="总计" min-width="100%">
            </el-table-column>
          </el-table>
          <!--明细表-->

          <el-table
            :data="tableData"
            style="width: 100%"
            v-show="this.departmentId === 3 || this.departmentId === 4"
          >
          <el-table-column v-if="this.departmentId === 3" prop="deptName" label="上架部门" min-width="100%">
            </el-table-column>
            <el-table-column v-if="this.departmentId === 4" prop="deptName" label="申请部门" min-width="100%">
            </el-table-column>
            <el-table-column prop="resourceName" label="资源名称" min-width="100%">
            </el-table-column>
            <el-table-column prop="type" label="类型" min-width="100%"> </el-table-column>
            <el-table-column v-if="this.departmentId === 4"  prop="resourceDeptName" label="提供部门" min-width="100%">
            </el-table-column>
            <el-table-column prop="createDate" label="日期" min-width="100%"> </el-table-column>
            <el-table-column prop="approveStatus" label="状态" min-width="100%">
            </el-table-column>
            <el-table-column label="操作" min-width="100%">
		<template slot-scope="scope"   >
			<el-link type="primary" v-if="scope.row.applyNumber" v-on:click="detailClick(scope.row)">查看详情</el-link>
      <el-link type="info" v-else disabled>后台挂接，无详情</el-link>
		</template>
  </el-table-column>
          </el-table>
          <!-- <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              layout="total, prev, pager, next, jumper"
              :total="total"
              :page-size="5"
              :current-page="currentPage"
            >
            </el-pagination>
          </div> -->
        </div>
      </el-card>
    </div>
    <component-used
      v-if="UsedIsShow"
      :tableId="tableId"
      :fatherId="fatherId"
      @closeChild2="closeChild2"
    ></component-used>
    <component-services
      v-if="servicesIsShow"
      :tableId="tableId"
      :fatherId="fatherId"
      @closeChild="closeChild"
    ></component-services>
    <application-resources
      v-if="resourcesIsShow"
      :tableId="tableId"
      :fatherId="fatherId"
      @closeApplication="closeApplication"
    ></application-resources>
  <ability-detail  v-if="detailsVisible"
  :detailsVisible="detailsVisible" :detailParamss="detailParamss"  :detailType="detailType" @closeModal="closeModal">
</ability-detail>
  </div>

</template>
<script>
import Cookies from 'js-cookie'
import componentServices from './componentServices.vue'
import AbilityDetail from './components/abilityDetails'
import applicationResources from './applicationResources.vue'
import ComponentUsed from './componentUsed.vue'
import qs from 'qs'
import { mapState } from 'vuex'
// const props = defineProps({
//   processDefinitionName: { type: String, default: null },
//   businessKey: { type: String, default: null },
//   processInstanceId: { type: String, default: null },
//   resourceId: { type: String, default: null },
//   refObj: { type: Object, default: null },
//   showType: { type: String, default: null },
// })
export default {
  components: { componentServices, applicationResources, ComponentUsed, AbilityDetail },
  data () {
    return {
      exportExcel: CONFIGITEM.configData[CONFIGITEM.version].apiURL + '/census/center/export',
      exportExcelCondition: '',
      exportExcelType: '',
      token: Cookies.get('ucsToken'),
      detailType: '',
      detailParamss: {},
      isBack: true,
      detailsVisible: false,
      inputTxt: '',
      tableId: '',
      fatherId: '',
      treeData: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
              children: [
                {
                  label: '三级 1-1-1'
                }
              ]
            }
          ]
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1',
              children: [
                {
                  label: '三级 2-1-1'
                }
              ]
            },
            {
              label: '二级 2-2',
              children: [
                {
                  label: '三级 2-2-1'
                }
              ]
            }
          ]
        },
        {
          label: '一级 3',
          children: [
            {
              label: '二级 3-1',
              children: [
                {
                  label: '三级 3-1-1'
                }
              ]
            },
            {
              label: '二级 3-2',
              children: [
                {
                  label: '三级 3-2-1'
                }
              ]
            }
          ]
        }
      ],
      total: null,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      choseId: 0,
      departmentId: 1,
      currentPage: 1,
      homeIsShow: true,
      servicesIsShow: false,
      resourcesIsShow: false,
      showFlag: false,
      UsedIsShow: false,
      titleList: [
        { name: '组件服务', key: 1 },
        { name: '应用资源', key: 2 },
        { name: '基础设施', key: 3 },
        { name: '数据资源', key: 4 },
        { name: '知识库', key: 5 },
        { name: '会议室', value: 6 }
      ],
      tableData: [],
      tableData2: [
        {
          approveStatus: '',
          createDate: '',
          deptName: '',
          resourceName: '',
          type: ''
        }
      ],
      examineStatus: '-1', // 审核状态
      status: '',
      value1: [], // 起始时间
      abilityDepartment: '', // 部门
      abilityType: '', // 能力
      beginTime: '', // 开始时间
      endTime: '', // 结束时间
      typeOptions: [
        { name: '智能算法', value: 1 },
        { name: '图层服务', value: 2 },
        { name: '通用开发组件', value: 3 },
        { name: '页面开发组件', value: 4 },
        { name: '应用资源', value: 5 },
        { name: '会议室', value: 6 }
      ], // 类型备选列表
      detailFlag: false, // 明细返回按钮显示标志位
      startDate: '', // 开始时间
      endDate: '' // 结束时间
    }
  },
  created () {
    // 当前设定的日期时间
    // const d = new Date()
    // let year1, month1, day1
    // ;[year1, month1, day1] = [d.getFullYear(), d.getMonth(), d.getDate()]
    // const date1 = new Date(year1, month1, day1, 7)
    // this.value1.push(date1)
    // // 前一天设定的日期时间
    // let year2, month2, day2
    // d.setTime(d.getTime() - 24 * 60 * 60 * 1000)
    // ;[year2, month2, day2] = [d.getFullYear(), d.getMonth(), d.getDate()]
    // const date2 = new Date(year2, month2, day2, 7)
    // this.value1.unshift(date2)
  },
  mounted () {
    // this.getFirstTree()
    if (this.departmentId === 1) {
      this.handleChose(3)
      // this.departmentId = 1;
    } else if (this.departmentId === 2) {
      this.handleChose(4)
      // this.departmentId = 2;
    } else {
    }
  },
  computed: {
    ...mapState(['departmentSelects'])
  },
  methods: {
    closeModal () {
      this.detailsVisible = false
    },
    handleCurrentChange (val) {
      if (this.choseId === 0) {
        this.getFirstTree(val)
      } else if (this.choseId === 1) {
        this.getReleaseTree(val)
      }
    },
    getTreeName (data) {
      this.$http
        .get('/census/center/v3/treeList/', {
          params: {
            keywords: data.name,
            deptId: '1067246875800000066'
            // pageNo: pageNo || 1,
            // pageSize: 20
          }
        })
        .then((res) => {
          this.tableData = res.data.data
        })
    },
    //  // 获取部门列表
    //     getALLTree () {
    //     this.$http.get('/census/center/v3/treeList/' ,{
    //           params : {
    //             keywords:this.inputTxt,
    //             deptId:'1067246875800000066',
    //             // pageNo: pageNo || 1,
    //             // pageSize: 20
    //             }
    //     }).then(res => {
    //         this.treeData =res.data.data
    //         // this.tableData =res.data.data
    //     })
    //     },

    // 组件服务部门发布情况--改为能力上架统计
    getFirstTree (page) {
      if (this.examineStatus == '-1') {
        this.status = ''
      } else if (this.examineStatus == '0') {
        this.status = '审核中'
      } else if (this.examineStatus == '1') {
        this.status = '通过'
      } else if (this.examineStatus == '2') {
        this.status = '不通过'
      } else {
        this.status = this.examineStatus
      }
      this.$http
        .get('/census/center/selectDeptDetailTypeCountList/', {
          params: {
            page: page || 1,
            limit: 5,
            approveStatus: this.status,
            deptId: this.abilityDepartment,
            params: '',
            startDate: this.startDate,
            endDate: this.endDate
          }
        })
        .then((res) => {
          const result = res.data.data
          for (let i = 0; i < result.length; i++) {
            if (!result[i].hasOwnProperty('yyzy')) {
              result[i].yyzy = 0
            }
            if (!result[i].hasOwnProperty('kfzj')) {
              result[i].kfzj = 0
            }
            if (!result[i].hasOwnProperty('znsf')) {
              result[i].znsf = 0
            }
            if (!result[i].hasOwnProperty('tcfw')) {
              result[i].tcfw = 0
            }
            if (!result[i].hasOwnProperty('ywzj')) {
              result[i].ywzj = 0
            }
            if (!result[i].hasOwnProperty('hys')) {
              result[i].hys = 0
            }
            result[i].zj =
              parseInt(result[i].yyzy) +
              parseInt(result[i].kfzj) +
              parseInt(result[i].znsf) +
              parseInt(result[i].ywzj) +
              parseInt(result[i].tcfw) +
              parseInt(result[i].hys)
          }
          this.tableData = res.data.data
          this.total = res.data.data.total
          this.exportExcelCondition = qs.stringify({
            approveStatus: this.status,
            deptId: this.abilityDepartment,
            startDate: this.startDate,
            endDate: this.endDate
          })
        })
    },
    // 组件服务部门使用情况列表-改为能力使用统计
    getSecondTree () {
      if (this.examineStatus == '-1') {
        this.status = ''
      } else if (this.examineStatus == '0') {
        this.status = '审核中'
      } else if (this.examineStatus == '1') {
        this.status = '通过'
      } else if (this.examineStatus == '2') {
        this.status = '不通过'
      } else {
        this.status = this.examineStatus
      }
      this.$http
        .get('/census/center/selectApplyDeptDetailTypeCountList', {
          params: {
            // page: page || 1,
            // limit: 5,
            approveStatus: this.status,
            deptId: this.abilityDepartment,
            params: '',
            startDate: this.startDate,
            endDate: this.endDate
          }
        })
        .then((res) => {
          const result = res.data.data
          for (let i = 0; i < result.length; i++) {
            if (!result[i].hasOwnProperty('yyzy')) {
              result[i].yyzy = 0
            }
            if (!result[i].hasOwnProperty('kfzj')) {
              result[i].kfzj = 0
            }
            if (!result[i].hasOwnProperty('znsf')) {
              result[i].znsf = 0
            }
            if (!result[i].hasOwnProperty('tcfw')) {
              result[i].tcfw = 0
            }
            if (!result[i].hasOwnProperty('ywzj')) {
              result[i].ywzj = 0
            }
            if (!result[i].hasOwnProperty('hys')) {
              result[i].hys = 0
            }
            result[i].zj =
              parseInt(result[i].yyzy) +
              parseInt(result[i].kfzj) +
              parseInt(result[i].znsf) +
              parseInt(result[i].ywzj) +
              parseInt(result[i].tcfw) +
              parseInt(result[i].hys)
          }
          this.tableData = res.data.data
          this.total = res.data.data.total
          this.exportExcelCondition = qs.stringify({
            approveStatus: this.status,
            deptId: this.abilityDepartment,
            startDate: this.startDate,
            endDate: this.endDate
          })
        })
    },
    // 点击查看详情
    detailClick (row) {
      this.detailParamss = {}
      const applyNumber = row.applyNumber
      if (this.departmentId == 3) { // 能力上架
        this.detailType = '能力上架'
        const params = {
          processInstanceId: applyNumber
        }
        this.$http
          .get('/act/his/getTaskHandleDetailInfo', { params })
          .then((res) => {
            if (res.data.code == 0) {
              if (res.data.data != null) {
                this.detailParamss.resourceApplication = []
                this.detailParamss.resourceApplication = res.data.data
                this.detailsVisible = true
              } else {
                this.$message.info('暂无详情数据！')
              }
            } else {
              this.$message.error('数据请求失败！')
            }
          })
      } else if (this.departmentId === 4) { // 能力使用
        this.detailType = '能力使用'
        this.$http
          .get('/processForm/tabilityapplication/getByApplyFlag/' + applyNumber)
          .then((res) => {
            if (res.data.code == 0) {
              if (res.data.data != null) {
                this.detailParamss = res.data.data
                this.detailsVisible = true
              } else {
                this.$message.info('暂无详情数据！')
              }
            } else {
              this.$message.error('数据请求失败！')
            }
          })
      }
    },
    // 能力上架明细
    getOneDetail (page) {
      var passAndReview = '' // 转变"通过"字段为通过
      if (this.examineStatus == '-1') {
        this.status = ''
      } else if (this.examineStatus == '0') {
        this.status = '审核中'
      } else if (this.examineStatus == '1') {
        this.status = '通过'
      } else if (this.examineStatus == '2') {
        this.status = '不通过'
      } else {
        this.status = this.examineStatus
      }
      this.$http
        .get('/census/center/selectCensusResourceTable', {
          params: {
            // limit: 5,
            // page: page || 1,
            approveStatus: this.status,
            deptId: this.abilityDepartment,
            type: this.abilityType,
            startDate: this.startDate,
            endDate: this.endDate
          }
        })
        .then((res) => {
          console.log('111111', this.tableData, res.data.data)
          this.tableData = res.data.data
          this.total = res.data.data.total
          this.exportExcelCondition = qs.stringify({
            approveStatus: this.status,
            deptId: this.abilityDepartment,
            startDate: this.startDate,
            endDate: this.endDate
          })
        })
    },
    // 能力使用明细
    getTwoDetail (page) {
      var passAndReview = '' // 转变"通过"字段为通过
      if (this.examineStatus == '-1') {
        this.status = ''
      } else if (this.examineStatus == '0') {
        this.status = '审核中'
      } else if (this.examineStatus == '1') {
        this.status = '通过'
      } else if (this.examineStatus == '2') {
        this.status = '不通过'
      } else {
        this.status = this.examineStatus
      }
      this.$http
        .get('/census/center/selectCensusApplyTable', {
          params: {
            // limit: 5,
            // page: page || 1,
            approveStatus: this.status,
            deptId: this.abilityDepartment,
            type: this.abilityType,
            startDate: this.startDate,
            endDate: this.endDate
          }
        })
        .then((res) => {
          this.tableData = res.data.data
          this.total = res.data.data.total
          this.exportExcelCondition = qs.stringify({
            approveStatus: this.status,
            deptId: this.abilityDepartment,
            startDate: this.startDate,
            endDate: this.endDate
          })
        })
    },
    getReleaseTree (page) {
      this.$http
        .get('/census/center/selectApplyDeptDetailTypeCountList/', {
          params: {
            limit: 5,
            // page: page || 1,
            approveStatus: '',
            deptId: '',
            params: '',
            startDate: ''
          }
        })
        .then((res) => {
          const result = res.data.data
          for (let i = 0; i < result.length; i++) {
            if (!result[i].hasOwnProperty('yyzy')) {
              result[i].yyzy = 0
            }
            if (!result[i].hasOwnProperty('kfzj')) {
              result[i].kfzj = 0
            }
            if (!result[i].hasOwnProperty('znsf')) {
              result[i].znsf = 0
            }
            if (!result[i].hasOwnProperty('tcfw')) {
              result[i].tcfw = 0
            }
            if (!result[i].hasOwnProperty('ywzj')) {
              result[i].ywzj = 0
            }
            if (!result[i].hasOwnProperty('hys')) {
              result[i].hys = 0
            }
            result[i].zj =
              parseInt(result[i].yyzy) +
              parseInt(result[i].kfzj) +
              parseInt(result[i].znsf) +
              parseInt(result[i].ywzj) +
              parseInt(result[i].tcfw) +
              parseInt(result[i].hys)
          }
          this.tableData = res.data.data
          this.total = res.data.data.total
        })
    },
    // 应用资源部门使用情况列表
    getUsedTree () {
      this.$http
        .get('/census/center/v3/resourceReleaseDetails/', {
          params: {
            limit: 5,
            page: 1,
            // id:'1067246875800000066',
            resourceType: '应用资源'
          }
        })
        .then((res) => {
          this.tableData = res.data.data.list
        })
    },
    handleClick (row) {
      if (this.choseId === 0) {
        if (this.departmentId === 1) {
          this.homeIsShow = false
          this.servicesIsShow = true
          this.tableId = row.deptId
          this.fatherId = 1
        } else if (this.departmentId === 2) {
          this.homeIsShow = false
          this.UsedIsShow = true
          this.tableId = row.deptId
          this.fatherId = 1
        }
      } else if (this.choseId === 1) {
        this.homeIsShow = false
        this.resourcesIsShow = true
        this.tableId = row.deptId
        this.fatherId = 2
      }
    },
    // 选择组件
    choseBtn (index) {
      this.choseId = index
      this.handleChose(1)
    },
    //   choseBtn(index){
    //     this.choseId=index
    //     if (index===0){
    //         this.homeIsShow=false
    //         this.servicesIsShow=true
    //     } else if(index===1){
    //         this.homeIsShow=false
    //         this.servicesIsShow=false
    //         this.resourcesIsShow=true
    //     }
    //   },
    // 选择发布or使用表格
    handleChose (index) {
      this.departmentId = index
      if (index === 1) {
        if (this.choseId === 0) {
          if (!this.detailFlag) {
            this.detailFlag = !this.detailFlag
          }
          this.exportExcelType = 'SelectDeptDetailTypeCountList'
          this.getFirstTree()
        } else if (this.choseId === 1) {
          // this.getReleaseTree()
        }
      } else if (index === 2) {
        if (this.choseId === 0) {
          if (!this.detailFlag) {
            this.detailFlag = !this.detailFlag
          }
          this.exportExcelType = 'SelectApplyDeptDetailTypeCountList'
          this.getSecondTree()
        } else {
          // this.getUsedTree()
        }
      } else if (index === 3) {
        this.detailFlag = false
        if (this.choseId === 0) {
          this.exportExcelType = 'SelectCensusResourceTable'
          this.getOneDetail()
        } else {
          // this.getUsedTree()
        }
      } else if (index === 4) {
        this.detailFlag = false
        if (this.choseId === 0) {
          this.exportExcelType = 'SelectCensusApplyTable'
          this.getTwoDetail()
        } else {
          // this.getUsedTree()
        }
      }
    },
    // 翻页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    closeChild () {
      this.homeIsShow = true
      this.servicesIsShow = false
      this.handleCurrentChange(1)
    },
    closeChild2 () {
      this.homeIsShow = true
      this.UsedIsShow = false
      this.handleCurrentChange(1)
    },
    closeApplication () {
      this.homeIsShow = true
      this.resourcesIsShow = false
      this.handleCurrentChange(1)
    },
    // 明细按钮函数//明细按钮函数//明细按钮函数//明细按钮函数//明细按钮函数//明细按钮函数
    goToDetail () {
      this.detailFlag = !this.detailFlag
      if (this.departmentId === 1) {
        this.handleChose(3)
        // this.departmentId = 1;
      } else if (this.departmentId === 2) {
        this.handleChose(4)
        // this.departmentId = 2;
      } else {
      }
    },
    // 返回按钮
    goToBack () {
      // departmentId 1，3  2，4 两个值共同判断
      this.detailFlag = !this.detailFlag
      if (this.departmentId === 3) {
        this.handleChose(1)
        // this.departmentId = 1;
      } else if (this.departmentId === 4) {
        this.handleChose(2)
        // this.departmentId = 2;
      } else {
      }
    },
    // 点击查询按钮查询数据
    getDataList () {
      if (this.value1 && this.value1.length > 0) {
        this.startDate = this.handleTime(this.value1[0], 'yyyy-MM-dd HH:mm:ss')
        this.endDate = this.handleTime(this.value1[1], 'yyyy-MM-dd HH:mm:ss')
      } else {
        this.startDate = ''
        this.endDate = ''
      }

      if (this.abilityDepartment) {
        this.abilityDepartment = this.abilityDepartment
      } else {
        this.abilityDepartment = ''
      }

      if (this.abilityType) {
        this.abilityType = this.abilityType
      } else {
        this.abilityType = ''
      }
      if (this.departmentId === 1) {
        this.handleChose(1)
      } else if (this.departmentId === 2) {
        this.handleChose(2)
      } else if (this.departmentId === 3) {
        this.handleChose(3)
      } else {
        this.handleChose(4)
      }
    },
    // 重置按钮查询数据
    resetDataList () {
      this.value1 = []
      this.startDate = ''
      this.endDate = ''
      this.examineStatus = ''
      this.abilityDepartment = ''
      this.abilityType = ''
      this.approveStatus = ''
      this.exportExcelCondition = qs.stringify({
        approveStatus: this.status,
        deptId: this.abilityDepartment,
        startDate: this.startDate,
        endDate: this.endDate
      })
      if (this.departmentId === 1) {
        // if (this.detailFlag) {
        //   this.handleChose(3)
        //   this.detailFlag = !this.detailFlag
        // } else {
        this.handleChose(1)
        //   this.detailFlag = !this.detailFlag
        // }
        // this.departmentId = 1;
      } else if (this.departmentId === 2) {
        // if (this.detailFlag) {
        //   this.handleChose(4)
        //   this.detailFlag = !this.detailFlag
        // } else {
        this.handleChose(2)
        //   this.detailFlag = !this.detailFlag
        // }
      } else if (this.departmentId === 3) {
        this.handleChose(3)
      } else {
        this.handleChose(4)
      }
    },
    // 定义格式化函数：
    handleTime (time, format) {
      if (time == null || time == undefined || time == '') {
        return ''
      }
      var t = new Date(time)
      var tf = function (i) {
        return (i < 10 ? '0' : '') + i
      }
      return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
        switch (a) {
          case 'yyyy':
            return tf(t.getFullYear())
            break
          case 'MM':
            return tf(t.getMonth() + 1)
            break
          case 'mm':
            return tf(t.getMinutes())
            break
          case 'dd':
            return tf(t.getDate())
            break
          case 'HH':
            return tf(t.getHours())
            break
          case 'ss':
            return tf(t.getSeconds())
            break
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
}
.container-left {
  width: 250px;
  height: 1000px;
  display: inline-block;
  // background-color: #ffffff;
  margin-right: 10px;
}
.left-search {
  width: 250px;
  height: 76px;
  background-color: #ffffff;
}
.input-style {
  width: 210px;
  height: 36px;
  margin: 20px 20px;
  padding-left: 20px;
  border-radius: 18px;
  border: 1px solid transparent;
  background-color: #f2f4fa;
}
input::placeholder {
  font-weight: 400;
  font-size: 14px;
  color: #b0b3ca;
}
.input-search {
  width: 44px;
  height: 30px;
  background-color: #ffffff;
  position: absolute;
  border-radius: 15px;
  top: 38px;
  left: 196px;
}
::v-deep.tree-style {
  .el-tree-node__label {
    font-size: 16px;
  }
  .el-tree-node__content {
    width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
  }
}

.top-box {
  height: 80px;
  width: 100%;
  background-color: #fafafc;
  display: inline-block;
}
.title {
  display: flex;
  font-size: 20px;
  color: #000000;
  font-weight: bold;
  padding-left: 15px;
  padding-top: 10px;
}
.title-list-style {
  display: flex;
  margin-top: 10px;
}
.title-single {
  font-size: 14px;
  width: 90px;
  color: #666666;
  height: 24px;
  margin-left: 10px;
  border: 1px solid #cccccc;
  border-radius: 12px;
  cursor: pointer;
}
.box-style {
  width: 90px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 2px;
}
.second-title {
  margin-top: 20px;
  font-size: 14px;
  color: #979eb9;
  cursor: pointer;
  .detail-button {
    width: 60px;
    height: 30px;
    right: 60px;
    background-color: #0058e1;
    position: absolute;
    text-align: center;
    line-height: 30px;
    margin-top: -20px;
    border-radius: 2px;
    color: #fff;
  }
}
.line-style {
  width: 100%;
  height: 1px;
  background-color: #f5f6fa;
  margin-top: 15px;
  margin-bottom: 15px;
}
.aui-card--fill {
  width: 100% !important;
  padding: 0px !important;
}
.choseStyle {
  color: #526aff;
  border: 1px solid #526aff;
}
.departmentStyle {
  color: #526aff;
}
::v-deep .tree-text-styleJ {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}
.export {
  display: inline-block;
  width: 70px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #000;
}
.export:hover {
  border-color: #c5ddfd;
  background-color: #ecf4fe;
  color: #0058e1;
  text-decoration: none;
}
.export:active {
  border-color: #c5ddfd;
  background-color: #ecf4fe;
  color: #0058e1;
  text-decoration: none;
}
.export:visited {
  color: #fff;
  text-decoration: none;
}
</style>