|
|
@@ -0,0 +1,317 @@
|
|
|
+<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">坐标系：<span>{{ i.CRS }}</span></div>
|
|
|
+ <div class="item-msg-val">适用流程：<span>国家秘密和工作秘密数据成果申请,</span></div>
|
|
|
+ <div class="item-msg-val">关键字：<span>测试数据</span></div>
|
|
|
+ <div class="item-msg-val">服务类型：<span>{{ i.TYPENAME }}</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="operation-box">
|
|
|
+ <div class="operation-item browse-item-btn browse-item-MR00001936">
|
|
|
+ <a target="_blank" :href="`./mapview.html?${i.SERVICEID}`">
|
|
|
+ <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: () => [],
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ onMounted(() => getDataList());
|
|
|
+
|
|
|
+ function getDataList(text) {
|
|
|
+ platList(text).then((r) => {
|
|
|
+ if (r && r.length) {
|
|
|
+ var o = r.find(i => i.type == 'ER')
|
|
|
+ if (o && o.items && o.items.length) {
|
|
|
+ o.items.map(async (i) => i.info = await img(i.SERVICEID))
|
|
|
+ setTimeout(() => {
|
|
|
+ console.log("资源中心场景资源:", o.items)
|
|
|
+ list.value = o.items;
|
|
|
+ }, 5000)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ list.value = [];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleQuery(record: Recordable) {
|
|
|
+ console.log("11111:", record)
|
|
|
+ openDrawer(true, {
|
|
|
+ record,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ getDataList,
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+.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>
|
sujunling