hi-ucs/front/src/views/home/DetailsPageconetent.vue

<template>
  <!-- 青岛 -->
  <div class="details-pageconetent" v-if="whoShow1 && whoShow1.itShowQingDao">
    <home-header></home-header>
    <div class="details-pageconetent-left" v-if="Cardsname != '基础设施'">
      <detailsPageconetentTree />
    </div>
    <div class="details-pageconetent-left" v-else>
      <detailsPageInfrastructureTree />
    </div>
    <div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
      <div class="top-title">
        <div
          v-for="item in titleName"
          :key="item.name"
          :class="item.name === Cardsname ? 'sel' : ''"
          @click="changeCards(item.name)"
        >
          <span
            class="photo"
            :style="{
              backgroundImage: `url(${item.photo}) `,
              backgroundSize: 'cover',
            }"
          ></span>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div class="resultListSearchInput-father">
        <div class="resultListSearchInput-son">
          模糊搜索
          <a-input-search
            v-model:value="searchValue"
            placeholder="请输入关键词"
            enter-button="搜索"
            size="large"
            @search="getAppResources"
            @change="onSearch"
            class="resultListSearchInput"
          />
          <button class="button-reset" @click="chongzhi()">重置</button>
          <button
            v-if="Cardsname == '应用资源'"
            class="button-reset"
            @click="applyAll()"
            style="margin-left: 0.1rem"
          >
            全部申请
          </button>
          <div class="hengxian"></div>
        </div>
      </div>
      <div class="top-content-father" :key="listKey">
        <template
          v-if="
            Cardsname == '组件服务' ||
            Cardsname == '应用资源' ||
            Cardsname == ''
          "
        >
          <div class="top-content-son">
            <div
              v-for="(item, index) in ListContent.records"
              :key="index"
              class="top-content"
            >
              <span class="top-content-title">
                {{ item.name }}
              </span>
              <div
                class="leixingsumfather"
                :class="!item.shrinkFlag ? 'shrink' : ''"
              >
                <div
                  v-for="(item2, index2) in item.typeList"
                  :key="index2"
                  class="leixingsum"
                >
                  <a-checkable-tag
                    :checked="
                      item.selectedTags &&
                      item.selectedTags.indexOf(item2.dict_label) !== -1
                    "
                    @change="
                      (checked) => handleChange(item2, checked, item.name)
                    "
                  >
                    {{ item2.dict_label }}
                  </a-checkable-tag>
                </div>
              </div>
              <div
                class="shrinkTag"
                v-if="item.showShrink"
                :key="item.shrinkFlag"
              >
                <up-outlined
                  v-show="!item.shrinkFlag"
                  @click="changeShrink(item.name)"
                />
                <down-outlined
                  v-show="item.shrinkFlag"
                  @click="changeShrink(item.name)"
                />
              </div>
            </div>
            <!-- <div
              class="top-content"
              v-if="Cardsname == '组件服务' || Cardsname == '应用资源'"
            >
              <span class="top-content-title">共享条件</span>
              <div class="leixingsumfather">
                <div class="leixingsum">
                  <a-checkable-tag
                    :checked="tagFlag == '申请'"
                    @change="() => chagneTag('申请')"
                  >
                    申请
                  </a-checkable-tag>
                </div>
                <div class="leixingsum">
                  <a-checkable-tag
                    :checked="tagFlag == '免批申请'"
                    @change="() => chagneTag('免批申请')"
                  >
                    免批
                  </a-checkable-tag>
                </div>
              </div>
            </div> -->
          </div>
        </template>
      </div>
      <searchResultList
        v-show="resourceList.data && resourceList.data.length > 0"
        :key="listKey2"
        :resourceList="resourceList"
        :resourceTotal="resourceTotal"
        :select-cardsname="Cardsname"
      />
      <div class="pagination">
        <a-pagination
          v-if="resourceList.data && resourceList.data.length > 0"
          v-model:current="currentPage"
          v-model:pageSize="currentPageSize"
          show-size-changer
          show-less-items
          show-quick-jumper
          :total="resourceTotal"
          :page-size-options="pageSizeOptions"
          @change="pageChange"
          @showSizeChange="onShowSizeChange"
        />
      </div>
      <div
        v-if="resourceList.data && resourceList.data.length <= 0"
        style="margin-top: 2rem"
      >
        <a-empty />
      </div>
    </div>
    <div class="top" v-else-if="Cardsname === '基础设施'">
      <div class="top-title">
        <div
          v-for="item in titleName"
          :key="item.name"
          :class="item.name === Cardsname ? 'sel' : ''"
          @click="changeCards(item.name)"
        >
          <span
            class="photo"
            :style="{
              backgroundImage: `url(${item.photo}) `,
              backgroundSize: 'cover',
            }"
          ></span>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div class="top-content-father">
        <infrastructurePage />
      </div>
    </div>
    <div class="top" v-else>
      <div class="top-title">
        <div
          v-for="item in titleName"
          :key="item.name"
          :class="item.name === Cardsname ? 'sel' : ''"
          @click="changeCards(item.name)"
        >
          <span
            class="photo"
            :style="{
              backgroundImage: `url(${item.photo}) `,
              backgroundSize: 'cover',
            }"
          ></span>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div class="resultListSearchInput-father" style="background: unset">
        <div class="resultListSearchInput-son">
          模糊搜索
          <a-input-search
            v-model:value="searchValue"
            placeholder="请输入关键词"
            enter-button="搜索"
            size="large"
            @search="getAppResources"
            @change="onSearch"
            class="resultListSearchInput"
          />
          <button class="button-reset" @click="chongzhi()">重置</button>
        </div>
      </div>
      <KnowledgeBase
        :resourceList="resourceList"
        :resourceTotal="resourceTotal"
      ></KnowledgeBase>
    </div>
    <div class="talk-monitor" @click="openMonitor">
      <a-tooltip>
        <template #title>问答机器人</template>
        <i></i>
      </a-tooltip>
    </div>
  </div>
  <!-- 西海岸 -->
  <div
    class="details-pageconetent"
    v-else-if="whoShow1 && whoShow1.itShowXiHaiAn"
  >
    <home-header></home-header>
    <div class="details-pageconetent-left">
      <detailsPageconetentTree />
    </div>
    <div class="top" v-if="Cardsname != '知识库'">
      <div class="top-title">
        <div
          v-for="item in titleName"
          :key="item.name"
          :class="item.name === Cardsname ? 'sel' : ''"
          @click="changeCards(item.name)"
        >
          <span
            class="photo"
            :style="{
              backgroundImage: `url(${item.photo}) `,
            }"
          ></span>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <!-- 搜索框 -->
      <div class="resultListSearchInput-father">
        <div class="resultListSearchInput-son">
          模糊搜索
          <a-input-search
            v-model:value="searchValue"
            placeholder="请输入关键词"
            enter-button="搜索"
            size="large"
            @search="getAppResources"
            @change="onSearch"
            class="resultListSearchInput"
          />
          <button class="button-reset" @click="chongzhi()">重置</button>
          <div class="hengxian"></div>
        </div>
      </div>
      <!-- 分类 -->
      <div class="top-content-father" :key="listKey">
        <template
          v-if="
            Cardsname == '组件服务' ||
            Cardsname == '应用资源' ||
            Cardsname == ''
          "
        >
          <div class="top-content-son">
            <div
              v-for="(item, index) in ListContent.records"
              :key="index"
              class="top-content"
            >
              <span class="top-content-title">
                {{ item.name }}
              </span>
              <div
                class="leixingsumfather"
                :class="!item.shrinkFlag ? 'shrink' : ''"
              >
                <div
                  v-for="(item2, index2) in item.typeList"
                  :key="index2"
                  class="leixingsum"
                >
                  <a-checkable-tag
                    :checked="
                      item.selectedTags &&
                      item.selectedTags.indexOf(item2.dict_label) !== -1
                    "
                    @change="
                      (checked) => handleChange(item2, checked, item.name)
                    "
                  >
                    {{ item2.dict_label }}
                  </a-checkable-tag>
                </div>
              </div>
              <div
                class="shrinkTag"
                v-if="item.showShrink"
                :key="item.shrinkFlag"
              >
                <up-outlined
                  v-show="!item.shrinkFlag"
                  @click="changeShrink(item.name)"
                />
                <down-outlined
                  v-show="item.shrinkFlag"
                  @click="changeShrink(item.name)"
                />
              </div>
            </div>
            <!-- <div class="top-content" v-if="Cardsname == '组件服务'">
              <span class="top-content-title">共享条件</span>
              <div class="leixingsumfather">
                <div class="leixingsum">
                  <a-checkable-tag
                    :checked="tagFlag == '申请'"
                    @change="() => chagneTag('申请')"
                  >
                    申请
                  </a-checkable-tag>
                </div>
                <div class="leixingsum">
                  <a-checkable-tag
                    :checked="tagFlag == '免批申请'"
                    @change="() => chagneTag('免批申请')"
                  >
                    免批申请
                  </a-checkable-tag>
                </div>
              </div>
            </div> -->
          </div>
        </template>
      </div>
      <!-- 中心内容 -->
      <searchResultList
        v-show="resourceList.data && resourceList.data.length > 0"
        :key="listKey2"
        :resourceList="resourceList"
        :resourceTotal="resourceTotal"
        :select-cardsname="Cardsname"
      />
      <!-- 分页 -->
      <div class="pagination">
        <a-pagination
          v-if="resourceList.data && resourceList.data.length > 0"
          v-model:current="currentPage"
          v-model:pageSize="currentPageSize"
          show-size-changer
          show-less-items
          show-quick-jumper
          :total="resourceTotal"
          :page-size-options="pageSizeOptions"
          @change="pageChange"
          @showSizeChange="onShowSizeChange"
        />
      </div>
      <div
        v-if="resourceList.data && resourceList.data.length <= 0"
        style="margin-top: 200px"
      >
        <a-empty />
      </div>
    </div>
    <div class="top" v-else>
      <div class="top-title">
        <div
          v-for="item in titleName"
          :key="item.name"
          :class="item.name === Cardsname ? 'sel' : ''"
          @click="changeCards(item.name)"
        >
          <span
            class="photo"
            :style="{
              backgroundImage: `url(${item.photo}) `,
            }"
          ></span>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div class="resultListSearchInput-father" style="background: unset">
        <div class="resultListSearchInput-son">
          模糊搜索
          <a-input-search
            v-model:value="searchValue"
            placeholder="请输入关键词"
            enter-button="搜索"
            size="large"
            @search="getAppResources"
            @change="onSearch"
            class="resultListSearchInput"
          />
          <button class="button-reset" @click="chongzhi()">重置</button>
        </div>
      </div>
      <KnowledgeBase
        :resourceList="resourceList"
        :resourceTotal="resourceTotal"
      ></KnowledgeBase>
    </div>
    <div class="talk-monitor" @click="openMonitor">
      <a-tooltip>
        <template #title>问答机器人</template>
        <i></i>
      </a-tooltip>
    </div>
  </div>
  <!-- 包头 -->
  <div
    class="details-pageconetent"
    v-else-if="whoShow1 && whoShow1.itShowBaoTou"
  >
    <home-header></home-header>
    <div class="details-pageconetent-left">
      <detailsPageconetentTree />
    </div>
    <div class="top" v-if="Cardsname != '知识库' && Cardsname != '数据资源'">
      <div class="top-title">
        <div
          v-for="item in titleName"
          :key="item.name"
          :class="item.name === Cardsname ? 'sel' : ''"
          @click="changeCards(item.name)"
        >
          <span
            class="photo"
            :style="{
              backgroundImage: `url(${item.photo}) `,
              backgroundSize: 'cover',
            }"
          ></span>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div
        v-show="Cardsname !== '数据资源'"
        class="resultListSearchInput-father"
      >
        <div class="resultListSearchInput-son">
          模糊搜索
          <a-input-search
            v-model:value="searchValue"
            placeholder="请输入关键词"
            enter-button="搜索"
            size="large"
            @search="getAppResources"
            @change="onSearch"
            class="resultListSearchInput"
          />
          <button class="button-reset" @click="chongzhi()">重置</button>
          <div class="hengxian"></div>
        </div>
      </div>
      <div class="top-content-father" :key="listKey">
        <template
          v-if="
            Cardsname == '组件服务' ||
            Cardsname == '应用资源' ||
            Cardsname == ''
          "
        >
          <div class="top-content-son">
            <div
              v-for="(item, index) in ListContent.records"
              :key="index"
              class="top-content"
            >
              <span class="top-content-title">
                {{ item.name }}
              </span>
              <div
                class="leixingsumfather"
                :class="!item.shrinkFlag ? 'shrink' : ''"
              >
                <div
                  v-for="(item2, index2) in item.typeList"
                  :key="index2"
                  class="leixingsum"
                >
                  <a-checkable-tag
                    :checked="
                      item.selectedTags &&
                      item.selectedTags.indexOf(item2.dict_label) !== -1
                    "
                    @change="
                      (checked) => handleChange(item2, checked, item.name)
                    "
                  >
                    {{ item2.dict_label }}
                  </a-checkable-tag>
                </div>
              </div>
              <div
                class="shrinkTag"
                v-if="item.showShrink"
                :key="item.shrinkFlag"
              >
                <up-outlined
                  v-show="!item.shrinkFlag"
                  @click="changeShrink(item.name)"
                />
                <down-outlined
                  v-show="item.shrinkFlag"
                  @click="changeShrink(item.name)"
                />
              </div>
            </div>
            <!-- <div class="top-content" v-if="Cardsname == '组件服务'">
              <span class="top-content-title">共享条件</span>
              <div class="leixingsumfather">
                <div class="leixingsum">
                  <a-checkable-tag
                    :checked="tagFlag == '申请'"
                    @change="() => chagneTag('申请')"
                  >
                    申请
                  </a-checkable-tag>
                </div>
                <div class="leixingsum">
                  <a-checkable-tag
                    :checked="tagFlag == '免批申请'"
                    @change="() => chagneTag('免批申请')"
                  >
                    免批申请
                  </a-checkable-tag>
                </div>
              </div>
            </div> -->
          </div>
        </template>
      </div>
      <searchResultList
        v-show="resourceList.data && resourceList.data.length"
        :key="listKey2"
        :resourceList="resourceList"
        :resourceTotal="resourceTotal"
        :select-cardsname="Cardsname"
      />
      <div class="pagination">
        <a-pagination
          v-if="resourceList.data && resourceList.data.length > 0"
          v-model:current="currentPage"
          v-model:pageSize="currentPageSize"
          show-size-changer
          show-less-items
          show-quick-jumper
          :total="resourceTotal"
          :page-size-options="pageSizeOptions"
          @change="pageChange"
          @showSizeChange="onShowSizeChange"
        />
      </div>
      <div class="shujuziyuan" v-if="Cardsname == '数据资源'">
        <div class="yunziyuan">
          <div class="yunziyuan-title">
            <div class="tupian"></div>
            <div
              class="title"
              @click="dianjitiaozhaun('青岛市政务资源管理平台')"
            >
              青岛市政务资源管理平台{{ dataShowdev }}
            </div>
          </div>
          <div class="keyongziyuan">
            <div v-for="item in shujuziyuanqingkuang" :key="item">
              <div>{{ item.name }}</div>
              <div>{{ item.value }}</div>
              {{ item.danwei }}
            </div>
          </div>
          <div class="shuoming">
            说明：数据资源目前通过青岛市政务信息网进行申请
          </div>
        </div>
      </div>
      <div
        v-if="resourceList.data && resourceList.data.length <= 0"
        style="margin-top: 2rem"
      >
        <a-empty v-if="!(Cardsname == '数据资源')" />
      </div>
    </div>
    <div class="top" v-else-if="Cardsname == '数据资源'">
      <div class="top-title">
        <div
          v-for="item in titleName"
          :key="item.name"
          :class="item.name === Cardsname ? 'sel' : ''"
          @click="changeCards(item.name)"
        >
          <span
            class="photo"
            :style="{
              backgroundImage: `url(${item.photo}) `,
              backgroundSize: 'cover',
            }"
          ></span>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <details-page-resource></details-page-resource>
    </div>
    <div class="top" v-else>
      <div class="top-title">
        <div
          v-for="item in titleName"
          :key="item.name"
          :class="item.name === Cardsname ? 'sel' : ''"
          @click="changeCards(item.name)"
        >
          <span
            class="photo"
            :style="{
              backgroundImage: `url(${item.photo}) `,
              backgroundSize: 'cover',
            }"
          ></span>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div class="resultListSearchInput-father" style="background: unset">
        <div class="resultListSearchInput-son">
          模糊搜索
          <a-input-search
            v-model:value="searchValue"
            placeholder="请输入关键词"
            enter-button="搜索"
            size="large"
            @search="getAppResources"
            @change="onSearch"
            class="resultListSearchInput"
          />
          <button class="button-reset" @click="chongzhi()">重置</button>
        </div>
      </div>
      <KnowledgeBase
        :resourceList="resourceList"
        :resourceTotal="resourceTotal"
      ></KnowledgeBase>
    </div>
    <!--<div class="talk-monitor" @click="openMonitor">
      <a-tooltip>
        <template #title>问答机器人</template>
        <i></i>
      </a-tooltip>
    </div>-->
  </div>
  <home-footer></home-footer>
