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 v-show="flag != '6'" />
    </div>
    <div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
      <div class="resultListSearchInput-father">
        <div class="resultListSearchInput-son">
          模糊搜索
          <a-input-search
            v-model:value="searchValue"
            placeholder="请输入关键词"
            enter-button="搜索"
            size="large"
            @search="getAppResources2"
            @change="onSearch"
            class="resultListSearchInput"
          />
          <button class="button-reset" @click="chongzhi()">重置</button>
          <button
            class="button-reset"
            style="margin-left: 0.1rem"
            @click="globalSearch()"
          >
            全局搜索
          </button>
          <button
            v-if="Cardsname == '应用资源'"
            class="button-reset"
            @click="applyAll()"
            style="margin-left: 0.1rem"
          >
            全部申请
          </button>
          <div class="hengxian" style="background: transparent"></div>
        </div>
      </div>
      <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 v-if="globalData.data.length > 0">
            {{
              item.name +
              '(' +
              (globalData.data.filter((val) => val.type === item.name)[0]
                .count || '0') +
              ')'
            }}
          </span>
          <span v-else>
            {{ item.name }}
          </span>
        </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>
        </template>
      </div>
      <searchResultList
        v-show="resourceList.data && resourceList.data.length > 0"
        :resourceList="resourceList"
        :key="listKey2"
        :resourceTotal="resourceTotal"
        :select-cardsname="Cardsname"
        @saveSearchCodition="saveSearchCodition"
        ref="searchResultListDom"
      />
      <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="resultListSearchInput-father">
        <div class="resultListSearchInput-son">
          模糊搜索
          <a-input-search
            v-model:value="searchValue"
            placeholder="请输入关键词"
            enter-button="搜索"
            size="large"
            @search="getAppResources2"
            @change="onSearch"
            class="resultListSearchInput"
          />
          <button class="button-reset" @click="chongzhi()">重置</button>
          <button
            class="button-reset"
            style="margin-left: 0.1rem"
            @click="globalSearch()"
          >
            全局搜索
          </button>
          <div class="hengxian" style="background: transparent"></div>
        </div>
      </div>
      <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 v-if="globalData.data.length > 0">
            {{
              item.name +
              '(' +
              (globalData.data.filter((val) => val.type === item.name)[0]
                .count || '0') +
              ')'
            }}
          </span>
          <span v-else>
            {{ item.name }}
          </span>
        </div>
      </div>
      <div class="top-content-father">
        <infrastructurePage
          ref="camera"
          @add="handleAdd"
          :searchValue="searchValue"
        />
      </div>
    </div>
    <div class="top" v-else>
      <div class="resultListSearchInput-father">
        <div class="resultListSearchInput-son">
          模糊搜索
          <a-input-search
            v-model:value="searchValue"
            placeholder="请输入关键词"
            enter-button="搜索"
            size="large"
            @search="getAppResources2"
            @change="onSearch"
            class="resultListSearchInput"
          />
          <button class="button-reset" @click="chongzhi()">重置</button>
          <button
            class="button-reset"
            style="margin-left: 0.1rem"
            @click="globalSearch()"
          >
            全局搜索
          </button>
          <div class="hengxian" style="background: transparent"></div>
        </div>
      </div>
      <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 v-if="globalData.data.length > 0">
            {{
              item.name +
              '(' +
              (globalData.data.filter((val) => val.type === item.name)[0]
                .count || '0') +
              ')'
            }}
          </span>
          <span v-else>
            {{ item.name }}
          </span>
        </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 @click="showAbilitySquare" class="abilitySquare">
      <p></p>
      <p>能力广场</p>
      <ul v-show="visibleAbilitySquare">
        <li
          v-for="item in abilitySquare"
          :key="item"
          @click="abilitySquareFunction(item)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
  <!-- 西海岸 -->
  <div
    class="details-pageconetent"
    v-else-if="whoShow1 && whoShow1.itShowXiHaiAn"
  >
    <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>
          <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>
        </template>
      </div>
      <searchResultList
        v-show="resourceList.data && resourceList.data.length > 0"
        :key="listKey2"
        :resourceList="resourceList"
        :resourceTotal="resourceTotal"
        :select-cardsname="Cardsname"
        @saveSearchCodition="saveSearchCodition"
        ref="searchResultListDom"
      />
      <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
          ref="camera"
          :searchValue="searchValue"
          :searchType="searchType"
        />
      </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.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">
        <!-- todo -->
        <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>
        </template>
      </div>
      <searchResultList
        v-show="resourceList.data && resourceList.data.length"
        :key="listKey2"
        :resourceList="resourceList"
        :resourceTotal="resourceTotal"
        :select-cardsname="Cardsname"
        @saveSearchCodition="saveSearchCodition"
        ref="searchResultListDom"
      />
      <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>
  <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,
    nextTick,
  } from 'vue'
  import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
  import {
    selectDicStoreAll,
    pageWithAttrs,
    getDataResource,
    getCountByFuzzyQuery,
  } 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 { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
  import { useStore } from 'vuex'
  import { message } from 'ant-design-vue'
  import {
    titleNameArray,
    keyongziyuanqingkaungArray,
    shujuziyuanqingkuangArray,
  } from './constantData/showData.js'
  export default defineComponent({
    beforeRouteLeave(to, from, next) {
      console.log('to---DetailsPageconetent--beforeRouteLeave------->', to)
      console.log('from---DetailsPageconetent--beforeRouteLeave------->', from)
      console.log('next---DetailsPageconetent--beforeRouteLeave------->', next)
      if (to.name !== 'details') {
        localStorage.removeItem('DetailsPageconetent')
      }
      next()
    },
    setup() {
      //会议室传的标识6
      const flag = ref('')
      let componentTypeArray = ['组件类型', '应用领域']
      const handleAdd = (value) => {
        flag.value = value
      }
      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 whoShow1 = ref(whoShow)
      // 分页
      const loading = ref(true)
      let currentPage = ref(1)
      let currentPageSize = ref(5)
      const pageSizeOptions = ref(['5', '10', '20', '50'])
      const router = useRouter()
      let select =
        router.currentRoute.value.query.select ||
        DETAIL_PAGE_CONTENT_DEFAULT_TAB
      console.log('select------------>', select)
      // 例如：组件服务是大类型，selectSubType是组件服务的智能算法或图层服务等...
      const selectSubType = router.currentRoute.value.query.type || ''
      const queryName = ref('')
      const str = router.currentRoute.value.query.str
      const searchValue = ref(str)
      const searchType = 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: [],
      })
      // 查询参数
      let paramsGetResources = {
        districtId: '',
        deptIds: [],
        pageNum: 1,
        pageSize: currentPageSize.value,
        type: Cardsname.value,
        name: '',
        infoList: [],
        orderField: '', // 传空为默认排序 total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
        orderType: 'DESC', // ASC 升序  DESC 降序
      }
      const store = useStore()
      // 用户信息
      const user = ref({
        username: store.getters['user/username'],
        realName: store.getters['user/realName'],
      })
      const searchResultListDom = ref(null)
      // 读取本地存储查询条件
      let storageSearchInfo = null
      const handleSetSearchData = () => {
        if (localStorage.getItem('DetailsPageconetent')) {
          storageSearchInfo = JSON.parse(
            localStorage.getItem('DetailsPageconetent')
          )
        }
        console.log('storageSearchInfo------------>', storageSearchInfo)
        // 读取本地存储：表单赋值
        if (storageSearchInfo) {
          paramsGetResources = Object.assign(
            {},
            paramsGetResources,
            storageSearchInfo
          )
          // 搜索名称
          searchValue.value = storageSearchInfo.name
          currentPage.value = storageSearchInfo.pageNum
          currentPageSize.value = storageSearchInfo.pageSize
          paramsGetResources.pageNum = storageSearchInfo.pageNum
          paramsGetResources.pageSize = storageSearchInfo.pageSize
          paramsGetResources.deptIds = storageSearchInfo.deptIds
          paramsGetResources.districtId = storageSearchInfo.districtId
          // 延迟使用，因为还没有返回跟挂载
          nextTick(() => {
            searchResultListDom.value.changeCondition(
              {
                value: storageSearchInfo.orderField,
                orderType: storageSearchInfo.orderType,
              },
              true
            )
          })
        }
      }
      //西海岸查询参数
      let paramsGetResources2 = ref({
        regionId: '70be8c5b664f4bcf869d82f2e8335051',
        pageNum: 1,
        pageSize: currentPageSize.value,
        name: '',
      })
      // 查询
      const onSearch = () => {
        loading.value = true
        paramsGetResources.name = searchValue.value
        currentPage.value = 1
      }
      // 免批
      const tagFlag = ref('')
      const current = ref(5)
      const chagneTag = (name) => {
        console.log('name----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()
        console.log(
          'paramsGetResources-----chagneTag------->',
          paramsGetResources
        )
      }
      // 重置数据
      const chongzhi = (flag) => {
        loading.value = true
        // 重置模糊查字段
        if (!flag) {
          searchValue.value = ''
          globalFlag.value = false
          globalData.data = []
        }
        paramsGetResources.name = searchValue.value
        // 重置筛选条件
        ListContent.records.forEach((val) => {
          val.selectedTags = []
        })
        // 分页
        currentPage.value = 1
        currentPageSize.value = 5
        // 重置查询条件
        paramsGetResources2.value = {
          regionId: '70be8c5b664f4bcf869d82f2e8335051',
          pageNum: 1,
          pageSize: currentPageSize.value,
          name: '',
        }
        paramsGetResources.districtId = ''
        paramsGetResources.deptIds = []
        paramsGetResources.pageNum = 1
        paramsGetResources.pageSize = 5
        paramsGetResources.name = ''
        paramsGetResources.shareCondition = ''
        paramsGetResources.infoList = []
        paramsGetResources.orderField = ''
        paramsGetResources.orderType = 'DESC'
        mybus.emit('chongzhi')
        console.log(
          'paramsGetResources---chongzhi-重置-------->',
          paramsGetResources
        )
        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)
        // 西海岸-智能算法 特殊处理
        if (whoShow1.value.itShowXiHaiAn) {
          if (tag.dict_label == '智能算法' && checked) {
            if (ListContentCopy.value[2]) {
              ListContent.records.splice(2, 1, ListContentCopy.value[2])
            }
          } else {
            if (name == '组件类型') {
              ListContent.records.splice(2, 1)
              paramsGetResources.infoList = paramsGetResources.infoList.filter(
                (item) => componentTypeArray.includes(item.attrType)
              )
            }
          }
        }
        ListContent.records.forEach((val) => {
          if (!val) {
            return
          }
          if (val.name === name) {
            paramsGetResources.infoList = paramsGetResources.infoList.filter(
              (item) => item.attrType !== name
            )
            if (
              val.selectedTags &&
              val.selectedTags.indexOf(tag.dict_label) == -1
            ) {
              val.selectedTags = [tag.dict_label]
              paramsGetResources.infoList.push({
                attrType: name,
                attrValue: tag.dict_label,
              })
            } else {
              val.selectedTags &&
                val.selectedTags.splice(
                  val.selectedTags.indexOf(tag.dict_label),
                  1
                )
            }
            // 西海岸-智能算法 特殊处理
            if (whoShow1.value.itShowXiHaiAn) {
              if (
                (val.selectedTags.length == 0 &&
                  tag.dict_label == '智能算法' &&
                  !checked) ||
                (tag.dict_label !== '智能算法' && name == '组件类型')
              ) {
                if (ListContentCopy.value[2]) {
                  ListContentCopy.value[2].selectedTags = []
                }
              }
            }
          }
        })
        listKey.value++
        console.log(
          'paramsGetResources---handleChange--------->',
          paramsGetResources
        )
        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
          let dataCopy = data
          tecHnosphere = router.currentRoute.value.query.tecHnosphere
          appLiCation = router.currentRoute.value.query.appLiCation
          mybus.emit('getDeptList')
          dataCopy.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
            }
            if (storageSearchInfo) {
              let obj = (storageSearchInfo.infoList || []).find(
                (x) => x.attrType === val.name
              )
              if (obj) {
                val.selectedTags = [obj.attrValue] || []
              }
            }
          })
          ListContentCopy.value = []
          ListContentCopy.value = JSON.parse(JSON.stringify(dataCopy))
          ListContent.records = []
          ListContent.records = JSON.parse(JSON.stringify(dataCopy))
          if (select == '组件服务') {
            queryName.value = '组件类型'
          } else if (select == '应用资源') {
            queryName.value = '应用领域'
          } else {
            queryName.value = ''
          }
          ListContent.records.forEach((val) => {
            if (!val) {
              return
            }
            // todo
            if (val.name === queryName.value) {
              if (
                val.selectedTags &&
                val.selectedTags.indexOf(selectSubType) == -1
              ) {
                val.selectedTags = [selectSubType]
                changeShrink(queryName.value)
              } else {
                val.selectedTags &&
                  val.selectedTags.splice(
                    val.selectedTags.indexOf(selectSubType),
                    1
                  )
              }
            }
          })
          // 智能算法-特殊处理
          if (whoShow1.value.itShowXiHaiAn) {
            if (!storageSearchInfo) {
              let _tag_list = dataCopy.filter((v) =>
                componentTypeArray.includes(v.name)
              )
              ListContent.records = _tag_list
            }
          }
          listKey.value++
          listKey2.value++
        })
        console.log('selectDicStoreAll', ListContent)
      }
      // 筛选条件
      let ListContent = reactive({
        records: [],
      })
      let ListContentCopy = ref([])
      const resourceList = reactive({ data: [] })
      const videoList = reactive({ data: [] })
      const resourceTotal = ref('')
      // 全局搜索
      const camera = ref(null)
      const globalData = reactive({ data: [] })
      const globalFlag = ref(false)
      const globalSearch = () => {
        if (searchValue.value) {
          globalFlag.value = true
          getCountByFuzzyQuery(searchValue.value || '').then((res) => {
            console.log('全局搜索==========》', res.data.data)
            globalData.data = res.data.data
            let mapFlag = true
            res.data.data.map((val) => {
              if (mapFlag && val.count != 0) {
                mapFlag = false
                changeCards(val.type)
              }
            })
            if (!mapFlag) {
              return
            }
            if (paramsGetResources.type == '基础设施') {
              console.log('camera1', camera.value)
              camera.value.getCamera(true, searchValue.value)
            } else {
              getAppResources()
            }
            console.log(
              'paramsGetResources--globalSearch---------->',
              paramsGetResources
            )
          })
        } else {
          message.warning('全局搜索必须输入关键词！')
        }
      }
      // 校验
      const re = /^[0-9\u4E00-\u9FA5]*$/
      const getAppResources2 = () => {
        globalFlag.value = false
        if (
          whoShow1.value.itShowQingDao &&
          paramsGetResources.type == '基础设施'
        ) {
          console.log('camera2', camera)
          camera.value.getCamera(true, searchValue.value)
        } else {
          if (storageSearchInfo) {
            getAppResources('分页查询')
          } else {
            getAppResources()
          }
        }
      }
      const getAppResources = (switchIndex) => {
        if (!globalFlag.value) {
          globalData.data = []
        }
        select = router.currentRoute.value.query.select
        if (
          (select == '应用资源' &&
            (paramsGetResources.orderField == '' ||
              paramsGetResources.orderField == 'deptSort' ||
              paramsGetResources.orderField == 'pin_top')) ||
          (paramsGetResources.infoList.filter(
            (val) => val.attrType == '组件类型'
          )[0] &&
            paramsGetResources.infoList.filter(
              (val) => val.attrType == '组件类型'
            )[0].attrValue == '图层服务' &&
            (paramsGetResources.orderField == '' ||
              paramsGetResources.orderField == 'deptSort' ||
              paramsGetResources.orderField == 'pin_top'))
        ) {
          paramsGetResources.orderField = 'deptSort'
        } else if (
          paramsGetResources.infoList.filter(
            (val) => val.attrType == '组件类型'
          )[0] &&
          paramsGetResources.infoList.filter(
            (val) => val.attrType == '组件类型'
          )[0].attrValue == '智能算法' &&
          (paramsGetResources.orderField == '' ||
            paramsGetResources.orderField == 'deptSort' ||
            paramsGetResources.orderField == 'pin_top')
        ) {
          paramsGetResources.orderField = 'pin_top'
        } else if (
          paramsGetResources.orderField == '' ||
          paramsGetResources.orderField == 'deptSort' ||
          paramsGetResources.orderField == 'pin_top'
        ) {
          paramsGetResources.orderField = ''
        }
        if (searchValue.value) {
          let str = ''
          let r = null
          if (
            searchValue.value.length >= 2 &&
            paramsGetResources.type !== '基础设施'
          ) {
            str = searchValue.value.substring(0, 2)
            r = re.test(str)
          }
          if (
            (searchValue.value.length > 1 && r) ||
            paramsGetResources.type === '基础设施'
          ) {
            paramsGetResources.name = searchValue.value
            paramsGetResources.type = Cardsname.value
            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) => {
                loading.value = false
                console.log('res.data.data----874-------->', res.data.data)
                if (whoShow1.value.itShowQingDao) {
                  if (whoShow1.value.itShowZhanTingDev) {
                    // 注意：！！！！！itShowZhanTingDev: 研发环境除数据资源用西海岸，其他配置跟青岛市局一样
                    console.log('999----->', res.data.data.list)
                    getXiHaiAn(res)
                  } else {
                    getQingDao(res)
                  }
                } else if (whoShow1.value.itShowXiHaiAn) {
                  getXiHaiAn(res)
                }
              })
            } else if (
              paramsGetResources.type !== '数据资源' &&
              (paramsGetResources.type !== '基础设施' ||
                !whoShow1.value.itShowXiHaiAn)
            ) {
              if (switchIndex != '分页查询') {
                paramsGetResources.pageNum = 1
              }
              pageWithAttrs(paramsGetResources).then((res) => {
                if (res.data.code != 0) {
                  return message.error(res.data.msg)
                }
                console.log(
                  '查询列表====22========>',
                  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 || ''
                  resourceList.data = res.data.data.records || []
                }
              })
            } else if (
              paramsGetResources.type === '基础设施' &&
              whoShow1.value.itShowXiHaiAn
            ) {
              if (switchIndex != '分页查询') {
                paramsGetResources.pageNum = 1
              }
              paramsGetResources2.value.pageNum = paramsGetResources.pageNum
              paramsGetResources2.value.pageSize = paramsGetResources.pageSize
              paramsGetResources2.value.name = paramsGetResources.name
            }
          } else {
            message.error('请以两位以上汉字或数字开头')
          }
        } else {
          //switchIndex这个参数是下面的分页传过来的参数
          paramsGetResources.name = searchValue.value
          paramsGetResources.type = Cardsname.value
          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) => {
              loading.value = false
              console.log('res.data.data----982-------->', res.data.data)
              if (whoShow1.value.itShowQingDao) {
                if (whoShow1.value.itShowZhanTingDev) {
                  getXiHaiAn(res)
                } else {
                  getQingDao(res)
                }
              } else if (whoShow1.value.itShowXiHaiAn) {
                getXiHaiAn(res)
                loading.value = false
              }
            })
          } else if (
            paramsGetResources.type !== '数据资源' &&
            (paramsGetResources.type !== '基础设施' ||
              !whoShow1.value.itShowXiHaiAn)
          ) {
            if (switchIndex != '分页查询') {
              paramsGetResources.pageNum = 1
            }
            pageWithAttrs(paramsGetResources).then((res) => {
              console.log(
                '查询列表===11=========>',
                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 || ''
                resourceList.data = res.data.data.records || []
              }
            })
          } else if (
            paramsGetResources.type === '基础设施' ||
            whoShow1.value.itShowXiHaiAn
          ) {
            if (switchIndex != '分页查询') {
              paramsGetResources.pageNum = 1
            }
            paramsGetResources2.value.pageNum = paramsGetResources.pageNum
            paramsGetResources2.value.pageSize = paramsGetResources.pageSize
          }
        }
      }
      // 青岛-数据处理
      const getQingDao = (res) => {
        ;((res.data && res.data.data && 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 // 发布时间
            val.description = val.xgxt // 描述
          }
        )
        resourceList.data = res.data.data.data || []
        resourceTotal.value = res.data.data.rows || ''
      }
      // 青岛-西海岸处理
      const getXiHaiAn = (res) => {
        ;((res.data && res.data.data && 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 || ''
      }
      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 = console.log(
            '经过过滤后的列表信息',
            list
          )
          resourceList.data = list
        })
      }
      mybus.on('getCameraByParentId', (ids) => {
        paramsGetResources2.value.regionId = ids
        getAppResources()
      })
      mybus.on('paramsGetResources', (ids) => {
        if (ids && ids.length > 0) {
          paramsGetResources.deptIds = ids
        } else {
          delete paramsGetResources.deptIds
        }
        getAppResources()
        console.log(
          'paramsGetResources-----paramsGetResources------->',
          paramsGetResources
        )
      })
      mybus.on('changePage', (page) => {
        paramsGetResources.pageNum = page
        getAppResources('分页查询')
        console.log(
          'paramsGetResources----changePage-------->',
          paramsGetResources
        )
      })
      mybus.on('changeSelcted', () => {
        // 添加申购车后，返回第一页
        paramsGetResources.pageNum = 1
        currentPage.value = 1
        getAppResources()
        console.log(
          'paramsGetResources----changeSelcted-------->',
          paramsGetResources
        )
      })
      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-----changeInfo------->',
          paramsGetResources
        )
      })
      mybus.on('refresh', () => {
        paramsGetResources.pageNum = 1
        currentPage.value = 1
        getAppResources()
        console.log(
          'paramsGetResources-----refresh------->',
          paramsGetResources
        )
      })
      mybus.on('changeCondition', (condition) => {
        if (!storageSearchInfo) {
          // 回到第一页，分页页码为1
          paramsGetResources.pageNum = 1
          currentPage.value = 1
        }
        // orderField: 'total' total 综合 visits 访问量 applyCount 申请量 score 评分  collectCount 收藏量
        // orderType: 'ASC'  ASC 升序  DESC 降序
        paramsGetResources.orderField = condition.orderField
        paramsGetResources.orderType = condition.orderType
        if (storageSearchInfo) {
          getAppResources('分页查询')
        } else {
          getAppResources()
        }
        console.log(
          'paramsGetResources---changeCondition--------->',
          paramsGetResources
        )
      })
      const pageChange = (val) => {
        console.log('pageChange------------>', val)
        loading.value = true
        currentPage.value = val
        paramsGetResources.pageNum = val
        getAppResources('分页查询') //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
        console.log(
          'paramsGetResources-----pageChange------->',
          paramsGetResources
        )
      }
      // 判断是否存在二级类型（首页-能力分类-图层服务）查询条件
      const judgeHasSubSelectType = () => {
        if (selectSubType) {
          paramsGetResources.infoList = []
          if (select == '组件服务') {
            queryName.value = '组件类型'
          } else if (select == '应用资源') {
            queryName.value = '应用领域'
          } else if (select == '基础设施') {
            searchType.value = selectSubType
          } else {
            queryName.value = selectSubType
            searchType.value = ''
          }
          let info = { attrType: queryName.value, attrValue: selectSubType }
          paramsGetResources.infoList.push(info)
        }
        changeShrink(queryName.value)
        paramsGetResources.type = select
        console.log(
          'paramsGetResources---onMounted--------->',
          paramsGetResources
        )
      }
      onMounted(() => {
        // 从本地读取查询条件，赋值
        handleSetSearchData()
        listKey2.value++
        // 获取筛选条件
        getNewList()
        if (!tecHnosphere && !appLiCation) {
          if (searchValue.value && !select) {
            globalSearch()
          } else {
            judgeHasSubSelectType()
            getAppResources2()
            listKey.value++
          }
        }
      })
      // 全部申请
      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
        getAppResources()
        console.log(
          'paramsGetResources----onShowSizeChange-------->',
          paramsGetResources
        )
      }
      watch(currentPageSize, () => {
        console.log('pageSize', currentPageSize.value)
      })
      const changeShrink = (name) => {
        console.log('name---changeShrink--------->', name)
        ListContent.records.forEach((val) => {
          if (val.name === name) {
            console.log(val)
            val.shrinkFlag = !val.shrinkFlag
          }
        })
      }
      const changeCards = (name) => {
        // 西海岸-特殊处理
        if (whoShow1.value.itShowXiHaiAn) {
          if (
            name !== '基础设施' &&
            !xhaHasPermissionUser.list.includes(user.value.username)
          ) {
            return message.warn('暂无权限')
          }
        }
        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
        newQuery.select = Cardsname.value
        router
          .replace({
            query: newQuery,
          })
          .then(() => {
            tagFlag.value = false
            chongzhi(true)
            getNewList()
          })
      }
      // 监听地址栏变化
      window.addEventListener('hashchange', () => {
        location.reload()
        console.log('URL发生变化了')
      })
      // 能力广场
      const visibleAbilitySquare = ref(false)
      let abilitySquare = ref(['应用广场', '算法广场', 'GIS广场'])
      const showAbilitySquareNum = ref(0)
      const showAbilitySquare = () => {
        if (showAbilitySquareNum.value === 0) {
          showAbilitySquareNum.value = 1
          visibleAbilitySquare.value = true
        } else if (showAbilitySquareNum.value === 1) {
          showAbilitySquareNum.value = 0
          visibleAbilitySquare.value = false
        }
      }
      let abilitySquareFunctionData = ref('智能算法')
      const abilitySquareFunction = (e) => {
        let snumSquare = ref({})
        if (e === '应用广场') {
          abilitySquareFunctionData.value = '应用资源'
        } else if (e === '算法广场') {
          abilitySquareFunctionData.value = '智能算法'
        } else if (e === 'GIS广场') {
          abilitySquareFunctionData.value = '图层服务'
        }
        snumSquare.value = {
          abilityToType: abilitySquareFunctionData.value,
        }
        const applypage = router.resolve({
          path: '/capacitySquare', // 跳转的页面路由
          query: snumSquare.value,
        })
        window.open(applypage.href, '_blank')
        visibleAbilitySquare.value = false
        abilitySquareFunctionData.value = '智能算法'
      }
      // 存储查询条件到本地 todo
      const saveSearchCodition = () => {
        console.log('存储查询条件到本地---DetailsPageconetent----->', 1111)
        localStorage.setItem(
          'DetailsPageconetent',
          JSON.stringify(paramsGetResources)
        )
      }
      return {
        listKey,
        ListContent,
        searchValue,
        currentPage,
        ...toRefs(state),
        changeCards,
        handleChange,
        resourceList,
        videoList,
        resourceTotal,
        pageChange,
        listKey2,
        Cardsname,
        getNewList,
        getAppResources,
        getAppResources2,
        chongzhi,
        onSearch,
        onShowSizeChange,
        currentPageSize,
        pageSizeOptions,
        changeShrink,
        titleName,
        keyongziyuanqingkaung,
        shujuziyuanqingkuang,
        dianjitiaozhaun,
        chagneTag,
        tagFlag,
        current,
        openMonitor,
        loading,
        getShoppingCartList,
        whoShow1,
        applyAll,
        handleAdd,
        flag,
        abilitySquare,
        visibleAbilitySquare,
        showAbilitySquare,
        abilitySquareFunction,
        abilitySquareFunctionData,
        showAbilitySquareNum,
        globalData,
        globalSearch,
        camera,
        saveSearchCodition,
        searchResultListDom,
        handleSetSearchData, // todo
      }
    },
    components: {
      HomeHeader,
      HomeFooter,
      detailsPageconetentTree,
      searchResultList,
      UpOutlined,
      DownOutlined,
      KnowledgeBase,
      DetailsPageResource,
      infrastructurePage,
      detailsPageInfrastructureTree,
    },
    beforeUnmount() {
      mybus.off('getCameraByParentId')
      mybus.off('selectCardsitem')
      mybus.off('paramsGetResources')
      mybus.off('changeCondition')
      mybus.off('refresh')
      mybus.off('changePage')
      mybus.off('changeInfo')
    },
  })
