Commit 0db7ec01 by wanglizhen

资产库改版

parent ba58e958
src/assets/images/assetLibrary/DB2.png

6.4 KB | W: | H:

src/assets/images/assetLibrary/DB2.png

1.61 KB | W: | H:

src/assets/images/assetLibrary/DB2.png
src/assets/images/assetLibrary/DB2.png
src/assets/images/assetLibrary/DB2.png
src/assets/images/assetLibrary/DB2.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/assetLibrary/DM.png

10.2 KB | W: | H:

src/assets/images/assetLibrary/DM.png

1.23 KB | W: | H:

src/assets/images/assetLibrary/DM.png
src/assets/images/assetLibrary/DM.png
src/assets/images/assetLibrary/DM.png
src/assets/images/assetLibrary/DM.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/assetLibrary/ES.png

5.52 KB | W: | H:

src/assets/images/assetLibrary/ES.png

1.65 KB | W: | H:

src/assets/images/assetLibrary/ES.png
src/assets/images/assetLibrary/ES.png
src/assets/images/assetLibrary/ES.png
src/assets/images/assetLibrary/ES.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/assetLibrary/GAUSS.png

8.18 KB | W: | H:

src/assets/images/assetLibrary/GAUSS.png

1.76 KB | W: | H:

src/assets/images/assetLibrary/GAUSS.png
src/assets/images/assetLibrary/GAUSS.png
src/assets/images/assetLibrary/GAUSS.png
src/assets/images/assetLibrary/GAUSS.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/assetLibrary/GAUSSDB.png

4.95 KB | W: | H:

src/assets/images/assetLibrary/GAUSSDB.png

1.66 KB | W: | H:

src/assets/images/assetLibrary/GAUSSDB.png
src/assets/images/assetLibrary/GAUSSDB.png
src/assets/images/assetLibrary/GAUSSDB.png
src/assets/images/assetLibrary/GAUSSDB.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/assetLibrary/GBASE8S.png

6.18 KB | W: | H:

src/assets/images/assetLibrary/GBASE8S.png

1.13 KB | W: | H:

src/assets/images/assetLibrary/GBASE8S.png
src/assets/images/assetLibrary/GBASE8S.png
src/assets/images/assetLibrary/GBASE8S.png
src/assets/images/assetLibrary/GBASE8S.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/assetLibrary/GREENPLUM.png

17 KB | W: | H:

src/assets/images/assetLibrary/GREENPLUM.png

1.66 KB | W: | H:

src/assets/images/assetLibrary/GREENPLUM.png
src/assets/images/assetLibrary/GREENPLUM.png
src/assets/images/assetLibrary/GREENPLUM.png
src/assets/images/assetLibrary/GREENPLUM.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/assetLibrary/HIVE.png

9.73 KB | W: | H:

src/assets/images/assetLibrary/HIVE.png

2.41 KB | W: | H:

src/assets/images/assetLibrary/HIVE.png
src/assets/images/assetLibrary/HIVE.png
src/assets/images/assetLibrary/HIVE.png
src/assets/images/assetLibrary/HIVE.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/assetLibrary/KAFKA.png

6.68 KB | W: | H:

src/assets/images/assetLibrary/KAFKA.png

1.75 KB | W: | H:

src/assets/images/assetLibrary/KAFKA.png
src/assets/images/assetLibrary/KAFKA.png
src/assets/images/assetLibrary/KAFKA.png
src/assets/images/assetLibrary/KAFKA.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/assetLibrary/KINGBASE.png

22.9 KB | W: | H:

src/assets/images/assetLibrary/KINGBASE.png

2.24 KB | W: | H:

src/assets/images/assetLibrary/KINGBASE.png
src/assets/images/assetLibrary/KINGBASE.png
src/assets/images/assetLibrary/KINGBASE.png
src/assets/images/assetLibrary/KINGBASE.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/assetLibrary/MARIADB.png

13.3 KB | W: | H:

src/assets/images/assetLibrary/MARIADB.png

1.57 KB | W: | H:

src/assets/images/assetLibrary/MARIADB.png
src/assets/images/assetLibrary/MARIADB.png
src/assets/images/assetLibrary/MARIADB.png
src/assets/images/assetLibrary/MARIADB.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/assetLibrary/MONGODB.png

6.57 KB | W: | H:

src/assets/images/assetLibrary/MONGODB.png

1.46 KB | W: | H:

src/assets/images/assetLibrary/MONGODB.png
src/assets/images/assetLibrary/MONGODB.png
src/assets/images/assetLibrary/MONGODB.png
src/assets/images/assetLibrary/MONGODB.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/assetLibrary/MSSQLSERVER.png

8.03 KB | W: | H:

src/assets/images/assetLibrary/MSSQLSERVER.png

1.15 KB | W: | H:

src/assets/images/assetLibrary/MSSQLSERVER.png
src/assets/images/assetLibrary/MSSQLSERVER.png
src/assets/images/assetLibrary/MSSQLSERVER.png
src/assets/images/assetLibrary/MSSQLSERVER.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/assetLibrary/MYSQL.png

11.9 KB | W: | H:

src/assets/images/assetLibrary/MYSQL.png

1.67 KB | W: | H:

src/assets/images/assetLibrary/MYSQL.png
src/assets/images/assetLibrary/MYSQL.png
src/assets/images/assetLibrary/MYSQL.png
src/assets/images/assetLibrary/MYSQL.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/assetLibrary/OCEANBASE.png

6.02 KB | W: | H:

src/assets/images/assetLibrary/OCEANBASE.png

1.41 KB | W: | H:

src/assets/images/assetLibrary/OCEANBASE.png
src/assets/images/assetLibrary/OCEANBASE.png
src/assets/images/assetLibrary/OCEANBASE.png
src/assets/images/assetLibrary/OCEANBASE.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/assetLibrary/ORACLE.png

7.57 KB | W: | H:

src/assets/images/assetLibrary/ORACLE.png

1.01 KB | W: | H:

src/assets/images/assetLibrary/ORACLE.png
src/assets/images/assetLibrary/ORACLE.png
src/assets/images/assetLibrary/ORACLE.png
src/assets/images/assetLibrary/ORACLE.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/assetLibrary/POSTGRESQL.png

13.9 KB | W: | H:

src/assets/images/assetLibrary/POSTGRESQL.png

1.88 KB | W: | H:

src/assets/images/assetLibrary/POSTGRESQL.png
src/assets/images/assetLibrary/POSTGRESQL.png
src/assets/images/assetLibrary/POSTGRESQL.png
src/assets/images/assetLibrary/POSTGRESQL.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/assetLibrary/apache1.png

7.33 KB | W: | H:

src/assets/images/assetLibrary/apache1.png

3.86 KB | W: | H:

src/assets/images/assetLibrary/apache1.png
src/assets/images/assetLibrary/apache1.png
src/assets/images/assetLibrary/apache1.png
src/assets/images/assetLibrary/apache1.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/assetLibrary/cloudera1.png

3.61 KB | W: | H:

src/assets/images/assetLibrary/cloudera1.png

1.12 KB | W: | H:

src/assets/images/assetLibrary/cloudera1.png
src/assets/images/assetLibrary/cloudera1.png
src/assets/images/assetLibrary/cloudera1.png
src/assets/images/assetLibrary/cloudera1.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -21,6 +21,8 @@ import cloudera2 from './cloudera2.png' ...@@ -21,6 +21,8 @@ import cloudera2 from './cloudera2.png'
import star1 from './star1.png' import star1 from './star1.png'
import star2 from './star2.png' import star2 from './star2.png'
import HIVE from './HIVE.png' import HIVE from './HIVE.png'
import pageTitle from './pageTitle.png'
import arrow from './arrow.png'
export default { export default {
...@@ -46,5 +48,7 @@ export default { ...@@ -46,5 +48,7 @@ export default {
cloudera2, cloudera2,
star1, star1,
star2, star2,
HIVE HIVE,
pageTitle,
arrow
} }
\ No newline at end of file
src/assets/images/assetLibrary/star1.png

4.91 KB | W: | H:

src/assets/images/assetLibrary/star1.png

1.66 KB | W: | H:

src/assets/images/assetLibrary/star1.png
src/assets/images/assetLibrary/star1.png
src/assets/images/assetLibrary/star1.png
src/assets/images/assetLibrary/star1.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
:key="item.value" :key="item.value"
:index="index" :index="index"
:class="item.elTagClass" :class="item.elTagClass"
>{{ item.label + " " }}</span> >{{ item[labelName] + " " }}</span>
<el-tag <el-tag
v-else v-else
:disable-transitions="true" :disable-transitions="true"
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
:index="index" :index="index"
:type="item.elTagType" :type="item.elTagType"
:class="item.elTagClass" :class="item.elTagClass"
>{{ item.label + " " }}</el-tag> >{{ item[labelName] + " " }}</el-tag>
</template> </template>
</template> </template>
<template v-if="unmatch && showValue"> <template v-if="unmatch && showValue">
...@@ -44,9 +44,15 @@ const props = defineProps({ ...@@ -44,9 +44,15 @@ const props = defineProps({
separator: { separator: {
type: String, type: String,
default: ",", default: ",",
},
labelName: {
type: String,
default: "label",
} }
}) })
console.log(props.options)
const values = computed(() => { const values = computed(() => {
if (props.value === null || typeof props.value === 'undefined' || props.value === '') return [] if (props.value === null || typeof props.value === 'undefined' || props.value === '') return []
return Array.isArray(props.value) ? props.value.map(item => '' + item) : String(props.value).split(props.separator) return Array.isArray(props.value) ? props.value.map(item => '' + item) : String(props.value).split(props.separator)
......
<script setup lang="ts" name="QueryForm"> <script setup lang="ts" name="QueryForm">
import { ref, computed,onMounted } from 'vue' import { ref, computed,onMounted } from 'vue'
import type { FormInstance } from 'element-plus' const emit = defineEmits(['update:modelValue', 'query', 'reset', 'add'])
import PageWrapperSearch from '@/components/Search/PageWrapperSearch.vue'
import { useDict } from '@/utils/dict'
import useAppStore from '@/store/modules/app'
const appStore = useAppStore()
const emit = defineEmits(['update:modelValue', 'query', 'reset'])
const dataTypeList = ref([])
const props = defineProps<{ const props = defineProps<{
modelValue: any modelValue: any
}>() }>()
...@@ -22,13 +15,21 @@ const queryForm = computed({ ...@@ -22,13 +15,21 @@ const queryForm = computed({
} }
}) })
const ElFormRef = ref()
// 新增
function handleAdd() {
emit('add')
}
// 搜索 // 搜索
function onSearch() { function onSearch() {
emit('query') emit('query')
} }
// 重置 // 重置
function onReset(formRef: FormInstance) { function onReset() {
const formRef = ElFormRef.value
emit('reset', formRef) emit('reset', formRef)
} }
...@@ -39,27 +40,30 @@ onMounted(() => { ...@@ -39,27 +40,30 @@ onMounted(() => {
</script> </script>
<template> <template>
<page-wrapper-search <el-form ref="ElFormRef" :model="queryForm" label-width="90px">
:model="queryForm" <el-row :gutter="9">
@search="onSearch" <el-col :span="8">
@reset="onReset"
label-width='100'>
<el-form-item label="数据源名称" prop="sysname"> <el-form-item label="数据源名称" prop="sysname">
<el-input v-model="queryForm.sysname" placeholder="请输入客户名称" clearable /> <el-input v-model="queryForm.sysname" placeholder="请输入客户名称" clearable />
</el-form-item> </el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="IP" prop="ip"> <el-form-item label="IP" prop="ip">
<el-input v-model="queryForm.ip" placeholder="请输入客户名称" clearable /> <el-input v-model="queryForm.ip" placeholder="请输入客户名称" clearable />
</el-form-item> </el-form-item>
<el-form-item label="数据源类型" prop="dbtype"> </el-col>
<el-select v-model="queryForm.dbtype" placeholder="请选择"> <el-col :span="8">
<el-option <el-button icon="Refresh" @click="onReset">重置</el-button>
v-for="item in appStore.DATABASE_TYPE" <el-button type="primary" icon="Search" @click="onSearch">搜索</el-button>
:key="item" <el-button type="primary" icon="Plus" style="background: rgba(0, 189, 207, 1);border-color: rgba(0, 189, 207, 1);" @click="handleAdd">新增</el-button>
:label="item" </el-col>
:value="item" </el-row>
> </el-form>
</el-option> <!-- <page-wrapper-search
</el-select> :model="queryForm"
</el-form-item> @search="onSearch"
</page-wrapper-search> @reset="onReset"
label-width='90'>
</page-wrapper-search> -->
</template> </template>
<script setup name="AssetLibrary"> <script setup lang="ts" name="AddEdit">
import { ref, toRefs, reactive, getCurrentInstance } from 'vue' import { ref, toRefs, reactive, getCurrentInstance, computed } from "vue";
import FormGroup from './modules/formGroup.vue' import FormGroup from "./modules/formGroup.vue";
import img from '@/assets/images/assetLibrary/index.js' import img from "@/assets/images/assetLibrary/index.js";
const emit = defineEmits(['page']) const emit = defineEmits(["update:visibl", "confirm"]);
const step = ref('select') // select edit const props = defineProps<{
visible: any;
}>();
const dialogVisible = computed({
get: () => props.visible,
set: (value) => emit("update:visible", value),
});
const step = ref("edit"); // select edit
const selectData = reactive({ const selectData = reactive({
name: '', name: "",
type: '' type: "",
}) });
const listData = ref([ const listData = ref([
{ {
title: '关系型数据库', name: "MYSQL",
type: 1,
list: [
{
name: 'MYSQL',
icon: img.MYSQL,
}, },
{ {
name: 'ORACLE', name: "ORACLE",
icon: img.ORACLE,
}, },
{ {
name: 'POSTGRESQL', name: "POSTGRESQL",
icon: img.POSTGRESQL,
}, },
// { // {
// name: 'DB2', // name: "DB2",
// icon: img.DB2,
// }, // },
{ {
name: 'MSSQLSERVER', name: "MSSQLSERVER",
icon: img.MSSQLSERVER,
}, },
// { // {
// name: 'MARIADB', // name: "MARIADB",
// icon: img.MARIADB,
// }, // },
// { // {
// name: 'GBASE8S', // name: "GBASE8S",
// icon: img.GBASE8S,
// }, // },
{ {
name: 'KINGBASE', name: "KINGBASE",
icon: img.KINGBASE,
}, },
{ {
name: 'DM', name: "DM",
icon: img.DM,
}, },
// { // {
// name: 'GREENPLUM', // name: "GREENPLUM",
// icon: img.GREENPLUM,
// }, // },
// { // {
// name: 'GAUSS', // name: "GAUSS",
// icon: img.GAUSS,
// }, // },
// { // {
// name: 'OCEANBASE', // name: "OCEANBASE",
// icon: img.OCEANBASE,
// }, // },
// { // {
// name: 'GAUSSDB', // name: "GAUSSDB",
// icon: img.GAUSSDB, // },
// } // {
] // name: "ES",
}, // },
// { // {
// title: 'NoSQL', // name: "MONGODB",
// type: 2, // },
// {
// name: "KAFKA",
// },
// {
// name: "Apache",
// type: 4,
// list: [ // list: [
// { // {
// name: 'ES', // name: "HIVE",
// icon: img.ES, // },
// ],
// }, // },
// { // {
// name: 'MONGODB', // name: "CLOUDERA",
// icon: img.MONGODB, // type: 4,
// } // list: [
// ] // {
// name: "HIVE",
// },
// ],
// }, // },
// { // {
// title: '消息队列', // name: "星环",
// type: 3, // type: 4,
// list: [ // list: [
// { // {
// name: 'KAFKA', // name: "HIVE_TDH",
// icon: img.KAFKA, // },
// } // ],
// ] // },
// } ]);
])
const hadoopData = reactive({
index: null,
list: [
{
name: 'Apache',
icon1: img.apache1,
icon2: img.apache2,
list: [
{
name: 'HIVE',
icon: img.HIVE,
type: 4,
}
]
},
{
name: 'CLOUDERA',
icon1: img.cloudera1,
icon2: img.cloudera2,
list: [
{
name: 'HIVE',
icon: img.HIVE,
type: 4,
}
]
},
{
name: '星环',
icon1: img.star1,
icon2: img.star2,
list: [
{
name: 'HIVE_TDH',
icon: img.HIVE,
type: 4,
}
]
}
]
})
// hadoop事件
const hadoopClick = (index) => {
hadoopData.index = index
}
// 新增
const editTo = (item,type) => {
selectData.name = item.name
selectData.type = type
step.value = 'edit'
}
// 新增回调 // 新增回调
const modalConfirm = () => { const modalConfirm = () => {
console.log('modalConfirm') console.log("modalConfirm");
emit('page', 'list') dialogVisible.value = false;
} confirm;
emit("confirm");
};
// 关闭弹窗前处理
const handleClose = (done) => {
done();
};
</script> </script>
<template> <template>
<div class="app-container scroller"> <el-dialog title="新增数据源" v-model="dialogVisible" :before-close="handleClose" width="1100">
<PageTitle back @back="emit('page', 'list')"> <div class="addForm" v-if="step === 'edit'">
<template #title> <FormGroup page="add" :title="selectData.name" :type="selectData.type" @cancel="dialogVisible = false"
<span id="badDebt" class="title-icon"> @confirm="modalConfirm" :typeData="listData" />
新增数据源
<PageTour tourType="badDebt" />
</span>
</template>
</PageTitle>
<div class="app-container__body">
<div v-if="step === 'select'">
<div class="listBox" v-for="(item,index) in listData" :key="index">
<div class="title">{{ item.title }}</div>
<div class="img-warpper">
<img class="img" :src="liItem.icon" :alt="liItem.name" @click="editTo(liItem, item.type)" v-for="(liItem, i) in item.list" :key="i">
</div>
</div>
<!-- <div class="title">Hadoop品牌:<span class="data-base-name">{{ hadoopData.index !== null ? hadoopData.list[hadoopData.index].name : '' }}</span></div>
<div style="display: inline-block;">
<div class="hadoop-list-box">
<div class="hadoop-item-box" :class="hadoopData.index === index ? 'hadoop-item-box-active' : ''" v-for="(item,index) in hadoopData.list" :key="index" @click="hadoopClick(index)">
<img :src="item.icon1" alt="">
<img :src="item.icon2" alt="" class="hidden-img">
<div class="name">
<span>{{ item.name }}</span>
<div class="bar"></div>
</div>
</div>
</div>
</div>
<div style="padding-top: 10px;color: #7a8495;">*点击图标切换Hadoop品牌</div>
<div v-if="hadoopData.index !== null" style="color: rgb(102, 102, 102); font-size: 16px; font-weight: bold; padding: 10px 0px;">Hadoop</div>
<div class="img-warpper" v-if="hadoopData.index !== null">
<img class="img" :src="item.icon" :alt="item.name" @click="editTo(item, item.type)" v-for="(item, index) in hadoopData.list[hadoopData.index].list" :key="index">
</div> -->
</div>
<div v-if="step === 'edit'" style="padding: 30px 150px;">
<div style="padding-bottom: 20px;">
<span style="color: rgb(102, 102, 102);">数据源类型:</span>
<span class="source-title">{{ selectData.name }}</span>
</div>
<FormGroup page="add" :title="selectData.name" :type="selectData.type" @cancel="step = 'select'" @confirm="modalConfirm" />
</div>
</div>
</div> </div>
</el-dialog>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.title { .addForm {
color: #21333f; padding: 0 20px;
font-size: 16px; :deep(.el-form-item) {
line-height: 20px; margin-bottom: 20px;
font-weight: 700;
padding: 10px 0 10px 12px;
.data-base-name{
color: #2c9ef7;
font-size: 20px;
font-weight: 400;
}
}
.img-warpper {
background-color: #f3f5fa;
padding: 7.5px;
margin-top: 24px;
margin-bottom: 50px;
margin-left: 12px;
line-height: 1;
.img {
width: 132px;
font-size: 0;
margin: 0 10px 10px 0;
cursor: pointer;
} }
} :deep(.el-form-item__label) {
.hadoop-list-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-pack: distribute;
justify-content: space-around;
background: #f1f3f5;
padding: 10px;
.hadoop-item-box {
padding: 8px;
background: #fff; background: #fff;
cursor: pointer; color: rgba(148, 148, 148, 1);
position: relative;
-webkit-transition: -webkit-box-shadow 0.3s;
transition: -webkit-box-shadow 0.3s;
transition: box-shadow 0.3s;
transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
margin-right: 16px;
img {
font-size: 0;
vertical-align: bottom;
width: 132px;
}
.hidden-img {
position: absolute;
left: 8px;
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.name {
height: 20px;
line-height: 20px;
text-align: center;
margin-top: 8px;
position: relative;
.bar {
position: absolute;
opacity: 0;
background-color: #1f85df;
height: 2px;
width: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
left: 0;
bottom: -4px;
} }
:deep(.el-input__inner),
:deep(.el-select__wrapper) {
height: 34px;
} }
} :deep(.el-form-item__error) {
.hadoop-item-box-active{
-webkit-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
.hidden-img{
opacity: 1;
}
.name{
.bar{
opacity: 1;
width: 132px;
left: 0; left: 0;
top: 100%;
} }
}
}
.hadoop-item-box:hover {
-webkit-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
.hidden-img {
opacity: 1;
}
}
}
.source-title{
font-size: 18px;
font-weight: 700;
color: #1f85df;
} }
</style> </style>
\ No newline at end of file
<script setup lang="ts" name="AddEdit">
import { ref, toRefs, reactive, getCurrentInstance } from 'vue'
import FormGroup from './modules/formGroup.vue'
import img from '@/assets/images/assetLibrary/index.js'
const emit = defineEmits(["update:modelValue", "confirm", "cancel"])
const props = defineProps<{
modelValue: boolean;
}>();
const step = ref('edit') // select edit
const selectData = reactive({
name: '',
type: ''
})
const listData = ref([
{
title: '关系型数据库',
type: 1,
list: [
{
name: 'MYSQL',
icon: img.MYSQL,
},
{
name: 'ORACLE',
icon: img.ORACLE,
},
{
name: 'POSTGRESQL',
icon: img.POSTGRESQL,
},
// {
// name: 'DB2',
// icon: img.DB2,
// },
{
name: 'MSSQLSERVER',
icon: img.MSSQLSERVER,
},
// {
// name: 'MARIADB',
// icon: img.MARIADB,
// },
// {
// name: 'GBASE8S',
// icon: img.GBASE8S,
// },
{
name: 'KINGBASE',
icon: img.KINGBASE,
},
{
name: 'DM',
icon: img.DM,
},
// {
// name: 'GREENPLUM',
// icon: img.GREENPLUM,
// },
// {
// name: 'GAUSS',
// icon: img.GAUSS,
// },
// {
// name: 'OCEANBASE',
// icon: img.OCEANBASE,
// },
// {
// name: 'GAUSSDB',
// icon: img.GAUSSDB,
// }
]
},
// {
// title: 'NoSQL',
// type: 2,
// list: [
// {
// name: 'ES',
// icon: img.ES,
// },
// {
// name: 'MONGODB',
// icon: img.MONGODB,
// }
// ]
// },
// {
// title: '消息队列',
// type: 3,
// list: [
// {
// name: 'KAFKA',
// icon: img.KAFKA,
// }
// ]
// }
])
const hadoopData = reactive({
index: null,
list: [
{
name: 'Apache',
icon1: img.apache1,
icon2: img.apache2,
list: [
{
name: 'HIVE',
icon: img.HIVE,
type: 4,
}
]
},
{
name: 'CLOUDERA',
icon1: img.cloudera1,
icon2: img.cloudera2,
list: [
{
name: 'HIVE',
icon: img.HIVE,
type: 4,
}
]
},
{
name: '星环',
icon1: img.star1,
icon2: img.star2,
list: [
{
name: 'HIVE_TDH',
icon: img.HIVE,
type: 4,
}
]
}
]
})
// hadoop事件
const hadoopClick = (index) => {
hadoopData.index = index
}
// 新增
const editTo = (item,type) => {
// selectData.name = item.name
// selectData.type = type
// step.value = 'edit'
}
// 新增回调
const modalConfirm = () => {
console.log('modalConfirm')
}
</script>
<template>
<el-dialog title="提示" v-model="modelValue" width="1100">
</el-dialog>
<div class="app-container scroller">
<PageTitle back @back="emit('page', 'list')">
<template #title>
<span id="badDebt" class="title-icon">
新增数据源
<PageTour tourType="badDebt" />
</span>
</template>
</PageTitle>
<div class="app-container__body">
<div v-if="step === 'select'">
<div class="listBox" v-for="(item,index) in listData" :key="index">
<div class="title">{{ item.title }}</div>
<div class="img-warpper">
<img class="img" :src="liItem.icon" :alt="liItem.name" @click="editTo(liItem, item.type)" v-for="(liItem, i) in item.list" :key="i">
</div>
</div>
<!-- <div class="title">Hadoop品牌:<span class="data-base-name">{{ hadoopData.index !== null ? hadoopData.list[hadoopData.index].name : '' }}</span></div>
<div style="display: inline-block;">
<div class="hadoop-list-box">
<div class="hadoop-item-box" :class="hadoopData.index === index ? 'hadoop-item-box-active' : ''" v-for="(item,index) in hadoopData.list" :key="index" @click="hadoopClick(index)">
<img :src="item.icon1" alt="">
<img :src="item.icon2" alt="" class="hidden-img">
<div class="name">
<span>{{ item.name }}</span>
<div class="bar"></div>
</div>
</div>
</div>
</div>
<div style="padding-top: 10px;color: #7a8495;">*点击图标切换Hadoop品牌</div>
<div v-if="hadoopData.index !== null" style="color: rgb(102, 102, 102); font-size: 16px; font-weight: bold; padding: 10px 0px;">Hadoop</div>
<div class="img-warpper" v-if="hadoopData.index !== null">
<img class="img" :src="item.icon" :alt="item.name" @click="editTo(item, item.type)" v-for="(item, index) in hadoopData.list[hadoopData.index].list" :key="index">
</div> -->
</div>
<div v-if="step === 'edit'" style="padding: 30px 150px;">
<div style="padding-bottom: 20px;">
<span style="color: rgb(102, 102, 102);">数据源类型:</span>
<span class="source-title">{{ selectData.name }}</span>
</div>
<FormGroup page="add" :title="selectData.name" :type="selectData.type" @cancel="step = 'select'" @confirm="modalConfirm" />
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.title {
color: #21333f;
font-size: 16px;
line-height: 20px;
font-weight: 700;
padding: 10px 0 10px 12px;
.data-base-name{
color: #2c9ef7;
font-size: 20px;
font-weight: 400;
}
}
.img-warpper {
background-color: #f3f5fa;
padding: 7.5px;
margin-top: 24px;
margin-bottom: 50px;
margin-left: 12px;
line-height: 1;
.img {
width: 132px;
font-size: 0;
margin: 0 10px 10px 0;
cursor: pointer;
}
}
.hadoop-list-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-pack: distribute;
justify-content: space-around;
background: #f1f3f5;
padding: 10px;
.hadoop-item-box {
padding: 8px;
background: #fff;
cursor: pointer;
position: relative;
-webkit-transition: -webkit-box-shadow 0.3s;
transition: -webkit-box-shadow 0.3s;
transition: box-shadow 0.3s;
transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
margin-right: 16px;
img {
font-size: 0;
vertical-align: bottom;
width: 132px;
}
.hidden-img {
position: absolute;
left: 8px;
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.name {
height: 20px;
line-height: 20px;
text-align: center;
margin-top: 8px;
position: relative;
.bar {
position: absolute;
opacity: 0;
background-color: #1f85df;
height: 2px;
width: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
left: 0;
bottom: -4px;
}
}
}
.hadoop-item-box-active{
-webkit-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
.hidden-img{
opacity: 1;
}
.name{
.bar{
opacity: 1;
width: 132px;
left: 0;
}
}
}
.hadoop-item-box:hover {
-webkit-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
.hidden-img {
opacity: 1;
}
}
}
.source-title{
font-size: 18px;
font-weight: 700;
color: #1f85df;
}
</style>
\ No newline at end of file
<script setup lang="ts" name="AssetLibrary"> <script setup lang="ts" name="AssetLibrary">
import { ref, getCurrentInstance, nextTick, type ComponentInternalInstance } from 'vue' import { ref, getCurrentInstance, nextTick, type ComponentInternalInstance } from 'vue'
import list from './list.vue' import list from './list.vue'
import add from './addEdit.vue'
const widget = { const widget = {
list, list
add
} }
const page = ref('list') const page = ref('list')
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论