</template>
<script>
  import HomeFooter from '@/views/newHome/components/Footer'
  import mybus from '@/myplugins/mybus'
  import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
  import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
  import {
    selectDicStoreAll,
    pageWithAttrs,
    getDataResource,
    getIntegrationServicesList,
  } from '@/api/home.js'
  import { getSgcList } from '@/api/personalCenter'
  import { useRouter } from 'vue-router'
  import HomeHeader from '@/views/home/components/header'
  import detailsPageconetentTree from '@/views/home/detailsPageconetentTree.vue'
  import searchResultList from '@/views/home/components/searchResultList.vue'
  import KnowledgeBase from '@/views/home/components/KnowledgeBase.vue'
  // 数据资源引用
  import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
  // 基础设施引用
  import infrastructurePage from '@/views/home/infrastructurePage.vue'
  import detailsPageInfrastructureTree from '@/views/home/detailsPageInfrastructureTree.vue'
  import { message } from 'ant-design-vue'
  import {
    titleNameArray,
    keyongziyuanqingkaungArray,
    shujuziyuanqingkuangArray,
  } from './constantData/showData.js'

  export default defineComponent({
    setup() {
      const titleName = ref(titleNameArray)

      const openMonitor = () => {
        window.open('http://www.qingdao.gov.cn:8083/ghwd/znwdqd/index.html')
      }
      // 模糊查询
      const keyongziyuanqingkaung = ref(keyongziyuanqingkaungArray)
      const shujuziyuanqingkuang = ref(shujuziyuanqingkuangArray)

      // 西海岸数据资源页
      // const dataShowbt = ref(whoShow.itshow)
      // 青岛数据资源页
      const whoShow1 = ref(whoShow)
      // 分页
      const loading = ref(true)
      const currentPage = ref(1)
      const currentPageSize = ref(5)
      const pageSizeOptions = ref(['5', '10', '20', '50'])
      const router = useRouter()
      const select = router.currentRoute.value.query.select
      const str = router.currentRoute.value.query.str
      const searchValue = ref(str)
      let tecHnosphere = router.currentRoute.value.query.tecHnosphere
      let appLiCation = router.currentRoute.value.query.appLiCation
      const Cardsname = ref(select)
      // 刷新筛选条件组件
      let listKey = ref(0)
      // 刷新筛选列表信息组件
      const listKey2 = ref(0)
      // 储存筛选条件状态
      const state = reactive({
        selectedTags: [],
        diyici: [],
      })
      // 查询参数
      const paramsGetResources = {
        districtId: '',
        deptIds: [],
        pageNum: 1,
        pageSize: currentPageSize.value,
        type: Cardsname.value,
        name: '',
        infoList: [],
        orderField: 'total', // total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
        orderType: 'DESC', // ASC 升序  DESC 降序
      }

      // 查询
      const onSearch = () => {
        loading.value = true
        paramsGetResources.name = searchValue.value
        currentPage.value = 1
      }
      // 免批
      const tagFlag = ref('')
      // 视频资源
      const stateTags = ref(['在线', '离线'])
      const selStateTags = ref([])
      const handleChangeStateTag = (tag, checked) => {
        loading.value = true
        paramsGetResources.pageNum = 1
        currentPage.value = 1
        paramsGetResources.infoList = paramsGetResources.infoList.filter(
          (item) => item.attrType !== 'status'
        )
        if (checked) {
          selStateTags.value = [tag]
          paramsGetResources.infoList.push({
            attrType: 'status',
            attrValue: tag == '在线' ? 1 : 0,
          })
        } else {
          selStateTags.value = selStateTags.value.filter((t) => t !== tag)
        }
        getAppResources()
        console.log(tag, checked)
      }
      const selBqTags = ref([])
      const handleChangeBqTags = (tag, checked) => {
        loading.value = true
        paramsGetResources.pageNum = 1
        currentPage.value = 1
        paramsGetResources.infoList = paramsGetResources.infoList.filter(
          (item) => item.attrType !== 'labelName'
        )
        if (checked) {
          selBqTags.value = [tag]
          paramsGetResources.infoList.push({
            attrType: 'labelName',
            attrValue: tag,
          })
        } else {
          selBqTags.value = selBqTags.value.filter((t) => t !== tag)
        }
        getAppResources()
      }
      const current = ref(5)
      const chagneTag = (name) => {
        paramsGetResources.pageNum = 1
        currentPage.value = 1
        if (tagFlag.value == name) {
          tagFlag.value = ''
          paramsGetResources.shareCondition = ''
        } else {
          tagFlag.value = name
          paramsGetResources.shareCondition = name
        }
        listKey.value++
        getAppResources()
      }

      // 重置数据
      const chongzhi = () => {
        loading.value = true
        // 重置模糊查字段
        searchValue.value = ''
        paramsGetResources.name = searchValue.value
        // 重置筛选条件
        ListContent.records.forEach((val) => {
          val.selectedTags = []
        })
        // 分页
        currentPage.value = 1
        currentPageSize.value = 5
        // 重置查询条件
        paramsGetResources.districtId = ''
        paramsGetResources.deptIds = []
        paramsGetResources.pageNum = 1
        paramsGetResources.pageSize = 5
        paramsGetResources.name = ''
        paramsGetResources.shareCondition = ''
        paramsGetResources.infoList = []
        paramsGetResources.orderField = 'total'
        paramsGetResources.orderType = 'DESC'
        mybus.emit('chongzhi')
        getAppResources()
      }

      //跳转链接
      function dianjitiaozhaun(name) {
        switch (name) {
          case '青岛市政务资源管理平台':
            window.open('http://15.72.158.81/web/root/homepage.aspx')
            console.log('name', name)
            break
          case '青岛市视频资源管理平台':
            window.open('http://15.72.183.88:8760/yzy/main')
            console.log('name', name)
            break
        }
      }

      // 点击筛选条件回调
      const handleChange = (tag, checked, name) => {
        loading.value = true
        paramsGetResources.pageNum = 1
        currentPage.value = 1
        console.log('点击筛选条件=================>', tag, checked, name)
        ListContent.records.forEach((val) => {
          if (val.name === name) {
            paramsGetResources.infoList = paramsGetResources.infoList.filter(
              (item) => item.attrType !== name
            )
            if (val.selectedTags.indexOf(tag.dict_label) == -1) {
              val.selectedTags = [tag.dict_label]
              paramsGetResources.infoList.push({
                attrType: name,
                attrValue: tag.dict_label,
              })
            } else {
              val.selectedTags.splice(
                val.selectedTags.indexOf(tag.dict_label),
                1
              )
            }
          }
        })
        listKey.value++
        getAppResources()
      }
      const getNewList = () => {
        tecHnosphere = router.currentRoute.value.query.tecHnosphere
        appLiCation = router.currentRoute.value.query.appLiCation
        const params = {
          topCategoryName: Cardsname.value,
        }
        selectDicStoreAll(params).then((res) => {
          console.log('selectDicStoreAll============>', res)
          const { data } = res.data
          ListContent.records = []
          ListContent.records = data
          tecHnosphere = router.currentRoute.value.query.tecHnosphere
          appLiCation = router.currentRoute.value.query.appLiCation
          mybus.emit('getDeptList')
          ListContent.records.forEach((val) => {
            val.selectedTags = []
            if (val.name == '应用领域' && appLiCation) {
              val.selectedTags[0] = []
              val.selectedTags[0] = appLiCation
              paramsGetResources.infoList.push({
                attrType: '应用领域',
                attrValue: appLiCation,
              })
              if (searchValue.value) {
                paramsGetResources.name = searchValue.value
              }
              pageWithAttrs(paramsGetResources).then((res) => {
                resourceList.data = []
                resourceList.data = res.data.data.records || []
                resourceTotal.value = res.data.data.total || ''
              })
            }
            tecHnosphere = router.currentRoute.value.query.tecHnosphere
            appLiCation = router.currentRoute.value.query.appLiCation
            if (val.name == '技术领域' && tecHnosphere) {
              val.selectedTags[1] = tecHnosphere
              paramsGetResources.infoList.push({
                attrType: '技术领域',
                attrValue: tecHnosphere,
              })
              if (searchValue.value) {
                paramsGetResources.name = searchValue.value
              }
              pageWithAttrs(paramsGetResources).then((res) => {
                resourceList.data = []
                resourceList.data = res.data.data.records || []
                resourceTotal.value = res.data.data.total || ''
              })
              console.log('paramsGetResources', paramsGetResources)
            }
            tecHnosphere = router.currentRoute.value.query.tecHnosphere
            appLiCation = router.currentRoute.value.query.appLiCation
            if (val.typeList && val.typeList.length > 8) {
              val.showShrink = true
              val.shrinkFlag = true
            }
          })
          listKey.value++
          listKey2.value++
        })
        console.log('selectDicStoreAll', ListContent)
      }
      // 筛选条件
      let ListContent = reactive({
        records: [],
      })
      const resourceList = reactive({ data: [] })
      const videoList = reactive({ data: [] })
      const resourceTotal = ref('')
      const getAppResources = (switchIndex) => {
        //switchIndex这个参数是下面的分页传过来的参数
        paramsGetResources.name = searchValue.value
        paramsGetResources.type = Cardsname.value
        console.log(
          '执行getAppResources====================》',
          paramsGetResources
        )
        if (
          !whoShow1.value.itShowBaoTou &&
          paramsGetResources.type === '数据资源'
        ) {
          if (switchIndex != '分页查询') {
            paramsGetResources.pageNum = 1
          }
          let dataResourceParams = {
            serviceName: paramsGetResources.name || '', //资源名称
            orderField: whoShow1.value.itShowQingDao
              ? paramsGetResources.orderField == 'applyCount'
                ? 'syqk'
                : 'fbrq'
              : paramsGetResources.orderField == 'applyCount'
              ? 'requestCount'
              : 'createTime', //排序字段
            orderType: paramsGetResources.orderType.toLowerCase(), //排序方式：desc，asc
            pageNum: paramsGetResources.pageNum, //页码
            pageSize: paramsGetResources.pageSize, //分页大小
          }
          getDataResource(dataResourceParams).then((res) => {
            if (whoShow1.value.itShowQingDao) {
              res.data.data.data.forEach((val) => {
                val.id = val.guid // id
                val.name = val.zyname // 名字
                val.sjlCount = val.sjcczl // 数据量
                val.applyCount = val.syqk // 申请量
                val.deptName = val.TGBM // 部门
                val.createDate = val.fbrq // 发布时间
              })
              resourceList.data = res.data.data.data || []
              resourceTotal.value = res.data.data.rows || ''
              loading.value = false
            } else if (whoShow1.value.itShowXiHaiAn) {
              res.data.data.list.forEach((val) => {
                val.id = val.serviceId // id
                val.name = val.serviceName // 名字
                val.sjlCount = val.requestQuantity // 数据量
                val.applyCount = val.requestCount // 申请量
                val.deptName = val.departmentName // 部门
                val.createTime = val.createTime.split('.')[0]
                val.createDate = val.createTime // 发布时间
              })
              resourceList.data = res.data.data.list || []
              resourceTotal.value = res.data.data.total || ''
              loading.value = false
            }
          })
        } else if (paramsGetResources.type !== '数据资源') {
          if (switchIndex != '分页查询') {
            paramsGetResources.pageNum = 1
          }
          pageWithAttrs(paramsGetResources).then((res) => {
            console.log('查询列表============>', resourceList, res.data.data)
            resourceList.data = []
            videoList.data = []
            if (Cardsname.value === '基础设施') {
              resourceList.data = res.data.data.records || []
              resourceTotal.value = res.data.data.total || ''
              loading.value = false
            } else {
              resourceTotal.value = res.data.data.total || ''
              getShoppingCartList(res.data.data.records)
            }
          })
        }
      }

      let shoppingCartList = ref([])
      // 获取申购车列表
      const getShoppingCartList = (list) => {
        getSgcList({
          pageNum: 1,
          pageSize: 500,
          name: '',
          type: '',
        }).then((res) => {
          console.log('申购车列表================>', res.data.data.records)
          shoppingCartList.value = res.data.data.records
          list.map((item) => {
            item.isInShoppingCart = false
            item.isInShoppingCart = shoppingCartList.value.some((item2) => {
              return item.id === item2.resourceId
            })
          })
          console.log('经过过滤后的列表信息', list)
          resourceList.data = list
        })
      }
      mybus.on('paramsGetResources', (ids) => {
        if (ids && ids.length > 0) {
          paramsGetResources.deptIds = ids
        } else {
          delete paramsGetResources.deptIds
        }
        getAppResources()
        console.log('paramsGetResources', paramsGetResources)
      })
      mybus.on('changePage', (page) => {
        paramsGetResources.pageNum = page
        console.log('changePage', paramsGetResources.pageNum)
        getAppResources('分页查询')
        console.log('paramsGetResources', paramsGetResources)
      })
      mybus.on('changeSelcted', () => {
        getAppResources()
      })
      mybus.on('changeInfo', (info) => {
        paramsGetResources.pageNum = 1
        console.log('paramsGetResources.infoList', paramsGetResources.infoList)
        paramsGetResources.infoList = paramsGetResources.infoList.filter(
          (item) => item.attrType !== '文件类型'
        )
        if (info) {
          paramsGetResources.infoList.push(info)
        }
        getAppResources()
        console.log('paramsGetResources', paramsGetResources)
      })
      mybus.on('refresh', () => {
        paramsGetResources.pageNum = 1
        currentPage.value = 1
        getAppResources()
      })
      mybus.on('changeCondition', (condition) => {
        //  orderField: 'total' total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
        // orderType: 'ASC'  ASC 升序  DESC 降序
        paramsGetResources.orderField = condition.orderField
        paramsGetResources.orderType = condition.orderType
        getAppResources()
        console.log('paramsGetResources', paramsGetResources)
      })
      const pageChange = (val) => {
        console.log(val)
        loading.value = true
        currentPage.value = val
        paramsGetResources.pageNum = val
        let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
        getAppResources(params)
      }

      onMounted(() => {
        listKey2.value++

        // 获取筛选条件
        getNewList()

        if (!tecHnosphere && !appLiCation) {
          getAppResources()
        }
      })
      // 全部申请
      const applyAll = () => {
        router.push({
          path: '/apply',
          query: {
            applyAll: true,
          },
        })
      }
      // 分页
      const onShowSizeChange = (current, pageSize) => {
        currentPage.value = current
        currentPageSize.value = pageSize
        paramsGetResources.pageNum = current
        paramsGetResources.pageSize = pageSize
        console.log('执行onShowSizeChange', paramsGetResources)
        getAppResources()
      }
      watch(currentPageSize, () => {
        console.log('pageSize', currentPageSize.value)
      })

      const changeShrink = (name) => {
        ListContent.records.forEach((val) => {
          if (val.name === name) {
            console.log(val)
            val.shrinkFlag = !val.shrinkFlag
          }
        })
      }
      const changeCards = (name) => {
        resourceList.data = []
        videoList.data = []
        resourceTotal.value = ''
        router.currentRoute.value.query.tecHnosphere = ''
        router.currentRoute.value.query.appLiCation = ''
        tecHnosphere = router.currentRoute.value.query.tecHnosphere
        appLiCation = router.currentRoute.value.query.appLiCation
        let newQuery = JSON.parse(
          JSON.stringify(router.currentRoute.value.query)
        )
        Cardsname.value = name
        console.log(
          '更改前url中的select=====================>',
          router.currentRoute.value.query.select
        )
        newQuery.select = Cardsname.value
        router
          .replace({
            query: newQuery,
          })
          .then(() => {
            console.log(
              '更改后url中的select=====================>',
              router.currentRoute.value.query.select
            )
            // router.currentRoute.value.query.select
            tagFlag.value = false
            chongzhi()
            getNewList()
          })
      }
      // 监听地址栏变化
      window.addEventListener('hashchange', () => {
        location.reload()
        console.log('URL发生变化了')
      })
      return {
        listKey,
        ListContent,
        searchValue,
        currentPage,
        ...toRefs(state),
        changeCards,
        handleChange,
        resourceList,
        videoList,
        resourceTotal,
        pageChange,
        listKey2,
        Cardsname,
        getNewList,
        getAppResources,
        chongzhi,
        onSearch,
        onShowSizeChange,
        currentPageSize,
        pageSizeOptions,
        changeShrink,
        titleName,
        keyongziyuanqingkaung,
        shujuziyuanqingkuang,
        dianjitiaozhaun,
        chagneTag,
        tagFlag,
        current,
        openMonitor,
        stateTags,
        selStateTags,
        handleChangeStateTag,
        // bqTags,
        selBqTags,
        handleChangeBqTags,
        loading,
        getShoppingCartList,
        whoShow1,
        applyAll,
      }
    },
    components: {
      HomeHeader,
      HomeFooter,
      detailsPageconetentTree,
      searchResultList,
      UpOutlined,
      DownOutlined,
      KnowledgeBase,
      // VideoCameraOutlined,
      // VideoSurveillance,
      DetailsPageResource,
      infrastructurePage,
      detailsPageInfrastructureTree,
    },
    beforeUnmount() {
      mybus.off('selectCardsitem')
      mybus.off('paramsGetResources')
      mybus.off('changeCondition')
      mybus.off('refresh')
      mybus.off('changePage')
      mybus.off('changeInfo')
    },
  })