</script>
<style lang="less" scoped>
  @font-face {
    font-family: 'webfont';
    src: url('~@/assets/capacitySquare/webfont.ttf');
  }
  .resultListSearchInput-father {
    background: #f3f5f9;
    padding: 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-around;
        align-items: center;
        font-size: 0.2rem;
        font-family: 'Alibaba PuHuiTi';
        color: #000000;
        line-height: 0.34rem;
        margin-bottom: 0.2rem;
        .photo {
          display: inline-block;
          height: 0.44rem;
          width: 0.44rem;
          margin-right: 0.1rem;
        }
        div {
          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: 1rem;
              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;
              width: 1rem;
              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;
    }
  }
  .abilitySquare {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.04rem;
    border: 0.01rem #94aac9 solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.05rem;
    position: fixed;
    z-index: 10;
    bottom: 1.56rem;
    right: 0.1rem;
    cursor: pointer;
    background: #e3edfc;
    p {
      margin: 0;
    }
    p:nth-child(1) {
      height: 0.35rem;
      width: 0.36rem;
      background: url('~@/assets/home/abilitysquare.png') no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
    ul {
      background: #ffffff;
      font-family: webfont;
      width: 1.35rem;
      height: 1rem;
      border-radius: 0.03rem;
      border: 0.01rem solid #dfd9d9;
      position: absolute;
      bottom: 0.9rem;
      left: -0.62rem;
      padding: 0;
      margin: 0;
      li {
        list-style: none;
        color: #0061ec;
        font-size: 0.18rem;
        padding: 0.02rem;
        padding-left: 0.4rem;
        border-bottom: 0.01rem solid #dfd9d9;
      }
      li:nth-of-type(1) {
        background: url('~@/assets/home/appIcon.png') no-repeat;
        background-position: 0.18rem center;
      }
      li:nth-of-type(2) {
        background: url('~@/assets/home/AiIcon.png') no-repeat;
        background-position: 0.18rem center;
      }
      li:nth-of-type(3) {
        border-bottom: none;
        background: url('~@/assets/home/GisIcon.png') no-repeat;
        background-position: 0.18rem center;
      }
    }
    ul::after {
      content: '';
      position: absolute;
      top: 0.98rem;
      right: 0.12rem;
      width: 0;
      height: 0;
      border: 0.13rem solid;
      border-color: #fff transparent transparent transparent;
    }
    ul::before {
      content: '';
      position: absolute;
      top: 0.99rem;
      right: 0.12rem;
      width: 0;
      height: 0;
      border: 0.13rem solid;
      border-color: #dfd9d9 transparent transparent transparent;
    }
    @keyframes ulShowTime {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(0);
      }
    }
  }
  .top-content-father {
    width: 10.87rem;
    padding-left: 0.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;
      }
      .leixingsumfather {
        width: 7.7rem;
        display: inline-block;
        height: 0.3014rem;
        overflow: hidden;
      }
      .leixingsum {
        // width: 1rem;
        display: inline-block;
        cursor: pointer;
        text-align: center;
        margin-top: 0.05rem;
        .ant-tag-checkable {
          width: 1rem;
          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: 0.41rem !important;
    }
  }
  :deep(.ant-card-grid) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    word-break: break-all;
  }
</style>