Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev
This commit is contained in:
commit
c6c9d06b85
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
|
|
@ -98,7 +98,7 @@ export default {
|
|||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:"#ebebeb"
|
||||
color:"#f5f5f5"
|
||||
}
|
||||
},
|
||||
axisLabel: {//y轴文字的配置
|
||||
|
|
@ -134,10 +134,24 @@ export default {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
data: [5, 5, 5, 5, 5, 5],
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
stack: '1',
|
||||
itemStyle: {
|
||||
barBorderRadius: [20,20,20,20],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(178, 189, 255,0)' },
|
||||
// { offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: 'rgba(82, 106, 255,0)' }
|
||||
])
|
||||
},
|
||||
},
|
||||
{
|
||||
data: [60, 90, 50, 80],
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
|
||||
stack: '1',
|
||||
itemStyle: {
|
||||
barBorderRadius: [20,20,20,20],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
|
|
@ -286,10 +300,24 @@ export default {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
data: [5, 5, 5, 5],
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
stack: '1',
|
||||
itemStyle: {
|
||||
barBorderRadius: [20,20,20,20],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(178, 189, 255,0)' },
|
||||
// { offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: 'rgba(82, 106, 255,0)' }
|
||||
])
|
||||
},
|
||||
},
|
||||
{
|
||||
data: [60, 90, 50, 80],
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
|
||||
stack: '1',
|
||||
itemStyle: {
|
||||
barBorderRadius: [20,20,20,20],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
|
|
@ -317,8 +345,8 @@ export default {
|
|||
type: 'category',
|
||||
data: ['组件名称1', '组件名称2', '组件名称3', '组件名称4', '组件名称5', '组件名称6'],
|
||||
color:['#f5f5f5'],
|
||||
axisTick:{
|
||||
show:false,//不显示坐标轴刻度线
|
||||
axisTick: { // 坐标轴 刻度
|
||||
show: false, // 是否显示
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
|
|
@ -362,10 +390,24 @@ export default {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
data: [5, 5, 5, 5, 5, 5],
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
stack: '1',
|
||||
itemStyle: {
|
||||
barBorderRadius: [20,20,20,20],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(178, 189, 255,0)' },
|
||||
// { offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: 'rgba(82, 106, 255,0)' }
|
||||
])
|
||||
},
|
||||
},
|
||||
{
|
||||
data: [60, 90, 50, 80, 50, 80],
|
||||
type: 'bar',
|
||||
barWidth: 14,
|
||||
|
||||
stack: '1',
|
||||
itemStyle: {
|
||||
barBorderRadius: [20,20,20,20],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
|
|
@ -374,7 +416,7 @@ export default {
|
|||
{ offset: 1, color: 'rgba(82, 106, 255,0.8)' }
|
||||
])
|
||||
},
|
||||
}
|
||||
},
|
||||
]
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -358,6 +358,7 @@ export default {
|
|||
padding-left: 20px;
|
||||
margin-top: 20px;
|
||||
margin-right: 20px;
|
||||
/* background-image:url("../../../assets/img/排行榜背景图.png"); */
|
||||
}
|
||||
.container-body5{
|
||||
width:640px;
|
||||
|
|
|
|||
|
|
@ -2,10 +2,13 @@
|
|||
<!-- 青岛 -->
|
||||
<div class="details-pageconetent" v-if="whoShow1 && whoShow1.itShowQingDao">
|
||||
<home-header></home-header>
|
||||
<div class="details-pageconetent-left">
|
||||
<div class="details-pageconetent-left" v-if="Cardsname != '基础设施'">
|
||||
<detailsPageconetentTree />
|
||||
</div>
|
||||
<div class="top" v-if="Cardsname != '知识库'">
|
||||
<div class="details-pageconetent-left" v-else>
|
||||
<detailsPageInfrastructureTree />
|
||||
</div>
|
||||
<div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
|
||||
<div class="top-title">
|
||||
<div
|
||||
v-for="item in titleName"
|
||||
|
|
@ -143,6 +146,28 @@
|
|||
<a-empty />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" v-else-if="Cardsname === '基础设施'">
|
||||
<div class="top-title">
|
||||
<div
|
||||
v-for="item in titleName"
|
||||
:key="item.name"
|
||||
:class="item.name === Cardsname ? 'sel' : ''"
|
||||
@click="changeCards(item.name)"
|
||||
>
|
||||
<span
|
||||
class="photo"
|
||||
:style="{
|
||||
backgroundImage: `url(${item.photo}) `,
|
||||
backgroundSize: 'cover',
|
||||
}"
|
||||
></span>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-content-father">
|
||||
<infrastructurePage />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" v-else>
|
||||
<div class="top-title">
|
||||
<div
|
||||
|
|
@ -656,6 +681,10 @@
|
|||
// import VideoSurveillance from '@/views/home/videoSurveillance'
|
||||
// 数据资源引用
|
||||
import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
|
||||
// 基础设施引用
|
||||
import infrastructurePage from '@/views/home/infrastructurePage.vue'
|
||||
import detailsPageInfrastructureTree from '@/views/home/detailsPageInfrastructureTree.vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
// const store = useStore()
|
||||
|
|
@ -1291,6 +1320,8 @@
|
|||
// VideoCameraOutlined,
|
||||
// VideoSurveillance,
|
||||
DetailsPageResource,
|
||||
infrastructurePage,
|
||||
detailsPageInfrastructureTree,
|
||||
},
|
||||
beforeUnmount() {
|
||||
mybus.off('selectCardsitem')
|
||||
|
|
|
|||
|
|
@ -1,5 +1,422 @@
|
|||
<!-- 基础设施 -->
|
||||
<template>
|
||||
<div>1234567890</div>
|
||||
<div class="infrastructrueBox">
|
||||
<!-- 选项卡 -->
|
||||
<div class="infrastructrue-tab">
|
||||
<div v-for="(item, index) in tabList" :key="index" class="tabBox">
|
||||
<b class="leftType">{{ item.title }}</b>
|
||||
<span
|
||||
v-for="itemContent in item.content"
|
||||
:key="itemContent"
|
||||
@click="tabClick(index, itemContent)"
|
||||
:class="
|
||||
clickList[index].content.indexOf(itemContent) != -1 ? 'down' : ''
|
||||
"
|
||||
>
|
||||
{{ itemContent }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 功能行 -->
|
||||
<div class="infrastructrue-content">
|
||||
<!-- 表格数据统计 -->
|
||||
<div class="contentNum">
|
||||
<p>
|
||||
备选
|
||||
<span>{{ dataSource.length }}</span>
|
||||
个
|
||||
</p>
|
||||
<i class="boundary"></i>
|
||||
<p>
|
||||
已选
|
||||
<span>22</span>
|
||||
个
|
||||
</p>
|
||||
</div>
|
||||
<!-- 右侧 -->
|
||||
<div class="contentRight">
|
||||
<!-- 搜索@search="onSearch" -->
|
||||
<div class="searchInput">
|
||||
<a-input-search
|
||||
v-model:value="name"
|
||||
placeholder="请输入关键词"
|
||||
enter-button="搜索"
|
||||
size="large"
|
||||
@change="onSearch"
|
||||
/>
|
||||
<a-button
|
||||
type="primary"
|
||||
style="width: 0.8rem; height: 0.36rem; margin-left: 0.7rem"
|
||||
@click="clean"
|
||||
>
|
||||
重置
|
||||
</a-button>
|
||||
</div>
|
||||
<i class="boundary"></i>
|
||||
<!-- 添加至购物车 -->
|
||||
<a-button type="primary" @click="addShopCar" class="buttonAdd">
|
||||
添加至购物车
|
||||
</a-button>
|
||||
<!-- 一键申请 -->
|
||||
<a-button type="primary" @click="apply" class="buttonAdd">
|
||||
一键申请
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<div class="infrastructrue-table">
|
||||
<a-table
|
||||
class="ant-table-striped"
|
||||
:dataSource="dataSource"
|
||||
:columns="columns"
|
||||
:scroll="{ y: 600 }"
|
||||
:rowClassName="
|
||||
(record, index) => (index % 2 === 1 ? 'table-striped' : null)
|
||||
"
|
||||
:pagination="pagination"
|
||||
@change="handleTableChange"
|
||||
:row-selection="{
|
||||
selectedRowKeys: selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script></script>
|
||||
<style lang="less" scoped></style>
|
||||
<script setup>
|
||||
import { ref, onCreated } from 'vue'
|
||||
const tabList = ref([
|
||||
{
|
||||
title: '设施类型',
|
||||
content: ['视频资源', '云资源', '感知资源'],
|
||||
},
|
||||
{
|
||||
title: '视频细分',
|
||||
content: [
|
||||
'云主机',
|
||||
'算力主机',
|
||||
'对象存储',
|
||||
'堡垒机',
|
||||
'防火墙',
|
||||
'网闸',
|
||||
'负载均衡',
|
||||
'公网IP',
|
||||
],
|
||||
},
|
||||
]) //初始化数据
|
||||
const init = () => {
|
||||
tabList.value.map((item) => {
|
||||
let params = {
|
||||
title: item.title,
|
||||
content: [],
|
||||
}
|
||||
clickList.value.push(params)
|
||||
})
|
||||
}
|
||||
let clickList = ref([]) //存储点击的tab
|
||||
init()
|
||||
//tab切换点击事件
|
||||
const tabClick = (indexFather, name) => {
|
||||
if (clickList.value[indexFather].content.indexOf(name) != -1) {
|
||||
// debugger
|
||||
clickList.value[indexFather].content.splice(
|
||||
clickList.value[indexFather].content.indexOf(name),
|
||||
1
|
||||
)
|
||||
} else {
|
||||
// debugger
|
||||
clickList.value[indexFather].content[0] = name
|
||||
}
|
||||
console.log('clickList.value', clickList.value)
|
||||
// debugger
|
||||
}
|
||||
const name = ref('')
|
||||
// 搜索框
|
||||
const onSearch = (name) => {
|
||||
name.value = name
|
||||
console.log(name.value)
|
||||
}
|
||||
// 重置
|
||||
const clean = () => {
|
||||
name.value = ''
|
||||
}
|
||||
// onCreated(() => {
|
||||
|
||||
// })
|
||||
// onMounted(() => {
|
||||
|
||||
// })
|
||||
// 一键申请
|
||||
const apply = () => {
|
||||
console.log('一键申请')
|
||||
}
|
||||
// 添加至购物车
|
||||
const addShopCar = () => {
|
||||
console.log('添加至购物车')
|
||||
}
|
||||
// 表格
|
||||
const dataSource = ref([
|
||||
{
|
||||
key: '1',
|
||||
name: '沈腾',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '沈腾',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '沈腾',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
name: '沈腾',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
name: '沈腾',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '6',
|
||||
name: '沈腾',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '7',
|
||||
name: '沈腾',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '8',
|
||||
name: '沈腾',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '9',
|
||||
name: '沈腾',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '10',
|
||||
name: '沈腾',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '11',
|
||||
name: '沈腾',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '12',
|
||||
name: '沈腾',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '13',
|
||||
name: '沈腾',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '14',
|
||||
name: '沈腾',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '15',
|
||||
name: '沈腾',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '16',
|
||||
name: '沈腾',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
])
|
||||
const columns = ref([
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
},
|
||||
{
|
||||
title: '住址',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
},
|
||||
])
|
||||
// const selectedRowKeys =
|
||||
const pagination = ref({
|
||||
total: 0,
|
||||
pageSize: 10, //每页中显示10条数据
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['5', '15', '30', '45'], //每页中显示的数据
|
||||
})
|
||||
const queryParam = ref({
|
||||
page: 1, //第几页
|
||||
size: 10, //每页中显示数据的条数
|
||||
hosName: '',
|
||||
hosCode: '',
|
||||
province: '',
|
||||
city: '',
|
||||
})
|
||||
const handleTableChange = (val) => {
|
||||
pagination.value.current = val.current
|
||||
pagination.value.pageSize = val.pageSize
|
||||
this.queryParam.page = val.current
|
||||
this.queryParam.size = val.pageSize
|
||||
// this.getTableList()
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.infrastructrueBox {
|
||||
width: 10.87rem;
|
||||
padding: 0.2rem;
|
||||
background: #f3f5f9;
|
||||
.infrastructrue-tab {
|
||||
background: #ffffff;
|
||||
padding: 0.2rem;
|
||||
border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
|
||||
span {
|
||||
display: inline-block;
|
||||
height: 0.24rem;
|
||||
line-height: 0.24rem;
|
||||
border: 0.01rem solid #cccccc;
|
||||
border-radius: 0.12rem;
|
||||
margin-left: 0.1rem;
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
padding: 0 0.08rem;
|
||||
}
|
||||
.leftType {
|
||||
margin: 0.1rem 0;
|
||||
}
|
||||
.down {
|
||||
border: 0.01rem solid #0087ff;
|
||||
color: #0087ff;
|
||||
}
|
||||
.tabBox {
|
||||
margin-bottom: 0.16rem;
|
||||
}
|
||||
.tabBox:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.infrastructrue-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.14rem 0.2rem 0.1rem;
|
||||
background: #ffffff;
|
||||
.contentNum {
|
||||
position: relative;
|
||||
display: flex;
|
||||
p {
|
||||
color: #666666;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
span {
|
||||
color: #0087ff;
|
||||
font-size: 0.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
p:first-of-type {
|
||||
padding-right: 0.16rem;
|
||||
margin-right: 0.16rem;
|
||||
}
|
||||
.boundary {
|
||||
position: absolute;
|
||||
left: 0.9rem;
|
||||
top: 0.07rem;
|
||||
display: block;
|
||||
width: 0.02rem;
|
||||
border-radius: 0.01rem;
|
||||
height: 0.2rem;
|
||||
background: rgba(150, 144, 144, 0.3);
|
||||
}
|
||||
}
|
||||
.contentRight {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.boundary {
|
||||
position: absolute;
|
||||
left: 3.74rem;
|
||||
top: 0.07rem;
|
||||
display: block;
|
||||
width: 0.02rem;
|
||||
border-radius: 0.01rem;
|
||||
height: 0.2rem;
|
||||
background: rgba(150, 144, 144, 0.3);
|
||||
}
|
||||
.searchInput {
|
||||
display: flex;
|
||||
margin-right: 0.2rem;
|
||||
.ant-input-search {
|
||||
max-width: 4rem;
|
||||
}
|
||||
:deep(.ant-input) {
|
||||
width: 2rem;
|
||||
height: 0.36rem;
|
||||
font-size: 0.14rem;
|
||||
color: #b2b2b2;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
:deep(.ant-input-group-addon) {
|
||||
display: inline-block;
|
||||
margin-left: 0.1rem;
|
||||
.ant-input-search-button {
|
||||
width: 0.8rem;
|
||||
height: 0.36rem;
|
||||
background: #0558e1;
|
||||
border-radius: 0.04rem;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
}
|
||||
:deep(.ant-btn) {
|
||||
background: #0558e1;
|
||||
border-radius: 0.04rem;
|
||||
}
|
||||
}
|
||||
.buttonAdd {
|
||||
background: #0558e1;
|
||||
border-radius: 0.04rem;
|
||||
height: 0.36rem;
|
||||
border-color: #0558e1;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.infrastructrue-table {
|
||||
.ant-table-striped :deep(.table-striped) td {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue