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

<template>
  <Search></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 MR00001936"
                  :src="(i.info && i.info.length && i.info[0].thumbnail) || '/static/img/default-dr3.jpg'" 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" style="font-weight:bold;font-size:12px;color: #000;">坐标系：{{ i.CRS }}</div>
              <div class="item-msg-val">适用流程：国家秘密和工作秘密数据成果申请,</div>
              <div class="item-msg-val">关键字：测试数据</div>
              <div class="item-msg-val">服务类型：{{ i.TYPENAME }}</div>
            </div>
          </div>
          <div class="operation-box">
            <div class="operation-item browse-item-btn browse-item-MR00001936">
              <a target="_blank" :href="(i.info && i.info.length && i.info[0].thumbnail) || '/static/img/default-dr3.jpg'">
                <span>浏览</span>
              </a>
            </div>

            <div class="operation-item alone-apply-btn alone-apply-btn-MR00001936">
              <span style="border-right: 1px #ccc solid;" onclick="cardApplyItem('mr')">
                <span>申请</span>
              </span>
            </div>
            <!-- <div class="user-apply-btn user-apply-btn-MR00001936"
              onclick="addApplyBank(this,'MR00001936','行政区域','1','测试数据','mr','2000坐标系4490')">
              <span>加入申请库</span>
            </div>
            <div class="dis-apply-btn dis-apply-btn-MR00001936">
              <span>已加入申请库</span>
            </div> -->
            <div class="operation-item" @click="handleQuery(i)">
              <a href="javascript:void(0)" class="">
                <span>详细</span>
              </a>
            </div>
            <div class="operation-item" @click="handleQuery(i)">
              <a href="javascript:void(0)" class="">
                <span>加入申请库</span>
              </a>
            </div>
            <div class="operation-item operation-item-active" @click="handleQuery(i)">
              <a href="javascript:void(0)" class="">
                <span>已加入申请库</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <BasicTable @register="registerTable" class="dark:bg-dark-900">
      <template #toolbar>
        <Authority value="api:yt:smsLog:delete">
          <Popconfirm title="您确定要批量删除数据" ok-text="确定" cancel-text="取消" @confirm="handleDeleteOrBatchDelete(null)">
            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
          </Popconfirm>
        </Authority>
      </template>
      <template #remark="{ record }">
        <Tooltip :title="record.remark">
          <div class="truncate w-full">{{ record.remark }}</div>
        </Tooltip>
      </template>
      <template #action="{ record }">
        <TableAction :actions="[
          {
            label: '查看',
            auth: 'api:yt:smsLog:get',
            icon: 'ant-design:fund-view-outlined',
            onClick: handleQuery.bind(null, record),
          },
          {
            label: '删除',
            auth: 'api:yt:smsLog:delete',
            icon: 'ant-design:delete-outlined',
            color: 'error',
            popConfirm: {
              title: '是否确认删除',
              confirm: handleDeleteOrBatchDelete.bind(null, record),
            },
          },
        ]" />
      </template>
    </BasicTable> -->
    <!-- 弹出框 -->
    <MapDrawer @register="registerModal" />
  </div>
</template>
<script lang="ts">
import { defineComponent, nextTick, onMounted, ref, defineProps, watch } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { columns, searchFormSchema } from './sms.data';
import { Popconfirm, Tooltip } from 'ant-design-vue';
import { Authority } from '/@/components/Authority';
import { platList, img } from '/@/api/resource/plat';
// 加载自定义侧边弹出框 组件
import { useDrawer } from '/@/components/Drawer';
// 导入子页面【新增、修改】
import MapDrawer from './MapDrawer.vue';
import Search from './child/Search.vue';


export default defineComponent({
  name: 'SmsLog',
  components: { BasicTable, TableAction, Search, Authority, Popconfirm, Tooltip, MapDrawer },
  setup() {
    const [registerModal, { openDrawer }] = useDrawer(); //使用右侧弹出框
    const list = ref([]);
    const props = defineProps({
      listData: {
        type: Array,
        default: () => [],
      }
    })

    // setInterval(() => {
    //   console.log(props)
    // }, 2000)
    onMounted(() => {
      platList().then((r) => {
        if (r) {
          var o = r.find(i => i.type == 'DR')
          if (o && o.items && o.items.length) {
            o.items.map(async (i) => i.info = await img(i.SERVICEID))
            console.log(o);
            list.value = o.items;
          }
        }
      });
    });

    function handleQuery(record: Recordable) {
      console.log("11111:", record)
      openDrawer(true, {
        record,
      });
    }

    return {
      registerModal,
      list,
      handleQuery,
    };
  },
});
</script>

<style scoped>
.datacenter-right .resource_list .item-title .r_name {
  color: #5e5d5e;
  display: inline-block;
  width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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;
}

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

.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: #5e5d5e;
  line-height: 22px;
  opacity: 0.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.datacenter-right .resource_list .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;
}

.datacenter-right .resource_list .operation-item:hover {
  background: #0671DD;
}

.datacenter-right .resource_list .operation-item:hover a {
  color: #fff;
}

.datacenter-right .resource_list .operation-item.alone-apply-btn {
  display: none;
}

.operation-item-active {
  background: #05B069 !important;
}

.operation-item-active a {
  color: #fff !important;
}

.datacenter-right .resource_list .operation-item a {
  font-size: 12px;
  width: 100%;
  text-align: center;
  color: #5e5d5e;
}
</style>