add: 算法对比
This commit is contained in:
parent
272c38a78f
commit
96f2b8b1f3
|
|
@ -0,0 +1,670 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<home-header></home-header>
|
||||||
|
<div class="box-container">
|
||||||
|
<div class="nav-box">能力集市 / 算法对比</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-item" v-for="(data, i) in tableData" :key="i"
|
||||||
|
:class="activeNameIndex == i ? 'active' : ''" @click="changeTab(i, data)">
|
||||||
|
{{ data.title }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="top no-border-right">
|
||||||
|
<div class="td-name">
|
||||||
|
{{ `共选取${getLength(detailArray)}个算法` }}
|
||||||
|
</div>
|
||||||
|
<div class="td" v-for="(item, k) in detailArray" :key="k">
|
||||||
|
<span v-if="item">{{ item.name || '--' }}</span>
|
||||||
|
<svg v-if="item" t="1655780098058" @click="deleteList(k)" class="icon-delete"
|
||||||
|
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3248"
|
||||||
|
width="20" height="20">
|
||||||
|
<path
|
||||||
|
d="M966.128 181.12H840.96c-0.168 0-0.32-0.096-0.488-0.096-0.16 0-0.312 0.096-0.48 0.096H184.064c-0.176 0-0.32-0.096-0.48-0.096-0.16 0-0.304 0.096-0.48 0.096H57.872a32.6 32.6 0 1 0 0 65.208h93.104v651.928c0 69.32 56.392 125.744 125.712 125.744h470.688c69.32 0 125.712-56.424 125.712-125.744V246.328h93.04a32.6 32.6 0 1 0 0-65.208z m-158.256 717.136c0 33.376-27.136 60.528-60.504 60.528H276.688c-33.352 0-60.496-27.16-60.496-60.528V246.328h591.68v651.928z"
|
||||||
|
fill="#838384" p-id="3249"></path>
|
||||||
|
<path
|
||||||
|
d="M346.488 814.744a32.608 32.608 0 0 0 32.608-32.608V422.888a32.6 32.6 0 0 0-65.216 0v359.24a32.6 32.6 0 0 0 32.608 32.616zM512 814.744a32.6 32.6 0 0 0 32.608-32.608V422.888a32.6 32.6 0 0 0-65.216 0v359.24A32.6 32.6 0 0 0 512 814.744zM677.544 814.744a32.584 32.584 0 0 0 32.6-32.608V422.888c0-18.008-14.576-32.6-32.6-32.6s-32.608 14.592-32.608 32.6v359.24a32.592 32.592 0 0 0 32.608 32.616zM318.848 157.6a32.608 32.608 0 0 0 32.608-32.6c0-23.808 64.048-59.792 160.576-59.792 96.512 0 160.544 35.984 160.544 59.792a32.6 32.6 0 0 0 32.608 32.6 32.592 32.592 0 0 0 32.6-32.6C737.792 53.736 640.736 0 512.032 0 383.312 0 286.24 53.736 286.24 125a32.608 32.608 0 0 0 32.608 32.6z"
|
||||||
|
fill="#838384" p-id="3250"></path>
|
||||||
|
</svg>
|
||||||
|
<svg @click="addList" v-if="!item && k === detailArray.filter(v => v).length"
|
||||||
|
t="1655780573478" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" p-id="1373" width="50" height="50">
|
||||||
|
<path
|
||||||
|
d="M960.083 512.001c0 21.998-17.834 39.829-39.832 39.829H103.745c-21.998 0-39.829-17.831-39.829-39.829s17.831-39.829 39.829-39.829h816.506c21.999 0.001 39.832 17.832 39.832 39.829z"
|
||||||
|
fill="#838384" p-id="1374"></path>
|
||||||
|
<path
|
||||||
|
d="M512 63.915c21.995 0 39.829 17.834 39.829 39.835v816.503c0 22.001-17.834 39.832-39.829 39.832-21.998 0-39.832-17.831-39.832-39.832V103.75c0-22.001 17.834-39.835 39.832-39.835z"
|
||||||
|
fill="#838384" p-id="1375"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom" ref="bottomRef">
|
||||||
|
<div class="bottom-item" v-for="(data, i) in tableData" :key="i">
|
||||||
|
<div class="title" :ref="data.title">{{ data.title }}</div>
|
||||||
|
<!-- 算法优势 -->
|
||||||
|
<div class="group-data" v-if="data.groupName">
|
||||||
|
<compare-group-view :dataList="data.list"></compare-group-view>
|
||||||
|
</div>
|
||||||
|
<div class="flex-row-start row-tr" v-else v-for="(rowData, j) in data.list" :key="j"
|
||||||
|
:class="j == data.list.length - 1 ? 'border-bottom' : ''">
|
||||||
|
<div class="td-name">
|
||||||
|
{{ rowData.name }}
|
||||||
|
</div>
|
||||||
|
<div class="flex-row-start">
|
||||||
|
<div class="td" v-for="(item, k) in rowData.infoList" :key="k">
|
||||||
|
{{ item || '--' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- :pagination="pagination" :loading="loading" -->
|
||||||
|
<a-modal class="modal-box" title="请选择" :visible="showAddModal" :onOk='handleOk' :onCancel='handleCancel'>
|
||||||
|
<a-table :columns="columns" :data-source="dataList" style="height:500px;overflow-y:auto"
|
||||||
|
:row-selection="rowSelection" rowKey="id">
|
||||||
|
</a-table>
|
||||||
|
</a-modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import HomeHeader from '@/views/home/components/header'
|
||||||
|
import CompareGroupView from '@/views/home/components/CompareGroupView'
|
||||||
|
import { pageWithAttrs } from '@/api/abilityStatistics'
|
||||||
|
import { detailJson } from './temp'
|
||||||
|
import { defineComponent, ref, onMounted, getCurrentInstance, computed, unref, reactive, nextTick } from 'vue';
|
||||||
|
import { Table } from 'ant-design-vue';
|
||||||
|
import { selectOne } from '@/api/home'
|
||||||
|
import { getType } from '@turf/invariant';
|
||||||
|
|
||||||
|
|
||||||
|
const ctx = getCurrentInstance();
|
||||||
|
// 最大4列
|
||||||
|
const maxColumn = 4;
|
||||||
|
|
||||||
|
const pagination = ref([])
|
||||||
|
const columns = ref([
|
||||||
|
{
|
||||||
|
title: '算法名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '算法类型',
|
||||||
|
dataIndex: 'type',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
// 详情列表
|
||||||
|
const detailArray = ref([
|
||||||
|
'', '', '', ''
|
||||||
|
])
|
||||||
|
|
||||||
|
const dataObj = {
|
||||||
|
'基本信息': [
|
||||||
|
{
|
||||||
|
name: '算法名称',
|
||||||
|
key: 'name'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '算法类别',
|
||||||
|
key: 'type'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '部署位置',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '应用领域'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '共享条件',
|
||||||
|
key: 'shareCondition'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '共享类型',
|
||||||
|
key: 'shareType'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '算法介绍视频'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
"算法优势": [
|
||||||
|
{
|
||||||
|
name: '算法优势名称',
|
||||||
|
key: 'name'
|
||||||
|
}, {
|
||||||
|
name: '算法优势描述',
|
||||||
|
key: 'desc'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const listArray = [
|
||||||
|
{
|
||||||
|
name: '算法名称',
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
value: '人脸识别'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '犯罪嫌疑人追踪'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '算法类别',
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
value: '智能算法'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '图形服务'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '算法优势名称',
|
||||||
|
groupName: '算法优势',
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
value: '人脸识别精准',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '犯罪嫌疑人追踪比较快',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '算法优势描述',
|
||||||
|
groupName: '算法优势',
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
value: '人脸识别精准',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '犯罪嫌疑人追踪比较快',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '是否计费',
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
value: '是',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '否',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const titleObj = {
|
||||||
|
'基本信息': [
|
||||||
|
{
|
||||||
|
text: '算法名称', key: 'name'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '算法类别', key: '算法类别'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '部署位置', key: '部署位置'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '应用领域', key: '应用领域'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '共享条件', key: 'shareCondition'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '共享类型', key: 'shareType'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '算法描述', key: 'description'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '算法介绍视频', key: '算法介绍视频'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'算法优势': [
|
||||||
|
{
|
||||||
|
text: '算法优势名称', key: 'name'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '算法优势描述', key: 'desc'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'应用场景': [
|
||||||
|
{
|
||||||
|
text: '场景名称', key: '场景名称'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '场景描述', key: '场景描述'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'应用案例': [
|
||||||
|
{
|
||||||
|
text: '关联应用', key: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '算法需求背景', key: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '算法应用期望达成效果', key: ''
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'计费标准': [
|
||||||
|
{
|
||||||
|
text: '是否计费', key: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '计费方式', key: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '计费描述', key: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '计费标准', key: ''
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'使用方式': [
|
||||||
|
{
|
||||||
|
text: '服务接口', key: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '接口请求方式', key: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '技术文档', key: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '是否支持试用', key: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '试用描述', key: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '试用地址', key: ''
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'服务商': [
|
||||||
|
{
|
||||||
|
text: '服务商名', key: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '服务商联系人', key: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '服务商联系电话', key: ''
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const arrayStr = [
|
||||||
|
'算法优势', '应用场景', '计费标准信息', '常见问题'
|
||||||
|
]
|
||||||
|
|
||||||
|
const activeNameIndex = ref(0)
|
||||||
|
const showAddModal = ref(false)
|
||||||
|
const dataList = ref([])
|
||||||
|
const selectedRowKeys = ref([]); // Check here to configure the default column
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
onMounted(() => {
|
||||||
|
getDetail()
|
||||||
|
getList().then(res => {
|
||||||
|
Promise.all(selectedRowKeys.value.map(v => getDetail(v))).then(data => {
|
||||||
|
data.map((v, i) => {
|
||||||
|
detailArray.value.splice(i, 1, formatterData(v));
|
||||||
|
})
|
||||||
|
nextTick(() => {
|
||||||
|
getNewData()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
let tableData = ref([])
|
||||||
|
const getNewData = () => {
|
||||||
|
Object.keys(titleObj).map((title, i) => {
|
||||||
|
// 标题
|
||||||
|
let _newObj = {
|
||||||
|
title: title,
|
||||||
|
list: []
|
||||||
|
}
|
||||||
|
if (arrayStr.includes(title)) {
|
||||||
|
_newObj.groupName = title
|
||||||
|
}
|
||||||
|
let list = []
|
||||||
|
titleObj[title].map(v => {
|
||||||
|
let obj = {
|
||||||
|
name: v.text,
|
||||||
|
infoList: getInfoList(v)
|
||||||
|
}
|
||||||
|
list.push(obj)
|
||||||
|
})
|
||||||
|
_newObj.list = list;
|
||||||
|
tableData.value.push(_newObj)
|
||||||
|
})
|
||||||
|
|
||||||
|
nextTick(() => {
|
||||||
|
console.log('tableData----333-------->', tableData);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const getInfoList = (rowItem) => {
|
||||||
|
let arr = []
|
||||||
|
detailArray.value.map(item => {
|
||||||
|
console.log('item------------>', item);
|
||||||
|
let val = undefined;
|
||||||
|
val = item[rowItem.key || rowItem.text]
|
||||||
|
arr.push(val)
|
||||||
|
})
|
||||||
|
return arr;
|
||||||
|
}
|
||||||
|
|
||||||
|
const getArrayLength = (list) => {
|
||||||
|
let _newList = list.filter(v => v) || []
|
||||||
|
return _newList.length
|
||||||
|
}
|
||||||
|
// 获取算法列表
|
||||||
|
const getList = () => {
|
||||||
|
const data = {
|
||||||
|
deptIds: [],
|
||||||
|
districtId: '',
|
||||||
|
infoList: [
|
||||||
|
{ attrType: "组件类型", attrValue: "智能算法" }
|
||||||
|
],
|
||||||
|
name: '',
|
||||||
|
orderField: 'total',
|
||||||
|
orderType: 'DESC',
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 15,
|
||||||
|
type: '组件服务',
|
||||||
|
}
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
pageWithAttrs(data).then((res) => {
|
||||||
|
dataList.value = res.data.data.records || []
|
||||||
|
nextTick(() => {
|
||||||
|
// 默认前两个
|
||||||
|
selectedRowKeys.value.push(dataList.value[0].id)
|
||||||
|
selectedRowKeys.value.push(dataList.value[1].id)
|
||||||
|
})
|
||||||
|
resolve(res)
|
||||||
|
}).catch(err => {
|
||||||
|
reject(err)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 删除
|
||||||
|
const deleteList = (i) => {
|
||||||
|
detailArray.value.splice(i, 1, '')
|
||||||
|
nextTick(() => {
|
||||||
|
console.log('detailArray------------>', detailArray.value);
|
||||||
|
getNewData()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const addList = () => {
|
||||||
|
showAddModal.value = true
|
||||||
|
}
|
||||||
|
const handleOk = () => {
|
||||||
|
if (getArrayLength(selectedRowKeys) > 4) {
|
||||||
|
alert('最多选择四个算法');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
showAddModal.value = false
|
||||||
|
}
|
||||||
|
const handleCancel = () => {
|
||||||
|
showAddModal.value = false
|
||||||
|
console.log('showAddModal------------>', showAddModal);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const rowSelection = computed(() => {
|
||||||
|
return {
|
||||||
|
selectedRowKeys: unref(selectedRowKeys),
|
||||||
|
onChange: changableRowKeys => {
|
||||||
|
console.log('selectedRowKeys changed: ', changableRowKeys);
|
||||||
|
selectedRowKeys.value = changableRowKeys;
|
||||||
|
},
|
||||||
|
hideDefaultSelections: true,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// 切换左侧
|
||||||
|
const changeTab = (n, data) => {
|
||||||
|
activeNameIndex.value = n;
|
||||||
|
// 获取元素距离父元素的距离
|
||||||
|
let realTop = ctx.refs[data.name][0].offsetTop;
|
||||||
|
ctx.refs.bottomRef.scrollTo({
|
||||||
|
'top': realTop - 250,
|
||||||
|
'behavior': 'smooth'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// ['1522550194535735298', '1522550194523152385']
|
||||||
|
const getDetail = (id = '1539125877366808578') => {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
selectOne(id).then((res) => {
|
||||||
|
resolve(res.data.data)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const isJson = (str) => {
|
||||||
|
if (typeof str == 'string') {
|
||||||
|
try {
|
||||||
|
let obj = JSON.parse(str)
|
||||||
|
return true
|
||||||
|
} catch (e) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处扁平化数据
|
||||||
|
const formatterData = (obj) => {
|
||||||
|
let _newObj = {}
|
||||||
|
obj.infoList.map(v => {
|
||||||
|
_newObj[v.attrType] = isJson(v.attrValue) ? JSON.parse(v.attrValue) : v.attrValue;
|
||||||
|
})
|
||||||
|
let _obj = Object.assign({}, obj, _newObj)
|
||||||
|
console.log('_obj-----处扁平化数据------->', _obj);
|
||||||
|
|
||||||
|
return _obj
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const isArrayAction = (name, itemData) => {
|
||||||
|
if (Array.isArray(itemData[name])) {
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const getLength = (array) => {
|
||||||
|
let newArr = array.filter(v => v !== '')
|
||||||
|
return newArr.length
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
// @font-face {
|
||||||
|
// font-family: 'num-typeface';
|
||||||
|
// src: url('~@/assets/newHome/font/num-typeface.otf');
|
||||||
|
// }
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border: 1px solid #bbb;
|
||||||
|
border-bottom: none;
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-bottom {
|
||||||
|
border-bottom: 1px solid #bbb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-border-right {
|
||||||
|
border: 1px solid #bbb;
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-row-start {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-container {
|
||||||
|
width: 1592px;
|
||||||
|
height: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 60px;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-box {
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.left {
|
||||||
|
width: 200px;
|
||||||
|
height: 800px;
|
||||||
|
background: rgba(244, 245, 248, 0.8);
|
||||||
|
|
||||||
|
.left-item {
|
||||||
|
margin: 0 14px;
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #212121;
|
||||||
|
border-bottom: 1px solid #dddee1;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
// color: #FFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: #0058e1;
|
||||||
|
color: #fff;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
width: 1360px;
|
||||||
|
height: 800px;
|
||||||
|
margin-left: 32px;
|
||||||
|
|
||||||
|
.top {
|
||||||
|
width: 100%;
|
||||||
|
height: 130px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
.td-name {
|
||||||
|
height: 130px;
|
||||||
|
line-height: 130px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td {
|
||||||
|
height: 130px;
|
||||||
|
line-height: 130px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.icon-delete {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
width: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
height: 800px;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 20px 0 10px 10px;
|
||||||
|
color: #212121;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td-name {
|
||||||
|
border-right: 1px solid #bbb;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
width: 200px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td {
|
||||||
|
border-right: 1px solid #bbb;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
width: 290px;
|
||||||
|
font-size: 14px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
table-layout: fixed;
|
||||||
|
word-wrap: break-all;
|
||||||
|
word-break: normal;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-tr {
|
||||||
|
border: 1px solid #bbb;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-bottom {
|
||||||
|
border-bottom: 1px solid #bbb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-box {
|
||||||
|
height: 500px;
|
||||||
|
width: 800px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,110 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="group-box" v-for="(data, i) in tableArray" :key="i">
|
||||||
|
<div class="flex-row-start row-tr" v-for="(item, j) in Object.keys(data)" :key="j"
|
||||||
|
:class="j == Object.keys(data).length - 1 ? 'border-bottom' : ''">
|
||||||
|
<div class="td-name">{{ item }}</div>
|
||||||
|
<div class="flex-row-start">
|
||||||
|
<div class="td" v-for="(d, k) in data[item]" :key="k">{{ d || '--' }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { defineComponent, ref, onMounted, getCurrentInstance, computed, unref, reactive, nextTick } from 'vue';
|
||||||
|
|
||||||
|
import { defineProps, defineEmit } from 'vue'
|
||||||
|
const props = defineProps({
|
||||||
|
dataList: Array,
|
||||||
|
})
|
||||||
|
console.log('dataList------------>', props.dataList);
|
||||||
|
|
||||||
|
const tableArray = ref([])
|
||||||
|
props.dataList.push(props.dataList[0])
|
||||||
|
props.dataList.push(props.dataList[1])
|
||||||
|
|
||||||
|
props.dataList.push(props.dataList[0])
|
||||||
|
props.dataList.push(props.dataList[1])
|
||||||
|
|
||||||
|
props.dataList.map((v, i) => {
|
||||||
|
console.log('v, i------------>', v, i);
|
||||||
|
if (i % 2 == 0) {
|
||||||
|
|
||||||
|
// console.log('props.dataList[i + 1]------------>', props.dataList[i + 1]);
|
||||||
|
|
||||||
|
let _keyDesc = props.dataList[i + 1].name;
|
||||||
|
let _keyList = props.dataList[i + 1].infoList;
|
||||||
|
let obj = {
|
||||||
|
[v.name]: v.infoList,
|
||||||
|
[_keyDesc]: _keyList
|
||||||
|
}
|
||||||
|
tableArray.value.push(obj)
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
nextTick(() => {
|
||||||
|
console.log('tableArray---子组件--------->', tableArray);
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.group-box {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border: 1px solid #bbb;
|
||||||
|
border-bottom: none;
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.row-tr {
|
||||||
|
border: 1px solid #bbb;
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-border-right {
|
||||||
|
border: 1px solid #bbb;
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-row-start {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td-name {
|
||||||
|
border-right: 1px solid #bbb;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
width: 200px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.td {
|
||||||
|
border-right: 1px solid #bbb;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
width: 290px;
|
||||||
|
font-size: 14px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
table-layout: fixed;
|
||||||
|
word-wrap: break-all;
|
||||||
|
word-break: normal;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-bottom {
|
||||||
|
border-bottom: 1px solid #bbb;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue