hlt_gis_admin/src/views/assembly/item/AssemblyData.vue

<template>
  <Search></Search>
  <div>
    <div class="datacenter-right">
      <div class="resource_list" id="map_list">
        <!-- <div v-for="(i, k) in list" :key="k" class="item">
          <div><img :src="i.url" srcset=""></div>
          <b>{{ i.servicename }}</b>
          <p>
            <span><a :href="[`../../mapview.html?onlineIde_${i.servicealiasname}`]" target="_blank"
                rel="noopener noreferrer">浏览</a></span>
            <span>详情</span>
            <span>加入库</span>
            <span>已入库</span>
          </p>
        </div> -->


        <div v-for="(j, key, index) in list" :key="index" style="clear: both;">
          <p class="itemName" :id="key">{{ key }}</p>
          <div v-for="(i, n) in j" :key="n" class="item">
            <div><img :src="i.url" srcset=""></div>
            <b>{{ i.servicename }}</b>
            <p class="bottomBut">
              <span><a :href="[`./mapview.html?onlineIde_${i.servicealiasname}`]" target="_blank"
                  rel="noopener noreferrer">浏览</a></span>
              <span @click="showDrawer(i)">详情</span>
              <span v-if="i.consumetype == 0">加入库</span>
              <span v-if="i.consumetype == 1">已入库</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <a-drawer title="组件详情" width="400px" placement="right" :closable="false" v-model:visible="visible"
      :after-visible-change="afterVisibleChange">
      <p><b>资源名称:</b>&nbsp;&nbsp;<span>{{ action.servicename }}</span></p>
      <p><b>资源别名:</b>&nbsp;&nbsp;<span>{{ action.servicealiasname }}</span></p>
      <p><b>资源类型:</b>&nbsp;&nbsp;<span>{{ action.source }}</span></p>
      <p><b>浏览资源:</b>&nbsp;&nbsp;<span><a :href="[`../../mapview.html?onlineIde_${action.servicealiasname}`]"
            target="_blank" rel="noopener noreferrer">查看组件</a></span></p>
      <p><b>资源描述:</b>&nbsp;&nbsp;<span>{{ action.description }}</span></p>
      <div class="footer">
        <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
      </div>
    </a-drawer>
    <AssemblyDrawer @register="registerModal" />
  </div>
</template>
<script lang="ts">
import { defineComponent, nextTick, onMounted, ref, defineProps, watch, reactive, getCurrentInstance } 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, apply } from '/@/api/resource/plat';
import { message } from 'ant-design-vue';
// 加载自定义侧边弹出框 组件
import { useDrawer } from '/@/components/Drawer';
// 导入子页面【新增、修改】
import AssemblyDrawer from './AssemblyDrawer.vue';
import Search from './child/Search.vue';
import { session } from '/@/utils/Memory';
import { getImgUrl } from '/@/api/dataAdmin/assembly';


export default defineComponent({
  name: 'SmsLog',
  components: { BasicTable, TableAction, Authority, Search, Popconfirm, Tooltip, AssemblyDrawer },
  props: {
    list: { type: Array, default: ref([]) }
  },
  setup(props, { emit }) {
    const [registerModal, { openDrawer }] = useDrawer(); //使用右侧弹出框
    // const list = reactive(props.list);
    // watch(() => props.list, (obj) => {
    //   list.values = obj;
    //   console.log(list.values);
    // });
    const list = ref([]);
    console.log("list", list);
    eventBus.on('assemblylist', (i) => {
      console.log("i:", i);
      for (var j in i) {
        // i[j].map(async (k) => k.url = await getImg(k.mapingurl))
        if (i[j]) i[j].map((k) => { k.url = `http://106.12.170.138:4001/examples/img/${k.publiccurl}` });
      }
      list.value = i
      // setTimeout(() => list.value = i, 5000)
    })

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

    async function getImg(i) {
      var defUrl = '/static/img/Earth.jpg';
      var url = null;
      if (i) {
        var arr = i.split(',')
        if (arr.length > 1) url = await getImgUrl(arr[0], arr[1]);
      }
      return url ? url : defUrl;
    }

    const visible = ref<boolean>(false);
    const action = ref({});
    const afterVisibleChange = (bool: boolean) => {
      console.log('visible', bool);
    };

    const showDrawer = (i) => {
      console.log("i", i);
      action.value = i;
      visible.value = true;
    };
    const onClose = () => {
      visible.value = false;
    };

    return {
      onClose,
      action,
      visible,
      afterVisibleChange,
      showDrawer,
      getImg,
      registerModal,
      list,
      handleQuery,
    };
  },
});
</script>

<style scoped>
.footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  border-top: 1px solid rgb(232, 232, 232);
  padding: 10px 16px;
  text-align: right;
  left: 0px;
  background: rgb(255, 255, 255);
  border-radius: 0px 0px 4px 4px;
}

.bottomBut span:first-child,
.bottomBut span:nth-child(2) {
  float: left;
}

.bottomBut span:nth-child(3),
.bottomBut span:nth-child(4) {
  float: right;
  color: #fff;
  background: #05B069;
}

.bottomBut span:nth-child(3) {
  margin-right: 0px;
}

.itemName {
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0em;
  color: #333333;
  border-left: solid 4px #0671DD;
  padding-left: 20px;
  margin-left: 12px;
}

.item p span {
  display: inline-block;
  min-width: 50px;
  height: 34px;
  line-height: 34px;
  margin-right: 20px;
  padding: 0 10px;
  background: #E8E8E8;
  cursor: pointer;
}

.item b {
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  margin: 10px 0;
}

.item {
  width: 378px;
  height: 299px;
  border-radius: 4px;
  background: #FFFFFF;
  border: 1px solid #DEDEDE;
  padding: 15px;
  float: left;
  margin: 0px 20px 20px 0px;
}

.item img {
  width: 354px;
  height: 190px;
}
</style>