hlt_gis_admin/src/views/resource/plat/item/MapData.vue

<template>
  <Search :tag="tag" :type="'MAP'" ref="searchRef"></Search>
  <div style="background-color: #f0f2f5" class="dark:bg-dark-900">
    <div class="datacenter-right">
      <div class="resource_list" id="map_list">
        <div v-for="(i, n) in list" v-if="list.length" :key="n" data-permission="true" class="resource_item"
          data-checking="false" data-searching="1" data-ispub="1">
          <div class="mapItem-top-box">
            <div class="item-top">
              <div class="img_container" data-num="1">
                <img class="tab-list-icon-img-MR00001936 img_mr" :id="i.SERVICEID + n" :src="setHtmlImg(i, n)" alt="图片">
              </div>
            </div>
            <div class="item-title">
              <span class="r_name">{{ i.SERVICENAME }}</span>
              <!-- <span class="r-number" data-num="1" title="编目1次">1</span> -->
            </div>
            <div class="item-msg">
              <div class="item-msg-val">坐标系：<span>{{ i.CRS }}</span></div>
              <div class="item-msg-val">适用流程：<span>{{ i.SHSQLCMC }}</span></div>
              <div class="item-msg-val">关键字：
                <span :id="'KEYWORDS' + i.SERVICEID + n">{{ getTag(i.KEYWORDS, `KEYWORDS${i.SERVICEID}${n}`) }}</span>
              </div>
              <div class="item-msg-val">服务类型：<span>{{ i.TYPENAME }}</span></div>
            </div>
          </div>
          <div class="operation-box">
            <div class="left">
              <div class="operation-item browse-item-btn browse-item-MR00001936"
                style="background: #E1EBFB;color: #2D74E7;">
                <a target="_blank" :href="`./mapview.html?${i.SERVICEID}`" rel="opener">
                  <span style="color: #2D74E7;">浏览</span>
                </a>
              </div>
              <div class="operation-item" @click="handleQuery(i, n)" style="background: #E1EBFB;color: #2D74E7;">
                <a href="javascript:void(0)" class="">
                  <span style="color: #2D74E7;">详细</span>
                </a>
              </div>
            </div>
            <div class="right">
              <div class="operation-item" v-if="i.SFJRSQK === '未加入'" @click="applyWay(i)">
                <a href="javascript:void(0)" class="">
                  <span>加入申请库</span>
                </a>
              </div>
              <div class="operation-item" v-else-if="i.SFJRSQK === '审核通过'"
                style="background-color: #05B069;color: #ffffff;cursor: pointer;" @click="showEmpowerInfo(i)">
                已申请信息
              </div>
              <div class="operation-item" v-else style="cursor: not-allowed;background-color: #e8e8e8;"
                :style="{ background: i.SFJRSQK == '已加入' ? '#E8E8E8' : i.SFJRSQK == '审核中' ? '#ED9C23' : i.SFJRSQK == '审核不通过' ? '#FA5151' : '' }">
                <a href="javascript:void(0)" class="" style="cursor: not-allowed;color:#656363;">
                  <span :style="{ color: i.SFJRSQK == '已加入' ? '#999999' : '#ffffff' }">{{ i.SFJRSQK == '已加入' ? '已加入申请库' :
                    i.SFJRSQK }}</span>
                </a>
              </div>
            </div>
          </div>
        </div>
        <a-empty style="margin: 100px auto;" v-else description="暂无数据"></a-empty>
      </div>
    </div>
    <MyPage :total="total"></MyPage>
    <DetailModal v-if="showResDeatil" :type="'MAP'" @closeModal="showResDeatil = false" :resId="detailResId"
      :res="detailRes" />
    <EmpowerInfo title="地图资源申请信息" ref="infoRef"></EmpowerInfo>
  </div>
</template>
<script>
import { defineComponent, defineEmits, nextTick, onMounted, ref, defineProps, watch } from 'vue';
import { platList, img, apply, tagAjax } from '/@/api/resource/plat';
import { message, Empty } from 'ant-design-vue';
// 导入子页面【详情】
import DetailModal from './child/DetailModal.vue';
import Search from './child/Search.vue';
import { session } from '/@/utils/Memory';
import MyPage from './child/MyPage.vue';
import { setHtmlImg } from '/@/views/minWidgets/CommonWay.js';
import EmpowerInfo from './EmpowerInfo.vue';


