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

<template>
  <div class="details-pageconetent">
    <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}) `,
              backgroundSize: 'cover',
            }"
          ></span>
          <span>{{ item.name }}</span>
        </div>
      </div>
      <div
        v-show="Cardsname !== '基础设施' && 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">
              <span class="top-content-title">共享条件</span>
              <div class="leixingsumfather">
                <div class="leixingsum">
                  <a-checkable-tag
                    :checked="tagFlag == '申请'"
                    @change="() => chagneTag('申请')"
                  >
                    申请
                  </a-checkable-tag>
                  <a-checkable-tag
                    :checked="tagFlag == '免批申请'"
                    @change="() => chagneTag('免批申请')"
                  >
                    免批申请
                  </a-checkable-tag>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <searchResultList
        v-show="resourceList.data?.length > 0 && Cardsname !== '基础设施'"
        :key="listKey2"
        :resourceList="resourceList"
        :resourceTotal="resourceTotal"
        :select-cardsname="Cardsname"
      />
      <div class="pagination">
        <a-pagination
          v-if="resourceList.data?.length > 0 && Cardsname !== '基础设施'"
          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="jichusheshi" v-if="Cardsname == '基础设施'">
        <!-- <div class="yunziyuan">
          <div class="yunziyuan-title">
            <div class="tupian"></div>
            <div class="title" @click="dianjitiaozhaun('青岛市云资源管理平台')">
              青岛市云资源管理平台
            </div>
          </div>
          <div class="fenlei">
            <div>可用资源情况</div>
            <div>更新时间：2020-10-29</div>
          </div>
          <div class="keyongziyuan">
            <div v-for="item in keyongziyuanqingkaung" :key="item">
              <div>{{ item.name }}</div>
              <div>{{ item.value }}</div>
            </div>
          </div>
          <div class="shuoming">
            说明：政务云资源目前通过青岛市云资源管理平台进行申请
          </div>
        </div> -->
        <!-- <div class="shipin">
          <div class="shipin-title">
            <div class="tupian"></div>
            <div
              class="title"
              @click="dianjitiaozhaun('青岛市视频资源管理平台')"
            >
              青岛市视频资源管理平台
            </div>
          </div>
          <div class="fenlei">
            <div>
              视频总数：
              <span class="shuzi">23</span>
              万路
            </div>
            <div>更新时间：2022-05-06</div>
          </div>
          <div class="top-content-father">
            <div class="top-content-son">
              <div class="top-content">
                <span class="top-content-title" :style="{ marginRight: '.08rem' }">
                  标签
                </span>
                <div
                  class="leixingsumfather leixingsumfather2"
                  style="height: unset"
                >
                  <div class="leixingsum" v-for="tag in bqTags" :key="tag">
                    <a-checkable-tag
                      :checked="selBqTags.indexOf(tag) > -1"
                      @change="(checked) => handleChangeBqTags(tag, checked)"
                      style="width: 1rem"
                    >
                      {{ tag }}
                    </a-checkable-tag>
                  </div>
                </div>
              </div>
              <div class="top-content">
                <span class="top-content-title" :style="{ marginRight: '.08rem' }">
                  在线状态
                </span>
                <div class="leixingsumfather leixingsumfather2">
                  <div class="leixingsum" v-for="tag in stateTags" :key="tag">
                    <a-checkable-tag
                      :checked="selStateTags.indexOf(tag) > -1"
                      @change="(checked) => handleChangeStateTag(tag, checked)"
                      style="width: 1rem"
                    >
                      {{ tag }}
                    </a-checkable-tag>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <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="itemList" style="margin-top: .2rem">
            <a-card :loading="loading">
              <a-card-grid
                style="width: 20%; text-align: center"
                v-for="item in videoList.data"
                :key="item.id"
              >
                <a-tooltip placement="topLeft">
                  <template #title>
                    <span>
                      {{ item.name }}
                    </span>
                  </template>
                  <video-camera-outlined />
                  {{ item.name }}
                </a-tooltip>
              </a-card-grid>
            </a-card>
            <a-pagination
              v-model:current="currentPage"
              pageSize="20"
              :total="resourceTotal"
              show-less-items
              @change="pageChange"
              hideOnSinglePage
            />
          </div>
        </div> -->
        <VideoSurveillance></VideoSurveillance>
      </div>
      <div class="shujuziyuan" v-if="Cardsname == '数据资源'">
        <div class="yunziyuan">
          <div class="yunziyuan-title">
            <div class="tupian"></div>
            <div
              class="title"
              @click="dianjitiaozhaun('青岛市政务资源管理平台')"
            >
              青岛市政务资源管理平台
            </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?.length <= 0" style="margin-top: 2rem">
        <a-empty
          v-if="!(Cardsname == '基础设施') && !(Cardsname == '数据资源')"
        />
      </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>
  <home-footer></home-footer>
</template>
<script>
  import HomeFooter from '@/views/newHome/components/Footer'
  import mybus from '@/myplugins/mybus'
  import {
    defineComponent,
    reactive,
    ref,
    toRefs,
    onMounted,
    // computed,
    watch,
  } from 'vue'
  import {
    UpOutlined,
    DownOutlined,
    // VideoCameraOutlined,
  } from '@ant-design/icons-vue'
  import { selectDicStoreAll, pageWithAttrs, zywMessage } from '@/api/home.js'
  import { getSgcList } from '@/api/personalCenter'
  import { useRouter } from 'vue-router'
  // import { useStore } from 'vuex'
  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 VideoSurveillance from '@/views/home/videoSurveillance'
  export default defineComponent({
    setup() {
      // const store = useStore()
      const titleName = ref([
        {
          photo: require('@/assets/newHome/banner-zj.png'),
          name: '组件服务',
        },
        {
          photo: require('@/assets/newHome/banner-yy.png'),
          name: '应用资源',
        },
        {
          photo: require('@/assets/newHome/banner-jc.png'),
          name: '基础设施',
        },
        {
          photo: require('@/assets/newHome/banner-sj.png'),
          name: '数据资源',
        },
        {
          photo: require('@/assets/newHome/banner-zs.png'),
          name: '知识库',
        },
      ])
      const openMonitor = () => {
        window.open('http://www.qingdao.gov.cn:8083/ghwd/znwdqd/index.html')
      }
      // const jichusheshi=ref([
      //   {
      //     name:'青岛市云资源管理平台'

      //   }
      // ])
      // 模糊查询
      const keyongziyuanqingkaung = ref([
        {
          name: 'CPU/核：',
          value: 2102,
        },
        {
          name: '内存/T：',
          value: 6.68,
        },
        {
          name: '存储/T：',
          value: 2102,
        },
        {
          name: 'RDS for Mysql/G：',
          value: 982.82,
        },
        {
          name: 'RDS for SqlServer/G：',
          value: 997.17,
        },
      ])
      const shujuziyuanqingkuang = ref([
        {
          name: '已上线目录：',
          value: 10372,
          danwei: '条',
        },
        {
          name: '已发布服务：',
          value: 1080,
          danwei: '条',
        },
        {
          name: '已发布接口：',
          value: 976,
          danwei: '条',
        },
        {
          name: '更新时间：',
          value: '2022-05-06',
        },
      ])
      // 分页
      const loading = ref(true)
      const currentPage = ref(1)
      const currentPageSize = ref(5)
      const pageSizeOptions = ref(['5', '10', '20', '50'])
      // 从store获取选中的类型
      // const Cardsname = computed(() => store.getters['home/selectCardsnum'])
      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 bqTags = ref([
        '火车站',
        '长途汽车站',
        '轮渡码头',
        '景区景点',
        '公园广场',
        '海水浴场',
        '商业街区',
        '建筑工地',
        '农贸市场',
        '渔港',
        '河道',
        '水库',
        '积水点',
        '加油站',
        '山区/林区',
        '墓地',
        '旅游景点',
        '输油管道',
        '危化企业',
        '学校',
        '广场',
        '公园',
        '政府',
        '桥梁',
        '隧道',
        '物资储备库',
        '地铁站',
        '安全生产企业',
        '敬老院',
        '医院',
        '港口',
        '高速',
      ])
      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()
        console.log(tag, checked)
      }
      const current = ref(2)
      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()
        console.log('点击筛选条件=================>', tagFlag.value)
      }
      // 重置数据
      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)
            }
            // debugger
            tecHnosphere = router.currentRoute.value.query.tecHnosphere
            appLiCation = router.currentRoute.value.query.appLiCation
            // if (!appLiCation && !tecHnosphere) {
            //   ListContent.records[0].selectedTags = []
            //   ListContent.records[1].selectedTags = []
            //   ListContent.records = []
            //   ListContent.records = data
            //   paramsGetResources.infoList = []
            //   // debugger
            //   // pageWithAttrs(paramsGetResources).then((res) => {
            //   //   resourceList.data = []
            //   //   resourceList.data = res.data.data.records
            //   //   resourceTotal.value = res.data.data.total
            //   // })
            // }
            if (val.typeList?.length > 6) {
              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 = () => {
        paramsGetResources.name = searchValue.value
        paramsGetResources.type = Cardsname.value
        pageWithAttrs(paramsGetResources).then((res) => {
          console.log('查询列表============>', resourceList, res.data.data)
          resourceList.data = []
          videoList.data = []
          if (Cardsname.value === '基础设施') {
            console.log('基础设施~~~~~~~~~~~')
            videoList.data = res.data.data.records || []
            resourceTotal.value = res.data.data.total || ''
            loading.value = false
          } else {
            // resourceList.data = res.data.data.records || []
            resourceTotal.value = res.data.data.total || ''
            getShoppingCartList(res.data.data.records)
            console.log(
              '其他~~~~~~~~~~~',
              resourceList.data,
              resourceTotal.value
            )
          }
        })
      }
      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
        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()
        // listKey.value++
      })
      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
        getAppResources()
      }
      const findZywMessage = () => {
        zywMessage().then((res) => {
          console.log('findMessage============>', res)
          const { data } = res.data
          shujuziyuanqingkuang.value[0].value = data.sxmlcount
          shujuziyuanqingkuang.value[1].value = data.yfbfwcount
          shujuziyuanqingkuang.value[2].value = data.yfbjk
          shujuziyuanqingkuang.value[3].value = new Date().toLocaleString()
        })
      }
      onMounted(() => {
        listKey2.value++
        console.log('45345345', Cardsname.value, tecHnosphere, appLiCation)
        getNewList()
        findZywMessage()
        // onSearch()
        if (!tecHnosphere && !appLiCation) {
          getAppResources()
        } else {
          // getNewList()
        }
      })
      // 分页
      const onShowSizeChange = (current, pageSize) => {
        currentPage.value = current
        currentPageSize.value = pageSize
        paramsGetResources.pageNum = current
        paramsGetResources.pageSize = pageSize
        getAppResources()
        console.log(current, pageSize)
      }
      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
        // debugger
        let newQuery = JSON.parse(
          JSON.stringify(router.currentRoute.value.query)
        )
        if (Cardsname.value == name) {
          Cardsname.value = ''
        } else {
          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
            )
            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,
      }
    },
    components: {
      HomeHeader,
      HomeFooter,
      detailsPageconetentTree,
      searchResultList,
      UpOutlined,
      DownOutlined,
      KnowledgeBase,
      // VideoCameraOutlined,
      VideoSurveillance,
    },
    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-left: .2rem;
    padding-top: .2rem;
    .resultListSearchInput-son {
      background: #fff;
      padding: .2rem .2rem 0rem .3rem;
      margin-right: .2rem;
      .hengxian {
        width: 100%;
        height: .01rem;
        background: rgba(150, 144, 144, 0.3);
        margin-top: .2rem;
      }
    }
  }
  .resultListSearchInput {
    margin-left: .1rem;
    :deep(.ant-input) {
      width: 4rem;
      height: .36rem;
      background: #fff;
      border-radius: .04rem;
    }
    :deep(.ant-input-search-button) {
      width: .8rem;
      height: .36rem;
      background: #0087ff;
      border-radius: .04rem !important;
      font-size: .14rem;
      font-weight: 400;
      color: #fff;
      line-height: .34rem;
      margin-left: .1rem;
    }
    :deep(.ant-input-group-addon) {
      left: 0 !important;
    }
  }
  .button-reset {
    border: 0;
    outline: none;
    width: .8rem;
    height: .36rem;
    background: #e1edfa;
    border-radius: .04rem;
    font-size: .14rem;
    font-weight: 400;
    color: #0087ff;
    line-height: .34rem;
    margin-left: 2.5rem;
    cursor: pointer;
  }
  .details-pageconetent {
    height: 100%;
    width: 100%;
    display: flex;
    // flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: .67rem;
    position: relative;
    background: rgba(245, 243, 243, 0.3);
    .details-pageconetent-left {
      max-height: 7.9rem;
      position: absolute;
      width: 2.5rem;
      top: .17rem;
      left: 2.5rem;
      margin-right: .17rem;
      overflow: auto;
    }
    .top {
      min-height: 7.2rem;
      position: relative;
      width: 10.87rem;
      display: flex;
      padding-top: .2rem;
      flex-direction: column;
      // align-items: center;
      font-size: .16rem;
      justify-content: left;
      margin-left: 2.5rem;
      .pagination {
        background: #f3f5f9;
        padding-bottom: .6rem;
      }
      .jichusheshi {
        // display: flex;
        // flex-direction: column;
        // justify-content: center;
        // padding-top: .4rem;
        height: 4.45rem;
        // overflow: hidden;
        .yunziyuan {
          width: 100%;
          position: relative;
          .shuoming {
            position: absolute;
            right: .2rem;
            top: .15rem;
            font-size: .12rem;
          }
          .yunziyuan-title {
            display: flex;
            align-items: center;
            .tupian {
              // width: .89rem;
              // height: .74rem;
              // background: url('~@/assets/home/yunziyuan.png');
            }
            .title {
              margin-left: .1rem;
              font-weight: 600;
              text-decoration: underline;
              cursor: pointer;
            }
          }
          .fenlei {
            display: flex;
            margin-left: .2rem;
            margin-right: .3rem;
            justify-content: space-between;
          }
          .keyongziyuan {
            display: flex;
            justify-content: space-between;
            margin-left: .3rem;
            margin-right: .3rem;
            div {
              display: flex;
              div:last-child {
                font-weight: 600;
              }
            }
          }
        }
        .yunziyuan > div {
          margin-bottom: .1rem;
        }
        .shipin {
          width: 100%;
          .shipin-title {
            display: flex;
            align-items: center;
            .tupian {
              // width: .56rem;
              // height: .5rem;
              // background: url('~@/assets/home/shipin.png');
            }
            .title {
              margin-left: .1rem;
              font-weight: 600;
              text-decoration: underline;
              cursor: pointer;
            }
          }
          .fenlei {
            display: flex;
            margin-left: .2rem;
            div {
              margin-right: .6rem;
            }
            .shuzi {
              font-weight: 600;
            }
          }
        }
        .shipin > div {
          margin-bottom: .1rem;
        }
      }
      .jichusheshi > div {
        // background: #eaf4ff;
        padding-top: .1rem;
        border-radius: .04rem;
        margin-bottom: .2rem;
        padding-bottom: .4rem;
      }
      .shujuziyuan {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: .4rem;
        .yunziyuan {
          width: 100%;
          position: relative;
          .shuoming {
            position: absolute;
            right: .2rem;
            top: .15rem;
            font-size: .12rem;
          }
          .yunziyuan-title {
            display: flex;
            align-items: center;
            margin-left: .2rem;
            .tupian {
              // width: .51rem;
              // height: .5rem;
              // background: url('~@/assets/home/shujuziyuan.png');
            }
            .title {
              margin-left: .1rem;
              font-weight: 600;
              text-decoration: underline;
              cursor: pointer;
            }
          }
          .fenlei {
            display: flex;
            margin-left: .2rem;
            margin-right: .3rem;
            justify-content: space-between;
          }
          .keyongziyuan {
            display: flex;
            justify-content: space-between;
            margin-left: .3rem;
            margin-right: .3rem;
            div {
              display: flex;
              div:last-child {
                font-weight: 600;
              }
            }
          }
        }
        .yunziyuan > div {
          margin-bottom: .1rem;
        }
      }
      .shujuziyuan > div {
        background: #eaf4ff;
        padding-top: .1rem;
        border-radius: .04rem;
        margin-bottom: .2rem;
        padding-bottom: .4rem;
      }
      .top-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: .2rem;
        font-family: 'Alibaba PuHuiTi';
        color: #000000;
        line-height: .34rem;
        .photo {
          display: inline-block;
          height: .44rem;
          width: .44rem;
          margin-right: .1rem;
        }
        div {
          margin: 0 .2rem;
          padding: 0 .1rem;
          cursor: pointer;
          display: flex;
          align-items: center;
        }
        div:hover {
          color: #0087ff;
        }
        .sel {
          font-weight: 600;
          color: #0087ff;
          border-bottom: .02rem solid #0087ff;
        }
      }
      .top-content-father {
        width: 10.87rem;
        padding-left: .2rem;
        // margin-bottom: .2rem;
        background: #f3f5f9;
        .top-content-son {
          background: #fff;
          margin: 0rem .2rem .2rem 0rem;
          padding-top: .2rem;
          padding-bottom: .2rem;
        }
        .top-content {
          display: flex;
          margin-top: 0rem;
          span:nth-child(1) {
            display: inline-block;
            position: relative;
            // width: .7rem;
            line-height: .3614rem;
            white-space: normal;
            text-align: center;
            vertical-align: middle;
          }
          // .top-content-title {
          //   top: -0.2rem;
          // }
          .leixingsumfather {
            width: 8.1rem;
            display: inline-block;
            height: .3014rem;
            overflow: hidden;
            // width: 7.18rem;
          }
          .leixingsumfather2 {
            width: 9.2rem;
          }
          .leixingsum {
            display: inline-block;
            cursor: pointer;
            text-align: center;
            margin-top: .05rem;
            // margin-bottom: .1rem;
            .ant-tag-checkable {
              width: .83rem;
              height: .25rem;
              display: flex;
              justify-content: center;
              align-items: center;
              padding-left: .05rem;
              padding-right: .05rem;
              float: left;
              margin: 0 .15rem;
              font-family: 'AlibabaPuHuiTiR';
              font-size: .14rem;
              color: #333333;
              font-weight: 500;
              text-align: center;
              line-height: .14rem;
            }
            :deep(.ant-tag-checkable-checked) {
              // width: .67rem;
              margin-left: .15rem;
              margin-right: .15rem;
              text-align: center;
            }
            .ant-tag-checkable:active,
            .ant-tag-checkable-checked {
              width: .85rem;
              font-family: 'Alibaba PuHuiTi';
              font-weight: 500;
              background-color: #0087ff;
              color: #ffffff;
              border-radius: .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: .5rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: .05rem;
    span {
      cursor: pointer;
    }
  }
  .shrink {
    height: unset !important;
    overflow: unset !important;
  }
  .talk-monitor {
    position: fixed;
    bottom: .5rem;
    right: .1rem;
    z-index: 9999;
    cursor: pointer;
    i {
      width: .64rem;
      height: .64rem;
      display: inline-block;
      background: url('~@/assets/home/icon-talk.png');
      background-size: cover;
    }
  }
  .top-content-father {
    width: 10.87rem;
    padding-left: .2rem;
    // margin-bottom: .2rem;
    .top-content {
      display: flex;
      margin-top: .23rem;
      span:nth-child(1) {
        display: inline-block;
        position: relative;
        width: .68rem;
        font-weight: 600;
        white-space: normal;
        text-align: center;
        vertical-align: middle;
        font-size: .16rem;
        margin-left: .3rem;
      }
      // .top-content-title {
      //   top: -0.2rem;
      // }
      .leixingsumfather {
        width: 7.7rem;
        display: inline-block;
        height: .3014rem;
        overflow: hidden;
        // width: 7.18rem;
      }
      .leixingsum {
        width: .93rem;
        display: inline-block;
        cursor: pointer;
        text-align: center;
        margin-top: .05rem;
        // margin-bottom: .1rem;
        .ant-tag-checkable {
          width: .85rem;
          height: .25rem;
          display: flex;
          justify-content: center;
          align-items: center;
          padding-left: .05rem;
          padding-right: .05rem;
          float: left;
          margin: 0 .15rem;
          font-family: 'AlibabaPuHuiTiR';
          font-size: .14rem;
          color: #333333;
          font-weight: 500;
          text-align: center;
          line-height: .14rem;
        }
        :deep(.ant-tag-checkable-checked) {
          // width: .67rem;
          margin-left: .15rem;
          margin-right: .15rem;
          text-align: center;
        }
        .ant-tag-checkable:active,
        .ant-tag-checkable-checked {
          width: .85rem;
          font-family: 'Alibaba PuHuiTi';
          font-weight: 500;
          background-color: #0087ff;
          color: #ffffff;
          border-radius: .16rem;
        }
      }
      .active {
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        background-color: #0087ff;
        color: #ffffff;
      }
    }
    .top-content:nth-child(1) {
      margin-top: .41rem !important;
    }
  }
  :deep(.ant-card-grid) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
  }
</style>