</script>
<style lang="less" scoped>
  .resultListSearchInput-father {
    background: #f3f5f9;
    padding: 0.2rem;

    // padding-left: 0.2rem;
    // padding-top: 0.2rem;
    .resultListSearchInput-son {
      background: #fff;
      padding: 0.2rem 0.2rem 0rem 0.3rem;

      .hengxian {
        width: 100%;
        height: 0.01rem;
        background: rgba(150, 144, 144, 0.3);
        margin-top: 0.2rem;
      }
    }
  }

  .resultListSearchInput {
    margin-left: 0.1rem;

    :deep(.ant-input) {
      width: 4rem;
      height: 0.36rem;
      background: #fff;
      border-radius: 0.04rem;
    }

    :deep(.ant-input-search-button) {
      width: 0.8rem;
      height: 0.36rem;
      background: #0087ff;
      border-radius: 0.04rem !important;
      font-size: 0.14rem;
      font-weight: 400;
      color: #fff;
      line-height: 0.34rem;
      margin-left: 0.1rem;
    }

    :deep(.ant-input-group-addon) {
      left: 0 !important;
    }
  }

  .button-reset {
    border: 0;
    outline: none;
    width: 0.8rem;
    height: 0.36rem;
    background: #e1edfa;
    border-radius: 0.04rem;
    font-size: 0.14rem;
    font-weight: 400;
    color: #0087ff;
    line-height: 0.34rem;
    margin-left: 2.5rem;
    cursor: pointer;
  }

  .details-pageconetent {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.67rem;
    position: relative;
    background: rgba(245, 243, 243, 0.3);

    .details-pageconetent-left {
      max-height: 6.9rem;
      position: absolute;
      width: 2.5rem;
      top: 0.17rem;
      left: 2.5rem;
      margin-right: 0.17rem;
      overflow: auto;
    }

    .top {
      min-height: 7.2rem;
      position: relative;
      width: 11.5rem;
      display: flex;
      padding-top: 0.2rem;
      flex-direction: column;
      font-size: 0.16rem;
      justify-content: left;
      margin-left: 2.5rem;
      background: #f3f5f9;

      .pagination {
        background: #f3f5f9;
        padding-bottom: 0.6rem;
      }

      .jichusheshi {
        height: 4.45rem;

        .yunziyuan {
          width: 100%;
          position: relative;

          .shuoming {
            position: absolute;
            right: 0.2rem;
            top: 0.15rem;
            font-size: 0.12rem;
          }

          .yunziyuan-title {
            display: flex;
            align-items: center;

            .tupian {
            }

            .title {
              margin-left: 0.1rem;
              font-weight: 600;
              text-decoration: underline;
              cursor: pointer;
            }
          }

          .fenlei {
            display: flex;
            margin-left: 0.2rem;
            margin-right: 0.3rem;
            justify-content: space-between;
          }

          .keyongziyuan {
            display: flex;
            justify-content: space-between;
            margin-left: 0.3rem;
            margin-right: 0.3rem;

            div {
              display: flex;

              div:last-child {
                font-weight: 600;
              }
            }
          }
        }

        .yunziyuan > div {
          margin-bottom: 0.1rem;
        }

        .shipin {
          width: 100%;

          .shipin-title {
            display: flex;
            align-items: center;

            .tupian {
            }

            .title {
              margin-left: 0.1rem;
              font-weight: 600;
              text-decoration: underline;
              cursor: pointer;
            }
          }

          .fenlei {
            display: flex;
            margin-left: 0.2rem;

            div {
              margin-right: 0.6rem;
            }

            .shuzi {
              font-weight: 600;
            }
          }
        }

        .shipin > div {
          margin-bottom: 0.1rem;
        }
      }

      .jichusheshi > div {
        padding-top: 0.1rem;
        border-radius: 0.04rem;
        margin-bottom: 0.2rem;
        padding-bottom: 0.4rem;
      }

      .shujuziyuan {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 0.4rem;

        .yunziyuan {
          width: 100%;
          position: relative;

          .shuoming {
            position: absolute;
            right: 0.2rem;
            top: 0.15rem;
            font-size: 0.12rem;
          }

          .yunziyuan-title {
            display: flex;
            align-items: center;
            margin-left: 0.2rem;

            .tupian {
            }

            .title {
              margin-left: 0.1rem;
              font-weight: 600;
              text-decoration: underline;
              cursor: pointer;
            }
          }

          .fenlei {
            display: flex;
            margin-left: 0.2rem;
            margin-right: 0.3rem;
            justify-content: space-between;
          }

          .keyongziyuan {
            display: flex;
            justify-content: space-between;
            margin-left: 0.3rem;
            margin-right: 0.3rem;

            div {
              display: flex;

              div:last-child {
                font-weight: 600;
              }
            }
          }
        }

        .yunziyuan > div {
          margin-bottom: 0.1rem;
        }
      }

      .shujuziyuan > div {
        background: #eaf4ff;
        padding-top: 0.1rem;
        border-radius: 0.04rem;
        margin-bottom: 0.2rem;
        padding-bottom: 0.4rem;
      }

      .top-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.2rem;
        font-family: 'Alibaba PuHuiTi';
        color: #000000;
        line-height: 0.34rem;

        .photo {
          display: inline-block;
          height: 0.44rem;
          width: 0.44rem;
          margin-right: 0.1rem;
        }

        div {
          margin: 0 0.2rem;
          padding: 0 0.1rem;
          cursor: pointer;
          display: flex;
          align-items: center;
        }

        div:hover {
          color: #0087ff;
        }

        .sel {
          font-weight: 600;
          color: #0087ff;
          border-bottom: 0.02rem solid #0087ff;
        }
      }

      .top-content-father {
        width: 100%;
        padding: 0 0.2rem 0.2rem 0.2rem;
        background: #f3f5f9;
        margin-bottom: 0.2rem;

        .top-content-son {
          background: #fff;
          padding: 0.2rem 0;
        }

        .top-content {
          display: flex;
          margin-top: 0rem;

          span:nth-child(1) {
            display: inline-block;
            position: relative;
            line-height: 0.3614rem;
            white-space: normal;
            text-align: center;
            vertical-align: middle;
          }

          .leixingsumfather {
            width: 8.1rem;
            display: inline-block;
            height: 0.3014rem;
            overflow: hidden;
          }

          .leixingsumfather2 {
            width: 9.2rem;
          }

          .leixingsum {
            display: inline-block;
            cursor: pointer;
            text-align: center;
            margin-top: 0.05rem;

            .ant-tag-checkable {
              width: 0.83rem;
              height: 0.25rem;
              display: flex;
              justify-content: center;
              align-items: center;
              padding-left: 0.05rem;
              padding-right: 0.05rem;
              float: left;
              margin: 0 0.15rem;
              font-family: 'AlibabaPuHuiTiR';
              font-size: 0.14rem;
              color: #333333;
              font-weight: 500;
              text-align: center;
              line-height: 0.14rem;
            }

            :deep(.ant-tag-checkable-checked) {
              margin-left: 0.15rem;
              margin-right: 0.15rem;
              text-align: center;
            }

            .ant-tag-checkable:active,
            .ant-tag-checkable-checked {
              width: 0.85rem;
              font-family: 'Alibaba PuHuiTi';
              font-weight: 500;
              background-color: #0087ff;
              color: #ffffff;
              border-radius: 0.16rem;
            }
          }

          .active {
            font-family: Alibaba PuHuiTi;
            font-weight: 500;
            background-color: #0087ff;
            color: #ffffff;
          }
        }

        .top-content:nth-child(1) {
          margin-top: 0rem !important;
        }
      }
    }
  }

  .shrinkTag {
    width: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 0.05rem;

    span {
      cursor: pointer;
    }
  }

  .shrink {
    height: unset !important;
    overflow: unset !important;
  }

  .talk-monitor {
    position: fixed;
    bottom: 0.5rem;
    right: 0.1rem;
    z-index: 9999;
    cursor: pointer;

    i {
      width: 0.64rem;
      height: 0.64rem;
      display: inline-block;
      background: url('~@/assets/home/icon-talk.png');
      background-size: cover;
    }
  }

  .top-content-father {
    width: 10.87rem;
    padding-left: 0.2rem;

    // margin-bottom: .2rem;
    .top-content {
      display: flex;
      margin-top: 0.23rem;

      span:nth-child(1) {
        display: inline-block;
        position: relative;
        width: 0.68rem;
        font-weight: 600;
        white-space: normal;
        text-align: center;
        vertical-align: middle;
        font-size: 0.16rem;
        margin-left: 0.3rem;
      }

      // .top-content-title {
      //   top: -0.2rem;
      // }
      .leixingsumfather {
        width: 7.7rem;
        display: inline-block;
        height: 0.3014rem;
        overflow: hidden;
        // width: 7.18rem;
      }

      .leixingsum {
        width: 0.93rem;
        display: inline-block;
        cursor: pointer;
        text-align: center;
        margin-top: 0.05rem;

        // margin-bottom: .1rem;
        .ant-tag-checkable {
          width: 0.85rem;
          height: 0.25rem;
          display: flex;
          justify-content: center;
          align-items: center;
          padding-left: 0.05rem;
          padding-right: 0.05rem;
          float: left;
          margin: 0 0.15rem;
          font-family: 'AlibabaPuHuiTiR';
          font-size: 0.14rem;
          color: #333333;
          font-weight: 500;
          text-align: center;
          line-height: 0.14rem;
        }

        :deep(.ant-tag-checkable-checked) {
          // width: .67rem;
          margin-left: 0.15rem;
          margin-right: 0.15rem;
          text-align: center;
        }

        .ant-tag-checkable:active,
        .ant-tag-checkable-checked {
          width: 0.85rem;
          font-family: 'Alibaba PuHuiTi';
          font-weight: 500;
          background-color: #0087ff;
          color: #ffffff;
          border-radius: 0.16rem;
        }
      }

      .active {
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        background-color: #0087ff;
        color: #ffffff;
      }
    }

    .top-content:nth-child(1) {
      margin-top: 0.41rem !important;
    }
  }

  :deep(.ant-card-grid) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
  }
</style>