export default defineComponent({
  name: 'MapData',
  components: { Search, DetailModal, MyPage, EmpowerInfo },
  emits: ['resAddToCar'],
  props: {
    listData: {
      type: Object,
      default: () => { },
    }
  },
  setup(props, { emit }) {
    const searchRef = ref(null)
    const showResDeatil = ref(false)
    const list = ref([]);
    const detailResId = ref('')

    const total = ref(0);
    const tag = ref('');
    async function getList(res) {
      var res = JSON.parse(JSON.stringify(res))
      total.value = res.count;
      list.value = res.items;
      tag.value = res.keywords;
    }

    function getImg(i, n) {
      img(i.SERVICEID).then(r => {
        if (r && r.length) {
          var i = r[0];
          console.log("122222:", i.thumbnail)
          document.querySelector(`#${i.serviceid}${n}`).src = i.thumbnail ? i.thumbnail : './static/img/default-dr3.jpg';
        }
      })
    }

    //获取资源标签
    function getTag(i, id) {
      if (i == "CSSJ") i = '["CSSJ","SJ"]';
      //判断是不是数组
      i = i.indexOf('[') > -1 ? JSON.parse(i) : [i];
      if (i.length) {
        tagAjax().then(r => {
          var name = r.filter(j => i.includes(j.code)).map(j => j.name).toString();
          var dom = document.querySelector(`#${id}`);
          if (dom) dom.innerHTML = name;
        })
      } else {
        return ''
      }
    }

    onMounted(() => {
      getList(props.listData);
    });

    watch(
      () => props.listData,
      (val) => getList(val),
      {
        deep: true,
        immediate: true
      }
    )

    const detailRes = ref(null);
    function handleQuery(record, n) {
      //打开详情弹窗
      console.log("打开详情弹窗:", record)
      session.setItem('thumbnail2', document.getElementById(record.SERVICEID + n).src);
      detailResId.value = record.SERVICEID;
      detailRes.value = record;
      showResDeatil.value = true;
    }

    function applyWay(i) {
      console.log(i)
      apply({
        addRes: [{
          resDataType: "1",
          resId: i.SERVICEID,
          resName: `${i.SERVICENAME}(${i.CRS})`,
          resType: 0,
          workflowType: "MAP",
        }],
        userId: session.getItem('userId'),
      }).then((r) => {
        if (r.datas && r.resp_code == 0) {
          message.success('申请成功');
          // searchRef.value.getResData();
          eventBus.emit('addResToCarEventBus')
          emit('resAddToCar')
        }
      })
    }

    //申请信息查看
    const infoRef = ref(null);
    function showEmpowerInfo(i) {
      infoRef?.value?.showInfo(i);
    }


    return {
      infoRef,
      showEmpowerInfo,
      setHtmlImg,
      getTag,
      tag,
      getImg,
      total,
      detailRes,
      detailResId,
      searchRef,
      showResDeatil,
      applyWay,
      list,
      handleQuery,
    };
  },
});
</script>

<style scoped>
.operation-item {
  border-radius: 3px;
}

.pagination {
  float: right;
}

.datacenter-right .resource_list .item-title .r_name {
  color: #5e5d5e;
  display: inline-block;
  width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Source Han Sans CN;
  font-size: 16px;
  font-weight: bold;
  line-height: 16.38px;
  letter-spacing: 0px;
  color: #333333;
}

.datacenter-right .resource_list {
  box-sizing: border-box;
  width: 100%;
  float: left;
  clear: both;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.datacenter-right .resource_list>div:not(:nth-of-type(4n + 4)) {
  margin-right: 7px;
}

.resource_item {
  height: 318px;
  width: 224px;
  margin-bottom: 14px;
  border: 2px dashed transparent;

  width: 386px;
  height: 402px;
  border-radius: 4px;
  opacity: 1;
  background: #FFFFFF;
  border: 1px solid #DEDEDE;
}

.mapItem-top-box {
  height: 350px;
}

.datacenter-right .resource_list .operation-box {
  height: 42px;
  display: flex;
  margin-bottom: 10px;
  /* margin-left: 20px; */
  justify-content: space-between;
  padding: 0 24px;

  .left {
    display: flex;

    .operation-item {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 50px;
      height: 34px;
      opacity: 1;
      margin-right: 22px;
      padding: 0 10px;
      background: #E8E8E8;
      border-radius: 3px;

      a {
        font-size: 12px;
        width: 100%;
        text-align: center;
        color: #333333;
      }
    }
  }

  .right {
    .operation-item {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 50px;
      height: 34px;
      opacity: 1;
      padding: 0 10px;
      background: #0671DD;

      a {
        font-size: 12px;
        width: 100%;
        text-align: center;
        color: #fff;
      }
    }
  }
}

.datacenter-right .resource_list .item-top {
  padding: 10px 16px 10px;
}

.datacenter-right .resource_list .item-top img {
  width: 360px;
  height: 190px;
  border: solid 1px #eeebeb;
}

.datacenter-right .resource_list .item-title {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #5e5d5e;
  line-height: 16px;
  padding: 0 0 0 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.datacenter-right .resource_list .item-msg {
  padding: 0 13px 13px;
}

.img_container {
  text-align: center;
}

.img_container {
  width: 100%;
  height: 100%;
  background: #b7bed3;
  border-radius: 4px;
}

.datacenter-right .resource_list .item-msg-val {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #888888;
  line-height: 26px;
  /* opacity: 0.5; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-msg-val>span {
  font-family: Source Han Sans CN;
  font-size: 14px;
  font-weight: normal;
  line-height: 16.38px;
  letter-spacing: 0px;
  color: #333333;
}
</style>